npm - @ni/nimble-components - Versions diffs - 35.5.0 → 35.5.2 - Mend

@ni/nimble-components 35.5.0 → 35.5.2

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

package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.js CHANGED Viewed

@@ -29,6 +29,13 @@ export class SeverityPatternPageObject {
         severityTextDiv.dispatchEvent(event);
         processUpdates();
     }
+    clickSeverityText() {
+        const severityTextDiv = this.getSeverityTextElement();
+        if (!severityTextDiv) {
+            throw new Error('Severity text element not found');
+        }
+        severityTextDiv.click();
+    }
     getSeverityTextElement() {
         return this.element.shadowRoot.querySelector('.severity-text');
     }

package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"severity-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/severity/testing/severity-pattern.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,MAAM,OAAO,yBAAyB;IAClC,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,wBAAwB;QAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IACI,CAAC,eAAe;eACb,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,KAAK,MAAM,EACzD,CAAC;YACC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,OAAO,eAAe,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrD,CAAC;IAEM,oBAAoB;QACvB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,eAAe,CAAC,KAAK,CAAC;IACjC,CAAC;IAEM,2BAA2B,CAAC,KAAiB;QAChD,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEO,sBAAsB;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@ni/fast-foundation';\nimport { processUpdates } from '../../../testing/async-helpers';\n\n/*\n A page object for the elements that use the error pattern mixin.\n */\nexport class SeverityPatternPageObject {\n public constructor(private readonly element: FoundationElement) {}\n\n public getDisplayedSeverityText(): string {\n const severityTextDiv = this.getSeverityTextElement();\n if (\n !severityTextDiv\n \|\| getComputedStyle(severityTextDiv).display === 'none'\n ) {\n return '';\n }\n return severityTextDiv.textContent?.trim() ?? '';\n }\n\n public getSeverityTextTitle(): string {\n const severityTextDiv = this.getSeverityTextElement();\n if (!severityTextDiv) {\n throw new Error('Severity text element not found');\n }\n return severityTextDiv.title;\n }\n\n public dispatchEventToSeverityText(event: MouseEvent): void {\n const severityTextDiv = this.getSeverityTextElement();\n if (!severityTextDiv) {\n throw new Error('Severity text element not found');\n }\n severityTextDiv.dispatchEvent(event);\n processUpdates();\n }\n\n private getSeverityTextElement(): HTMLDivElement \| null {\n return this.element.shadowRoot!.querySelector('.severity-text');\n }\n}\n"]}
1	+ {"version":3,"file":"severity-pattern.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/severity/testing/severity-pattern.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE;;GAEG;AACH,MAAM,OAAO,yBAAyB;IAClC,YAAoC,OAA0B;QAA1B,YAAO,GAAP,OAAO,CAAmB;IAAG,CAAC;IAE3D,wBAAwB;QAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IACI,CAAC,eAAe;eACb,gBAAgB,CAAC,eAAe,CAAC,CAAC,OAAO,KAAK,MAAM,EACzD,CAAC;YACC,OAAO,EAAE,CAAC;QACd,CAAC;QACD,OAAO,eAAe,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrD,CAAC;IAEM,oBAAoB;QACvB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,eAAe,CAAC,KAAK,CAAC;IACjC,CAAC;IAEM,2BAA2B,CAAC,KAAiB;QAChD,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,cAAc,EAAE,CAAC;IACrB,CAAC;IAEM,iBAAiB;QACpB,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACvD,CAAC;QACD,eAAe,CAAC,KAAK,EAAE,CAAC;IAC5B,CAAC;IAEO,sBAAsB;QAC1B,OAAO,IAAI,CAAC,OAAO,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACpE,CAAC;CACJ","sourcesContent":["import type { FoundationElement } from '@ni/fast-foundation';\nimport { processUpdates } from '../../../testing/async-helpers';\n\n/*\n A page object for the elements that use the error pattern mixin.\n */\nexport class SeverityPatternPageObject {\n public constructor(private readonly element: FoundationElement) {}\n\n public getDisplayedSeverityText(): string {\n const severityTextDiv = this.getSeverityTextElement();\n if (\n !severityTextDiv\n \|\| getComputedStyle(severityTextDiv).display === 'none'\n ) {\n return '';\n }\n return severityTextDiv.textContent?.trim() ?? '';\n }\n\n public getSeverityTextTitle(): string {\n const severityTextDiv = this.getSeverityTextElement();\n if (!severityTextDiv) {\n throw new Error('Severity text element not found');\n }\n return severityTextDiv.title;\n }\n\n public dispatchEventToSeverityText(event: MouseEvent): void {\n const severityTextDiv = this.getSeverityTextElement();\n if (!severityTextDiv) {\n throw new Error('Severity text element not found');\n }\n severityTextDiv.dispatchEvent(event);\n processUpdates();\n }\n\n public clickSeverityText(): void {\n const severityTextDiv = this.getSeverityTextElement();\n if (!severityTextDiv) {\n throw new Error('Severity text element not found');\n }\n severityTextDiv.click();\n }\n\n private getSeverityTextElement(): HTMLDivElement \| null {\n return this.element.shadowRoot!.querySelector('.severity-text');\n }\n}\n"]}

package/dist/esm/patterns/step/models/step-internals.d.ts CHANGED Viewed

@@ -5,4 +5,5 @@ import { StepperOrientation } from '../../../stepper/types';
 export declare class StepInternals {
     orientation: StepperOrientation;
     last: boolean;
+    position: number;
 }

package/dist/esm/patterns/step/models/step-internals.js CHANGED Viewed

@@ -8,6 +8,7 @@ export class StepInternals {
     constructor() {
         this.orientation = StepperOrientation.horizontal;
         this.last = false;
+        this.position = 1;
     }
 }
 __decorate([
@@ -16,4 +17,7 @@ __decorate([
 __decorate([
     observable
 ], StepInternals.prototype, "last", void 0);
+__decorate([
+    observable
+], StepInternals.prototype, "position", void 0);
 //# sourceMappingURL=step-internals.js.map

package/dist/esm/patterns/step/models/step-internals.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"step-internals.js","sourceRoot":"","sources":["../../../../../src/patterns/step/models/step-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,MAAM,OAAO,aAAa;IAA1B;QAEW,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;QAGhE,SAAI,GAAG,KAAK,CAAC;IACxB,CAAC;CAAA;~~AAJU~~;IADN,UAAU;kDAC4D;AAGhE;IADN,UAAU;2CACS","sourcesContent":["import { observable } from '@ni/fast-element';\nimport { StepperOrientation } from '../../../stepper/types';\n\n/*\n Internal properties configurable for a step\n */\nexport class StepInternals {\n @observable\n public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n @observable\n public last = false;\n}\n"]}
1	+ {"version":3,"file":"step-internals.js","sourceRoot":"","sources":["../../../../../src/patterns/step/models/step-internals.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,MAAM,OAAO,aAAa;IAA1B;QAEW,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;QAGhE,SAAI,GAAG,KAAK,CAAC;QAGb,aAAQ,GAAG,CAAC,CAAC;IACxB,CAAC;CAAA;AAPU;IADN,UAAU;kDAC4D;AAGhE;IADN,UAAU;2CACS;AAGb;IADN,UAAU;+CACS","sourcesContent":["import { observable } from '@ni/fast-element';\nimport { StepperOrientation } from '../../../stepper/types';\n\n/*\n Internal properties configurable for a step\n */\nexport class StepInternals {\n @observable\n public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n @observable\n public last = false;\n\n @observable\n public position = 1;\n}\n"]}

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

@@ -1,12 +1,13 @@
 import { css } from '@ni/fast-element';
 import { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { display } from '../../utilities/style/display';
-import { buttonLabelFont, buttonLabelFontColor, smallPadding, bodyFont, errorTextFont, controlSlimHeight, borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, fillSelectedColor, passColor, failColor, warningColor, buttonLabelDisabledFontColor, iconColor, menuMinWidth, standardPadding, controlHeight, errorTextFontLineHeight } from '../../theme-provider/design-tokens';
+import { buttonLabelFont, buttonLabelFontColor, smallPadding, bodyFont, errorTextFont, controlSlimHeight, borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, fillSelectedColor, passColor, failColor, warningColor, buttonLabelDisabledFontColor, iconColor, standardPadding, controlHeight, errorTextFontLineHeight, } from '../../theme-provider/design-tokens';
 import { styles as severityStyles } from '../severity/styles';
 import { focusVisible } from '../../utilities/style/focus';
 import { userSelectNone } from '../../utilities/style/user-select';
 import { themeBehavior } from '../../utilities/style/theme';
 import { Theme } from '../../theme-provider/types';
+import { accessiblyHidden } from '../../utilities/style/accessibly-hidden';
 export const styles = css `
     @layer base, hover, focusVisible, active, disabled, top;
@@ -14,9 +15,6 @@ export const styles = css `
         ${display('inline-flex')}
         ${severityStyles}
         :host {
-            ${'' /* Based on text layout: Top padding + title height + subtitle height + bottom padding */}
-            height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight} + ${smallPadding});
-            width: ${menuMinWidth};
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
             white-space: nowrap;
@@ -30,21 +28,36 @@ export const styles = css `
             width: 100%;
             height: 100%;
             position: relative;
+            list-style: none;
+            --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});
+            --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});
         }
-        .control {
-            display: inline-flex;
-            align-items: start;
-            justify-content: flex-start;
+        .control {
+            display: inline-grid;
             height: 100%;
             width: 100%;
+            grid-template-areas:
+                "icon top-spacer top-spacer"
+                "icon title line"
+                "icon subtitle subtitle";
+            grid-template-columns:
+                ${controlHeight} ${'' /* Icon width */}
+                min-content ${'' /* Show the full title and subtitle */}
+                1fr; ${'' /* Line is only fr unit so fills remaining space */}
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+            column-gap: 4px;
+            align-items: start;
+            margin: 0;
+            padding: 0;
             color: inherit;
             background-color: transparent;
-            gap: ${smallPadding};
             cursor: pointer;
             outline: none;
-            margin: 0;
-            padding: 0 ${smallPadding} 0 0;
             --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);
@@ -58,6 +71,70 @@ export const styles = css `
             --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
         }
+        .container.last .control {
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+        }
+        .container.vertical .control {
+            ${'' /*
+Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:
+1----------------2
+|    title       |
+|    subtitle    |
+|  4-------------3
+|  | severity-text
+|  |
+6--5
+*/}
+            clip-path: polygon(
+                0% 0%,
+                100% 0%,
+                100% var(--ni-private-step-content-height),
+                var(--ni-private-step-content-offset) var(--ni-private-step-content-height),
+                var(--ni-private-step-content-offset) 100%,
+                0% 100%
+            );
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle"
+                "line subtitle"
+                "line .";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})
+                min-content
+                1fr;
+        }
+        .container.vertical.last .control {
+            grid-template-areas:
+                "icon top-spacer"
+                "icon title"
+                "icon subtitle";
+            grid-template-columns:
+                ${controlHeight}
+                min-content;
+            grid-template-rows:
+                ${smallPadding}
+                ${controlSlimHeight}
+                min-content;
+        }
         :host([severity="error"]) .control {
             --ni-private-step-icon-color: ${failColor};
             --ni-private-step-icon-border-color: ${failColor};
@@ -91,6 +168,7 @@ export const styles = css `
         }
         .icon {
+            grid-area: icon;
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -110,7 +188,7 @@ export const styles = css `
                 ${'' /* 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-resolution)),
+                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),
                 transparent 100%
             );
             background-origin: border-box;
@@ -148,18 +226,22 @@ export const styles = css `
                 outline-offset ${smallDelay} ease-in-out;
         }
-        .icon-slot {
+        .current-label {
+            ${accessiblyHidden}
+        }
+        .step-indicator {
             display: contents;
         }
-        :host([severity="error"]) .icon-slot,
-        :host([severity="warning"]) .icon-slot,
-        :host([severity="success"]) .icon-slot {
+        :host([severity="error"]) .step-indicator,
+        :host([severity="warning"]) .step-indicator,
+        :host([severity="success"]) .step-indicator {
             display: none;
         }
-        :host([selected]) .icon-slot,
-        :host([disabled]) .icon-slot {
+        :host([selected]) .step-indicator,
+        :host([disabled]) .step-indicator {
             display: contents;
         }
@@ -178,62 +260,80 @@ export const styles = css `
             display: none;
         }
-        .content {
-            display: inline-flex;
-            ${'' /* Control width - icon size */}
-            width: calc(100% - 32px);
-            flex-direction: column;
-            padding-top: ${smallPadding};
-            padding-bottom: ${smallPadding};
+        .top-spacer {
+            grid-area: top-spacer;
+            height: ${smallPadding};
         }
-        .title-wrapper {
-            display: inline-flex;
+        .title {
+            grid-area: title;
+            min-width: min-content;
             height: ${controlSlimHeight};
-            flex-direction: row;
-            align-items: center;
-            justify-content: start;
-            gap: ${smallPadding};
+            display: inline-block;
+            align-content: center;
             font: ${bodyFont};
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         [part='start'] {
             display: none;
         }
-        .title {
-            display: inline-block;
-            flex: none;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            ${'' /* Content width - (gap + line min width) */}
-            max-width: calc(100% - (${smallPadding} + ${standardPadding}));
-        }
         [part='end'] {
             display: none;
         }
         .line {
+            grid-area: line;
+            align-self: center;
+            justify-self: center;
             display: inline-block;
-            flex: 1;
+            width: 100%;
             min-width: ${standardPadding};
             height: 1px;
+            min-height: 1px;
             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;
         }
+        .container.last .line {
+            display: none;
+        }
+        .container.vertical .line {
+            width: 1px;
+            min-width: 1px;
+            height: 100%;
+            padding-top: ${smallPadding};
+            min-height: ${standardPadding};
+        }
         .subtitle {
+            grid-area: subtitle;
+            display: inline-block;
+            min-width: min-content;
+            height: ${errorTextFontLineHeight};
+            align-content: center;
             font: ${errorTextFont};
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            ${'' /* Content width */}
-            max-width: 100%;
+        }
+        .severity-text {
+            left: 0px;
+            top: var(--ni-private-step-content-height);
+        }
+        .container.vertical .severity-text {
+            width: calc(100% - var(--ni-private-step-content-offset));
+            left: var(--ni-private-step-content-offset);
         }
     }
@@ -277,6 +377,10 @@ export const styles = css `
         .control:hover .line {
             transform: scale(1, 2);
         }
+        .container.vertical .control:hover .line {
+            transform: scale(2, 1);
+        }
     }
     @layer focusVisible {
@@ -316,7 +420,7 @@ export const styles = css `
             --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
             --ni-private-step-line-color: ${borderHoverColor};
         }
         .control${focusVisible} .icon {
             border-width: 2px;
         }
@@ -329,6 +433,10 @@ export const styles = css `
         .control${focusVisible} .line {
             transform: scale(1, 2);
         }
+        .container.vertical .control${focusVisible} .line {
+            transform: scale(2, 1);
+        }
     }
     @layer active {

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 menuMinWidth,\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';\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 ${'' /* Based on text layout: Top padding + title height + subtitle height + bottom padding /}\n height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight} + ${smallPadding});\n width: ${menuMinWidth};\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 }\n\n .control { \n display: inline-flex;\n align-items: start;\n justify-content: flex-start;\n height: 100%;\n width: 100%;\n color: inherit;\n background-color: transparent;\n gap: ${smallPadding};\n cursor: pointer;\n outline: none;\n margin: 0; \n padding: 0 ${smallPadding} 0 0;\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 :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 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-resolution)),\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 .icon-slot {\n display: contents;\n }\n\n :host([severity=\"error\"]) .icon-slot,\n :host([severity=\"warning\"]) .icon-slot,\n :host([severity=\"success\"]) .icon-slot {\n display: none;\n }\n\n :host([selected]) .icon-slot,\n :host([disabled]) .icon-slot {\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 .content {\n display: inline-flex;\n ${'' / Control width - icon size /}\n width: calc(100% - 32px);\n flex-direction: column;\n padding-top: ${smallPadding};\n padding-bottom: ${smallPadding};\n }\n\n .title-wrapper {\n display: inline-flex;\n height: ${controlSlimHeight};\n flex-direction: row;\n align-items: center;\n justify-content: start;\n gap: ${smallPadding};\n font: ${bodyFont};\n }\n\n [part='start'] {\n display: none;\n }\n\n .title {\n display: inline-block;\n flex: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n ${'' / Content width - (gap + line min width) /}\n max-width: calc(100% - (${smallPadding} + ${standardPadding}));\n }\n\n [part='end'] {\n display: none;\n }\n \n .line {\n display: inline-block;\n flex: 1;\n min-width: ${standardPadding};\n height: 1px;\n background: var(--ni-private-step-line-color);\n transform: scale(1, 1);\n transition:\n background-color ${smallDelay} ease-in-out,\n transform ${smallDelay} ease-in-out;\n }\n\n .subtitle {\n font: ${errorTextFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n ${'' / Content width */}\n max-width: 100%;\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\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\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"]}
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"]}

package/dist/esm/patterns/step/testing/step-base.pageobject.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { StepPattern } from '../types';
+/**
+ * Page object base for step and anchor step
+ */
+export declare abstract class StepBasePageObject<T extends StepPattern = StepPattern> {
+    protected readonly element: T;
+    constructor(element: T);
+    getSuccessSeverityLabel(): string;
+    getErrorSeverityLabel(): string;
+    getWarningSeverityLabel(): string;
+    getSelectedStateLabel(): string;
+}

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

@@ -0,0 +1,40 @@
+import { iconCheckTag } from '../../../icons/check';
+import { iconExclamationMarkTag } from '../../../icons/exclamation-mark';
+import { iconTriangleFilledTag } from '../../../icons/triangle-filled';
+/**
+ * Page object base for step and anchor step
+ */
+export class StepBasePageObject {
+    constructor(element) {
+        this.element = element;
+    }
+    getSuccessSeverityLabel() {
+        const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconCheckTag}[aria-label]`)?.ariaLabel;
+        if (typeof label !== 'string') {
+            throw new Error('Success severity label not found');
+        }
+        return label;
+    }
+    getErrorSeverityLabel() {
+        const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconExclamationMarkTag}[aria-label]`)?.ariaLabel;
+        if (typeof label !== 'string') {
+            throw new Error('Error severity label not found');
+        }
+        return label;
+    }
+    getWarningSeverityLabel() {
+        const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconTriangleFilledTag}[aria-label]`)?.ariaLabel;
+        if (typeof label !== 'string') {
+            throw new Error('Warning severity label not found');
+        }
+        return label;
+    }
+    getSelectedStateLabel() {
+        const label = this.element.shadowRoot?.querySelector('.current-label')?.textContent;
+        if (typeof label !== 'string') {
+            throw new Error('Selected state label not found');
+        }
+        return label;
+    }
+}
+//# sourceMappingURL=step-base.pageobject.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"step-base.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/step/testing/step-base.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAGvE;;GAEG;AACH,MAAM,OAAgB,kBAAkB;IACpC,YACuB,OAAU;QAAV,YAAO,GAAP,OAAO,CAAG;IAC9B,CAAC;IAEG,uBAAuB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,YAAY,cAAc,CAAC,EAAE,SAAS,CAAC;QAC9G,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;QACxD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,qBAAqB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,sBAAsB,cAAc,CAAC,EAAE,SAAS,CAAC;QACxH,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,uBAAuB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,qBAAqB,cAAc,CAAC,EAAE,SAAS,CAAC;QACvH,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;QACxD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,qBAAqB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;QACpF,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ","sourcesContent":["import { iconCheckTag } from '../../../icons/check';\nimport { iconExclamationMarkTag } from '../../../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../../../icons/triangle-filled';\nimport type { StepPattern } from '../types';\n\n/**\n * Page object base for step and anchor step\n */\nexport abstract class StepBasePageObject<T extends StepPattern = StepPattern> {\n public constructor(\n protected readonly element: T,\n ) {}\n\n public getSuccessSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconCheckTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Success severity label not found');\n }\n return label;\n }\n\n public getErrorSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconExclamationMarkTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Error severity label not found');\n }\n return label;\n }\n\n public getWarningSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconTriangleFilledTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Warning severity label not found');\n }\n return label;\n }\n\n public getSelectedStateLabel(): string {\n const label = this.element.shadowRoot?.querySelector('.current-label')?.textContent;\n if (typeof label !== 'string') {\n throw new Error('Selected state label not found');\n }\n return label;\n }\n}\n"]}

package/dist/esm/patterns/step/types.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { SeverityPattern } from '../severity/types';
 import type { StepInternals } from './models/step-internals';
-export interface StepPattern extends SeverityPattern {
+export interface StepPattern extends SeverityPattern, HTMLElement {
     /**
      * Whether or not the step is disabled.
      */
@@ -14,7 +14,8 @@ export interface StepPattern extends SeverityPattern {
      */
     selected: boolean;
     /**
-     * @internal Internal step state set by the stepper
+     * Internal step state set by the stepper
+     * @internal
      */
     stepInternals: StepInternals;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/step/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SeverityPattern } from '../severity/types';\nimport type { StepInternals } from './models/step-internals';\n\nexport interface StepPattern extends SeverityPattern {\n /*\n Whether or not the step is disabled.\n /\n disabled: boolean;\n\n /\n Whether or not the step is readOnly.\n /\n readOnly: boolean;\n\n /\n Whether or not the step is selected.\n /\n selected: boolean;\n\n /\n ~~@internal~~ Internal step state set by the stepper\n */\n stepInternals: StepInternals;\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/step/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SeverityPattern } from '../severity/types';\nimport type { StepInternals } from './models/step-internals';\n\nexport interface StepPattern extends SeverityPattern, HTMLElement {\n /*\n Whether or not the step is disabled.\n /\n disabled: boolean;\n\n /\n Whether or not the step is readOnly.\n /\n readOnly: boolean;\n\n /\n Whether or not the step is selected.\n /\n selected: boolean;\n\n /\n Internal step state set by the stepper\n * @internal\n */\n stepInternals: StepInternals;\n}\n"]}

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

@@ -1,13 +1,14 @@
-import { html, ref, slotted, ViewTemplate, when } from '@ni/fast-element';
+import { html, ref, ViewTemplate, when } from '@ni/fast-element';
 import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
 import { severityTextTemplate } from '../patterns/severity/template';
 import { iconCheckTag } from '../icons/check';
 import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 import { iconTriangleFilledTag } from '../icons/triangle-filled';
 import { Severity } from '../patterns/severity/types';
+import { popupIconCompletedLabel, popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';
 export const template = (context, definition) => html `
     <template slot="step">
-        <div class="
+        <li class="
             container
             ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
             ${x => (x.stepInternals.last ? 'last' : '')}
@@ -50,28 +51,22 @@ export const template = (context, definition) => html `
                 aria-roledescription="${x => x.ariaRoledescription}"
                 ${ref('control')}
             >
-                <div class="icon">
-                    <div class="icon-slot"><slot ${slotted('defaultSlottedContent')}></slot></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>
                     <div class="icon-severity">
-                        ${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag}></${iconExclamationMarkTag}>`)}
-                        ${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag}></${iconTriangleFilledTag}>`)}
-                        ${when(x => x.severity === Severity.success, html `<${iconCheckTag}></${iconCheckTag}>`)}
-                    </div>
-                </div>
-                <div class="content">
-                    <div class="title-wrapper">
-                        ${startSlotTemplate(context, definition)}
-                        <div class="title"><slot name="title"></slot></div>
-                        ${endSlotTemplate(context, definition)}
-                        <div class="line"></div>
-                    </div>
-                    <div class="subtitle">
-                        <slot name="subtitle"></slot>
+                        ${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>`)}
+                        ${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>`)}
+                        ${when(x => x.severity === Severity.success, html `<${iconCheckTag} role="img" aria-label="${x => popupIconCompletedLabel.getValueFor(x)}"></${iconCheckTag}>`)}
                     </div>
                 </div>
+                <div class="top-spacer"></div>
+                <div class="title">${startSlotTemplate(context, definition)}<slot name="title"></slot>${endSlotTemplate(context, definition)}</div>
+                <div class="line"></div>
+                <div class="subtitle"><slot name="subtitle"></slot></div>
             </button>
             ${severityTextTemplate}
-        </div>
+        </li>
     </template>
 `;
 //# sourceMappingURL=template.js.map