npm - @ni/nimble-components - Versions diffs - 35.12.3 → 35.12.4 - Mend

@ni/nimble-components 35.12.3 → 35.12.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/all-components-bundle.js +6 -3
package/dist/all-components-bundle.js.map +1 -1
package/dist/all-components-bundle.min.js +3 -3
package/dist/all-components-bundle.min.js.map +1 -1
package/dist/custom-elements.json +83 -83
package/dist/custom-elements.md +24 -24
package/dist/esm/switch/styles.js +7 -4
package/dist/esm/switch/styles.js.map +1 -1
package/package.json +1 -1

package/dist/custom-elements.json CHANGED Viewed

@@ -392,6 +392,89 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor-tab/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A nimble-styled link tab",
+          "name": "AnchorTab",
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
+            },
+            {
+              "kind": "field",
+              "name": "ariaSelected",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'false'",
+              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string"
+              },
+              "default": "'false'",
+              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
+              "fieldName": "ariaSelected"
+            }
+          ],
+          "superclass": {
+            "name": "AnchorBase",
+            "module": "/src/anchor-base"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "anchorTabTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'nimble-anchor-tab'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AnchorTab",
+          "declaration": {
+            "name": "AnchorTab",
+            "module": "src/anchor-tab/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "anchorTabTag",
+          "declaration": {
+            "name": "anchorTabTag",
+            "module": "src/anchor-tab/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/anchor-step/index.ts",
@@ -576,89 +659,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchor-tab/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A nimble-styled link tab",
-          "name": "AnchorTab",
-          "members": [
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
-            },
-            {
-              "kind": "field",
-              "name": "ariaSelected",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "'false'",
-              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "aria-selected",
-              "type": {
-                "text": "string"
-              },
-              "default": "'false'",
-              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
-              "fieldName": "ariaSelected"
-            }
-          ],
-          "superclass": {
-            "name": "AnchorBase",
-            "module": "/src/anchor-base"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "anchorTabTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'nimble-anchor-tab'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AnchorTab",
-          "declaration": {
-            "name": "AnchorTab",
-            "module": "src/anchor-tab/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "anchorTabTag",
-          "declaration": {
-            "name": "anchorTabTag",
-            "module": "src/anchor-tab/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/anchor-tabs/index.ts",

package/dist/custom-elements.md CHANGED Viewed

@@ -93,6 +93,30 @@
 <hr/>
+## class: `AnchorTab`
+### Superclass
+| Name         | Module           | Package |
+| ------------ | ---------------- | ------- |
+| `AnchorBase` | /src/anchor-base |         |
+### Fields
+| Name           | Privacy | Type      | Default   | Description                                                                                                                                                                               | Inherited From |
+| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `disabled`     | public  | `boolean` | `false`   | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. |                |
+| `ariaSelected` | public  | `string`  | `'false'` | Indicates the current "selected" state of various widgets.&#xA;https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected                                                                        |                |
+### Attributes
+| Name            | Field        | Inherited From |
+| --------------- | ------------ | -------------- |
+| `disabled`      | disabled     |                |
+| `aria-selected` | ariaSelected |                |
+<hr/>
 ## class: `AnchorStep`
 ### Superclass
@@ -125,30 +149,6 @@
 <hr/>
-## class: `AnchorTab`
-### Superclass
-| Name         | Module           | Package |
-| ------------ | ---------------- | ------- |
-| `AnchorBase` | /src/anchor-base |         |
-### Fields
-| Name           | Privacy | Type      | Default   | Description                                                                                                                                                                               | Inherited From |
-| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `disabled`     | public  | `boolean` | `false`   | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. |                |
-| `ariaSelected` | public  | `string`  | `'false'` | Indicates the current "selected" state of various widgets.&#xA;https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected                                                                        |                |
-### Attributes
-| Name            | Field        | Inherited From |
-| --------------- | ------------ | -------------- |
-| `disabled`      | disabled     |                |
-| `aria-selected` | ariaSelected |                |
-<hr/>
 ## class: `AnchorTabs`
 ### Superclass

package/dist/esm/switch/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css } from '@ni/fast-element';
 import { Black15, Black75, Black91, DigitalGreenLight, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../utilities/style/display';
-import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, smallDelay } from '../theme-provider/design-tokens';
+import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, smallDelay } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { focusVisible } from '../utilities/style/focus';
@@ -19,9 +19,6 @@ export const styles = css `
         --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)
-        );
     }
     :host([disabled]) {
@@ -46,6 +43,12 @@ export const styles = css `
     .switch-container {
         display: flex;
         align-items: center;
+        ${'' /*
+    Reserve space around the 24px control to fill a 32px height until we have a switch 32 design.
+    See: https://github.com/ni/nimble/issues/3013
+*/}
+        padding-top: 2px;
+        padding-bottom: 6px;
     }
     slot[name='unchecked-message']::slotted(*) {

package/dist/esm/switch/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n Black15,\n Black75,\n Black91,\n DigitalGreenLight,\n PowerGreen,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlHeight,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 24px;\n --ni-private-switch-indicator-inner-size: 18px;\n --ni-private-switch-indicator-margin: -2px;\n padding-bottom: calc(\n ${controlHeight} - var(--ni-private-switch-height)\n );\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n }\n\n slot[name='unchecked-message']::slotted() {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) 2);\n background-color: var(--ni-private-switch-background-color);\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth}) solid transparent;\n }\n\n :host([aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-color);\n }\n\n :host([aria-checked='true']:hover) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n :host(${focusVisible}[aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host([disabled]:hover) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: var(--ni-private-switch-indicator-margin);\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n border-color: var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:hover) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]${focusVisible}) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:active) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n :host([disabled]${focusVisible}) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n .checked-indicator-inner {\n width: var(--ni-private-switch-indicator-inner-size);\n height: var(--ni-private-switch-indicator-inner-size);\n border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);\n opacity: 0;\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 0;\n }\n\n :host(${focusVisible}) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-color);\n border: 1px solid var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:active) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-active-color);\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n)};\n\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n \n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${Black75};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${PowerGreen};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.15\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n White,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${White} ;\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n Black15,\n Black75,\n Black91,\n DigitalGreenLight,\n PowerGreen,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 24px;\n --ni-private-switch-indicator-inner-size: 18px;\n --ni-private-switch-indicator-margin: -2px;\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n ${'' /\n Reserve space around the 24px control to fill a 32px height until we have a switch 32 design.\n See: https://github.com/ni/nimble/issues/3013\n /}\n padding-top: 2px;\n padding-bottom: 6px;\n }\n\n slot[name='unchecked-message']::slotted() {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) 2);\n background-color: var(--ni-private-switch-background-color);\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth}) solid transparent;\n }\n\n :host([aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-color);\n }\n\n :host([aria-checked='true']:hover) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n :host(${focusVisible}[aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host([disabled]:hover) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: var(--ni-private-switch-indicator-margin);\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n border-color: var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:hover) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]${focusVisible}) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:active) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n :host([disabled]${focusVisible}) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n .checked-indicator-inner {\n width: var(--ni-private-switch-indicator-inner-size);\n height: var(--ni-private-switch-indicator-inner-size);\n border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);\n opacity: 0;\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 0;\n }\n\n :host(${focusVisible}) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-color);\n border: 1px solid var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:active) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-active-color);\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n)};\n\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n \n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${Black75};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${PowerGreen};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.15\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n White,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${White} ;\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "35.12.3",
+  "version": "35.12.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run build:icons && npm run build:workers && npm run build:components && npm run build:scss && npm run build:cem",