@ni/nimble-components 35.3.3 → 35.4.0

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

@@ -1,12 +1,60 @@
-import { FoundationElement } from '@ni/fast-foundation';
+import { AnchorBase } from '../anchor-base';
+import type { StepPattern } from '../patterns/step/types';
+import { StepInternals } from '../patterns/step/models/step-internals';
+import { AnchorStepSeverity } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-anchor-step': AnchorStep;
     }
 }
+declare const AnchorStep_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 AnchorBase;
 /**
  * A nimble-styled anchor step for a stepper
  */
-export declare class AnchorStep extends FoundationElement {
+export declare class AnchorStep extends AnchorStep_base implements StepPattern {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    severity: AnchorStepSeverity;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * @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 anchorStepTag = "nimble-anchor-step";
+export {};

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

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

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

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

package/dist/esm/anchor-step/styles.js

@@ -1,6 +1,12 @@
 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}
+    ${'' /* Anchor specific styles */}
+    @layer base {
+        .control {
+            text-decoration: none;
+        }
+    }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-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/anchor-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;;;;;;CAMpC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { styles as stepStyles } from '../patterns/step/styles';\n\nexport const styles = css`\n    ${stepStyles}\n    ${'' /* Anchor specific styles */}\n    @layer base {\n        .control {\n            text-decoration: none;\n        }\n    }\n`;\n"]}

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

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

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

@@ -1,5 +1,73 @@
-import { html } from '@ni/fast-element';
-export const template = html `
-    <template>anchor step</template>
+import { html, ref, slotted, ViewTemplate, when } from '@ni/fast-element';
+import { startSlotTemplate, endSlotTemplate } from '@ni/fast-foundation';
+import { severityTextTemplate } from '../patterns/severity/template';
+import { Severity } from '../patterns/severity/types';
+import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+import { iconTriangleFilledTag } from '../icons/triangle-filled';
+import { iconCheckTag } from '../icons/check';
+export const template = (context, definition) => html `
+    <template slot="step">
+        <div class="
+            container
+            ${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
+            ${x => (x.stepInternals.last ? 'last' : '')}
+        ">
+            <a
+                class="control"
+                part="control"
+                download="${x => x.download}"
+                href=${x => (x.disabled ? null : x.href)}
+                hreflang="${x => x.hreflang}"
+                ping="${x => x.ping}"
+                referrerpolicy="${x => x.referrerpolicy}"
+                rel="${x => x.rel}"
+                target="${x => x.target}"
+                type="${x => x.type}"
+                tabindex="${x => x.tabIndex}"
+                aria-atomic="${x => x.ariaAtomic}"
+                aria-busy="${x => x.ariaBusy}"
+                aria-controls="${x => x.ariaControls}"
+                aria-current="${x => x.ariaCurrent}"
+                aria-describedby="${x => x.ariaDescribedby}"
+                aria-details="${x => x.ariaDetails}"
+                aria-disabled="${x => x.ariaDisabled}"
+                aria-errormessage="${x => x.ariaErrormessage}"
+                aria-expanded="${x => x.ariaExpanded}"
+                aria-flowto="${x => x.ariaFlowto}"
+                aria-haspopup="${x => x.ariaHaspopup}"
+                aria-hidden="${x => x.ariaHidden}"
+                aria-invalid="${x => x.ariaInvalid}"
+                aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+                aria-label="${x => x.ariaLabel}"
+                aria-labelledby="${x => x.ariaLabelledby}"
+                aria-live="${x => x.ariaLive}"
+                aria-owns="${x => x.ariaOwns}"
+                aria-relevant="${x => x.ariaRelevant}"
+                aria-roledescription="${x => x.ariaRoledescription}"
+                ${ref('control')}
+            >
+                <div class="icon"> 
+                    <div class="icon-slot"><slot ${slotted('defaultSlottedContent')}></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>
+                    </div>
+                </div>
+            </a>
+            ${severityTextTemplate}
+        </div>
+    </template>
 `;
 //# sourceMappingURL=template.js.map

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

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

package/dist/esm/anchor-step/types.d.ts

@@ -0,0 +1,7 @@
+export declare const AnchorStepSeverity: {
+    readonly default: undefined;
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly success: "success";
+};
+export type AnchorStepSeverity = (typeof AnchorStepSeverity)[keyof typeof AnchorStepSeverity];

package/dist/esm/anchor-step/types.js

@@ -0,0 +1,3 @@
+import { Severity } from '../patterns/severity/types';
+export const AnchorStepSeverity = Severity;
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/anchor-step/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC","sourcesContent":["import { Severity } from '../patterns/severity/types';\n\nexport const AnchorStepSeverity = Severity;\nexport type AnchorStepSeverity = (typeof AnchorStepSeverity)[keyof typeof AnchorStepSeverity];\n"]}

package/dist/esm/breadcrumb-item/styles.js

@@ -3,7 +3,7 @@ import { display } from '../utilities/style/display';
 import { borderHoverColor, controlHeight, iconSize, linkActiveFontColor, linkDisabledFontColor, linkFont, linkFontColor, mediumPadding, placeholderFontColor } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `
-    @layer base, hover, focusVisible, active, disabled;
+    @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display('inline-flex')}

package/dist/esm/breadcrumb-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;sBAGV,aAAa;;cAErB;AACE;kDACkD,CAAC,EACvD;qBACS,qBAAqB;oBACtB,QAAQ;;;;;;;;;qBASP,aAAa;;;;;;;;;;;;;;;;;;;;4BAoBN,aAAa;6BACZ,aAAa;;;;;;;;;qBASrB,QAAQ;sBACP,QAAQ;oBACV,oBAAoB;;;;;;;;;;;kBAWtB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,mBAAmB;;;;;;;;qBAQnB,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderHoverColor,\n    controlHeight,\n    iconSize,\n    linkActiveFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    mediumPadding,\n    placeholderFontColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            height: ${controlHeight};\n\n            ${\n                /* When href removed the .control element is also removed\n                so this becomes the fallback color for the slot */ ''\n            }\n            color: ${linkDisabledFontColor};\n            font: ${linkFont};\n        }\n\n        .listitem {\n            display: flex;\n            align-items: center;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-decoration: none;\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n\n        .separator {\n            padding-left: ${mediumPadding};\n            padding-right: ${mediumPadding};\n        }\n\n        slot[name='separator'] {\n            display: flex;\n            align-items: center;\n        }\n\n        slot[name='separator'] svg {\n            width: ${iconSize};\n            height: ${iconSize};\n            fill: ${placeholderFontColor};\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n            color: ${borderHoverColor};\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;sBAGV,aAAa;;cAErB;AACE;kDACkD,CAAC,EACvD;qBACS,qBAAqB;oBACtB,QAAQ;;;;;;;;;qBASP,aAAa;;;;;;;;;;;;;;;;;;;;4BAoBN,aAAa;6BACZ,aAAa;;;;;;;;;qBASrB,QAAQ;sBACP,QAAQ;oBACV,oBAAoB;;;;;;;;;;;kBAWtB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,mBAAmB;;;;;;;;qBAQnB,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderHoverColor,\n    controlHeight,\n    iconSize,\n    linkActiveFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    mediumPadding,\n    placeholderFontColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline-flex')}\n\n        :host {\n            height: ${controlHeight};\n\n            ${\n                /* When href removed the .control element is also removed\n                so this becomes the fallback color for the slot */ ''\n            }\n            color: ${linkDisabledFontColor};\n            font: ${linkFont};\n        }\n\n        .listitem {\n            display: flex;\n            align-items: center;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-decoration: none;\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n\n        .separator {\n            padding-left: ${mediumPadding};\n            padding-right: ${mediumPadding};\n        }\n\n        slot[name='separator'] {\n            display: flex;\n            align-items: center;\n        }\n\n        slot[name='separator'] svg {\n            width: ${iconSize};\n            height: ${iconSize};\n            fill: ${placeholderFontColor};\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n            color: ${borderHoverColor};\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}

package/dist/esm/patterns/severity/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").CSSDirective;

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

@@ -0,0 +1,33 @@
+import { cssPartial } from '@ni/fast-element';
+import { failColor, errorTextFontLineHeight, errorTextFont, buttonLabelFontColor, warningFontColor } from '../../theme-provider/design-tokens';
+// These styles end up inside a @layer block so must use the
+// cssPartial tag instead of the css tag
+export const styles = cssPartial `
+    .severity-text {
+        display: none;
+        font: ${errorTextFont};
+        color: ${buttonLabelFontColor};
+        width: 100%;
+        position: absolute;
+        ${'' /* The -2px modifier of the bottom position is to intentionally have the severity text slightly overlap the control by 2px */}
+        bottom: calc(-1 * (${errorTextFontLineHeight} - 2px));
+        left: 0px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    :host([severity="error"]) .severity-text {
+        display: block;
+        color: ${failColor};
+    }
+
+    :host([severity="warning"]) .severity-text {
+        display: block;
+        color: ${warningFontColor};
+    }
+    .severity-text:empty {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/severity/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,SAAS,EACT,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,oCAAoC,CAAC;AAE5C,4DAA4D;AAC5D,wCAAwC;AACxC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAA;;;gBAGhB,aAAa;iBACZ,oBAAoB;;;UAG3B,EAAE,CAAC,6HAA6H;6BAC7G,uBAAuB;;;;;;;;;iBASnC,SAAS;;;;;iBAKT,gBAAgB;;;;;CAKhC,CAAC","sourcesContent":["import { cssPartial } from '@ni/fast-element';\nimport {\n    failColor,\n    errorTextFontLineHeight,\n    errorTextFont,\n    buttonLabelFontColor,\n    warningFontColor\n} from '../../theme-provider/design-tokens';\n\n// These styles end up inside a @layer block so must use the\n// cssPartial tag instead of the css tag\nexport const styles = cssPartial`\n    .severity-text {\n        display: none;\n        font: ${errorTextFont};\n        color: ${buttonLabelFontColor};\n        width: 100%;\n        position: absolute;\n        ${'' /* The -2px modifier of the bottom position is to intentionally have the severity text slightly overlap the control by 2px */}\n        bottom: calc(-1 * (${errorTextFontLineHeight} - 2px));\n        left: 0px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n    \n    :host([severity=\"error\"]) .severity-text {\n        display: block;\n        color: ${failColor};\n    }\n\n    :host([severity=\"warning\"]) .severity-text {\n        display: block;\n        color: ${warningFontColor};\n    }\n    .severity-text:empty {\n        display: none;\n    }\n`;\n"]}

package/dist/esm/patterns/severity/template.d.ts

@@ -0,0 +1,2 @@
+import type { SeverityPattern } from './types';
+export declare const severityTextTemplate: import("@ni/fast-element").ViewTemplate<SeverityPattern, any>;

package/dist/esm/patterns/severity/template.js

@@ -0,0 +1,10 @@
+import { html } from '@ni/fast-element';
+import { overflow } from '../../utilities/directive/overflow';
+export const severityTextTemplate = html `
+    <div
+        class="severity-text"
+        ${overflow('severityHasOverflow')}
+        title="${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}"
+        aria-live="polite"
+    >${x => x.severityText}</div>`;
+//# sourceMappingURL=template.js.map

package/dist/esm/patterns/severity/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/patterns/severity/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,IAAI,CAAiB;;;UAG/C,QAAQ,CAAC,qBAAqB,CAAC;iBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;;OAErF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,QAAQ,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport type { SeverityPattern } from './types';\nimport { overflow } from '../../utilities/directive/overflow';\n\nexport const severityTextTemplate = html<SeverityPattern>`\n    <div\n        class=\"severity-text\"\n        ${overflow('severityHasOverflow')}\n        title=\"${x => (x.severityHasOverflow && x.severityText ? x.severityText : undefined)}\"\n        aria-live=\"polite\"\n    >${x => x.severityText}</div>`;\n"]}

package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.d.ts

@@ -0,0 +1,12 @@
+import type { FoundationElement } from '@ni/fast-foundation';
+/**
+ * A page object for the elements that use the error pattern mixin.
+ */
+export declare class SeverityPatternPageObject {
+    private readonly element;
+    constructor(element: FoundationElement);
+    getDisplayedSeverityText(): string;
+    getSeverityTextTitle(): string;
+    dispatchEventToSeverityText(event: MouseEvent): void;
+    private getSeverityTextElement;
+}

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

@@ -0,0 +1,36 @@
+import { processUpdates } from '../../../testing/async-helpers';
+/**
+ * A page object for the elements that use the error pattern mixin.
+ */
+export class SeverityPatternPageObject {
+    constructor(element) {
+        this.element = element;
+    }
+    getDisplayedSeverityText() {
+        const severityTextDiv = this.getSeverityTextElement();
+        if (!severityTextDiv
+            || getComputedStyle(severityTextDiv).display === 'none') {
+            return '';
+        }
+        return severityTextDiv.textContent?.trim() ?? '';
+    }
+    getSeverityTextTitle() {
+        const severityTextDiv = this.getSeverityTextElement();
+        if (!severityTextDiv) {
+            throw new Error('Severity text element not found');
+        }
+        return severityTextDiv.title;
+    }
+    dispatchEventToSeverityText(event) {
+        const severityTextDiv = this.getSeverityTextElement();
+        if (!severityTextDiv) {
+            throw new Error('Severity text element not found');
+        }
+        severityTextDiv.dispatchEvent(event);
+        processUpdates();
+    }
+    getSeverityTextElement() {
+        return this.element.shadowRoot.querySelector('.severity-text');
+    }
+}
+//# sourceMappingURL=severity-pattern.pageobject.js.map

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

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

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

@@ -0,0 +1,31 @@
+import { FASTElement } from '@ni/fast-element';
+export declare const Severity: {
+    readonly default: undefined;
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly success: "success";
+};
+export type Severity = (typeof Severity)[keyof typeof Severity];
+export interface SeverityPattern {
+    severityText?: string;
+    severity: Severity;
+    severityHasOverflow: boolean;
+}
+type FASTElementConstructor = abstract new (...args: any[]) => FASTElement;
+export declare function mixinSeverityPattern<TBase extends FASTElementConstructor>(base: TBase): (abstract new (...args: any[]) => {
+    /**
+     * The severity state of the element
+     */
+    severity: Severity;
+    /**
+     * The severity text that will be displayed when a component is not in the default severity state
+     */
+    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;
+}) & TBase;
+export {};

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

@@ -0,0 +1,28 @@
+import { attr, FASTElement, observable } from '@ni/fast-element';
+export const Severity = {
+    default: undefined,
+    error: 'error',
+    warning: 'warning',
+    success: 'success',
+};
+// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+export function mixinSeverityPattern(base) {
+    /**
+     * Mixin to provide severity text related properties to an element
+     */
+    class SeverityPatternElement extends base {
+        constructor() {
+            super(...arguments);
+            /* @internal
+             * Indicates if the severity text has overflowed its container. The value should not be
+             * set directly. Instead, it is used with the `overflow` directive.
+             */
+            this.severityHasOverflow = false;
+        }
+    }
+    attr({ attribute: 'severity-text' })(SeverityPatternElement.prototype, 'severityText');
+    observable(SeverityPatternElement.prototype, 'severityHasOverflow');
+    return SeverityPatternElement;
+}
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/severity/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACZ,CAAC;AAYX,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,oBAAoB,CAChC,IAAW;IAEX;;OAEG;IACH,MAAe,sBAAuB,SAAQ,IAAI;QAAlD;;YAWI;;;eAGG;YACI,wBAAmB,GAAG,KAAK,CAAC;QACvC,CAAC;KAAA;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC,CAChC,sBAAsB,CAAC,SAAS,EAChC,cAAc,CACjB,CAAC;IACF,UAAU,CAAC,sBAAsB,CAAC,SAAS,EAAE,qBAAqB,CAAC,CAAC;IACpE,OAAO,sBAAsB,CAAC;AAClC,CAAC","sourcesContent":["import { attr, FASTElement, observable } from '@ni/fast-element';\n\nexport const Severity = {\n    default: undefined,\n    error: 'error',\n    warning: 'warning',\n    success: 'success',\n} as const;\nexport type Severity = (typeof Severity)[keyof typeof Severity];\n\nexport interface SeverityPattern {\n    severityText?: string;\n    severity: Severity;\n    severityHasOverflow: boolean;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype FASTElementConstructor = abstract new (...args: any[]) => FASTElement;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinSeverityPattern<TBase extends FASTElementConstructor>(\n    base: TBase\n) {\n    /**\n     * Mixin to provide severity text related properties to an element\n     */\n    abstract class SeverityPatternElement extends base implements SeverityPattern {\n        /**\n         * The severity state of the element\n         */\n        public abstract severity: Severity;\n\n        /**\n         * The severity text that will be displayed when a component is not in the default severity state\n         */\n        public severityText?: string;\n\n        /* @internal\n         * Indicates if the severity text has overflowed its container. The value should not be\n         * set directly. Instead, it is used with the `overflow` directive.\n         */\n        public severityHasOverflow = false;\n    }\n    attr({ attribute: 'severity-text' })(\n        SeverityPatternElement.prototype,\n        'severityText'\n    );\n    observable(SeverityPatternElement.prototype, 'severityHasOverflow');\n    return SeverityPatternElement;\n}\n"]}

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

@@ -0,0 +1,8 @@
+import { StepperOrientation } from '../../../stepper/types';
+/**
+ * Internal properties configurable for a step
+ */
+export declare class StepInternals {
+    orientation: StepperOrientation;
+    last: boolean;
+}

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

@@ -0,0 +1,19 @@
+import { __decorate } from "tslib";
+import { observable } from '@ni/fast-element';
+import { StepperOrientation } from '../../../stepper/types';
+/**
+ * Internal properties configurable for a step
+ */
+export class StepInternals {
+    constructor() {
+        this.orientation = StepperOrientation.horizontal;
+        this.last = false;
+    }
+}
+__decorate([
+    observable
+], StepInternals.prototype, "orientation", void 0);
+__decorate([
+    observable
+], StepInternals.prototype, "last", void 0);
+//# sourceMappingURL=step-internals.js.map

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

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

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

@@ -0,0 +1 @@
+export declare const styles: import("@ni/fast-element").ElementStyles;