@ni/nimble-components 35.5.4 → 35.5.6

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/stepper/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAS7C;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;IAA9C;;QAEW,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;IAyB3E,CAAC;IAnBW,kBAAkB;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,YAAY;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACd,OAAO;QACX,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AAzBU;IADN,IAAI;4CACkE;AAIhE;IADN,UAAU;sCACoB;AAuBnC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { StepperOrientation } from './types';\nimport type { StepPattern } from '../patterns/step/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-stepper': Stepper;\n    }\n}\n\n/**\n * A nimble-styled stepper\n */\nexport class Stepper extends FoundationElement {\n    @attr\n    public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n    /** @internal */\n    @observable\n    public steps?: (StepPattern)[];\n\n    private orientationChanged(): void {\n        this.updateStepInternals();\n    }\n\n    private stepsChanged(): void {\n        this.updateStepInternals();\n    }\n\n    private updateStepInternals(): void {\n        if (!this.steps) {\n            return;\n        }\n        const lastIndex = this.steps.length - 1;\n        this.steps.forEach((step, index) => {\n            step.stepInternals.orientation = this.orientation;\n            step.stepInternals.last = index === lastIndex;\n            step.stepInternals.position = index + 1;\n        });\n    }\n}\n\nconst nimbleStepper = Stepper.compose({\n    baseName: 'stepper',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());\nexport const stepperTag = 'nimble-stepper';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/stepper/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { StepperOrientation } from './types';\nimport type { StepPattern } from '../patterns/step/types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-stepper': Stepper;\n    }\n}\n\n/**\n * A nimble-styled stepper\n */\nexport class Stepper extends FoundationElement {\n    @attr\n    public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n    /** @internal */\n    @observable\n    public showScrollButtons = false;\n\n    /** @internal */\n    @observable\n    public steps?: (StepPattern)[];\n\n    /** @internal */\n    public list!: HTMLElement;\n\n    /** @internal */\n    public readonly startScrollButton?: HTMLElement;\n\n    private listIntersectionObserver?: IntersectionObserver;\n\n    /** @internal */\n    public onScrollStartClick(): void {\n        if (this.isHorizontal()) {\n            this.list.scrollBy({\n                left: -this.list.clientWidth,\n                behavior: 'smooth'\n            });\n        } else {\n            this.list.scrollBy({\n                top: -this.list.clientHeight,\n                behavior: 'smooth'\n            });\n        }\n    }\n\n    /** @internal */\n    public onScrollEndClick(): void {\n        if (this.isHorizontal()) {\n            this.list.scrollBy({\n                left: this.list.clientWidth,\n                behavior: 'smooth'\n            });\n        } else {\n            this.list.scrollBy({\n                top: this.list.clientHeight,\n                behavior: 'smooth'\n            });\n        }\n    }\n\n    /** @internal */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        // Steps fill parent container so can't rely on a resize observer to track their space usage.\n        // Instead directly track each step's occlusion with intersection observer which is more compute intensive.\n        // When available can switch to container scroll state queries, see: https://github.com/ni/nimble/issues/2922\n        this.listIntersectionObserver = new IntersectionObserver(_ => {\n            this.handleListOverflow();\n        }, {\n            root: this.list,\n            threshold: 1.0\n        });\n    }\n\n    /** @internal */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        this.listIntersectionObserver?.disconnect();\n    }\n\n    /** @internal */\n    public isHorizontal(): boolean {\n        return this.orientation !== StepperOrientation.vertical;\n    }\n\n    private orientationChanged(): void {\n        this.updateStepInternals();\n    }\n\n    private stepsChanged(): void {\n        this.updateStepInternals();\n        this.listIntersectionObserver?.disconnect();\n        if (this.steps) {\n            this.steps.forEach(step => this.listIntersectionObserver?.observe(step));\n        }\n    }\n\n    private updateStepInternals(): void {\n        if (!this.steps) {\n            return;\n        }\n        const lastIndex = this.steps.length - 1;\n        this.steps.forEach((step, index) => {\n            step.stepInternals.orientation = this.isHorizontal()\n                ? StepperOrientation.horizontal\n                : StepperOrientation.vertical;\n            step.stepInternals.last = index === lastIndex;\n            step.stepInternals.position = index + 1;\n        });\n    }\n\n    private handleListOverflow(): void {\n        let listVisibleSize = this.isHorizontal()\n            ? this.list.clientWidth\n            : this.list.clientHeight;\n        if (listVisibleSize !== undefined) {\n            const buttonSize = this.isHorizontal()\n                ? this.startScrollButton?.clientWidth ?? 0\n                : this.startScrollButton?.clientHeight ?? 0;\n            listVisibleSize = Math.ceil(listVisibleSize);\n            if (this.showScrollButtons) {\n                listVisibleSize += buttonSize * 2;\n            }\n            const listScrollSize = this.isHorizontal()\n                ? this.list.scrollWidth\n                : this.list.scrollHeight;\n            this.showScrollButtons = listVisibleSize < listScrollSize;\n        }\n    }\n}\n\nconst nimbleStepper = Stepper.compose({\n    baseName: 'stepper',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());\nexport const stepperTag = 'nimble-stepper';\n"]}

package/dist/esm/stepper/styles.js

@@ -1,20 +1,66 @@
 import { css } from '@ni/fast-element';
 import { display } from '../utilities/style/display';
-import { smallPadding } from '../theme-provider/design-tokens';
+import { controlHeight, smallPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}
 
     :host {
         border: none;
-        gap: ${smallPadding};
     }
 
     :host([orientation="vertical"]) {
         flex-direction: column;
     }
 
-    ol {
-        display: contents;
+    .scroll-button.start {
+        width: ${controlHeight};
+        height: ${controlHeight};
+        margin-right: ${smallPadding};
+        margin-bottom: 0px;
+    }
+
+    :host([orientation="vertical"]) .scroll-button.start {
+        margin-right: 0px;
+        margin-bottom: ${smallPadding};
+    }
+
+    .list {
+        flex-grow: 1;
+        display: inline-flex;
+        gap: ${smallPadding};
+        scrollbar-width: none;
+        padding: 0;
+        margin: 0;
+
+        flex-direction: row;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        width: max-content;
+        max-width: 100%;
+        height: auto;
+        max-height: none;
+    }
+
+    :host([orientation="vertical"]) .list {
+        flex-direction: column;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        width: auto;
+        max-width: none;
+        height: max-content;
+        max-height: 100%;
+    }
+
+    .scroll-button.end {
+        width: ${controlHeight};
+        height: ${controlHeight};
+        margin-left: ${smallPadding};
+        margin-top: 0px;
+    }
+
+    :host([orientation="vertical"]) .scroll-button.end {
+        margin-left: 0px;
+        margin-top: ${smallPadding};
     }
 
     slot[name="step"]::slotted(*) {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/stepper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;eAIb,YAAY;;;;;;;;;;;;;;;;;;CAkB1B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { smallPadding } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        border: none;\n        gap: ${smallPadding};\n    }\n\n    :host([orientation=\"vertical\"]) {\n        flex-direction: column;\n    }\n\n    ol {\n        display: contents;\n    }\n\n    slot[name=\"step\"]::slotted(*) {\n        flex-grow: 1;\n    }\n\n    slot[name=\"step\"]::slotted(:last-child) {\n        flex-grow: 0;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/stepper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE9E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;iBAWX,aAAa;kBACZ,aAAa;wBACP,YAAY;;;;;;yBAMX,YAAY;;;;;;eAMtB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;iBAyBV,aAAa;kBACZ,aAAa;uBACR,YAAY;;;;;;sBAMb,YAAY;;;;;;;;;;CAUjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { controlHeight, smallPadding } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        border: none;\n    }\n\n    :host([orientation=\"vertical\"]) {\n        flex-direction: column;\n    }\n\n    .scroll-button.start {\n        width: ${controlHeight};\n        height: ${controlHeight};\n        margin-right: ${smallPadding};\n        margin-bottom: 0px;\n    }\n\n    :host([orientation=\"vertical\"]) .scroll-button.start {\n        margin-right: 0px;\n        margin-bottom: ${smallPadding};\n    }\n\n    .list {\n        flex-grow: 1;\n        display: inline-flex;\n        gap: ${smallPadding};\n        scrollbar-width: none;\n        padding: 0;\n        margin: 0;\n\n        flex-direction: row;\n        overflow-x: scroll;\n        overflow-y: hidden;\n        width: max-content;\n        max-width: 100%;\n        height: auto;\n        max-height: none;\n    }\n\n    :host([orientation=\"vertical\"]) .list {\n        flex-direction: column;\n        overflow-x: hidden;\n        overflow-y: scroll;\n        width: auto;\n        max-width: none;\n        height: max-content;\n        max-height: 100%;\n    }\n\n    .scroll-button.end {\n        width: ${controlHeight};\n        height: ${controlHeight};\n        margin-left: ${smallPadding};\n        margin-top: 0px;\n    }\n\n    :host([orientation=\"vertical\"]) .scroll-button.end {\n        margin-left: 0px;\n        margin-top: ${smallPadding};\n    }\n\n    slot[name=\"step\"]::slotted(*) {\n        flex-grow: 1;\n    }\n\n    slot[name=\"step\"]::slotted(:last-child) {\n        flex-grow: 0;\n    }\n`;\n"]}

package/dist/esm/stepper/template.js

@@ -1,6 +1,38 @@
-import { html, slotted } from '@ni/fast-element';
-export const template = html `<ol><slot
-        name="step"
-        ${slotted('steps')}
-    ></slot></ol>`;
+import { html, ref, slotted, when } from '@ni/fast-element';
+import { buttonTag } from '../button';
+import { ButtonAppearance } from '../button/types';
+import { scrollBackwardLabel, scrollForwardLabel } from '../label-provider/core/label-tokens';
+import { iconArrowExpanderLeftTag } from '../icons/arrow-expander-left';
+import { iconArrowExpanderRightTag } from '../icons/arrow-expander-right';
+import { iconArrowExpanderUpTag } from '../icons/arrow-expander-up';
+import { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';
+export const template = html `
+    ${when(x => x.showScrollButtons, html `
+        <${buttonTag}
+            content-hidden
+            class="scroll-button start"
+            appearance="${ButtonAppearance.ghost}"
+            @click="${x => x.onScrollStartClick()}"
+            ${ref('startScrollButton')}
+        >
+            ${x => scrollForwardLabel.getValueFor(x)}
+            ${when(x => x.isHorizontal(), html `<${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>`, html `<${iconArrowExpanderUpTag} slot="start"></${iconArrowExpanderUpTag}>`)}
+        </${buttonTag}>
+    `)}
+    <ol ${ref('list')} class="list"><slot
+            name="step"
+            ${slotted('steps')}
+        ></slot></ol>
+    ${when(x => x.showScrollButtons, html `
+        <${buttonTag}
+            content-hidden
+            class="scroll-button end"
+            appearance="${ButtonAppearance.ghost}"
+            @click="${x => x.onScrollEndClick()}"
+        >
+            ${x => scrollBackwardLabel.getValueFor(x)}
+            ${when(x => x.isHorizontal(), html `<${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>`, html `<${iconArrowExpanderDownTag} slot="start"></${iconArrowExpanderDownTag}>`)}
+        </${buttonTag}>
+    `)}
+`;
 //# sourceMappingURL=template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/stepper/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;UAE3B,OAAO,CAAC,OAAO,CAAC;kBACR,CAAC","sourcesContent":["import { html, slotted } from '@ni/fast-element';\nimport type { Stepper } from '.';\n\nexport const template = html<Stepper>`<ol><slot\n        name=\"step\"\n        ${slotted('steps')}\n    ></slot></ol>`;\n"]}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/stepper/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACH,mBAAmB,EACnB,kBAAkB,EACrB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAExE,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;MAC/B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAS;WACvC,SAAS;;;0BAGM,gBAAgB,CAAC,KAAK;sBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;cACnC,GAAG,CAAC,mBAAmB,CAAC;;cAExB,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;cACtC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,EACrB,IAAI,CAAA,IAAI,wBAAwB,mBAAmB,wBAAwB,GAAG,EAC9E,IAAI,CAAA,IAAI,sBAAsB,mBAAmB,sBAAsB,GAAG,CAC7E;YACD,SAAS;KAChB,CAAC;UACI,GAAG,CAAC,MAAM,CAAC;;cAEP,OAAO,CAAC,OAAO,CAAC;;MAExB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAS;WACvC,SAAS;;;0BAGM,gBAAgB,CAAC,KAAK;sBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;;cAEjC,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;cACvC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE,EACrB,IAAI,CAAA,IAAI,yBAAyB,mBAAmB,yBAAyB,GAAG,EAChF,IAAI,CAAA,IAAI,wBAAwB,mBAAmB,wBAAwB,GAAG,CACjF;YACD,SAAS;KAChB,CAAC;CACL,CAAC","sourcesContent":["import { html, ref, slotted, when } from '@ni/fast-element';\nimport type { Stepper } from '.';\nimport { buttonTag } from '../button';\nimport { ButtonAppearance } from '../button/types';\nimport {\n    scrollBackwardLabel,\n    scrollForwardLabel\n} from '../label-provider/core/label-tokens';\nimport { iconArrowExpanderLeftTag } from '../icons/arrow-expander-left';\nimport { iconArrowExpanderRightTag } from '../icons/arrow-expander-right';\nimport { iconArrowExpanderUpTag } from '../icons/arrow-expander-up';\nimport { iconArrowExpanderDownTag } from '../icons/arrow-expander-down';\n\nexport const template = html<Stepper>`\n    ${when(x => x.showScrollButtons, html<Stepper>`\n        <${buttonTag}\n            content-hidden\n            class=\"scroll-button start\"\n            appearance=\"${ButtonAppearance.ghost}\"\n            @click=\"${x => x.onScrollStartClick()}\"\n            ${ref('startScrollButton')}\n        >\n            ${x => scrollForwardLabel.getValueFor(x)}\n            ${when(\n                x => x.isHorizontal(),\n                html`<${iconArrowExpanderLeftTag} slot=\"start\"></${iconArrowExpanderLeftTag}>`,\n                html`<${iconArrowExpanderUpTag} slot=\"start\"></${iconArrowExpanderUpTag}>`\n            )}\n        </${buttonTag}>\n    `)}\n    <ol ${ref('list')} class=\"list\"><slot\n            name=\"step\"\n            ${slotted('steps')}\n        ></slot></ol>\n    ${when(x => x.showScrollButtons, html<Stepper>`\n        <${buttonTag}\n            content-hidden\n            class=\"scroll-button end\"\n            appearance=\"${ButtonAppearance.ghost}\"\n            @click=\"${x => x.onScrollEndClick()}\"\n        >\n            ${x => scrollBackwardLabel.getValueFor(x)}\n            ${when(\n                x => x.isHorizontal(),\n                html`<${iconArrowExpanderRightTag} slot=\"start\"></${iconArrowExpanderRightTag}>`,\n                html`<${iconArrowExpanderDownTag} slot=\"start\"></${iconArrowExpanderDownTag}>`\n            )}\n        </${buttonTag}>\n    `)}\n`;\n"]}

package/dist/esm/stepper/testing/stepper.pageobject.d.ts

@@ -0,0 +1,17 @@
+import type { Stepper } from '..';
+/**
+ * Page object for the `nimble-stepper`
+ */
+export declare class StepperPageObject {
+    protected readonly element: Stepper;
+    constructor(element: Stepper);
+    setStepperScrollAxisSize(size: number): Promise<void>;
+    clickScrollStartButton(): Promise<void>;
+    clickScrollEndButton(): Promise<void>;
+    areScrollButtonsVisible(): boolean;
+    getStepperViewScrollOffset(): number;
+    scrollStepIntoViewByIndex(index: number): Promise<void>;
+    addStep(title?: string): Promise<void>;
+    removeStepByIndex(index: number): Promise<void>;
+    updateStepTitle(index: number, title: string): Promise<void>;
+}

package/dist/esm/stepper/testing/stepper.pageobject.js

@@ -0,0 +1,91 @@
+import { waitForUpdatesAsync } from '../../testing/async-helpers';
+import { waitTimeout } from '../../utilities/testing/component';
+import { stepTag } from '../../step';
+import { StepperOrientation } from '../types';
+/**
+ * Page object for the `nimble-stepper`
+ */
+export class StepperPageObject {
+    constructor(element) {
+        this.element = element;
+    }
+    async setStepperScrollAxisSize(size) {
+        if (this.element.orientation === StepperOrientation.horizontal) {
+            this.element.style.width = `${size}px`;
+        }
+        else {
+            this.element.style.height = `${size}px`;
+        }
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for the resize observer to fire
+    }
+    async clickScrollStartButton() {
+        const startButton = this.element.shadowRoot.querySelector('.scroll-button.start');
+        if (!startButton) {
+            throw new Error('Scroll start button not found');
+        }
+        startButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+    async clickScrollEndButton() {
+        const endButton = this.element.shadowRoot.querySelector('.scroll-button.end');
+        if (!endButton) {
+            throw new Error('Scroll end button not found');
+        }
+        endButton.click();
+        await waitForUpdatesAsync();
+        await waitTimeout(50); // let animation run
+    }
+    areScrollButtonsVisible() {
+        return (this.element.shadowRoot.querySelectorAll('.scroll-button').length > 0);
+    }
+    getStepperViewScrollOffset() {
+        const list = this.element.shadowRoot.querySelector('.list');
+        return this.element.orientation === 'horizontal'
+            ? list.scrollLeft
+            : list.scrollTop;
+    }
+    async scrollStepIntoViewByIndex(index) {
+        const steps = this.element.steps;
+        if (!steps || index >= steps.length) {
+            throw new Error(`Step with index ${index} not found`);
+        }
+        steps[index].scrollIntoView();
+        await waitForUpdatesAsync();
+    }
+    async addStep(title) {
+        const step = document.createElement(stepTag);
+        step.appendChild(Object.assign(document.createElement('span'), {
+            slot: 'title',
+            textContent: title ?? ''
+        }));
+        this.element.appendChild(step);
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for overflow check queued by stepsChanged
+    }
+    async removeStepByIndex(index) {
+        const steps = this.element.steps;
+        if (!steps || index >= steps.length) {
+            throw new Error(`Step with index ${index} not found`);
+        }
+        steps[index].remove();
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync(); // wait for overflow check queued by stepsChanged
+    }
+    async updateStepTitle(index, title) {
+        const steps = this.element.steps;
+        if (!steps || index >= steps.length) {
+            throw new Error(`Step with index ${index} not found`);
+        }
+        const step = steps[index];
+        const titleSlot = step.querySelector('[slot="title"]');
+        if (!titleSlot) {
+            throw new Error(`No slot="title" element found to update for step with index ${index}`);
+        }
+        titleSlot.textContent = title;
+        await waitForUpdatesAsync();
+        await waitForUpdatesAsync();
+    }
+}
+//# sourceMappingURL=stepper.pageobject.js.map

package/dist/esm/stepper/testing/stepper.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.pageobject.js","sourceRoot":"","sources":["../../../../src/stepper/testing/stepper.pageobject.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Button } from '../../button';\nimport { waitForUpdatesAsync } from '../../testing/async-helpers';\nimport { waitTimeout } from '../../utilities/testing/component';\nimport type { Stepper } from '..';\nimport { stepTag } from '../../step';\nimport { StepperOrientation } from '../types';\n\n/**\n * Page object for the `nimble-stepper`\n */\nexport class StepperPageObject {\n    public constructor(protected readonly element: Stepper) {}\n\n    public async setStepperScrollAxisSize(size: number): Promise<void> {\n        if (this.element.orientation === StepperOrientation.horizontal) {\n            this.element.style.width = `${size}px`;\n        } else {\n            this.element.style.height = `${size}px`;\n        }\n        await waitForUpdatesAsync();\n        await waitForUpdatesAsync(); // wait for the resize observer to fire\n    }\n\n    public async clickScrollStartButton(): Promise<void> {\n        const startButton = this.element.shadowRoot!.querySelector<Button>(\n            '.scroll-button.start'\n        );\n        if (!startButton) {\n            throw new Error('Scroll start button not found');\n        }\n        startButton.click();\n        await waitForUpdatesAsync();\n        await waitTimeout(50); // let animation run\n    }\n\n    public async clickScrollEndButton(): Promise<void> {\n        const endButton = this.element.shadowRoot!.querySelector<Button>(\n            '.scroll-button.end'\n        );\n        if (!endButton) {\n            throw new Error('Scroll end button not found');\n        }\n        endButton.click();\n        await waitForUpdatesAsync();\n        await waitTimeout(50); // let animation run\n    }\n\n    public areScrollButtonsVisible(): boolean {\n        return (\n            this.element.shadowRoot!.querySelectorAll(\n                '.scroll-button'\n            ).length > 0\n        );\n    }\n\n    public getStepperViewScrollOffset(): number {\n        const list = this.element.shadowRoot!.querySelector('.list')!;\n        return this.element.orientation === 'horizontal'\n            ? list.scrollLeft\n            : list.scrollTop;\n    }\n\n    public async scrollStepIntoViewByIndex(index: number): Promise<void> {\n        const steps = this.element.steps;\n        if (!steps || index >= steps.length) {\n            throw new Error(`Step with index ${index} not found`);\n        }\n        steps[index]!.scrollIntoView();\n        await waitForUpdatesAsync();\n    }\n\n    public async addStep(title?: string): Promise<void> {\n        const step = document.createElement(stepTag);\n        step.appendChild(Object.assign(document.createElement('span'), {\n            slot: 'title',\n            textContent: title ?? ''\n        }));\n        this.element.appendChild(step);\n        await waitForUpdatesAsync();\n        await waitForUpdatesAsync(); // wait for overflow check queued by stepsChanged\n    }\n\n    public async removeStepByIndex(index: number): Promise<void> {\n        const steps = this.element.steps;\n        if (!steps || index >= steps.length) {\n            throw new Error(`Step with index ${index} not found`);\n        }\n        steps[index]!.remove();\n        await waitForUpdatesAsync();\n        await waitForUpdatesAsync(); // wait for overflow check queued by stepsChanged\n    }\n\n    public async updateStepTitle(\n        index: number,\n        title: string\n    ): Promise<void> {\n        const steps = this.element.steps;\n        if (!steps || index >= steps.length) {\n            throw new Error(`Step with index ${index} not found`);\n        }\n        const step = steps[index]!;\n        const titleSlot = step.querySelector('[slot=\"title\"]');\n        if (!titleSlot) {\n            throw new Error(`No slot=\"title\" element found to update for step with index ${index}`);\n        }\n        titleSlot.textContent = title;\n        await waitForUpdatesAsync();\n        await waitForUpdatesAsync();\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "35.5.4",
+  "version": "35.5.6",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run build:icons && npm run build:workers && npm run build:components && npm run build:scss && npm run build:cem",