@ni/nimble-components 35.5.2 → 35.5.3

package/dist/custom-elements.json

@@ -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

@@ -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/anchor-step/template.js

@@ -47,6 +47,7 @@ export const template = (context, definition) => html `
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>

package/dist/esm/anchor-step/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-step/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, ViewTemplate, when } from '@ni/fast-element';\nimport { type FoundationElementTemplate, type AnchorOptions, startSlotTemplate, endSlotTemplate } from '@ni/fast-foundation';\nimport type { AnchorStep } from '.';\nimport { severityTextTemplate } from '../patterns/severity/template';\nimport { Severity } from '../patterns/severity/types';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { iconCheckTag } from '../icons/check';\nimport type { StepPattern } from '../patterns/step/types';\nimport { popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconCompletedLabel } from '../label-provider/core/label-tokens';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<AnchorStep>,\nAnchorOptions\n> = (context, definition) => html<AnchorStep>`\n    <template slot=\"step\">\n        <li class=\"\n            container\n            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}\n            ${x => (x.stepInternals.last ? 'last' : '')}\n        \">\n            <a\n                class=\"control\"\n                part=\"control\"\n                download=\"${x => x.download}\"\n                href=${x => (x.disabled ? null : x.href)}\n                hreflang=\"${x => x.hreflang}\"\n                ping=\"${x => x.ping}\"\n                referrerpolicy=\"${x => x.referrerpolicy}\"\n                rel=\"${x => x.rel}\"\n                target=\"${x => x.target}\"\n                type=\"${x => x.type}\"\n                tabindex=\"${x => x.tabIndex}\"\n                aria-atomic=\"${x => x.ariaAtomic}\"\n                aria-busy=\"${x => x.ariaBusy}\"\n                aria-controls=\"${x => x.ariaControls}\"\n                aria-current=\"${x => x.ariaCurrent}\"\n                aria-describedby=\"${x => x.ariaDescribedby}\"\n                aria-details=\"${x => x.ariaDetails}\"\n                aria-disabled=\"${x => x.ariaDisabled}\"\n                aria-errormessage=\"${x => x.ariaErrormessage}\"\n                aria-expanded=\"${x => x.ariaExpanded}\"\n                aria-flowto=\"${x => x.ariaFlowto}\"\n                aria-haspopup=\"${x => x.ariaHaspopup}\"\n                aria-hidden=\"${x => x.ariaHidden}\"\n                aria-invalid=\"${x => x.ariaInvalid}\"\n                aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n                aria-label=\"${x => x.ariaLabel}\"\n                aria-labelledby=\"${x => x.ariaLabelledby}\"\n                aria-live=\"${x => x.ariaLive}\"\n                aria-owns=\"${x => x.ariaOwns}\"\n                aria-relevant=\"${x => x.ariaRelevant}\"\n                aria-roledescription=\"${x => x.ariaRoledescription}\"\n                ${ref('control')}\n            >\n                <div class=\"icon\">\n                    <span class=\"current-label\">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>\n                    <div class=\"step-indicator\"><slot name=\"step-indicator\"><span aria-hidden=\"true\">${x => x.stepInternals.position}</span></slot></div>\n                    <div class=\"icon-severity\">\n                        ${when(\n                            x => x.severity === Severity.error,\n                            html<StepPattern>`<${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.warning,\n                            html<StepPattern>`<${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.success,\n                            html<StepPattern>`<${iconCheckTag} role=\"img\" aria-label=\"${x => popupIconCompletedLabel.getValueFor(x)}\"></${iconCheckTag}>`\n                        )}\n                    </div>\n                </div>\n                <div class=\"top-spacer\"></div>\n                <div class=\"title\">${startSlotTemplate(context, definition)}<slot name=\"title\"></slot>${endSlotTemplate(context, definition)}</div>\n                <div class=\"line\"></div>\n                <div class=\"subtitle\"><slot name=\"subtitle\"></slot></div>\n            </a>\n            ${severityTextTemplate}\n        </li>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-step/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, ViewTemplate, when } from '@ni/fast-element';\nimport { type FoundationElementTemplate, type AnchorOptions, startSlotTemplate, endSlotTemplate } from '@ni/fast-foundation';\nimport type { AnchorStep } from '.';\nimport { severityTextTemplate } from '../patterns/severity/template';\nimport { Severity } from '../patterns/severity/types';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { iconCheckTag } from '../icons/check';\nimport type { StepPattern } from '../patterns/step/types';\nimport { popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconCompletedLabel } from '../label-provider/core/label-tokens';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<AnchorStep>,\nAnchorOptions\n> = (context, definition) => html<AnchorStep>`\n    <template slot=\"step\">\n        <li class=\"\n            container\n            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}\n            ${x => (x.stepInternals.last ? 'last' : '')}\n        \">\n            <a\n                class=\"control\"\n                part=\"control\"\n                download=\"${x => x.download}\"\n                href=${x => (x.disabled ? null : x.href)}\n                hreflang=\"${x => x.hreflang}\"\n                ping=\"${x => x.ping}\"\n                referrerpolicy=\"${x => x.referrerpolicy}\"\n                rel=\"${x => x.rel}\"\n                target=\"${x => x.target}\"\n                type=\"${x => x.type}\"\n                tabindex=\"${x => x.tabIndex}\"\n                aria-atomic=\"${x => x.ariaAtomic}\"\n                aria-busy=\"${x => x.ariaBusy}\"\n                aria-controls=\"${x => x.ariaControls}\"\n                aria-current=\"${x => x.ariaCurrent}\"\n                aria-describedby=\"${x => x.ariaDescribedby}\"\n                aria-details=\"${x => x.ariaDetails}\"\n                aria-disabled=\"${x => x.ariaDisabled}\"\n                aria-errormessage=\"${x => x.ariaErrormessage}\"\n                aria-expanded=\"${x => x.ariaExpanded}\"\n                aria-flowto=\"${x => x.ariaFlowto}\"\n                aria-haspopup=\"${x => x.ariaHaspopup}\"\n                aria-hidden=\"${x => x.ariaHidden}\"\n                aria-invalid=\"${x => x.ariaInvalid}\"\n                aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n                aria-label=\"${x => x.ariaLabel}\"\n                aria-labelledby=\"${x => x.ariaLabelledby}\"\n                aria-live=\"${x => x.ariaLive}\"\n                aria-owns=\"${x => x.ariaOwns}\"\n                aria-relevant=\"${x => x.ariaRelevant}\"\n                aria-roledescription=\"${x => x.ariaRoledescription}\"\n                ${ref('control')}\n            >\n                <div class=\"icon-background\"></div>\n                <div class=\"icon\">\n                    <span class=\"current-label\">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>\n                    <div class=\"step-indicator\"><slot name=\"step-indicator\"><span aria-hidden=\"true\">${x => x.stepInternals.position}</span></slot></div>\n                    <div class=\"icon-severity\">\n                        ${when(\n                            x => x.severity === Severity.error,\n                            html<StepPattern>`<${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.warning,\n                            html<StepPattern>`<${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.success,\n                            html<StepPattern>`<${iconCheckTag} role=\"img\" aria-label=\"${x => popupIconCompletedLabel.getValueFor(x)}\"></${iconCheckTag}>`\n                        )}\n                    </div>\n                </div>\n                <div class=\"top-spacer\"></div>\n                <div class=\"title\">${startSlotTemplate(context, definition)}<slot name=\"title\"></slot>${endSlotTemplate(context, definition)}</div>\n                <div class=\"line\"></div>\n                <div class=\"subtitle\"><slot name=\"subtitle\"></slot></div>\n            </a>\n            ${severityTextTemplate}\n        </li>\n    </template>\n`;\n"]}

package/dist/esm/patterns/step/styles.js

@@ -58,13 +58,14 @@ export const styles = css `
             background-color: transparent;
             cursor: pointer;
             outline: none;
-            --ni-private-step-icon-background-full-size: 100% 100%;
-            ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}
-            --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);
-            --ni-private-step-icon-background-none-size: 0% 0%;
+            --ni-private-step-icon-background-full-size: scale(1,1);
+            ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}
+            --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);
+            --ni-private-step-icon-background-none-size: scale(0,0);
 
             --ni-private-step-icon-color: ${buttonLabelFontColor};
             --ni-private-step-icon-border-color: transparent;
+            --ni-private-step-icon-border-width: 1px;
             --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-icon-outline-inset-color: transparent;
@@ -167,6 +168,20 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
 
+        .icon-background {
+            grid-area: icon;
+            display: inline-block;
+            height: ${controlHeight};
+            width: ${controlHeight};
+            ${userSelectNone};
+            background-color:  var(--ni-private-step-icon-background-color);
+            transform: var(--ni-private-step-icon-background-size);
+            border: none;
+            border-radius: 100%;
+            transition:
+                transform ${smallDelay} ease-in-out;
+        }
+
         .icon {
             grid-area: icon;
             display: inline-flex;
@@ -179,31 +194,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             font: ${buttonLabelFont};
             color: var(--ni-private-step-icon-color);
             ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);
-            border-style: solid;
+            border: none;
             border-radius: 100%;
-            border-color: var(--ni-private-step-icon-border-color);
-            border-width: 1px;
-            background-image: radial-gradient(
-                closest-side,
-                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
-        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
-    */}
-                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
-                transparent 100%
-            );
-            background-origin: border-box;
-            background-size: var(--ni-private-step-icon-background-size);
-            background-repeat: no-repeat;
-            background-position: center center;
+            box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);
             position: relative;
             transition:
-                border-color ${smallDelay} ease-in-out,
-                border-width ${smallDelay} ease-in-out,
-                background-size ${smallDelay} ease-out;
+                box-shadow ${smallDelay} ease-in-out;
         }
 
         :host([selected]) .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .icon::before {
@@ -216,10 +216,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-style: solid;
             outline-width: 0px;
             outline-offset: 0px;
-            border: 1px solid transparent;
+            border: none;
             border-radius: 100%;
             color: transparent;
-            background-clip: border-box;
             transition:
                 outline-color ${smallDelay} ease-in-out,
                 outline-width ${smallDelay} ease-in-out,
@@ -371,7 +370,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:hover .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:hover .line {
@@ -422,12 +421,13 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control${focusVisible} .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
-            outline-offset: -2px;
+            ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
+            outline-offset: -4px;
         }
 
         .control${focusVisible} .line {
@@ -474,7 +474,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         }
 
         .control:active .icon {
-            border-width: 2px;
+            --ni-private-step-icon-border-width: 2px;
         }
 
         .control:active .icon::before {

package/dist/esm/patterns/step/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/step/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    buttonLabelFont,\n    buttonLabelFontColor,\n    smallPadding,\n    bodyFont,\n    errorTextFont,\n    controlSlimHeight,\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    fillSelectedColor,\n    passColor,\n    failColor,\n    warningColor,\n    buttonLabelDisabledFontColor,\n    iconColor,\n    standardPadding,\n    controlHeight,\n    errorTextFontLineHeight,\n} from '../../theme-provider/design-tokens';\nimport { styles as severityStyles } from '../severity/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { userSelectNone } from '../../utilities/style/user-select';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { Theme } from '../../theme-provider/types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n        ${severityStyles}\n        :host {\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            white-space: nowrap;\n            outline: none;\n            border: none;\n        }\n\n        ${'' /* Container wrapper for severity text to position against */}\n        .container {\n            display: inline-flex;\n            width: 100%;\n            height: 100%;\n            position: relative;\n            list-style: none;\n            --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});\n            --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});\n        }\n\n        .control {\n            display: inline-grid;\n            height: 100%;\n            width: 100%;\n            grid-template-areas:\n                \"icon top-spacer top-spacer\"\n                \"icon title line\"\n                \"icon subtitle subtitle\";\n            grid-template-columns:\n                ${controlHeight} ${'' /* Icon width */}\n                min-content ${'' /* Show the full title and subtitle */}\n                1fr; ${'' /* Line is only fr unit so fills remaining space */}\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                min-content;\n            column-gap: 4px;\n\n            align-items: start;\n            margin: 0;\n            padding: 0;\n            color: inherit;\n            background-color: transparent;\n            cursor: pointer;\n            outline: none;\n            --ni-private-step-icon-background-full-size: 100% 100%;\n            ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}\n            --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);\n            --ni-private-step-icon-background-none-size: 0% 0%;\n\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: transparent;\n            --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-icon-outline-inset-color: transparent;\n            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        .container.last .control {\n            grid-template-areas:\n                \"icon top-spacer\"\n                \"icon title\"\n                \"icon subtitle\";\n            grid-template-columns:\n                ${controlHeight}\n                min-content;\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                min-content;\n        }\n\n        .container.vertical .control {\n            ${''/*\n            Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:\n            1----------------2\n            |    title       |\n            |    subtitle    |\n            |  4-------------3\n            |  | severity-text\n            |  |\n            6--5\n            */}\n            clip-path: polygon(\n                0% 0%,\n                100% 0%,\n                100% var(--ni-private-step-content-height),\n                var(--ni-private-step-content-offset) var(--ni-private-step-content-height),\n                var(--ni-private-step-content-offset) 100%,\n                0% 100%\n            );\n            grid-template-areas:\n                \"icon top-spacer\"\n                \"icon title\"\n                \"icon subtitle\"\n                \"line subtitle\"\n                \"line .\";\n            grid-template-columns:\n                ${controlHeight}\n                min-content;\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})\n                min-content\n                1fr;\n        }\n\n        .container.vertical.last .control {\n            grid-template-areas:\n                \"icon top-spacer\"\n                \"icon title\"\n                \"icon subtitle\";\n            grid-template-columns:\n                ${controlHeight}\n                min-content;\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                min-content;\n        }\n\n        :host([severity=\"error\"]) .control {\n            --ni-private-step-icon-color: ${failColor};\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control {\n            --ni-private-step-icon-color: ${warningColor};\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control {\n            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-color: ${passColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([selected]) .control {\n            --ni-private-step-icon-color: ${borderHoverColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .icon {\n            grid-area: icon;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: none;\n            height: ${controlHeight};\n            width: ${controlHeight};\n            ${userSelectNone};\n            font: ${buttonLabelFont};\n            color: var(--ni-private-step-icon-color);\n            ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);\n            border-style: solid;\n            border-radius: 100%;\n            border-color: var(--ni-private-step-icon-border-color);\n            border-width: 1px;\n            background-image: radial-gradient(\n                closest-side,\n                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:\n                        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges\n                    */}\n                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),\n                transparent 100%\n            );\n            background-origin: border-box;\n            background-size: var(--ni-private-step-icon-background-size);\n            background-repeat: no-repeat;\n            background-position: center center;\n            position: relative;\n            transition:\n                border-color ${smallDelay} ease-in-out,\n                border-width ${smallDelay} ease-in-out,\n                background-size ${smallDelay} ease-out;\n        }\n\n        :host([selected]) .icon {\n            border-width: 2px;\n        }\n\n        .icon::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            outline-color: var(--ni-private-step-icon-outline-inset-color);\n            outline-style: solid;\n            outline-width: 0px;\n            outline-offset: 0px;\n            border: 1px solid transparent;\n            border-radius: 100%;\n            color: transparent;\n            background-clip: border-box;\n            transition:\n                outline-color ${smallDelay} ease-in-out,\n                outline-width ${smallDelay} ease-in-out,\n                outline-offset ${smallDelay} ease-in-out;\n        }\n\n        .current-label {\n            ${accessiblyHidden}\n        }\n\n        .step-indicator {\n            display: contents;\n        }\n\n        :host([severity=\"error\"]) .step-indicator,\n        :host([severity=\"warning\"]) .step-indicator,\n        :host([severity=\"success\"]) .step-indicator {\n            display: none;\n        }\n\n        :host([selected]) .step-indicator,\n        :host([disabled]) .step-indicator {\n            display: contents;\n        }\n\n        .icon-severity {\n            display: none;\n        }\n\n        :host([severity=\"error\"]) .icon-severity,\n        :host([severity=\"warning\"]) .icon-severity,\n        :host([severity=\"success\"]) .icon-severity {\n            display: contents;\n        }\n\n        :host([selected]) .icon-severity,\n        :host([disabled]) .icon-severity {\n            display: none;\n        }\n\n        .top-spacer {\n            grid-area: top-spacer;\n            height: ${smallPadding};\n        }\n\n        .title {\n            grid-area: title;\n            min-width: min-content;\n            height: ${controlSlimHeight};\n            display: inline-block;\n            align-content: center;\n            font: ${bodyFont};\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n\n        .line {\n            grid-area: line;\n            align-self: center;\n            justify-self: center;\n            display: inline-block;\n            width: 100%;\n            min-width: ${standardPadding};\n            height: 1px;\n            min-height: 1px;\n            background: var(--ni-private-step-line-color);\n            background-clip: content-box;\n            transform: scale(1, 1);\n            transition:\n                background-color ${smallDelay} ease-in-out,\n                transform ${smallDelay} ease-in-out;\n        }\n\n        .container.last .line {\n            display: none;\n        }\n\n        .container.vertical .line {\n            width: 1px;\n            min-width: 1px;\n            height: 100%;\n            padding-top: ${smallPadding};\n            min-height: ${standardPadding};\n        }\n\n        .subtitle {\n            grid-area: subtitle;\n            display: inline-block;\n            min-width: min-content;\n            height: ${errorTextFontLineHeight};\n            align-content: center;\n            font: ${errorTextFont};\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .severity-text {\n            left: 0px;\n            top: var(--ni-private-step-content-height);\n        }\n\n        .container.vertical .severity-text {\n            width: calc(100% - var(--ni-private-step-content-offset));\n            left: var(--ni-private-step-content-offset);\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        :host([severity=\"error\"]) .control:hover {\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control:hover {\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control:hover {\n            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${passColor};\n        }\n\n        :host([selected]) .control:hover {\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .control:hover .icon {\n            border-width: 2px;\n        }\n\n        .control:hover .line {\n            transform: scale(1, 2);\n        }\n\n        .container.vertical .control:hover .line {\n            transform: scale(2, 1);\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        :host([severity=\"error\"]) .control${focusVisible} {\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-icon-outline-inset-color: ${failColor};\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control${focusVisible} {\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-icon-outline-inset-color: ${warningColor};\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control${focusVisible} {\n            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-icon-outline-inset-color: transparent;\n            --ni-private-step-line-color: ${passColor};\n        }\n\n        :host([selected]) .control${focusVisible} {\n            --ni-private-step-icon-color: ${borderHoverColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .control${focusVisible} .icon {\n            border-width: 2px;\n        }\n\n        .control${focusVisible} .icon::before {\n            outline-width: ${borderWidth};\n            outline-offset: -2px;\n        }\n\n        .control${focusVisible} .line {\n            transform: scale(1, 2);\n        }\n\n        .container.vertical .control${focusVisible} .line {\n            transform: scale(2, 1);\n        }\n    }\n\n    @layer active {\n        .control:active {\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-color: ${fillSelectedColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        :host([severity=\"error\"]) .control:active {\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control:active {\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control:active {\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n            --ni-private-step-line-color: ${passColor};\n        }\n\n        :host([selected]) .control:active {\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .control:active .icon {\n            border-width: 2px;\n        }\n\n        .control:active .icon::before {\n            outline-width: 0px;\n            outline-offset: 0px;\n        }\n\n        .control:active .line {\n            transform: scale(1, 1);\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) .control {\n            cursor: default;\n            color: ${buttonLabelDisabledFontColor};\n            --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);\n            --ni-private-step-icon-border-color: transparent;\n            --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-icon-outline-inset-color: transparent;\n            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([disabled]) .line {\n            transform: scale(1, 1);\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            @layer base {\n                .control {\n                    --ni-private-step-icon-inverse-color: ${White};\n                }\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            @layer base {\n                .control {\n                    --ni-private-step-icon-inverse-color: ${Black91};\n                }\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            @layer base {\n                .control {\n                    --ni-private-step-icon-inverse-color: ${Black15};\n                }\n\n                :host([severity=\"success\"]) .control {\n                    --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n                }\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/step/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n    buttonLabelFont,\n    buttonLabelFontColor,\n    smallPadding,\n    bodyFont,\n    errorTextFont,\n    controlSlimHeight,\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    fillSelectedColor,\n    passColor,\n    failColor,\n    warningColor,\n    buttonLabelDisabledFontColor,\n    iconColor,\n    standardPadding,\n    controlHeight,\n    errorTextFontLineHeight,\n} from '../../theme-provider/design-tokens';\nimport { styles as severityStyles } from '../severity/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { userSelectNone } from '../../utilities/style/user-select';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { Theme } from '../../theme-provider/types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n        ${severityStyles}\n        :host {\n            color: ${buttonLabelFontColor};\n            font: ${buttonLabelFont};\n            white-space: nowrap;\n            outline: none;\n            border: none;\n        }\n\n        ${'' /* Container wrapper for severity text to position against */}\n        .container {\n            display: inline-flex;\n            width: 100%;\n            height: 100%;\n            position: relative;\n            list-style: none;\n            --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});\n            --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});\n        }\n\n        .control {\n            display: inline-grid;\n            height: 100%;\n            width: 100%;\n            grid-template-areas:\n                \"icon top-spacer top-spacer\"\n                \"icon title line\"\n                \"icon subtitle subtitle\";\n            grid-template-columns:\n                ${controlHeight} ${'' /* Icon width */}\n                min-content ${'' /* Show the full title and subtitle */}\n                1fr; ${'' /* Line is only fr unit so fills remaining space */}\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                min-content;\n            column-gap: 4px;\n\n            align-items: start;\n            margin: 0;\n            padding: 0;\n            color: inherit;\n            background-color: transparent;\n            cursor: pointer;\n            outline: none;\n            --ni-private-step-icon-background-full-size: scale(1,1);\n            ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}\n            --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);\n            --ni-private-step-icon-background-none-size: scale(0,0);\n\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: transparent;\n            --ni-private-step-icon-border-width: 1px;\n            --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-icon-outline-inset-color: transparent;\n            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        .container.last .control {\n            grid-template-areas:\n                \"icon top-spacer\"\n                \"icon title\"\n                \"icon subtitle\";\n            grid-template-columns:\n                ${controlHeight}\n                min-content;\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                min-content;\n        }\n\n        .container.vertical .control {\n            ${''/*\n            Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:\n            1----------------2\n            |    title       |\n            |    subtitle    |\n            |  4-------------3\n            |  | severity-text\n            |  |\n            6--5\n            */}\n            clip-path: polygon(\n                0% 0%,\n                100% 0%,\n                100% var(--ni-private-step-content-height),\n                var(--ni-private-step-content-offset) var(--ni-private-step-content-height),\n                var(--ni-private-step-content-offset) 100%,\n                0% 100%\n            );\n            grid-template-areas:\n                \"icon top-spacer\"\n                \"icon title\"\n                \"icon subtitle\"\n                \"line subtitle\"\n                \"line .\";\n            grid-template-columns:\n                ${controlHeight}\n                min-content;\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})\n                min-content\n                1fr;\n        }\n\n        .container.vertical.last .control {\n            grid-template-areas:\n                \"icon top-spacer\"\n                \"icon title\"\n                \"icon subtitle\";\n            grid-template-columns:\n                ${controlHeight}\n                min-content;\n            grid-template-rows:\n                ${smallPadding}\n                ${controlSlimHeight}\n                min-content;\n        }\n\n        :host([severity=\"error\"]) .control {\n            --ni-private-step-icon-color: ${failColor};\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control {\n            --ni-private-step-icon-color: ${warningColor};\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control {\n            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-color: ${passColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([selected]) .control {\n            --ni-private-step-icon-color: ${borderHoverColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .icon-background {\n            grid-area: icon;\n            display: inline-block;\n            height: ${controlHeight};\n            width: ${controlHeight};\n            ${userSelectNone};\n            background-color:  var(--ni-private-step-icon-background-color);\n            transform: var(--ni-private-step-icon-background-size);\n            border: none;\n            border-radius: 100%;\n            transition:\n                transform ${smallDelay} ease-in-out;\n        }\n\n        .icon {\n            grid-area: icon;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: none;\n            height: ${controlHeight};\n            width: ${controlHeight};\n            ${userSelectNone};\n            font: ${buttonLabelFont};\n            color: var(--ni-private-step-icon-color);\n            ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);\n            border: none;\n            border-radius: 100%;\n            box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);\n            position: relative;\n            transition:\n                box-shadow ${smallDelay} ease-in-out;\n        }\n\n        :host([selected]) .icon {\n            --ni-private-step-icon-border-width: 2px;\n        }\n\n        .icon::before {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            outline-color: var(--ni-private-step-icon-outline-inset-color);\n            outline-style: solid;\n            outline-width: 0px;\n            outline-offset: 0px;\n            border: none;\n            border-radius: 100%;\n            color: transparent;\n            transition:\n                outline-color ${smallDelay} ease-in-out,\n                outline-width ${smallDelay} ease-in-out,\n                outline-offset ${smallDelay} ease-in-out;\n        }\n\n        .current-label {\n            ${accessiblyHidden}\n        }\n\n        .step-indicator {\n            display: contents;\n        }\n\n        :host([severity=\"error\"]) .step-indicator,\n        :host([severity=\"warning\"]) .step-indicator,\n        :host([severity=\"success\"]) .step-indicator {\n            display: none;\n        }\n\n        :host([selected]) .step-indicator,\n        :host([disabled]) .step-indicator {\n            display: contents;\n        }\n\n        .icon-severity {\n            display: none;\n        }\n\n        :host([severity=\"error\"]) .icon-severity,\n        :host([severity=\"warning\"]) .icon-severity,\n        :host([severity=\"success\"]) .icon-severity {\n            display: contents;\n        }\n\n        :host([selected]) .icon-severity,\n        :host([disabled]) .icon-severity {\n            display: none;\n        }\n\n        .top-spacer {\n            grid-area: top-spacer;\n            height: ${smallPadding};\n        }\n\n        .title {\n            grid-area: title;\n            min-width: min-content;\n            height: ${controlSlimHeight};\n            display: inline-block;\n            align-content: center;\n            font: ${bodyFont};\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n\n        .line {\n            grid-area: line;\n            align-self: center;\n            justify-self: center;\n            display: inline-block;\n            width: 100%;\n            min-width: ${standardPadding};\n            height: 1px;\n            min-height: 1px;\n            background: var(--ni-private-step-line-color);\n            background-clip: content-box;\n            transform: scale(1, 1);\n            transition:\n                background-color ${smallDelay} ease-in-out,\n                transform ${smallDelay} ease-in-out;\n        }\n\n        .container.last .line {\n            display: none;\n        }\n\n        .container.vertical .line {\n            width: 1px;\n            min-width: 1px;\n            height: 100%;\n            padding-top: ${smallPadding};\n            min-height: ${standardPadding};\n        }\n\n        .subtitle {\n            grid-area: subtitle;\n            display: inline-block;\n            min-width: min-content;\n            height: ${errorTextFontLineHeight};\n            align-content: center;\n            font: ${errorTextFont};\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .severity-text {\n            left: 0px;\n            top: var(--ni-private-step-content-height);\n        }\n\n        .container.vertical .severity-text {\n            width: calc(100% - var(--ni-private-step-content-offset));\n            left: var(--ni-private-step-content-offset);\n        }\n    }\n\n    @layer hover {\n        .control:hover {\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        :host([severity=\"error\"]) .control:hover {\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control:hover {\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control:hover {\n            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${passColor};\n        }\n\n        :host([selected]) .control:hover {\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .control:hover .icon {\n            --ni-private-step-icon-border-width: 2px;\n        }\n\n        .control:hover .line {\n            transform: scale(1, 2);\n        }\n\n        .container.vertical .control:hover .line {\n            transform: scale(2, 1);\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        :host([severity=\"error\"]) .control${focusVisible} {\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-icon-outline-inset-color: ${failColor};\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control${focusVisible} {\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-icon-outline-inset-color: ${warningColor};\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control${focusVisible} {\n            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n            --ni-private-step-icon-outline-inset-color: transparent;\n            --ni-private-step-line-color: ${passColor};\n        }\n\n        :host([selected]) .control${focusVisible} {\n            --ni-private-step-icon-color: ${borderHoverColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .control${focusVisible} .icon {\n            --ni-private-step-icon-border-width: 2px;\n        }\n\n        .control${focusVisible} .icon::before {\n            outline-width: ${borderWidth};\n            ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}\n            outline-offset: -4px;\n        }\n\n        .control${focusVisible} .line {\n            transform: scale(1, 2);\n        }\n\n        .container.vertical .control${focusVisible} .line {\n            transform: scale(2, 1);\n        }\n    }\n\n    @layer active {\n        .control:active {\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-color: ${fillSelectedColor};\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        :host([severity=\"error\"]) .control:active {\n            --ni-private-step-icon-border-color: ${failColor};\n            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n            --ni-private-step-line-color: ${failColor};\n        }\n\n        :host([severity=\"warning\"]) .control:active {\n            --ni-private-step-icon-border-color: ${warningColor};\n            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n            --ni-private-step-line-color: ${warningColor};\n        }\n\n        :host([severity=\"success\"]) .control:active {\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: ${passColor};\n            --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n            --ni-private-step-line-color: ${passColor};\n        }\n\n        :host([selected]) .control:active {\n            --ni-private-step-icon-color: ${buttonLabelFontColor};\n            --ni-private-step-icon-border-color: ${borderHoverColor};\n            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n            --ni-private-step-line-color: ${borderHoverColor};\n        }\n\n        .control:active .icon {\n            --ni-private-step-icon-border-width: 2px;\n        }\n\n        .control:active .icon::before {\n            outline-width: 0px;\n            outline-offset: 0px;\n        }\n\n        .control:active .line {\n            transform: scale(1, 1);\n        }\n    }\n\n    @layer disabled {\n        :host([disabled]) .control {\n            cursor: default;\n            color: ${buttonLabelDisabledFontColor};\n            --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);\n            --ni-private-step-icon-border-color: transparent;\n            --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n            --ni-private-step-icon-outline-inset-color: transparent;\n            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n        }\n\n        :host([disabled]) .line {\n            transform: scale(1, 1);\n        }\n    }\n\n    @layer top {\n        @media (prefers-reduced-motion) {\n            .control {\n                transition-duration: 0s;\n            }\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            @layer base {\n                .control {\n                    --ni-private-step-icon-inverse-color: ${White};\n                }\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            @layer base {\n                .control {\n                    --ni-private-step-icon-inverse-color: ${Black91};\n                }\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            @layer base {\n                .control {\n                    --ni-private-step-icon-inverse-color: ${Black15};\n                }\n\n                :host([severity=\"success\"]) .control {\n                    --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n                }\n            }\n        `\n    )\n);\n"]}

package/dist/esm/step/template.js

@@ -51,6 +51,7 @@ export const template = (context, definition) => html `
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
+                <div class="icon-background"></div>
                 <div class="icon">
                     <span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
                     <div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>

package/dist/esm/step/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/step/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, ViewTemplate, when } from '@ni/fast-element';\nimport { endSlotTemplate, startSlotTemplate, type ButtonOptions, type FoundationElementTemplate } from '@ni/fast-foundation';\nimport type { Step } from '.';\nimport { severityTextTemplate } from '../patterns/severity/template';\nimport { iconCheckTag } from '../icons/check';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { Severity } from '../patterns/severity/types';\nimport { popupIconCompletedLabel, popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';\nimport type { StepPattern } from '../patterns/step/types';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Step>,\nButtonOptions\n> = (context, definition) => html`\n    <template slot=\"step\">\n        <li class=\"\n            container\n            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}\n            ${x => (x.stepInternals.last ? 'last' : '')}\n        \">\n            <button\n                class=\"control\"\n                part=\"control\"\n                ?autofocus=\"${x => x.autofocus}\"\n                ?disabled=\"${x => x.disabled}\"\n                form=\"${x => x.formId}\"\n                formaction=\"${x => x.formaction}\"\n                formenctype=\"${x => x.formenctype}\"\n                formmethod=\"${x => x.formmethod}\"\n                formnovalidate=\"${x => x.formnovalidate}\"\n                formtarget=\"${x => x.formtarget}\"\n                name=\"${x => x.name}\"\n                type=\"${x => x.type}\"\n                value=\"${x => x.value}\"\n                tabindex=\"${x => x.tabIndex}\"\n                aria-atomic=\"${x => x.ariaAtomic}\"\n                aria-busy=\"${x => x.ariaBusy}\"\n                aria-controls=\"${x => x.ariaControls}\"\n                aria-current=\"${x => x.ariaCurrent}\"\n                aria-describedby=\"${x => x.ariaDescribedby}\"\n                aria-details=\"${x => x.ariaDetails}\"\n                aria-disabled=\"${x => x.ariaDisabled}\"\n                aria-errormessage=\"${x => x.ariaErrormessage}\"\n                aria-expanded=\"${x => x.ariaExpanded}\"\n                aria-flowto=\"${x => x.ariaFlowto}\"\n                aria-haspopup=\"${x => x.ariaHaspopup}\"\n                aria-hidden=\"${x => x.ariaHidden}\"\n                aria-invalid=\"${x => x.ariaInvalid}\"\n                aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n                aria-label=\"${x => x.ariaLabel}\"\n                aria-labelledby=\"${x => x.ariaLabelledby}\"\n                aria-live=\"${x => x.ariaLive}\"\n                aria-owns=\"${x => x.ariaOwns}\"\n                aria-pressed=\"${x => x.ariaPressed}\"\n                aria-relevant=\"${x => x.ariaRelevant}\"\n                aria-roledescription=\"${x => x.ariaRoledescription}\"\n                ${ref('control')}\n            >\n                <div class=\"icon\">\n                    <span class=\"current-label\">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>\n                    <div class=\"step-indicator\"><slot name=\"step-indicator\"><span aria-hidden=\"true\">${x => x.stepInternals.position}</span></slot></div>\n                    <div class=\"icon-severity\">\n                        ${when(\n                            x => x.severity === Severity.error,\n                            html<StepPattern>`<${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.warning,\n                            html<StepPattern>`<${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.success,\n                            html<StepPattern>`<${iconCheckTag} role=\"img\" aria-label=\"${x => popupIconCompletedLabel.getValueFor(x)}\"></${iconCheckTag}>`\n                        )}\n                    </div>\n                </div>\n                <div class=\"top-spacer\"></div>\n                <div class=\"title\">${startSlotTemplate(context, definition)}<slot name=\"title\"></slot>${endSlotTemplate(context, definition)}</div>\n                <div class=\"line\"></div>\n                <div class=\"subtitle\"><slot name=\"subtitle\"></slot></div>\n            </button>\n            ${severityTextTemplate}\n        </li>\n    </template>\n`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/step/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, ViewTemplate, when } from '@ni/fast-element';\nimport { endSlotTemplate, startSlotTemplate, type ButtonOptions, type FoundationElementTemplate } from '@ni/fast-foundation';\nimport type { Step } from '.';\nimport { severityTextTemplate } from '../patterns/severity/template';\nimport { iconCheckTag } from '../icons/check';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { Severity } from '../patterns/severity/types';\nimport { popupIconCompletedLabel, popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';\nimport type { StepPattern } from '../patterns/step/types';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Step>,\nButtonOptions\n> = (context, definition) => html`\n    <template slot=\"step\">\n        <li class=\"\n            container\n            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}\n            ${x => (x.stepInternals.last ? 'last' : '')}\n        \">\n            <button\n                class=\"control\"\n                part=\"control\"\n                ?autofocus=\"${x => x.autofocus}\"\n                ?disabled=\"${x => x.disabled}\"\n                form=\"${x => x.formId}\"\n                formaction=\"${x => x.formaction}\"\n                formenctype=\"${x => x.formenctype}\"\n                formmethod=\"${x => x.formmethod}\"\n                formnovalidate=\"${x => x.formnovalidate}\"\n                formtarget=\"${x => x.formtarget}\"\n                name=\"${x => x.name}\"\n                type=\"${x => x.type}\"\n                value=\"${x => x.value}\"\n                tabindex=\"${x => x.tabIndex}\"\n                aria-atomic=\"${x => x.ariaAtomic}\"\n                aria-busy=\"${x => x.ariaBusy}\"\n                aria-controls=\"${x => x.ariaControls}\"\n                aria-current=\"${x => x.ariaCurrent}\"\n                aria-describedby=\"${x => x.ariaDescribedby}\"\n                aria-details=\"${x => x.ariaDetails}\"\n                aria-disabled=\"${x => x.ariaDisabled}\"\n                aria-errormessage=\"${x => x.ariaErrormessage}\"\n                aria-expanded=\"${x => x.ariaExpanded}\"\n                aria-flowto=\"${x => x.ariaFlowto}\"\n                aria-haspopup=\"${x => x.ariaHaspopup}\"\n                aria-hidden=\"${x => x.ariaHidden}\"\n                aria-invalid=\"${x => x.ariaInvalid}\"\n                aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n                aria-label=\"${x => x.ariaLabel}\"\n                aria-labelledby=\"${x => x.ariaLabelledby}\"\n                aria-live=\"${x => x.ariaLive}\"\n                aria-owns=\"${x => x.ariaOwns}\"\n                aria-pressed=\"${x => x.ariaPressed}\"\n                aria-relevant=\"${x => x.ariaRelevant}\"\n                aria-roledescription=\"${x => x.ariaRoledescription}\"\n                ${ref('control')}\n            >\n                <div class=\"icon-background\"></div>\n                <div class=\"icon\">\n                    <span class=\"current-label\">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>\n                    <div class=\"step-indicator\"><slot name=\"step-indicator\"><span aria-hidden=\"true\">${x => x.stepInternals.position}</span></slot></div>\n                    <div class=\"icon-severity\">\n                        ${when(\n                            x => x.severity === Severity.error,\n                            html<StepPattern>`<${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.warning,\n                            html<StepPattern>`<${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>`\n                        )}\n                        ${when(\n                            x => x.severity === Severity.success,\n                            html<StepPattern>`<${iconCheckTag} role=\"img\" aria-label=\"${x => popupIconCompletedLabel.getValueFor(x)}\"></${iconCheckTag}>`\n                        )}\n                    </div>\n                </div>\n                <div class=\"top-spacer\"></div>\n                <div class=\"title\">${startSlotTemplate(context, definition)}<slot name=\"title\"></slot>${endSlotTemplate(context, definition)}</div>\n                <div class=\"line\"></div>\n                <div class=\"subtitle\"><slot name=\"subtitle\"></slot></div>\n            </button>\n            ${severityTextTemplate}\n        </li>\n    </template>\n`;\n"]}

package/dist/esm/stepper/template.js

@@ -1,7 +1,5 @@
 import { html, slotted } from '@ni/fast-element';
-import { devicePixelRatio } from '../utilities/models/device-pixel-ratio';
 export const template = html `<ol><slot
-        style="--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};"
         name="step"
         ${slotted('steps')}
     ></slot></ol>`;

package/dist/esm/stepper/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/stepper/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE1E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;kDACa,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO;;UAEtE,OAAO,CAAC,OAAO,CAAC;kBACR,CAAC","sourcesContent":["import { html, slotted } from '@ni/fast-element';\nimport type { Stepper } from '.';\nimport { devicePixelRatio } from '../utilities/models/device-pixel-ratio';\n\nexport const template = html<Stepper>`<ol><slot\n        style=\"--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};\"\n        name=\"step\"\n        ${slotted('steps')}\n    ></slot></ol>`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/stepper/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;UAE3B,OAAO,CAAC,OAAO,CAAC;kBACR,CAAC","sourcesContent":["import { html, slotted } from '@ni/fast-element';\nimport type { Stepper } from '.';\n\nexport const template = html<Stepper>`<ol><slot\n        name=\"step\"\n        ${slotted('steps')}\n    ></slot></ol>`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "35.5.2",
+  "version": "35.5.3",
   "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",

package/dist/esm/utilities/models/device-pixel-ratio.d.ts

@@ -1,10 +0,0 @@
-/**
- * Observable class to subscribe to changes in the page's device pixel ratio
- * Based on: https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/#the-less-code-and-more-flexible-js-solution
- */
-declare class DevicePixelRatio {
-    current: number;
-    constructor();
-}
-export declare const devicePixelRatio: DevicePixelRatio;
-export {};