feat(checkbox): add indeterminate state

packages/components/src/components/checkbox/checkbox.css

@@ -59,6 +59,7 @@ scale-checkbox {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  cursor: pointer;
 }
 
 .checkbox .checkbox__control-wrapper {
@@ -67,19 +68,21 @@ scale-checkbox {
   display: flex;
   position: relative;
   align-items: center;
-  margin-right: var(--spacing-x);
 }
 
 .checkbox__label-wrapper {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  cursor: pointer;
+  gap: var(--spacing-x);
 }
 
 .checkbox .checkbox__label {
   color: var(--color-text);
   font-weight: var(--font-weight-label);
   transition: var(--transition-label);
+  cursor: pointer;
 }
 
 .checkbox .checkbox__meta {

packages/components/src/components/checkbox/checkbox.tsx

@@ -73,6 +73,7 @@ export class Checkbox {
               name={this.name}
               id={this.inputId}
               onChange={(e: any) => {
+                if(this.indeterminate) this.indeterminate = false
                 this.checked = e.target.checked;
                 // bubble event through the shadow dom
                 this.scaleChange.emit({ value: this.checked });
@@ -86,14 +87,14 @@ export class Checkbox {
             <div class="checkbox__control-wrapper">
               <span class="checkbox__control"></span>
               {/* Accessibility: rendering the icon *only* when checked, otherwise is always visible in HCM */}
-              {this.checked && (
+              {this.checked && !this.indeterminate && (
                 <scale-icon-action-success
                   class="checkbox__icon"
                   decorative
                 ></scale-icon-action-success>
               )}
               {this.indeterminate && (
-                <scale-icon-action-play class="checkbox__icon"></scale-icon-action-play>
+                <scale-icon-action-indeterminate class="checkbox__icon"></scale-icon-action-indeterminate>
               )}
             </div>
             <span class="checkbox__label">

packages/components/src/components/checkbox/readme.md

@@ -7,18 +7,18 @@
 
 ## Properties
 
-| Property         | Attribute        | Description                    | Type               | Default     |
-| ---------------- | ---------------- | ------------------------------ | ------------------ | ----------- |
-| `checked`        | `checked`        | (optional) Active switch       | `boolean`          | `false`     |
-| `disabled`       | `disabled`       | (optional) Input disabled      | `boolean`          | `undefined` |
-| `helperText`     | `helper-text`    | (optional) Input helper text   | `string`           | `''`        |
-| `indeterminated` | `indeterminated` | (optional) indeterminated      | `boolean`          | `false`     |
-| `inputId`        | `input-id`       | (optional) Input checkbox id   | `string`           | `undefined` |
-| `label`          | `label`          | (optional) Input label         | `string`           | `''`        |
-| `name`           | `name`           | (optional) Input name          | `string`           | `''`        |
-| `status`         | `status`         | (optional) Input status        | `string`           | `''`        |
-| `styles`         | `styles`         | (optional) Injected CSS styles | `string`           | `undefined` |
-| `value`          | `value`          | (optional) Input value         | `number \| string` | `''`        |
+| Property        | Attribute       | Description                    | Type               | Default     |
+| --------------- | --------------- | ------------------------------ | ------------------ | ----------- |
+| `checked`       | `checked`       | (optional) Active switch       | `boolean`          | `false`     |
+| `disabled`      | `disabled`      | (optional) Input disabled      | `boolean`          | `undefined` |
+| `helperText`    | `helper-text`   | (optional) Input helper text   | `string`           | `''`        |
+| `indeterminate` | `indeterminate` | (optional) indeterminate       | `boolean`          | `false`     |
+| `inputId`       | `input-id`      | (optional) Input checkbox id   | `string`           | `undefined` |
+| `label`         | `label`         | (optional) Input label         | `string`           | `''`        |
+| `name`          | `name`          | (optional) Input name          | `string`           | `''`        |
+| `status`        | `status`        | (optional) Input status        | `string`           | `''`        |
+| `styles`        | `styles`        | (optional) Injected CSS styles | `string`           | `undefined` |
+| `value`         | `value`         | (optional) Input value         | `number \| string` | `''`        |
 
 
 ## Events
@@ -32,20 +32,18 @@
 
 ### Used by
 
- - [scale-checkbox-group](../checkbox-group)
  - [scale-data-grid](../data-grid)
 
 ### Depends on
 
 - [scale-icon-action-success](../icons/action-success)
-- [scale-icon-action-play](../icons/action-play)
+- [scale-icon-action-indeterminate](../icons/action-indeterminate)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-checkbox --> scale-icon-action-success
-  scale-checkbox --> scale-icon-action-play
-  scale-checkbox-group --> scale-checkbox
+  scale-checkbox --> scale-icon-action-indeterminate
   scale-data-grid --> scale-checkbox
   style scale-checkbox fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/components/src/components/data-grid/readme.md

@@ -82,6 +82,7 @@ graph TD;
   scale-menu-flyout-item --> scale-icon-action-success
   scale-menu-flyout-item --> scale-icon-navigation-right
   scale-checkbox --> scale-icon-action-success
+  scale-checkbox --> scale-icon-action-indeterminate
   scale-dropdown --> scale-icon-navigation-collapse-down
   scale-tag --> scale-icon-action-close
   style scale-data-grid fill:#f9f,stroke:#333,stroke-width:4px