@ni/nimble-components 35.2.1 → 35.2.2

package/dist/all-components-bundle.min.js

@@ -10399,7 +10399,9 @@ const XF=It`
         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(
             ${Nl} - var(--ni-private-switch-height)
         );
@@ -10437,20 +10439,36 @@ const XF=It`
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        background-color: ${vl};
+        background-color: var(--ni-private-switch-background-color);
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
-        border: calc(${Hl} * 2) solid transparent;
+        border: calc(${Hl}) 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(${Ho}) .switch {
         border-color: ${Sl};
     }
 
+    :host(${Ho}[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 ${Xc} ease-in-out;
@@ -10468,51 +10486,81 @@ const XF=It`
         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: ${Hl} 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(${Hl} * 2) solid ${Sl};
     }
 
+    :host(${Ho}) .checked-indicator {
+        border: calc(${Hl} * 2) solid ${Sl};
+    }
+
     :host([disabled]) .checked-indicator {
-        background-color: var(
-            --ni-private-switch-indicator-background-disabled-color
-        );
+        background-color: transparent;
         border: ${Hl} solid
             var(--ni-private-switch-indicator-border-disabled-color);
     }
 
-    :host(${Ho}) .checked-indicator {
-        border: ${Hl} solid ${Sl};
+    :host([disabled]:hover) .checked-indicator {
+        background-color: transparent;
+        border: ${Hl} 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]${Ho}) .checked-indicator {
+        background-color: transparent;
+        border: ${Hl} 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 ${Xc} ease-in-out;
     }
 
-    :host([disabled]) .checked-indicator-inner {
+    :host([disabled]${Ho}) .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(${Ho}) .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(*) {
@@ -10527,26 +10575,43 @@ const XF=It`
     }
 `.withBehaviors(Hm(Uo,It`
             :host {
+                --ni-private-switch-background-color: ${ol(Fa,.1)};
                 --ni-private-switch-background-disabled-color: ${ol(Fa,.07)};
+                --ni-private-switch-background-selected-color: ${ol(La,.6)};
+                --ni-private-switch-background-selected-rollover-color: ${ol(La,.3)};
                 --ni-private-switch-indicator-background-color: ${Aa};
-                --ni-private-switch-indicator-background-disabled-color: ${ol(Aa,.1)};
-                --ni-private-switch-indicator-border-color: ${Fa};
-                --ni-private-switch-indicator-border-disabled-color: ${ol(Fa,.3)};
+                --ni-private-switch-indicator-background-disabled-color: ${ol(Fa,.15)};
+                --ni-private-switch-indicator-background-active-color: ${ol(La,.3)};
+
+                --ni-private-switch-indicator-border-color: ${ol(Fa,.3)};
+                --ni-private-switch-indicator-border-selected-color: ${La};
+                --ni-private-switch-indicator-border-disabled-color: ${ol(Fa,.15)};
+                
             }
         `),Hm(qo,It`
             :host {
+                --ni-private-switch-background-color: ${ol($a,.1)};
                 --ni-private-switch-background-disabled-color: ${ol($a,.07)};
-                --ni-private-switch-indicator-background-color: ${ol(Fa,.3)};
-                --ni-private-switch-indicator-background-disabled-color: ${ol(Fa,.1)};
-                --ni-private-switch-indicator-border-color: ${Ea};
-                --ni-private-switch-indicator-border-disabled-color: ${ol(Ea,.3)};
+                --ni-private-switch-background-selected-color: ${ol(Ua,.6)};
+                --ni-private-switch-background-selected-rollover-color: ${ol(Ua,.3)};
+                --ni-private-switch-indicator-background-color: ${Ia};
+                --ni-private-switch-indicator-background-disabled-color: ${ol($a,.1)};
+                --ni-private-switch-indicator-background-active-color: ${ol(Ua,.3)};
+                --ni-private-switch-indicator-border-color: ${ol($a,.3)};
+                --ni-private-switch-indicator-border-selected-color: ${Ua};
+                --ni-private-switch-indicator-border-disabled-color: ${ol($a,.15)};
             }
         `),Hm(jo,It`
             :host {
+                --ni-private-switch-background-color: ${ol(Aa,.1)};
                 --ni-private-switch-background-disabled-color: ${ol(Aa,.07)};
-                --ni-private-switch-indicator-background-color: ${ol(Aa,.1)};
+                --ni-private-switch-background-selected-color: ${ol(Aa,.6)};
+                --ni-private-switch-background-selected-rollover-color: ${ol(Aa,.3)};
+                --ni-private-switch-indicator-background-color: ${ol(Aa,.3)};
                 --ni-private-switch-indicator-background-disabled-color: ${ol(Aa,.1)};
-                --ni-private-switch-indicator-border-color: ${Aa};
+                --ni-private-switch-indicator-background-active-color: ${ol(Aa,.3)};
+                --ni-private-switch-indicator-border-color: ${ol(Aa,.3)};
+                --ni-private-switch-indicator-border-selected-color: ${Aa} ;
                 --ni-private-switch-indicator-border-disabled-color: ${ol(Aa,.3)};
             }
         `)),JF=Q`