npm - @ni/nimble-components - Versions diffs - 35.5.3 → 35.5.5 - Mend

@ni/nimble-components 35.5.3 → 35.5.5

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 (24) hide show

package/dist/all-components-bundle.js +175 -56
package/dist/all-components-bundle.js.map +1 -1
package/dist/all-components-bundle.min.js +95 -62
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/anchor-step/index.d.ts +4 -0
package/dist/esm/anchor-step/index.js +9 -0
package/dist/esm/anchor-step/index.js.map +1 -1
package/dist/esm/anchor-step/template.js +1 -0
package/dist/esm/anchor-step/template.js.map +1 -1
package/dist/esm/patterns/step/styles.js +40 -16
package/dist/esm/patterns/step/styles.js.map +1 -1
package/dist/esm/patterns/step/testing/step-base.pageobject.d.ts +1 -0
package/dist/esm/patterns/step/testing/step-base.pageobject.js +3 -0
package/dist/esm/patterns/step/testing/step-base.pageobject.js.map +1 -1
package/dist/esm/patterns/step/types.d.ts +5 -0
package/dist/esm/patterns/step/types.js.map +1 -1
package/dist/esm/step/index.d.ts +4 -0
package/dist/esm/step/index.js +9 -0
package/dist/esm/step/index.js.map +1 -1
package/dist/esm/step/template.js +1 -0
package/dist/esm/step/template.js.map +1 -1
package/package.json +2 -2

package/dist/custom-elements.json CHANGED Viewed

@@ -392,89 +392,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-step/index.ts",
@@ -659,6 +576,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-tabs/index.ts",

package/dist/custom-elements.md CHANGED Viewed

@@ -93,30 +93,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: `AnchorStep`
 ### Superclass
@@ -149,6 +125,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: `AnchorTabs`
 ### Superclass

package/dist/esm/anchor-step/index.d.ts CHANGED Viewed

@@ -55,6 +55,10 @@ export declare class AnchorStep extends AnchorStep_base implements StepPattern {
      * @internal
      */
     readonly stepInternals: StepInternals;
+    /**
+     * @internal
+     */
+    onClick(e: Event): void;
 }
 export declare const anchorStepTag = "nimble-anchor-step";
 export {};

package/dist/esm/anchor-step/index.js CHANGED Viewed

@@ -42,6 +42,15 @@ export class AnchorStep extends mixinSeverityPattern(AnchorBase) {
          */
         this.stepInternals = new StepInternals();
     }
+    /**
+     * @internal
+     */
+    onClick(e) {
+        if (this.disabled || this.readOnly) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+        }
+    }
 }
 __decorate([
     attr()

package/dist/esm/anchor-step/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-step/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQ7C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB,CAAC,UAAU,CAAC;IAAhE;;QACI;;;;WAIG;QAEI,aAAQ,GAAuB,kBAAkB,CAAC,OAAO,CAAC;QAEjE;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAUxB;;WAEG;QACa,kBAAa,GAAG,IAAI,aAAa,EAAE,CAAC;~~IACxD~~,CAAC;~~CAAA~~;~~AAtCU~~;IADN,IAAI,EAAE;4CAC0D;AAQ1D;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAQjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACzB;AAQjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAQR;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CAClC;~~AAQtC~~,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAgB;IACvD,QAAQ,EAAE,aAAa;IACvB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import { DesignSystem, type AnchorOptions } from '@ni/fast-foundation';\nimport { attr, nullableNumberConverter } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { AnchorBase } from '../anchor-base';\nimport { mixinSeverityPattern } from '../patterns/severity/types';\nimport type { StepPattern } from '../patterns/step/types';\nimport { StepInternals } from '../patterns/step/models/step-internals';\nimport { AnchorStepSeverity } from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-anchor-step': AnchorStep;\n }\n}\n\n/*\n A nimble-styled anchor step for a stepper\n /\nexport class AnchorStep extends mixinSeverityPattern(AnchorBase) implements StepPattern {\n /\n @public\n * @remarks\n * HTML Attribute: disabled\n /\n @attr()\n public severity: AnchorStepSeverity = AnchorStepSeverity.default;\n\n /\n @public\n * @remarks\n * HTML Attribute: disabled\n /\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n /\n @public\n * @remarks\n * HTML Attribute: readonly\n /\n @attr({ attribute: 'readonly', mode: 'boolean' })\n public readOnly = false;\n\n /\n @public\n * @remarks\n * HTML Attribute: selected\n /\n @attr({ mode: 'boolean' })\n public selected = false;\n\n /\n @public\n * @remarks\n * HTML Attribute: tabindex\n /\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n /\n @internal\n */\n public readonly stepInternals = new StepInternals();\n}\n\nconst nimbleAnchorStep = AnchorStep.compose<AnchorOptions>({\n baseName: 'anchor-step',\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());\nexport const anchorStepTag = 'nimble-anchor-step';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-step/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAsB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAQ7C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,oBAAoB,CAAC,UAAU,CAAC;IAAhE;;QACI;;;;WAIG;QAEI,aAAQ,GAAuB,kBAAkB,CAAC,OAAO,CAAC;QAEjE;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAUxB;;WAEG;QACa,kBAAa,GAAG,IAAI,aAAa,EAAE,CAAC;IAWxD,CAAC;IATG;;OAEG;IACI,OAAO,CAAC,CAAQ;QACnB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QACjC,CAAC;IACL,CAAC;CACJ;AAhDU;IADN,IAAI,EAAE;4CAC0D;AAQ1D;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAQjB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACzB;AAQjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAQR;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;4CAClC;AAkBtC,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAgB;IACvD,QAAQ,EAAE,aAAa;IACvB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAC7E,MAAM,CAAC,MAAM,aAAa,GAAG,oBAAoB,CAAC","sourcesContent":["import { DesignSystem, type AnchorOptions } from '@ni/fast-foundation';\nimport { attr, nullableNumberConverter } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { AnchorBase } from '../anchor-base';\nimport { mixinSeverityPattern } from '../patterns/severity/types';\nimport type { StepPattern } from '../patterns/step/types';\nimport { StepInternals } from '../patterns/step/models/step-internals';\nimport { AnchorStepSeverity } from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-anchor-step': AnchorStep;\n }\n}\n\n/*\n A nimble-styled anchor step for a stepper\n /\nexport class AnchorStep extends mixinSeverityPattern(AnchorBase) implements StepPattern {\n /\n @public\n * @remarks\n * HTML Attribute: disabled\n /\n @attr()\n public severity: AnchorStepSeverity = AnchorStepSeverity.default;\n\n /\n @public\n * @remarks\n * HTML Attribute: disabled\n /\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n /\n @public\n * @remarks\n * HTML Attribute: readonly\n /\n @attr({ attribute: 'readonly', mode: 'boolean' })\n public readOnly = false;\n\n /\n @public\n * @remarks\n * HTML Attribute: selected\n /\n @attr({ mode: 'boolean' })\n public selected = false;\n\n /\n @public\n * @remarks\n * HTML Attribute: tabindex\n /\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n /\n @internal\n /\n public readonly stepInternals = new StepInternals();\n\n /\n @internal\n */\n public onClick(e: Event): void {\n if (this.disabled \|\| this.readOnly) {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n }\n}\n\nconst nimbleAnchorStep = AnchorStep.compose<AnchorOptions>({\n baseName: 'anchor-step',\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorStep());\nexport const anchorStepTag = 'nimble-anchor-step';\n"]}

package/dist/esm/anchor-step/template.js CHANGED Viewed

@@ -45,6 +45,7 @@ export const template = (context, definition) => html `
                 aria-owns="${x => x.ariaOwns}"
                 aria-relevant="${x => x.ariaRelevant}"
                 aria-roledescription="${x => x.ariaRoledescription}"
+                @click="${(x, c) => x.onClick(c.event)}"
                 ${ref('control')}
             >
                 <div class="icon-background"></div>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-step/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAsD,iBAAiB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE7H,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAEjJ,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAY;;;;cAI/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;cACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;;;;;4BAK3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kCACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;uBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;0BACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;wBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;4BACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;+BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;6BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;iCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;gCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;gCAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;iCACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;iCAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;iCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;gCAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qCACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;8BAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;6BAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;iCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;~~kBAChD~~,GAAG,CAAC,SAAS,CAAC;;;;kDAIkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;uGACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ;;0BAE1G,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,EAClC,IAAI,CAAa,IAAI,sBAAsB,2BAA2B,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,sBAAsB,GAAG,CAChJ;0BACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EACpC,IAAI,CAAa,IAAI,qBAAqB,2BAA2B,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,qBAAqB,GAAG,CAChJ;0BACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EACpC,IAAI,CAAa,IAAI,YAAY,2BAA2B,CAAC,CAAC,EAAE,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,YAAY,GAAG,CAChI;;;;qCAIY,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,6BAA6B,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAI9H,oBAAoB;;;CAGjC,CAAC","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"]}
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 @click=\"${(x, c) => x.onClick(c.event)}\"\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 CHANGED Viewed

@@ -163,6 +163,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         :host([selected]) .control {
             --ni-private-step-icon-color: ${borderHoverColor};
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
             --ni-private-step-line-color: ${borderHoverColor};
@@ -202,10 +203,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
                 box-shadow ${smallDelay} ease-in-out;
         }
-        :host([selected]) .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
         .icon::before {
             content: '';
             position: absolute;
@@ -215,7 +212,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             outline-color: var(--ni-private-step-icon-outline-inset-color);
             outline-style: solid;
             outline-width: 0px;
-            outline-offset: 0px;
+            ${'' /* outline-offset should always be <=-1 to always render inset */}
+            outline-offset: -1px;
             border: none;
             border-radius: 100%;
             color: transparent;
@@ -293,9 +291,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             min-width: ${standardPadding};
             height: 1px;
             min-height: 1px;
+            transform: scale(1, 1);
             background: var(--ni-private-step-line-color);
             background-clip: content-box;
-            transform: scale(1, 1);
             transition:
                 background-color ${smallDelay} ease-in-out,
                 transform ${smallDelay} ease-in-out;
@@ -309,8 +307,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             width: 1px;
             min-width: 1px;
             height: 100%;
-            padding-top: ${smallPadding};
             min-height: ${standardPadding};
+            padding-top: ${smallPadding};
         }
         .subtitle {
@@ -339,6 +337,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     @layer hover {
         .control:hover {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${borderHoverColor};
         }
@@ -369,8 +368,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
-        .control:hover .icon {
-            --ni-private-step-icon-border-width: 2px;
+        :host([readonly]) .control:hover {
+            --ni-private-step-icon-color: revert-layer;
+            --ni-private-step-icon-border-color: revert-layer;
+            --ni-private-step-icon-border-width: revert-layer;
+            --ni-private-step-icon-background-size: revert-layer;
+            --ni-private-step-line-color: revert-layer;
         }
         .control:hover .line {
@@ -380,11 +383,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
         .container.vertical .control:hover .line {
             transform: scale(2, 1);
         }
+        :host([readonly]) .container .control:hover .line {
+            transform: revert-layer;
+        }
     }
     @layer focusVisible {
         .control${focusVisible} {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
             --ni-private-step-line-color: ${borderHoverColor};
@@ -420,10 +428,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
-        .control${focusVisible} .icon {
-            --ni-private-step-icon-border-width: 2px;
-        }
         .control${focusVisible} .icon::before {
             outline-width: ${borderWidth};
             ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
@@ -442,6 +446,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
     @layer active {
         .control:active {
             --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-border-width: 2px;
             --ni-private-step-icon-background-color: ${fillSelectedColor};
             --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
             --ni-private-step-line-color: ${borderHoverColor};
@@ -473,26 +478,45 @@ Defines an interaction area clip-path that leaves out the severity text so it is
             --ni-private-step-line-color: ${borderHoverColor};
         }
-        .control:active .icon {
-            --ni-private-step-icon-border-width: 2px;
+        :host([readonly]) .control:active {
+            --ni-private-step-icon-color: revert-layer;
+            --ni-private-step-icon-border-color: revert-layer;
+            --ni-private-step-icon-border-width: revert-layer;
+            --ni-private-step-icon-background-color: revert-layer;
+            --ni-private-step-icon-background-size: revert-layer;
+            --ni-private-step-line-color: revert-layer;
         }
         .control:active .icon::before {
             outline-width: 0px;
-            outline-offset: 0px;
+            outline-offset: -1px;
+        }
+        :host([readonly]) .control:active .icon::before {
+            outline-width: revert-layer;
+            outline-offset: revert-layer;
         }
         .control:active .line {
             transform: scale(1, 1);
         }
+        :host([readonly]) .control:active .line {
+            transform: revert-layer;
+        }
     }
     @layer disabled {
+        :host([readonly]) .control {
+            cursor: default;
+        }
         :host([disabled]) .control {
             cursor: default;
             color: ${buttonLabelDisabledFontColor};
             --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);
             --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;

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

	@@ -1 +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: 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"]}
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: 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-border-width: 2px;\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 .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 should always be <=-1 to always render inset /}\n outline-offset: -1px;\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 transform: scale(1, 1);\n background: var(--ni-private-step-line-color);\n background-clip: content-box;\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 min-height: ${standardPadding};\n padding-top: ${smallPadding};\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-border-width: 2px;\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 :host([readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\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 :host([readonly]) .container .control:hover .line {\n transform: revert-layer;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\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::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-border-width: 2px;\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 :host([readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:active .icon::before {\n outline-width: 0px;\n outline-offset: -1px;\n }\n\n :host([readonly]) .control:active .icon::before {\n outline-width: revert-layer;\n outline-offset: revert-layer;\n }\n\n .control:active .line {\n transform: scale(1, 1);\n }\n\n :host([readonly]) .control:active .line {\n transform: revert-layer;\n }\n }\n\n @layer disabled {\n :host([readonly]) .control {\n cursor: default;\n }\n\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-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 :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/patterns/step/testing/step-base.pageobject.d.ts CHANGED Viewed

@@ -9,4 +9,5 @@ export declare abstract class StepBasePageObject<T extends StepPattern = StepPat
     getErrorSeverityLabel(): string;
     getWarningSeverityLabel(): string;
     getSelectedStateLabel(): string;
+    click(): void;
 }

package/dist/esm/patterns/step/testing/step-base.pageobject.js CHANGED Viewed

@@ -36,5 +36,8 @@ export class StepBasePageObject {
         }
         return label;
     }
+    click() {
+        this.element.control.click();
+    }
 }
 //# sourceMappingURL=step-base.pageobject.js.map