@ni/ok-components 0.2.5 → 0.2.6

package/dist/all-components-bundle.js

@@ -65439,7 +65439,9 @@ ${nextLine.slice(indentLevel + 2)}`;
         flex-direction: column;
         cursor: pointer;
         --ni-private-switch-height: 24px;
-        --ni-private-switch-indicator-size: 16px;
+        --ni-private-switch-indicator-size: 24px;
+        --ni-private-switch-indicator-inner-size: 18px;
+        --ni-private-switch-indicator-margin: -2px;
         padding-bottom: calc(
             ${controlHeight} - var(--ni-private-switch-height)
         );
@@ -65477,20 +65479,36 @@ ${nextLine.slice(indentLevel + 2)}`;
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        background-color: ${fillHoverColor};
+        background-color: var(--ni-private-switch-background-color);
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
-        border: calc(${borderWidth} * 2) solid transparent;
+        border: calc(${borderWidth}) solid transparent;
     }
 
-    :host([disabled]) .switch {
-        background-color: var(--ni-private-switch-background-disabled-color);
+    :host([aria-checked='true']) .switch {
+        background-color: var(--ni-private-switch-background-selected-color);
+    }
+
+    :host([aria-checked='true']:hover) .switch {
+        background-color: var(--ni-private-switch-background-selected-rollover-color);
     }
 
     :host(${focusVisible}) .switch {
         border-color: ${borderHoverColor};
     }
 
+    :host(${focusVisible}[aria-checked='true']) .switch {
+        background-color: var(--ni-private-switch-background-selected-rollover-color);
+    }
+
+    :host([disabled]) .switch {
+        background-color: var(--ni-private-switch-background-disabled-color);
+    }
+
+    :host([disabled]:hover) .switch {
+        background-color: var(--ni-private-switch-background-disabled-color);
+    }
+
     .checked-indicator-spacer {
         flex-grow: 0;
         transition: flex-grow ${smallDelay} ease-in-out;
@@ -65508,51 +65526,81 @@ ${nextLine.slice(indentLevel + 2)}`;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
-        margin: calc(
-            calc(
-                    var(--ni-private-switch-height) - var(
-                            --ni-private-switch-indicator-size
-                        )
-                ) /
-                2
-        );
+        margin: var(--ni-private-switch-indicator-margin);
         border: ${borderWidth} solid
             var(--ni-private-switch-indicator-border-color);
     }
 
+    :host([aria-checked='true']) .checked-indicator {
+        border-color: var(--ni-private-switch-indicator-border-selected-color);
+    }
+
     :host(:hover) .checked-indicator {
         border: calc(${borderWidth} * 2) solid ${borderHoverColor};
     }
 
+    :host(${focusVisible}) .checked-indicator {
+        border: calc(${borderWidth} * 2) solid ${borderHoverColor};
+    }
+
     :host([disabled]) .checked-indicator {
-        background-color: var(
-            --ni-private-switch-indicator-background-disabled-color
-        );
+        background-color: transparent;
         border: ${borderWidth} solid
             var(--ni-private-switch-indicator-border-disabled-color);
     }
 
-    :host(${focusVisible}) .checked-indicator {
-        border: ${borderWidth} solid ${borderHoverColor};
+    :host([disabled]:hover) .checked-indicator {
+        background-color: transparent;
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-disabled-color);
     }
 
-    .checked-indicator-inner {
-        width: calc(var(--ni-private-switch-indicator-size) / 2);
-        height: calc(var(--ni-private-switch-indicator-size) / 2);
-        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);
-        background-color: var(--ni-private-switch-indicator-border-color);
+    :host([disabled]${focusVisible}) .checked-indicator {
+        background-color: transparent;
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-disabled-color);
+    }
+
+    :host([disabled]:active) .checked-indicator-inner {
+        background-color: var(
+            --ni-private-switch-indicator-border-disabled-color
+        );
         opacity: 0;
-        transition: opacity ${smallDelay} ease-in-out;
     }
 
-    :host([disabled]) .checked-indicator-inner {
+    :host([disabled]${focusVisible}) .checked-indicator-inner {
         background-color: var(
             --ni-private-switch-indicator-border-disabled-color
         );
+        opacity: 0;
+    }
+
+    .checked-indicator-inner {
+        width: var(--ni-private-switch-indicator-inner-size);
+        height: var(--ni-private-switch-indicator-inner-size);
+        border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);
+        opacity: 0;
     }
 
     :host([aria-checked='true']) .checked-indicator-inner {
+        opacity: 0;
+    }
+
+    :host(${focusVisible}) .checked-indicator-inner {
+        opacity: 1;
+        background-color: var(--ni-private-switch-indicator-background-color);
+        border: 1px solid var(--ni-private-switch-indicator-border-selected-color);
+    }
+
+    :host(:active) .checked-indicator-inner {
         opacity: 1;
+        background-color: var(--ni-private-switch-indicator-background-active-color);
+    }
+
+    :host([disabled]) .checked-indicator-inner {
+        background-color: var(
+            --ni-private-switch-indicator-border-disabled-color
+        );
     }
 
     slot[name='checked-message']::slotted(*) {
@@ -65567,26 +65615,43 @@ ${nextLine.slice(indentLevel + 2)}`;
     }
 `.withBehaviors(themeBehavior(Theme.light, css `
             :host {
+                --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
+                --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.6)};
+                --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.3)};
                 --ni-private-switch-indicator-background-color: ${White};
-                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
-                --ni-private-switch-indicator-border-color: ${Black91};
-                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.15)};
+                --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.3)};
+
+                --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(Black91, 0.3)};
+                --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.15)};
+                
             }
         `), themeBehavior(Theme.dark, css `
             :host {
+                --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
-                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
-                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.1)};
-                --ni-private-switch-indicator-border-color: ${Black7};
-                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
+                --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(PowerGreen, 0.6)};
+                --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(PowerGreen, 0.3)};
+                --ni-private-switch-indicator-background-color: ${Black75};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.1)};
+                --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(PowerGreen, 0.3)};
+                --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
+                --ni-private-switch-indicator-border-selected-color: ${PowerGreen};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black15, 0.15)};
             }
         `), themeBehavior(Theme.color, css `
             :host {
+                --ni-private-switch-background-color: ${hexToRgbaCssColor(White, 0.1)};
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
-                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(White, 0.6)};
+                --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.3)};
                 --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
-                --ni-private-switch-indicator-border-color: ${White};
+                --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(White, 0.3)};
+                --ni-private-switch-indicator-border-selected-color: ${White} ;
                 --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(White, 0.3)};
             }
         `));