@aquera/nile-elements 1.9.4 → 1.9.6

package/dist/src/nile-dot-stepper/nile-dot-stepper.css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Dot Stepper CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-dot-stepper/nile-dot-stepper.css.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+/**
+ * Dot Stepper CSS
+ */
+export const styles = css `
+  :host {
+    display: inline-block;
+    -webkit-font-smoothing: var(
+      --nile-webkit-font-smoothing,
+      var(--ng-webkit-font-smoothing)
+    );
+    -moz-osx-font-smoothing: var(
+      --nile-moz-osx-font-smoothing,
+      var(--ng-moz-osx-font-smoothing)
+    );
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .dots {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    align-items: center;
+  }
+
+  .dot {
+    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: none;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    border-radius: 50%;
+    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    transition: background-color 0.2s ease-out, transform 0.2s ease-out;
+  }
+
+  .dot--active {
+    background: var(
+      --nile-colors-primary-600,
+      var(--ng-colors-text-brand-secondary-700)
+    );
+  }
+
+  /* Sizes */
+  .dot--sm {
+    width: var(--nile-spacing-4px, var(--ng-spacing-1));
+    height: var(--nile-spacing-4px, var(--ng-spacing-1));
+  }
+
+  .dot--md {
+    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+  .dot--lg {
+    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));
+  }
+
+  .dots:has(.dot--sm) {
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .dots:has(.dot--lg) {
+    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));
+  }
+
+  .dot:focus-visible {
+    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid
+      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));
+    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));
+  }
+
+  :host([disabled]) .dot,
+  .dot:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-dot-stepper.css.js.map

package/dist/src/nile-dot-stepper/nile-dot-stepper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dot-stepper.css.js","sourceRoot":"","sources":["../../../src/nile-dot-stepper/nile-dot-stepper.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Dot Stepper CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .dots {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    align-items: center;\n  }\n\n  .dot {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n    border: none;\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: 50%;\n    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    transition: background-color 0.2s ease-out, transform 0.2s ease-out;\n  }\n\n  .dot--active {\n    background: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-brand-secondary-700)\n    );\n  }\n\n  /* Sizes */\n  .dot--sm {\n    width: var(--nile-spacing-4px, var(--ng-spacing-1));\n    height: var(--nile-spacing-4px, var(--ng-spacing-1));\n  }\n\n  .dot--md {\n    width: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n    height: var(--nile-spacing-10px, var(--ng-spacing-2-5));\n  }\n\n  .dot--lg {\n    width: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n    height: var(--nile-spacing-14px, var(--ng-spacing-3-5));\n  }\n\n  .dots:has(.dot--sm) {\n    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));\n  }\n\n  .dots:has(.dot--lg) {\n    gap: var(--nile-spacing-2-x, var(--ng-spacing-3));\n  }\n\n  .dot:focus-visible {\n    outline: var(--nile-spacing-2px, var(--ng-spacing-0-5)) solid\n      var(--nile-colors-stroke-strong-950, var(--ng-colors-border-secondary));\n    outline-offset: var(--nile-spacing-2px, var(--ng-spacing-0-5));\n  }\n\n  :host([disabled]) .dot,\n  .dot:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n`;\nexport default [styles];\n"]}

package/dist/src/nile-dot-stepper/nile-dot-stepper.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * Nile dot stepper component.
+ *
+ * @tag nile-dot-stepper
+ *
+ */
+/**
+ * @summary Dot steppers display a horizontal row of small dots indicating progress or position, with one active dot and the rest inactive.
+ * @status stable
+ *
+ * @event nile-step-change - Emitted when a dot is selected via click or keyboard. The `detail` contains the 1-based `value` of the selected dot.
+ *
+ * @csspart base - The component's base wrapper (the dots container).
+ * @csspart dot - An individual dot button.
+ */
+export declare class NileDotStepper extends NileElement {
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    /** The total number of dots. */
+    total: number;
+    /** The 1-based index of the active dot. */
+    current: number;
+    /** The size of each dot. */
+    size: 'sm' | 'md' | 'lg';
+    /** Disables click and keyboard interaction. */
+    disabled: boolean;
+    /** Clamps the active value to the valid `[1, total]` range. */
+    private clamp;
+    private selectStep;
+    private handleDotClick;
+    private focusDot;
+    private handleKeyDown;
+    render(): TemplateResult;
+}
+export default NileDotStepper;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-dot-stepper': NileDotStepper;
+    }
+}

package/dist/src/nile-dot-stepper/nile-dot-stepper.js

@@ -0,0 +1,153 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { styles } from './nile-dot-stepper.css';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement, { setupA11yMetadata } from '../internal/nile-element';
+import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
+import { A11yRole } from '../internal/accessibility/a11y.role.enum';
+import { Role } from '../internal/accessibility/role.enum';
+/**
+ * Nile dot stepper component.
+ *
+ * @tag nile-dot-stepper
+ *
+ */
+/**
+ * @summary Dot steppers display a horizontal row of small dots indicating progress or position, with one active dot and the rest inactive.
+ * @status stable
+ *
+ * @event nile-step-change - Emitted when a dot is selected via click or keyboard. The `detail` contains the 1-based `value` of the selected dot.
+ *
+ * @csspart base - The component's base wrapper (the dots container).
+ * @csspart dot - An individual dot button.
+ */
+let NileDotStepper = class NileDotStepper extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The total number of dots. */
+        this.total = 0;
+        /** The 1-based index of the active dot. */
+        this.current = 1;
+        /** The size of each dot. */
+        this.size = 'md';
+        /** Disables click and keyboard interaction. */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        setupA11yMetadata(this, {
+            [Role.Role]: A11yRole.Tablist,
+            [A11yProperty.AriaLabel]: 'Progress',
+        });
+    }
+    /** Clamps the active value to the valid `[1, total]` range. */
+    clamp(value) {
+        if (this.total < 1)
+            return 1;
+        return Math.min(Math.max(value, 1), this.total);
+    }
+    selectStep(value) {
+        if (this.disabled)
+            return;
+        const next = this.clamp(value);
+        this.current = next;
+        this.emit('nile-step-change', { value: next });
+    }
+    handleDotClick(value) {
+        this.selectStep(value);
+    }
+    focusDot(value) {
+        const dot = this.shadowRoot?.querySelector(`[part="dot"][data-index="${value}"]`);
+        dot?.focus();
+    }
+    handleKeyDown(event) {
+        if (this.disabled || this.total < 1)
+            return;
+        const active = this.clamp(this.current);
+        let next = null;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = this.clamp(active + 1);
+                break;
+            case 'ArrowLeft':
+                next = this.clamp(active - 1);
+                break;
+            case 'Home':
+                next = 1;
+                break;
+            case 'End':
+                next = this.total;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (next !== null) {
+            this.selectStep(next);
+            this.focusDot(next);
+        }
+    }
+    render() {
+        const active = this.clamp(this.current);
+        return html `
+      <div
+        part="base"
+        class="dots"
+        role="tablist"
+        aria-label="Progress"
+        @keydown=${this.handleKeyDown}
+      >
+        ${Array.from({ length: this.total }).map((_, index) => {
+            const value = index + 1;
+            const isActive = value === active;
+            return html `
+            <button
+              part="dot"
+              role="tab"
+              type="button"
+              data-index=${value}
+              class=${classMap({
+                dot: true,
+                'dot--active': isActive,
+                'dot--sm': this.size === 'sm',
+                'dot--md': this.size === 'md',
+                'dot--lg': this.size === 'lg',
+            })}
+              aria-selected=${isActive ? 'true' : 'false'}
+              aria-label="Step ${value} of ${this.total}"
+              tabindex=${isActive ? 0 : -1}
+              ?disabled=${this.disabled}
+              @click=${() => this.handleDotClick(value)}
+            ></button>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+NileDotStepper.styles = styles;
+__decorate([
+    property({ type: Number, reflect: true })
+], NileDotStepper.prototype, "total", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileDotStepper.prototype, "current", void 0);
+__decorate([
+    property({ reflect: true })
+], NileDotStepper.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDotStepper.prototype, "disabled", void 0);
+NileDotStepper = __decorate([
+    customElement('nile-dot-stepper')
+], NileDotStepper);
+export { NileDotStepper };
+export default NileDotStepper;
+//# sourceMappingURL=nile-dot-stepper.js.map

package/dist/src/nile-dot-stepper/nile-dot-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-dot-stepper.js","sourceRoot":"","sources":["../../../src/nile-dot-stepper/nile-dot-stepper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html } from 'lit';\nimport { styles } from './nile-dot-stepper.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement, { setupA11yMetadata } from '../internal/nile-element';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport { A11yProperty } from '../internal/accessibility/a11y.property.enum';\nimport { A11yRole } from '../internal/accessibility/a11y.role.enum';\nimport { Role } from '../internal/accessibility/role.enum';\n\n/**\n * Nile dot stepper component.\n *\n * @tag nile-dot-stepper\n *\n */\n\n/**\n * @summary Dot steppers display a horizontal row of small dots indicating progress or position, with one active dot and the rest inactive.\n * @status stable\n *\n * @event nile-step-change - Emitted when a dot is selected via click or keyboard. The `detail` contains the 1-based `value` of the selected dot.\n *\n * @csspart base - The component's base wrapper (the dots container).\n * @csspart dot - An individual dot button.\n */\n\n@customElement('nile-dot-stepper')\nexport class NileDotStepper extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    setupA11yMetadata(this, {\n      [Role.Role]: A11yRole.Tablist,\n      [A11yProperty.AriaLabel]: 'Progress',\n    });\n  }\n\n  /** The total number of dots. */\n  @property({ type: Number, reflect: true }) total = 0;\n\n  /** The 1-based index of the active dot. */\n  @property({ type: Number, reflect: true }) current = 1;\n\n  /** The size of each dot. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Disables click and keyboard interaction. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Clamps the active value to the valid `[1, total]` range. */\n  private clamp(value: number): number {\n    if (this.total < 1) return 1;\n    return Math.min(Math.max(value, 1), this.total);\n  }\n\n  private selectStep(value: number): void {\n    if (this.disabled) return;\n    const next = this.clamp(value);\n    this.current = next;\n    this.emit('nile-step-change', { value: next });\n  }\n\n  private handleDotClick(value: number): void {\n    this.selectStep(value);\n  }\n\n  private focusDot(value: number): void {\n    const dot = this.shadowRoot?.querySelector<HTMLButtonElement>(\n      `[part=\"dot\"][data-index=\"${value}\"]`\n    );\n    dot?.focus();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (this.disabled || this.total < 1) return;\n\n    const active = this.clamp(this.current);\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        next = this.clamp(active + 1);\n        break;\n      case 'ArrowLeft':\n        next = this.clamp(active - 1);\n        break;\n      case 'Home':\n        next = 1;\n        break;\n      case 'End':\n        next = this.total;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    if (next !== null) {\n      this.selectStep(next);\n      this.focusDot(next);\n    }\n  }\n\n  render(): TemplateResult {\n    const active = this.clamp(this.current);\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"dots\"\n        role=\"tablist\"\n        aria-label=\"Progress\"\n        @keydown=${this.handleKeyDown}\n      >\n        ${Array.from({ length: this.total }).map((_, index) => {\n          const value = index + 1;\n          const isActive = value === active;\n          return html`\n            <button\n              part=\"dot\"\n              role=\"tab\"\n              type=\"button\"\n              data-index=${value}\n              class=${classMap({\n                dot: true,\n                'dot--active': isActive,\n                'dot--sm': this.size === 'sm',\n                'dot--md': this.size === 'md',\n                'dot--lg': this.size === 'lg',\n              })}\n              aria-selected=${isActive ? 'true' : 'false'}\n              aria-label=\"Step ${value} of ${this.total}\"\n              tabindex=${isActive ? 0 : -1}\n              ?disabled=${this.disabled}\n              @click=${() => this.handleDotClick(value)}\n            ></button>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default NileDotStepper;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-dot-stepper': NileDotStepper;\n  }\n}\n"]}

package/dist/src/nile-dot-stepper/nile-dot-stepper.test.d.ts

@@ -0,0 +1 @@
+import './nile-dot-stepper';

package/dist/src/nile-dot-stepper/nile-dot-stepper.test.js

@@ -0,0 +1,319 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import './nile-dot-stepper';
+const dots = (el) => Array.from(el.shadowRoot.querySelectorAll('[part="dot"]'));
+describe('NileDotStepper', () => {
+    // --- Basic rendering ---
+    it('1. renders', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el).to.exist;
+    });
+    it('2. shadow root', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el.shadowRoot).to.not.be.null;
+    });
+    it('3. tag name', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el.tagName.toLowerCase()).to.equal('nile-dot-stepper');
+    });
+    it('4. is defined', async () => {
+        expect(customElements.get('nile-dot-stepper')).to.exist;
+    });
+    it('5. has styles', async () => {
+        expect((await import('./nile-dot-stepper')).NileDotStepper.styles).to.exist;
+    });
+    // --- Default property values ---
+    it('6. total defaults 0', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el.total).to.equal(0);
+    });
+    it('7. current defaults 1', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el.current).to.equal(1);
+    });
+    it('8. size defaults md', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el.size).to.equal('md');
+    });
+    it('9. disabled defaults false', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(el.disabled).to.be.false;
+    });
+    it('10. no dots when total is 0', async () => {
+        const el = await fixture(html `<nile-dot-stepper></nile-dot-stepper>`);
+        expect(dots(el).length).to.equal(0);
+    });
+    // --- Reflected attributes ---
+    it('11. total reflects', async () => {
+        const el = await fixture(html `<nile-dot-stepper total="5"></nile-dot-stepper>`);
+        expect(el.getAttribute('total')).to.equal('5');
+    });
+    it('12. current reflects', async () => {
+        const el = await fixture(html `<nile-dot-stepper total="5" current="3"></nile-dot-stepper>`);
+        expect(el.getAttribute('current')).to.equal('3');
+    });
+    it('13. size reflects', async () => {
+        const el = await fixture(html `<nile-dot-stepper size="lg"></nile-dot-stepper>`);
+        expect(el.getAttribute('size')).to.equal('lg');
+    });
+    it('14. disabled reflects', async () => {
+        const el = await fixture(html `<nile-dot-stepper disabled></nile-dot-stepper>`);
+        expect(el.hasAttribute('disabled')).to.be.true;
+    });
+    // --- total renders N dots ---
+    it('15. total renders exactly N dots', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5}></nile-dot-stepper>`);
+        expect(dots(el).length).to.equal(5);
+    });
+    it('16. total renders single dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${1}></nile-dot-stepper>`);
+        expect(dots(el).length).to.equal(1);
+    });
+    it('17. dynamically updating total re-renders dots', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3}></nile-dot-stepper>`);
+        expect(dots(el).length).to.equal(3);
+        el.total = 7;
+        await el.updateComplete;
+        expect(dots(el).length).to.equal(7);
+    });
+    // --- current marks correct active dot ---
+    it('18. current marks correct dot active', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${3}></nile-dot-stepper>`);
+        const active = dots(el).filter((d) => d.classList.contains('dot--active'));
+        expect(active.length).to.equal(1);
+        expect(active[0].getAttribute('data-index')).to.equal('3');
+    });
+    it('19. active dot aria-selected true, others false', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${4} .current=${2}></nile-dot-stepper>`);
+        const list = dots(el);
+        expect(list[1].getAttribute('aria-selected')).to.equal('true');
+        expect(list[0].getAttribute('aria-selected')).to.equal('false');
+        expect(list[2].getAttribute('aria-selected')).to.equal('false');
+        expect(list[3].getAttribute('aria-selected')).to.equal('false');
+    });
+    it('20. first dot active by default current=1', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5}></nile-dot-stepper>`);
+        expect(dots(el)[0].classList.contains('dot--active')).to.be.true;
+    });
+    it('21. out-of-range current (too high) clamps active to last dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${4} .current=${10}></nile-dot-stepper>`);
+        const active = dots(el).filter((d) => d.classList.contains('dot--active'));
+        expect(active.length).to.equal(1);
+        expect(active[0].getAttribute('data-index')).to.equal('4');
+    });
+    it('22. out-of-range current (too low) clamps active to first dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${4} .current=${0}></nile-dot-stepper>`);
+        const active = dots(el).filter((d) => d.classList.contains('dot--active'));
+        expect(active.length).to.equal(1);
+        expect(active[0].getAttribute('data-index')).to.equal('1');
+    });
+    it('23. dynamic current updates active dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${1}></nile-dot-stepper>`);
+        el.current = 4;
+        await el.updateComplete;
+        const active = dots(el).filter((d) => d.classList.contains('dot--active'));
+        expect(active[0].getAttribute('data-index')).to.equal('4');
+    });
+    // --- Click interaction ---
+    it('24. clicking a dot sets current', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${1}></nile-dot-stepper>`);
+        dots(el)[2].click();
+        await el.updateComplete;
+        expect(el.current).to.equal(3);
+    });
+    it('25. clicking a dot emits nile-step-change with 1-based value', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${1}></nile-dot-stepper>`);
+        setTimeout(() => dots(el)[3].click());
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(4);
+    });
+    it('26. clicking the first dot emits value 1', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${3}></nile-dot-stepper>`);
+        setTimeout(() => dots(el)[0].click());
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(1);
+    });
+    it('27. nile-step-change bubbles and is composed', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5}></nile-dot-stepper>`);
+        setTimeout(() => dots(el)[1].click());
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.bubbles).to.be.true;
+        expect(ev.composed).to.be.true;
+    });
+    // --- Disabled behaviour ---
+    it('28. disabled blocks click (no current change)', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${1} disabled></nile-dot-stepper>`);
+        dots(el)[2].click();
+        await el.updateComplete;
+        expect(el.current).to.equal(1);
+    });
+    it('29. disabled blocks click (no event)', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} disabled></nile-dot-stepper>`);
+        let fired = false;
+        el.addEventListener('nile-step-change', () => (fired = true));
+        dots(el)[2].click();
+        await el.updateComplete;
+        expect(fired).to.be.false;
+    });
+    it('30. disabled sets disabled attribute on each dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3} disabled></nile-dot-stepper>`);
+        expect(dots(el).every((d) => d.disabled)).to.be.true;
+    });
+    it('31. disabled blocks keyboard interaction', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${2} disabled></nile-dot-stepper>`);
+        let fired = false;
+        el.addEventListener('nile-step-change', () => (fired = true));
+        const base = el.shadowRoot.querySelector('[part="base"]');
+        base.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }));
+        await el.updateComplete;
+        expect(el.current).to.equal(2);
+        expect(fired).to.be.false;
+    });
+    // --- Keyboard navigation ---
+    const dispatchKey = (el, key) => {
+        const base = el.shadowRoot.querySelector('[part="base"]');
+        base.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+    };
+    it('32. ArrowRight increments current and emits value', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${2}></nile-dot-stepper>`);
+        setTimeout(() => dispatchKey(el, 'ArrowRight'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(3);
+        expect(el.current).to.equal(3);
+    });
+    it('33. ArrowLeft decrements current and emits value', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${3}></nile-dot-stepper>`);
+        setTimeout(() => dispatchKey(el, 'ArrowLeft'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(2);
+        expect(el.current).to.equal(2);
+    });
+    it('34. ArrowRight clamps at total', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${5}></nile-dot-stepper>`);
+        setTimeout(() => dispatchKey(el, 'ArrowRight'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(5);
+        expect(el.current).to.equal(5);
+    });
+    it('35. ArrowLeft clamps at 1', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${1}></nile-dot-stepper>`);
+        setTimeout(() => dispatchKey(el, 'ArrowLeft'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(1);
+        expect(el.current).to.equal(1);
+    });
+    it('36. Home jumps to first dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${4}></nile-dot-stepper>`);
+        setTimeout(() => dispatchKey(el, 'Home'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(1);
+        expect(el.current).to.equal(1);
+    });
+    it('37. End jumps to last dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${2}></nile-dot-stepper>`);
+        setTimeout(() => dispatchKey(el, 'End'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(5);
+        expect(el.current).to.equal(5);
+    });
+    it('38. unhandled key does not change current', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${2}></nile-dot-stepper>`);
+        let fired = false;
+        el.addEventListener('nile-step-change', () => (fired = true));
+        dispatchKey(el, 'Enter');
+        await el.updateComplete;
+        expect(el.current).to.equal(2);
+        expect(fired).to.be.false;
+    });
+    it('39. keyboard nav moves focus to the new active dot', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${2}></nile-dot-stepper>`);
+        dispatchKey(el, 'ArrowRight');
+        await el.updateComplete;
+        const focused = el.shadowRoot.activeElement;
+        expect(focused).to.exist;
+        expect(focused.getAttribute('data-index')).to.equal('3');
+    });
+    // --- Size variants ---
+    it('40. size sm applies dot--sm', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3} size="sm"></nile-dot-stepper>`);
+        expect(dots(el).every((d) => d.classList.contains('dot--sm'))).to.be.true;
+    });
+    it('41. size md applies dot--md', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3} size="md"></nile-dot-stepper>`);
+        expect(dots(el).every((d) => d.classList.contains('dot--md'))).to.be.true;
+    });
+    it('42. size lg applies dot--lg', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3} size="lg"></nile-dot-stepper>`);
+        expect(dots(el).every((d) => d.classList.contains('dot--lg'))).to.be.true;
+    });
+    it('43. dynamic size update changes dot class', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3} size="md"></nile-dot-stepper>`);
+        el.size = 'lg';
+        await el.updateComplete;
+        expect(dots(el).every((d) => d.classList.contains('dot--lg'))).to.be.true;
+        expect(dots(el).some((d) => d.classList.contains('dot--md'))).to.be.false;
+    });
+    // --- Accessibility / parts ---
+    it('44. base part present', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3}></nile-dot-stepper>`);
+        expect(el.shadowRoot.querySelector('[part="base"]')).to.exist;
+    });
+    it('45. base has role tablist', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3}></nile-dot-stepper>`);
+        expect(el.shadowRoot.querySelector('[part="base"]').getAttribute('role')).to.equal('tablist');
+    });
+    it('46. base has aria-label Progress', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3}></nile-dot-stepper>`);
+        expect(el.shadowRoot.querySelector('[part="base"]').getAttribute('aria-label')).to.equal('Progress');
+    });
+    it('47. dot part present', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3}></nile-dot-stepper>`);
+        expect(el.shadowRoot.querySelector('[part="dot"]')).to.exist;
+    });
+    it('48. each dot has role tab', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${4}></nile-dot-stepper>`);
+        expect(dots(el).every((d) => d.getAttribute('role') === 'tab')).to.be.true;
+    });
+    it('49. dot aria-label is "Step N of M"', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${5} .current=${2}></nile-dot-stepper>`);
+        const list = dots(el);
+        expect(list[0].getAttribute('aria-label')).to.equal('Step 1 of 5');
+        expect(list[4].getAttribute('aria-label')).to.equal('Step 5 of 5');
+    });
+    it('50. roving tabindex: active 0, others -1', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${4} .current=${3}></nile-dot-stepper>`);
+        const list = dots(el);
+        expect(list[2].getAttribute('tabindex')).to.equal('0');
+        expect(list[0].getAttribute('tabindex')).to.equal('-1');
+        expect(list[1].getAttribute('tabindex')).to.equal('-1');
+        expect(list[3].getAttribute('tabindex')).to.equal('-1');
+    });
+    it('51. roving tabindex updates after navigation', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${4} .current=${1}></nile-dot-stepper>`);
+        el.current = 3;
+        await el.updateComplete;
+        const list = dots(el);
+        expect(list[2].getAttribute('tabindex')).to.equal('0');
+        expect(list[0].getAttribute('tabindex')).to.equal('-1');
+    });
+    it('52. dots are button elements of type button', async () => {
+        const el = await fixture(html `<nile-dot-stepper .total=${3}></nile-dot-stepper>`);
+        expect(dots(el).every((d) => d.tagName === 'BUTTON' && d.getAttribute('type') === 'button')).to.be.true;
+    });
+    it('53. full integration', async () => {
+        const el = await fixture(html `<nile-dot-stepper
+        .total=${6}
+        .current=${4}
+        size="lg"
+      ></nile-dot-stepper>`);
+        expect(dots(el).length).to.equal(6);
+        expect(el.size).to.equal('lg');
+        const active = dots(el).filter((d) => d.classList.contains('dot--active'));
+        expect(active.length).to.equal(1);
+        expect(active[0].getAttribute('data-index')).to.equal('4');
+        setTimeout(() => dispatchKey(el, 'End'));
+        const ev = await oneEvent(el, 'nile-step-change');
+        expect(ev.detail.value).to.equal(6);
+        expect(el.current).to.equal(6);
+    });
+});
+//# sourceMappingURL=nile-dot-stepper.test.js.map