@quieto/ui 0.0.0-stage → 0.1.1

package/dist/components/qds-tab/qds-tab.js

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * One tab in a `qds-tabs` tab list.
+ *
+ * The host takes the `tab` role itself rather than wrapping a button, because
+ * `aria-controls` must point at its panel by ID, and an ID reference only
+ * resolves within one tree: the tab host and the `qds-tab-panel` host are both
+ * in the light DOM, so the reference works. `qds-tabs` manages the IDs, the
+ * selection, and the tab order.
+ *
+ * The role and states are host attributes, not ElementInternals ARIA. Browsers
+ * read either, but auditing tools such as axe only read attributes, and would
+ * report a tab list with no tabs in it.
+ *
+ * Put it in the `tab` slot: `<qds-tab slot="tab">`. If the slot is left off the
+ * tab assigns it when it upgrades, but setting it in the markup keeps the tab
+ * in the tab list before then, too.
+ *
+ * @element qds-tab
+ *
+ * @slot - The tab label.
+ *
+ * @cssprop [--qds-component-tabs-tab-padding-block] - Vertical padding.
+ * @cssprop [--qds-component-tabs-tab-padding-inline] - Horizontal padding.
+ * @cssprop [--qds-component-tabs-tab-font-size] - Label size.
+ * @cssprop [--qds-component-tabs-tab-font-weight] - Label weight.
+ * @cssprop [--qds-component-tabs-tab-line-height] - Label line height.
+ * @cssprop [--qds-component-tabs-tab-color-content-{state}] - Label color: `rest`, `hover`, `selected`, `disabled`.
+ * @cssprop [--qds-component-tabs-tab-color-background-hover] - Fill under the pointer.
+ * @cssprop [--qds-component-tabs-indicator-border-width] - Thickness of the selected tab's underline.
+ * @cssprop [--qds-component-tabs-indicator-color-border-selected] - Color of the selected tab's underline.
+ * @cssprop [--qds-component-tabs-duration] - Color transition duration.
+ */
+let QdsTab = class QdsTab extends QdsElement {
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        padding: var(--qds-component-tabs-tab-padding-block, 0.5rem)
+          var(--qds-component-tabs-tab-padding-inline, 0.75rem);
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--qds-component-tabs-tab-font-size, 0.875rem);
+        font-weight: var(--qds-component-tabs-tab-font-weight, 500);
+        line-height: var(--qds-component-tabs-tab-line-height, 1.375);
+        white-space: nowrap;
+        color: var(--qds-component-tabs-tab-color-content-rest, #64748b);
+
+        /* The underline sits over the tab list's own bottom border. */
+        margin-block-end: calc(-1 * var(--qds-component-tabs-border-width, 0.0625rem));
+        border-block-end: var(--qds-component-tabs-indicator-border-width, 0.125rem) solid
+          transparent;
+
+        cursor: pointer;
+        user-select: none;
+        transition:
+          color var(--qds-component-tabs-duration, 120ms),
+          border-color var(--qds-component-tabs-duration, 120ms);
+      }
+
+      :host(:where(:hover)) {
+        color: var(--qds-component-tabs-tab-color-content-hover, #0f172a);
+        background-color: var(--qds-component-tabs-tab-color-background-hover, #f1f5f9);
+      }
+
+      :host([selected]) {
+        color: var(--qds-component-tabs-tab-color-content-selected, #1d4ed8);
+        border-block-end-color: var(
+          --qds-component-tabs-indicator-color-border-selected,
+          #2563eb
+        );
+      }
+
+      :host(:focus-visible) {
+        outline: var(--_focus-ring);
+        outline-offset: -0.125rem;
+      }
+
+      :host([disabled]) {
+        color: var(--qds-component-tabs-tab-color-content-disabled, #94a3b8);
+        background: none;
+        cursor: not-allowed;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          transition: none;
+        }
+      }
+
+      /* The underline is the only selected cue; give it a system color. */
+      @media (forced-colors: active) {
+        :host([selected]) {
+          border-block-end-color: Highlight;
+        }
+
+        :host([disabled]) {
+          color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    constructor() {
+        super();
+        /**
+         * Whether this tab is the selected one. `qds-tabs` manages this; as an
+         * attribute in markup it marks the tab selected initially.
+         */
+        this.selected = false;
+        /** Prevents selecting this tab. Arrow keys skip it. */
+        this.disabled = false;
+        this.#handleClick = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new Event('qds-tab-select', { bubbles: true }));
+        };
+        this.addEventListener('click', this.#handleClick);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Not in the constructor: a custom element must not gain attributes there.
+        this.setAttribute('role', 'tab');
+        if (!this.slot)
+            this.slot = 'tab';
+    }
+    updated(changed) {
+        if (changed.has('selected')) {
+            this.setAttribute('aria-selected', String(this.selected));
+        }
+        if (changed.has('disabled')) {
+            if (this.disabled)
+                this.setAttribute('aria-disabled', 'true');
+            else
+                this.removeAttribute('aria-disabled');
+        }
+    }
+    #handleClick;
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsTab.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsTab.prototype, "disabled", void 0);
+QdsTab = __decorate([
+    customElement('qds-tab')
+], QdsTab);
+export { QdsTab };
+//# sourceMappingURL=qds-tab.js.map

package/dist/components/qds-tab/qds-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-tab.js","sourceRoot":"","sources":["../../../src/components/qds-tab/qds-tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;aACpB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,AArEqB,CAqEpB;IAaF;QACE,KAAK,EAAE,CAAC;QAZV;;;WAGG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB,uDAAuD;QAEvD,aAAQ,GAAG,KAAK,CAAC;QAwBjB,iBAAY,GAAG,GAAS,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,gBAAgB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACrE,CAAC,CAAC;QAvBA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACpD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,2EAA2E;QAC3E,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpC,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC5D,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;gBACzD,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAED,YAAY,CAGV;IAEO,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAnCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC1B;AAjFN,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAiHlB"}

package/dist/components/qds-tab-panel/qds-tab-panel.d.ts

@@ -0,0 +1,32 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * The content shown for one tab in a `qds-tabs`.
+ *
+ * Panels pair with tabs by position: the first panel belongs to the first tab.
+ * Each is hidden until `qds-tabs` marks it active, so a page never shows every
+ * panel stacked on top of one another, even before the components upgrade.
+ *
+ * @element qds-tab-panel
+ *
+ * @slot - The panel content.
+ *
+ * @cssprop [--qds-component-tabs-panel-padding-block] - Space above and below the content.
+ */
+export declare class QdsTabPanel extends QdsElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether this panel is shown. Managed by `qds-tabs`.
+     *
+     * @internal
+     */
+    active: boolean;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-tab-panel': QdsTabPanel;
+    }
+}
+//# sourceMappingURL=qds-tab-panel.d.ts.map

package/dist/components/qds-tab-panel/qds-tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/qds-tab-panel/qds-tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;GAYG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAiBpB;IAEF;;;;OAIG;IAEH,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAUzB,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/qds-tab-panel/qds-tab-panel.js

@@ -0,0 +1,72 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * The content shown for one tab in a `qds-tabs`.
+ *
+ * Panels pair with tabs by position: the first panel belongs to the first tab.
+ * Each is hidden until `qds-tabs` marks it active, so a page never shows every
+ * panel stacked on top of one another, even before the components upgrade.
+ *
+ * @element qds-tab-panel
+ *
+ * @slot - The panel content.
+ *
+ * @cssprop [--qds-component-tabs-panel-padding-block] - Space above and below the content.
+ */
+let QdsTabPanel = class QdsTabPanel extends QdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether this panel is shown. Managed by `qds-tabs`.
+         *
+         * @internal
+         */
+        this.active = false;
+    }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+        padding-block: var(--qds-component-tabs-panel-padding-block, 1rem);
+      }
+
+      :host(:not([active])) {
+        display: none;
+      }
+
+      :host(:focus-visible) {
+        outline: var(--_focus-ring);
+        outline-offset: 0.125rem;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // A host attribute rather than ElementInternals ARIA, for the same reason as
+        // qds-tab: auditing tools only read attributes.
+        this.setAttribute('role', 'tabpanel');
+        // Focusable, so a keyboard user can reach a panel that has nothing
+        // focusable inside it, as the ARIA tabs pattern recommends.
+        if (!this.hasAttribute('tabindex'))
+            this.tabIndex = 0;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsTabPanel.prototype, "active", void 0);
+QdsTabPanel = __decorate([
+    customElement('qds-tab-panel')
+], QdsTabPanel);
+export { QdsTabPanel };
+//# sourceMappingURL=qds-tab-panel.js.map

package/dist/components/qds-tab-panel/qds-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-tab-panel.js","sourceRoot":"","sources":["../../../src/components/qds-tab-panel/qds-tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;GAYG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAoBL;;;;WAIG;QAEH,WAAM,GAAG,KAAK,CAAC;IAejB,CAAC;aAxCiB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;KAcF;KACF,AAjBqB,CAiBpB;IAUO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,6EAA6E;QAC7E,gDAAgD;QAChD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,mEAAmE;QACnE,4DAA4D;QAC5D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;YAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACxD,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAdD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AA1BJ,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAyCvB"}

package/dist/components/qds-tabs/qds-tabs.d.ts

@@ -0,0 +1,54 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A set of tabs, each showing one panel at a time.
+ *
+ * Follows the ARIA tabs pattern with automatic activation: Left and Right move
+ * between tabs and select as they go, Home and End jump to the first and last,
+ * and only the selected tab is in the tab order — Tab moves from it straight
+ * into the panel. Tabs pair with panels by position.
+ *
+ * ```html
+ * <qds-tabs label="Account">
+ *   <qds-tab slot="tab">Profile</qds-tab>
+ *   <qds-tab slot="tab">Security</qds-tab>
+ *   <qds-tab-panel>…</qds-tab-panel>
+ *   <qds-tab-panel>…</qds-tab-panel>
+ * </qds-tabs>
+ * ```
+ *
+ * @element qds-tabs
+ *
+ * @slot - The `qds-tab-panel` panels.
+ * @slot tab - The `qds-tab` tabs.
+ *
+ * @fires {CustomEvent<{ index: number }>} qds-change - Fired when the user
+ * selects a tab. Not fired for programmatic changes.
+ *
+ * @csspart tablist - The element carrying the tablist role.
+ *
+ * @cssprop [--qds-component-tabs-gap] - Space between tabs.
+ * @cssprop [--qds-component-tabs-border-width] - Thickness of the line under the tab list.
+ * @cssprop [--qds-component-tabs-color-border-rest] - Color of the line under the tab list.
+ */
+export declare class QdsTabs extends QdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the tab list. */
+    label: string;
+    /**
+     * The selected tab's position, from 0. Set it to select a tab. Initially the
+     * tab marked `selected` in the markup, or the first enabled tab.
+     */
+    selectedIndex: number;
+    constructor();
+    protected firstUpdated(): void;
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-tabs': QdsTabs;
+    }
+}
+//# sourceMappingURL=qds-tabs.d.ts.map

package/dist/components/qds-tabs/qds-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/qds-tabs/qds-tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAM3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,OAAQ,SAAQ,UAAU;;IACrC,OAAgB,MAAM,4BAepB;IAEF,wCAAwC;IAExC,KAAK,SAAM;IAEX;;;OAGG;IAEH,aAAa,SAAM;;cAmBA,YAAY,IAAI,IAAI;cAOpB,OAAO,IAAI,IAAI;IA6FzB,MAAM,IAAI,cAAc;CAQlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/qds-tabs/qds-tabs.js

@@ -0,0 +1,196 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+import { QdsTab } from '../qds-tab/qds-tab.js';
+import { QdsTabPanel } from '../qds-tab-panel/qds-tab-panel.js';
+let nextId = 0;
+/**
+ * A set of tabs, each showing one panel at a time.
+ *
+ * Follows the ARIA tabs pattern with automatic activation: Left and Right move
+ * between tabs and select as they go, Home and End jump to the first and last,
+ * and only the selected tab is in the tab order — Tab moves from it straight
+ * into the panel. Tabs pair with panels by position.
+ *
+ * ```html
+ * <qds-tabs label="Account">
+ *   <qds-tab slot="tab">Profile</qds-tab>
+ *   <qds-tab slot="tab">Security</qds-tab>
+ *   <qds-tab-panel>…</qds-tab-panel>
+ *   <qds-tab-panel>…</qds-tab-panel>
+ * </qds-tabs>
+ * ```
+ *
+ * @element qds-tabs
+ *
+ * @slot - The `qds-tab-panel` panels.
+ * @slot tab - The `qds-tab` tabs.
+ *
+ * @fires {CustomEvent<{ index: number }>} qds-change - Fired when the user
+ * selects a tab. Not fired for programmatic changes.
+ *
+ * @csspart tablist - The element carrying the tablist role.
+ *
+ * @cssprop [--qds-component-tabs-gap] - Space between tabs.
+ * @cssprop [--qds-component-tabs-border-width] - Thickness of the line under the tab list.
+ * @cssprop [--qds-component-tabs-color-border-rest] - Color of the line under the tab list.
+ */
+let QdsTabs = class QdsTabs extends QdsElement {
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .tablist {
+        display: flex;
+        gap: var(--qds-component-tabs-gap, 0.25rem);
+        overflow-x: auto;
+        border-block-end: var(--qds-component-tabs-border-width, 0.0625rem) solid
+          var(--qds-component-tabs-color-border-rest, #e2e8f0);
+      }
+    `,
+    ]; }
+    /** Prefix for the IDs given to tabs and panels that have none. */
+    #idBase;
+    constructor() {
+        super();
+        /** Accessible name for the tab list. */
+        this.label = '';
+        /**
+         * The selected tab's position, from 0. Set it to select a tab. Initially the
+         * tab marked `selected` in the markup, or the first enabled tab.
+         */
+        this.selectedIndex = -1;
+        /** Prefix for the IDs given to tabs and panels that have none. */
+        this.#idBase = `qds-tabs-${nextId++}`;
+        this.#handleSelect = (event) => {
+            const index = this.#tabs.indexOf(event.target);
+            if (index === -1)
+                return;
+            this.#select(index);
+        };
+        this.#handleKeydown = (event) => {
+            // Alt+Left is the browser's Back; leave every modified key to the browser.
+            if (event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            const tabs = this.#tabs;
+            const current = tabs.indexOf(event.target);
+            if (current === -1)
+                return;
+            const enabled = tabs.filter((tab) => !tab.disabled);
+            const position = enabled.indexOf(tabs[current]);
+            // Arrow keys follow the visual order, which reverses under RTL.
+            const rtl = getComputedStyle(this).direction === 'rtl';
+            let target;
+            switch (event.key) {
+                case 'ArrowRight':
+                    target = enabled[(position + (rtl ? -1 : 1) + enabled.length) % enabled.length];
+                    break;
+                case 'ArrowLeft':
+                    target = enabled[(position + (rtl ? 1 : -1) + enabled.length) % enabled.length];
+                    break;
+                case 'Home':
+                    target = enabled[0];
+                    break;
+                case 'End':
+                    target = enabled.at(-1);
+                    break;
+                default:
+                    return;
+            }
+            if (!target)
+                return;
+            event.preventDefault();
+            this.#select(tabs.indexOf(target));
+            target.focus();
+        };
+        this.addEventListener('qds-tab-select', this.#handleSelect);
+        this.addEventListener('keydown', this.#handleKeydown);
+    }
+    get #tabs() {
+        return [...this.querySelectorAll(':scope > qds-tab')];
+    }
+    get #panels() {
+        return [...this.querySelectorAll(':scope > qds-tab-panel')];
+    }
+    firstUpdated() {
+        // Not left to slotchange alone: server-rendered children are already
+        // slotted when the element hydrates, so slotchange never fires for them.
+        // Panels stay hidden until this runs, so nothing flashes in the meantime.
+        void this.updateComplete.then(() => this.#sync());
+    }
+    updated() {
+        // Only once a selection exists. Resolving the initial one assigns
+        // selectedIndex, which from inside updated() would schedule a second render;
+        // firstUpdated and slotchange do that instead.
+        if (this.selectedIndex >= 0)
+            this.#sync();
+    }
+    #sync() {
+        const tabs = this.#tabs;
+        const panels = this.#panels;
+        if (tabs.length === 0)
+            return;
+        const current = tabs[this.selectedIndex];
+        if (!current || current.disabled) {
+            const marked = tabs.findIndex((tab) => tab.hasAttribute('selected') && !tab.disabled);
+            // Assigning re-runs updated() and so #sync(); finish there.
+            const fallback = marked >= 0 ? marked : tabs.findIndex((tab) => !tab.disabled);
+            if (fallback !== this.selectedIndex) {
+                this.selectedIndex = fallback;
+                return;
+            }
+        }
+        tabs.forEach((tab, index) => {
+            const panel = panels[index];
+            tab.id ||= `${this.#idBase}-tab-${index}`;
+            if (panel) {
+                panel.id ||= `${this.#idBase}-panel-${index}`;
+                tab.setAttribute('aria-controls', panel.id);
+                panel.setAttribute('aria-labelledby', tab.id);
+            }
+            const selected = index === this.selectedIndex;
+            tab.selected = selected;
+            // Roving tabindex: only the selected tab is in the tab order.
+            tab.tabIndex = selected ? 0 : -1;
+        });
+        panels.forEach((panel, index) => {
+            panel.active = index === this.selectedIndex;
+        });
+    }
+    #select(index) {
+        if (index === this.selectedIndex)
+            return;
+        this.selectedIndex = index;
+        this.dispatchEvent(new CustomEvent('qds-change', { detail: { index }, bubbles: true, composed: true }));
+    }
+    #handleSelect;
+    #handleKeydown;
+    render() {
+        return html `
+      <div class="tablist" part="tablist" role="tablist" aria-label=${this.label || nothing}>
+        <slot name="tab" @slotchange=${() => this.#sync()}></slot>
+      </div>
+      <slot @slotchange=${() => this.#sync()}></slot>
+    `;
+    }
+};
+__decorate([
+    property()
+], QdsTabs.prototype, "label", void 0);
+__decorate([
+    property({ type: Number, attribute: 'selected-index' })
+], QdsTabs.prototype, "selectedIndex", void 0);
+QdsTabs = __decorate([
+    customElement('qds-tabs')
+], QdsTabs);
+export { QdsTabs };
+//# sourceMappingURL=qds-tabs.js.map

package/dist/components/qds-tabs/qds-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-tabs.js","sourceRoot":"","sources":["../../../src/components/qds-tabs/qds-tabs.ts"],"names":[],"mappings":"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"}

package/dist/components/qds-text-field/qds-text-field.d.ts

@@ -0,0 +1,94 @@
+import { type TemplateResult } from 'lit';
+import { QdsTextControl, type QdsTextControlType } from '../../internal/qds-text-control.js';
+export type QdsTextFieldType = QdsTextControlType;
+/**
+ * A complete text field: a visible label, the input, an optional hint, and an
+ * error message.
+ *
+ * All four live in one shadow root, which is what makes the wiring possible.
+ * `<label for>` and `aria-describedby` are ID references, and an ID reference
+ * cannot cross a shadow boundary — so a label outside the component could never
+ * name the input inside it, and a hint outside could never describe it.
+ *
+ * Errors come from two places. An `error` message set by the author is always
+ * shown. Otherwise, once the user has left the field (or tried to submit the
+ * form), the browser's own validation message is shown for any failing
+ * constraint — `required`, `type="email"`, `minlength`, `pattern` — so the common
+ * cases need no code at all. A `required` field marks its label with an asterisk,
+ * hidden from assistive technology, which announces the input as required.
+ *
+ * @element qds-text-field
+ *
+ * @slot label - The label, in place of the `label` attribute when it needs markup.
+ * @slot hint - The hint, in place of the `hint` attribute when it needs markup, such as a link.
+ * @slot start - Content before the text, such as an icon or a prefix.
+ * @slot end - Content after the text, such as a unit or a button.
+ *
+ * @fires {CustomEvent<{ value: string }>} qds-input - Fired on every keystroke.
+ * @fires {CustomEvent<{ value: string }>} qds-change - Fired when the value is
+ * committed: on blur after editing, or on Enter.
+ *
+ * @csspart base - The wrapper around the whole field.
+ * @csspart label - The label element.
+ * @csspart control - The box drawn around the input and its affixes.
+ * @csspart input - The native input.
+ * @csspart hint - The hint text.
+ * @csspart error - The error message.
+ *
+ * @cssprop [--qds-component-text-field-gap] - Space between the label, control, and messages.
+ * @cssprop [--qds-component-text-field-duration] - Border transition duration.
+ * @cssprop [--qds-component-text-field-label-font-size] - Label size.
+ * @cssprop [--qds-component-text-field-label-font-weight] - Label weight.
+ * @cssprop [--qds-component-text-field-label-color-content-{state}] - Label color: `rest`, `disabled`.
+ * @cssprop [--qds-component-text-field-hint-font-size] - Hint and error size.
+ * @cssprop [--qds-component-text-field-hint-color-content-rest] - Hint color.
+ * @cssprop [--qds-component-text-field-error-color-content-rest] - Error message color.
+ * @cssprop [--qds-component-text-field-control-gap] - Space between the text and the affixes.
+ * @cssprop [--qds-component-text-field-control-padding-block] - Control vertical padding.
+ * @cssprop [--qds-component-text-field-control-padding-inline] - Control horizontal padding.
+ * @cssprop [--qds-component-text-field-control-font-size] - Input text size.
+ * @cssprop [--qds-component-text-field-control-line-height] - Input line height.
+ * @cssprop [--qds-component-text-field-control-border-radius] - Control corner radius.
+ * @cssprop [--qds-component-text-field-control-border-width] - Control border thickness.
+ * @cssprop [--qds-component-text-field-control-color-background-{state}] - Control fill: `rest`, `disabled`.
+ * @cssprop [--qds-component-text-field-control-color-border-{state}] - Control border: `rest`, `focus`, `disabled`.
+ * @cssprop [--qds-component-text-field-control-color-content-{state}] - Input text: `rest`, `disabled`.
+ * @cssprop [--qds-component-text-field-invalid-color-border-rest] - Control border while showing an error.
+ * @cssprop [--qds-component-text-field-placeholder-color-content-rest] - Placeholder text.
+ * @cssprop [--qds-component-text-field-affix-color-content-rest] - Color of slotted start and end content.
+ */
+export declare class QdsTextField extends QdsTextControl {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** The visible label. Also the input's accessible name. */
+    label: string;
+    /** Help text shown under the input, and read out with it. */
+    hint: string;
+    /**
+     * An error message to show, for errors the browser cannot detect, such as a
+     * server-side check. Shown immediately, and marks the field invalid to
+     * assistive technology, but does not block form submission.
+     */
+    error: string;
+    /**
+     * Whether native validation messages may be shown yet: after the user leaves
+     * the field, or tries to submit the form. Before that, a required field that
+     * nobody has touched is not an error.
+     */
+    private touched;
+    private hasHintSlot;
+    constructor();
+    /** Same as the native `reportValidity()`, and shows the field's message. */
+    reportValidity(): boolean;
+    protected firstUpdated(): void;
+    /** Called by the form on reset: restore the declared value and hide messages again. */
+    formResetCallback(): void;
+    protected syncValidity(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-text-field': QdsTextField;
+    }
+}
+//# sourceMappingURL=qds-text-field.d.ts.map

package/dist/components/qds-text-field/qds-text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-text-field.d.ts","sourceRoot":"","sources":["../../../src/components/qds-text-field/qds-text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK9D,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7F,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,YAAa,SAAQ,cAAc;;IAC9C,OAAgB,MAAM,4BA2HpB;IAEF,2DAA2D;IAE3D,KAAK,SAAM;IAEX,6DAA6D;IAE7D,IAAI,SAAM;IAEV;;;;OAIG;IAEH,KAAK,SAAM;IAEX;;;;OAIG;IAEH,OAAO,CAAC,OAAO,CAAS;IAUxB,OAAO,CAAC,WAAW,CAAS;;IAS5B,4EAA4E;IACnE,cAAc,IAAI,OAAO;cAUf,YAAY,IAAI,IAAI;IAcvC,uFAAuF;IAC9E,iBAAiB,IAAI,IAAI;cAKf,YAAY,IAAI,IAAI;IAU9B,MAAM,IAAI,cAAc;CAgDlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}