@ni/nimble-components 35.3.3 → 35.3.4

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

@@ -0,0 +1,429 @@
+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 { 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';
+export const styles = css `
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${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;
+            outline: none;
+            border: none;
+        }
+
+        ${'' /* Container wrapper for severity text to position against */}
+        .container {
+            display: inline-flex;
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+
+        .control { 
+            display: inline-flex;
+            align-items: start;
+            justify-content: flex-start;
+            height: 100%;
+            width: 100%;
+            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);
+            --ni-private-step-icon-background-none-size: 0% 0%;
+
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: transparent;
+            --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;
+            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([severity="error"]) .control {
+            --ni-private-step-icon-color: ${failColor};
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control {
+            --ni-private-step-icon-color: ${warningColor};
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-color: ${passColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
+            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([selected]) .control {
+            --ni-private-step-icon-color: ${borderHoverColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --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};
+        }
+
+        .icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex: none;
+            height: ${controlHeight};
+            width: ${controlHeight};
+            ${userSelectNone};
+            font: ${buttonLabelFont};
+            color: var(--ni-private-step-icon-color);
+            ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);
+            border-style: solid;
+            border-radius: 100%;
+            border-color: var(--ni-private-step-icon-border-color);
+            border-width: 1px;
+            background-image: radial-gradient(
+                closest-side,
+                ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:
+        https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges
+    */}
+                var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-resolution)),
+                transparent 100%
+            );
+            background-origin: border-box;
+            background-size: var(--ni-private-step-icon-background-size);
+            background-repeat: no-repeat;
+            background-position: center center;
+            position: relative;
+            transition:
+                border-color ${smallDelay} ease-in-out,
+                border-width ${smallDelay} ease-in-out,
+                background-size ${smallDelay} ease-out;
+        }
+
+        :host([selected]) .icon {
+            border-width: 2px;
+        }
+
+        .icon::before {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            outline-color: var(--ni-private-step-icon-outline-inset-color);
+            outline-style: solid;
+            outline-width: 0px;
+            outline-offset: 0px;
+            border: 1px solid transparent;
+            border-radius: 100%;
+            color: transparent;
+            background-clip: border-box;
+            transition:
+                outline-color ${smallDelay} ease-in-out,
+                outline-width ${smallDelay} ease-in-out,
+                outline-offset ${smallDelay} ease-in-out;
+        }
+
+        .icon-slot {
+            display: contents;
+        }
+
+        :host([severity="error"]) .icon-slot,
+        :host([severity="warning"]) .icon-slot,
+        :host([severity="success"]) .icon-slot {
+            display: none;
+        }
+
+        :host([selected]) .icon-slot,
+        :host([disabled]) .icon-slot {
+            display: contents;
+        }
+
+        .icon-severity {
+            display: none;
+        }
+
+        :host([severity="error"]) .icon-severity,
+        :host([severity="warning"]) .icon-severity,
+        :host([severity="success"]) .icon-severity {
+            display: contents;
+        }
+
+        :host([selected]) .icon-severity,
+        :host([disabled]) .icon-severity {
+            display: none;
+        }
+
+        .content {
+            display: inline-flex;
+            ${'' /* Control width - icon size */}
+            width: calc(100% - 32px);
+            flex-direction: column;
+            padding-top: ${smallPadding};
+            padding-bottom: ${smallPadding};
+        }
+
+        .title-wrapper {
+            display: inline-flex;
+            height: ${controlSlimHeight};
+            flex-direction: row;
+            align-items: center;
+            justify-content: start;
+            gap: ${smallPadding};
+            font: ${bodyFont};
+        }
+
+        [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 {
+            display: inline-block;
+            flex: 1;
+            min-width: ${standardPadding};
+            height: 1px;
+            background: var(--ni-private-step-line-color);
+            transform: scale(1, 1);
+            transition:
+                background-color ${smallDelay} ease-in-out,
+                transform ${smallDelay} ease-in-out;
+        }
+
+        .subtitle {
+            font: ${errorTextFont};
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            ${'' /* Content width */}
+            max-width: 100%;
+        }
+    }
+
+    @layer hover {
+        .control:hover {
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        :host([severity="error"]) .control:hover {
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control:hover {
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control:hover {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${passColor};
+        }
+
+        :host([selected]) .control:hover {
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        .control:hover .icon {
+            border-width: 2px;
+        }
+
+        .control:hover .line {
+            transform: scale(1, 2);
+        }
+    }
+
+    @layer focusVisible {
+        .control${focusVisible} {
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --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};
+        }
+
+        :host([severity="error"]) .control${focusVisible} {
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-outline-inset-color: ${failColor};
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control${focusVisible} {
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-outline-inset-color: ${warningColor};
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control${focusVisible} {
+            --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
+            --ni-private-step-icon-outline-inset-color: transparent;
+            --ni-private-step-line-color: ${passColor};
+        }
+
+        :host([selected]) .control${focusVisible} {
+            --ni-private-step-icon-color: ${borderHoverColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
+            --ni-private-step-icon-outline-inset-color: ${borderHoverColor};
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+    
+        .control${focusVisible} .icon {
+            border-width: 2px;
+        }
+
+        .control${focusVisible} .icon::before {
+            outline-width: ${borderWidth};
+            outline-offset: -2px;
+        }
+
+        .control${focusVisible} .line {
+            transform: scale(1, 2);
+        }
+    }
+
+    @layer active {
+        .control:active {
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --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};
+        }
+
+        :host([severity="error"]) .control:active {
+            --ni-private-step-icon-border-color: ${failColor};
+            --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
+            --ni-private-step-line-color: ${failColor};
+        }
+
+        :host([severity="warning"]) .control:active {
+            --ni-private-step-icon-border-color: ${warningColor};
+            --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
+            --ni-private-step-line-color: ${warningColor};
+        }
+
+        :host([severity="success"]) .control:active {
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: ${passColor};
+            --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
+            --ni-private-step-line-color: ${passColor};
+        }
+
+        :host([selected]) .control:active {
+            --ni-private-step-icon-color: ${buttonLabelFontColor};
+            --ni-private-step-icon-border-color: ${borderHoverColor};
+            --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);
+            --ni-private-step-line-color: ${borderHoverColor};
+        }
+
+        .control:active .icon {
+            border-width: 2px;
+        }
+
+        .control:active .icon::before {
+            outline-width: 0px;
+            outline-offset: 0px;
+        }
+
+        .control:active .line {
+            transform: scale(1, 1);
+        }
+    }
+
+    @layer disabled {
+        :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-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;
+            --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);
+        }
+
+        :host([disabled]) .line {
+            transform: scale(1, 1);
+        }
+    }
+
+    @layer top {
+        @media (prefers-reduced-motion) {
+            .control {
+                transition-duration: 0s;
+            }
+        }
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            @layer base {
+                .control {
+                    --ni-private-step-icon-inverse-color: ${White};
+                }
+            }
+        `), themeBehavior(Theme.dark, css `
+            @layer base {
+                .control {
+                    --ni-private-step-icon-inverse-color: ${Black91};
+                }
+            }
+        `), themeBehavior(Theme.color, css `
+            @layer base {
+                .control {
+                    --ni-private-step-icon-inverse-color: ${Black15};
+                }
+
+                :host([severity="success"]) .control {
+                    --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
+                }
+            }
+        `));
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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"]}

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +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"]}

package/dist/esm/step/index.d.ts

@@ -1,12 +1,54 @@
-import { FoundationElement } from '@ni/fast-foundation';
+import { Button as FoundationButton } from '@ni/fast-foundation';
+import type { StepPattern } from '../patterns/step/types';
+import { StepInternals } from '../patterns/step/models/step-internals';
+import { StepSeverity } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-step': Step;
     }
 }
+declare const Step_base: (abstract new (...args: any[]) => {
+    severity: import("../patterns/severity/types").Severity;
+    severityText?: string;
+    severityHasOverflow: boolean;
+    readonly $fastController: import("@ni/fast-element").Controller;
+    $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}) & typeof FoundationButton;
 /**
  * A nimble-styled step for a stepper
  */
-export declare class Step extends FoundationElement {
+export declare class Step extends Step_base implements StepPattern {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    severity: StepSeverity;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: readonly
+     */
+    readOnly: boolean;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: tabindex
+     */
+    tabIndex: number;
+    /**
+     * @internal
+     */
+    readonly stepInternals: StepInternals;
 }
 export declare const stepTag = "nimble-step";
+export {};

package/dist/esm/step/index.js

@@ -1,15 +1,60 @@
-import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import { __decorate } from "tslib";
+import { Button as FoundationButton, DesignSystem } from '@ni/fast-foundation';
+import { attr, nullableNumberConverter } from '@ni/fast-element';
 import { styles } from './styles';
 import { template } from './template';
+import { mixinSeverityPattern } from '../patterns/severity/types';
+import { StepInternals } from '../patterns/step/models/step-internals';
+import { StepSeverity } from './types';
 /**
  * A nimble-styled step for a stepper
  */
-export class Step extends FoundationElement {
+export class Step extends mixinSeverityPattern(FoundationButton) {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * @remarks
+         * HTML Attribute: disabled
+         */
+        this.severity = StepSeverity.default;
+        /**
+         * @public
+         * @remarks
+         * HTML Attribute: readonly
+         */
+        this.readOnly = false;
+        /**
+         * @public
+         * @remarks
+         * HTML Attribute: selected
+         */
+        this.selected = false;
+        /**
+         * @internal
+         */
+        this.stepInternals = new StepInternals();
+    }
 }
+__decorate([
+    attr()
+], Step.prototype, "severity", void 0);
+__decorate([
+    attr({ attribute: 'readonly', mode: 'boolean' })
+], Step.prototype, "readOnly", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Step.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: 'tabindex', converter: nullableNumberConverter })
+], Step.prototype, "tabIndex", void 0);
 const nimbleStep = Step.compose({
     baseName: 'step',
     template,
-    styles
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());
 export const stepTag = 'nimble-step';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,iBAAiB;CAAG;AAE9C,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IAC5B,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-step': Step;\n    }\n}\n\n/**\n * A nimble-styled step for a stepper\n */\nexport class Step extends FoundationElement {}\n\nconst nimbleStep = Step.compose({\n    baseName: 'step',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());\nexport const stepTag = 'nimble-step';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,YAAY,EACf,MAAM,qBAAqB,CAAC;AAC7B,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;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,oBAAoB,CAAC,gBAAgB,CAAC;IAAhE;;QACI;;;;WAIG;QAEI,aAAQ,GAAiB,YAAY,CAAC,OAAO,CAAC;QAErD;;;;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;AA9BU;IADN,IAAI,EAAE;sCAC8C;AAQ9C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACzB;AAQjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACF;AAQR;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;sCAClC;AAQtC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAgB;IAC3C,QAAQ,EAAE,MAAM;IAChB,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,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import {\n    Button as FoundationButton,\n    type ButtonOptions,\n    DesignSystem\n} from '@ni/fast-foundation';\nimport { attr, nullableNumberConverter } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { StepPattern } from '../patterns/step/types';\nimport { mixinSeverityPattern } from '../patterns/severity/types';\nimport { StepInternals } from '../patterns/step/models/step-internals';\nimport { StepSeverity } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-step': Step;\n    }\n}\n\n/**\n * A nimble-styled step for a stepper\n */\nexport class Step extends mixinSeverityPattern(FoundationButton) implements StepPattern {\n    /**\n     * @public\n     * @remarks\n     * HTML Attribute: disabled\n     */\n    @attr()\n    public severity: StepSeverity = StepSeverity.default;\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 nimbleStep = Step.compose<ButtonOptions>({\n    baseName: 'step',\n    template,\n    styles,\n    shadowOptions: {\n        delegatesFocus: true\n    }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());\nexport const stepTag = 'nimble-step';\n"]}

package/dist/esm/step/styles.js

@@ -1,6 +1,14 @@
 import { css } from '@ni/fast-element';
-import { display } from '../utilities/style/display';
+import { styles as stepStyles } from '../patterns/step/styles';
 export const styles = css `
-    ${display('flex')}
+    ${stepStyles}
+    ${'' /* Button specific styles */}
+    @layer base {
+        .control {
+            font: inherit;
+            border: none;
+            text-align: start;
+        }
+    }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/step/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/step/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,UAAU;MACV,EAAE,CAAC,4BAA4B;;;;;;;;CAQpC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { styles as stepStyles } from '../patterns/step/styles';\n\nexport const styles = css`\n    ${stepStyles}\n    ${'' /* Button specific styles */}\n    @layer base {\n        .control {\n            font: inherit;\n            border: none;\n            text-align: start;\n        }\n    }\n`;\n"]}

package/dist/esm/step/template.d.ts

@@ -1,2 +1,4 @@
+import { ViewTemplate } from '@ni/fast-element';
+import { type ButtonOptions, type FoundationElementTemplate } from '@ni/fast-foundation';
 import type { Step } from '.';
-export declare const template: import("@ni/fast-element").ViewTemplate<Step, any>;
+export declare const template: FoundationElementTemplate<ViewTemplate<Step>, ButtonOptions>;