@quieto/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,39 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A stack of `qds-accordion-item` sections.
+ *
+ * Adds two things the items cannot do alone: `exclusive`, which keeps at most one
+ * item open, and arrow-key movement between headings (Up, Down, Home, End), as
+ * the ARIA accordion pattern recommends. Tab still moves through the headings
+ * and into open panels as usual.
+ *
+ * The open state lives on each item, so it is rendered correctly from the
+ * server. `exclusive` holds however an item opens — by the user, from code, or
+ * in markup; when markup opens several, the first stays open.
+ *
+ * @element qds-accordion
+ *
+ * @slot - The `qds-accordion-item` sections.
+ *
+ * @csspart base - The wrapper around the items.
+ *
+ * @cssprop [--qds-component-accordion-border-width] - Divider thickness, including the top border.
+ * @cssprop [--qds-component-accordion-color-border-rest] - Divider color.
+ */
+export declare class QdsAccordion extends QdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Keeps at most one item open: opening one closes the others. */
+    exclusive: boolean;
+    constructor();
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-accordion': QdsAccordion;
+    }
+}
+//# sourceMappingURL=qds-accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-accordion.d.ts","sourceRoot":"","sources":["../../../src/components/qds-accordion/qds-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,YAAa,SAAQ,UAAU;;IAC1C,OAAgB,MAAM,4BASpB;IAEF,kEAAkE;IAElE,SAAS,UAAS;;cAYC,YAAY,IAAI,IAAI;cAMpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAyDtD,MAAM,IAAI,cAAc;CAKlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

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

@@ -0,0 +1,130 @@
+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';
+import { QdsAccordionItem } from '../qds-accordion-item/qds-accordion-item.js';
+/**
+ * A stack of `qds-accordion-item` sections.
+ *
+ * Adds two things the items cannot do alone: `exclusive`, which keeps at most one
+ * item open, and arrow-key movement between headings (Up, Down, Home, End), as
+ * the ARIA accordion pattern recommends. Tab still moves through the headings
+ * and into open panels as usual.
+ *
+ * The open state lives on each item, so it is rendered correctly from the
+ * server. `exclusive` holds however an item opens — by the user, from code, or
+ * in markup; when markup opens several, the first stays open.
+ *
+ * @element qds-accordion
+ *
+ * @slot - The `qds-accordion-item` sections.
+ *
+ * @csspart base - The wrapper around the items.
+ *
+ * @cssprop [--qds-component-accordion-border-width] - Divider thickness, including the top border.
+ * @cssprop [--qds-component-accordion-color-border-rest] - Divider color.
+ */
+let QdsAccordion = class QdsAccordion extends QdsElement {
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+        border-block-start: var(--qds-component-accordion-border-width, 0.0625rem) solid
+          var(--qds-component-accordion-color-border-rest, #e2e8f0);
+      }
+    `,
+    ]; }
+    constructor() {
+        super();
+        /** Keeps at most one item open: opening one closes the others. */
+        this.exclusive = false;
+        this.#handleOpen = (event) => {
+            const opened = event.target;
+            // Only this accordion's own items: a nested accordion's events bubble here too.
+            if (opened.parentElement !== this)
+                return;
+            this.#enforceExclusive(opened);
+        };
+        this.#handleKeydown = (event) => {
+            // Alt+Up and the like belong to the browser.
+            if (event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            const items = this.#items.filter((item) => !item.disabled);
+            // Keydown from inside an item is retargeted to the item host here.
+            const current = items.indexOf(event.target);
+            if (current === -1)
+                return;
+            // Only act when focus is on a heading, not on something inside an open panel.
+            const focused = event.target.shadowRoot?.activeElement;
+            if (focused?.id !== 'trigger')
+                return;
+            let next;
+            switch (event.key) {
+                case 'ArrowDown':
+                    next = (current + 1) % items.length;
+                    break;
+                case 'ArrowUp':
+                    next = (current - 1 + items.length) % items.length;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = items.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            items[next].focus();
+        };
+        this.addEventListener('qds-accordion-item-opened', this.#handleOpen);
+        this.addEventListener('keydown', this.#handleKeydown);
+    }
+    get #items() {
+        return [...this.querySelectorAll(':scope > qds-accordion-item')];
+    }
+    firstUpdated() {
+        // Items opened in markup may have upgraded before this element was
+        // listening, so check once everything has rendered.
+        void this.updateComplete.then(() => this.#enforceExclusive());
+    }
+    updated(changed) {
+        if (changed.has('exclusive') && this.hasUpdated)
+            this.#enforceExclusive();
+    }
+    /** Close every item but `keep` — by default, the first open one. */
+    #enforceExclusive(keep) {
+        if (!this.exclusive)
+            return;
+        const items = this.#items;
+        const kept = keep ?? items.find((item) => item.open);
+        for (const item of items) {
+            // Set directly rather than through a click, so closing the others does not
+            // fire qds-close for changes the user did not make.
+            if (item !== kept)
+                item.open = false;
+        }
+    }
+    #handleOpen;
+    #handleKeydown;
+    render() {
+        // On slotchange too: an item added later with `open` already set does not
+        // announce itself, and is reconciled here the same way as initial markup.
+        return html `<div part="base"><slot @slotchange=${() => this.#enforceExclusive()}></slot></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsAccordion.prototype, "exclusive", void 0);
+QdsAccordion = __decorate([
+    customElement('qds-accordion')
+], QdsAccordion);
+export { QdsAccordion };
+//# sourceMappingURL=qds-accordion.js.map

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

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

package/dist/components/qds-accordion-item/qds-accordion-item.d.ts

@@ -0,0 +1,68 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsAccordionItemHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * One collapsible section of a `qds-accordion`.
+ *
+ * Follows the ARIA accordion pattern: a heading wrapping a button that reports
+ * `aria-expanded`, and a panel labelled by that button. The heading level is
+ * configurable because it has to fit the outline of the page around it — an
+ * accordion under an h2 needs h3 headings, not whatever the component assumed.
+ *
+ * A closed panel is `hidden="until-found"` rather than plainly hidden, so the
+ * browser's find-in-page can search collapsed content and opens the item when
+ * it finds a match. Where that is not supported it behaves as `hidden`.
+ *
+ * Works on its own as a single disclosure, too.
+ *
+ * @element qds-accordion-item
+ *
+ * @slot - The panel content.
+ * @slot heading - The heading text, in place of the `heading` attribute when it needs markup.
+ *
+ * @fires {CustomEvent<void>} qds-open - Fired when the user opens the item.
+ * @fires {CustomEvent<void>} qds-close - Fired when the user closes the item.
+ *
+ * @csspart heading - The element carrying the heading role.
+ * @csspart trigger - The button that opens and closes the panel.
+ * @csspart icon - The chevron.
+ * @csspart panel - The collapsible region.
+ *
+ * @cssprop [--qds-component-accordion-border-width] - Divider thickness.
+ * @cssprop [--qds-component-accordion-duration] - Chevron rotation duration.
+ * @cssprop [--qds-component-accordion-color-border-rest] - Divider color.
+ * @cssprop [--qds-component-accordion-trigger-gap] - Space between the heading text and the chevron.
+ * @cssprop [--qds-component-accordion-trigger-padding-block] - Trigger vertical padding.
+ * @cssprop [--qds-component-accordion-trigger-padding-inline] - Trigger horizontal padding.
+ * @cssprop [--qds-component-accordion-trigger-font-size] - Heading size.
+ * @cssprop [--qds-component-accordion-trigger-font-weight] - Heading weight.
+ * @cssprop [--qds-component-accordion-trigger-line-height] - Heading line height.
+ * @cssprop [--qds-component-accordion-trigger-color-content-{state}] - Heading color: `rest`, `disabled`.
+ * @cssprop [--qds-component-accordion-trigger-color-background-hover] - Trigger fill under the pointer.
+ * @cssprop [--qds-component-accordion-panel-padding-block] - Panel vertical padding.
+ * @cssprop [--qds-component-accordion-panel-padding-inline] - Panel horizontal padding.
+ * @cssprop [--qds-component-accordion-panel-font-size] - Panel text size.
+ * @cssprop [--qds-component-accordion-panel-line-height] - Panel line height.
+ * @cssprop [--qds-component-accordion-panel-color-content-rest] - Panel text color.
+ */
+export declare class QdsAccordionItem extends QdsElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Whether the panel is shown. */
+    get open(): boolean;
+    set open(open: boolean);
+    /** Prevents opening or closing, and takes the heading out of the tab order. */
+    disabled: boolean;
+    /** The heading text. */
+    heading: string;
+    /** The heading level, to fit the page outline. */
+    headingLevel: QdsAccordionItemHeadingLevel;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-accordion-item': QdsAccordionItem;
+    }
+}
+//# sourceMappingURL=qds-accordion-item.d.ts.map

package/dist/components/qds-accordion-item/qds-accordion-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-accordion-item.d.ts","sourceRoot":"","sources":["../../../src/components/qds-accordion-item/qds-accordion-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,4BAA4B,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,OAAgB,MAAM,4BA0FpB;IAEF,kCAAkC;IAClC,IACI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,OAAO,EAarB;IAID,+EAA+E;IAE/E,QAAQ,UAAS;IAEjB,wBAAwB;IAExB,OAAO,SAAM;IAEb,kDAAkD;IAElD,YAAY,EAAE,4BAA4B,CAAK;IAyBtC,MAAM,IAAI,cAAc;CA+BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/qds-accordion-item/qds-accordion-item.js

@@ -0,0 +1,247 @@
+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, isServer, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * One collapsible section of a `qds-accordion`.
+ *
+ * Follows the ARIA accordion pattern: a heading wrapping a button that reports
+ * `aria-expanded`, and a panel labelled by that button. The heading level is
+ * configurable because it has to fit the outline of the page around it — an
+ * accordion under an h2 needs h3 headings, not whatever the component assumed.
+ *
+ * A closed panel is `hidden="until-found"` rather than plainly hidden, so the
+ * browser's find-in-page can search collapsed content and opens the item when
+ * it finds a match. Where that is not supported it behaves as `hidden`.
+ *
+ * Works on its own as a single disclosure, too.
+ *
+ * @element qds-accordion-item
+ *
+ * @slot - The panel content.
+ * @slot heading - The heading text, in place of the `heading` attribute when it needs markup.
+ *
+ * @fires {CustomEvent<void>} qds-open - Fired when the user opens the item.
+ * @fires {CustomEvent<void>} qds-close - Fired when the user closes the item.
+ *
+ * @csspart heading - The element carrying the heading role.
+ * @csspart trigger - The button that opens and closes the panel.
+ * @csspart icon - The chevron.
+ * @csspart panel - The collapsible region.
+ *
+ * @cssprop [--qds-component-accordion-border-width] - Divider thickness.
+ * @cssprop [--qds-component-accordion-duration] - Chevron rotation duration.
+ * @cssprop [--qds-component-accordion-color-border-rest] - Divider color.
+ * @cssprop [--qds-component-accordion-trigger-gap] - Space between the heading text and the chevron.
+ * @cssprop [--qds-component-accordion-trigger-padding-block] - Trigger vertical padding.
+ * @cssprop [--qds-component-accordion-trigger-padding-inline] - Trigger horizontal padding.
+ * @cssprop [--qds-component-accordion-trigger-font-size] - Heading size.
+ * @cssprop [--qds-component-accordion-trigger-font-weight] - Heading weight.
+ * @cssprop [--qds-component-accordion-trigger-line-height] - Heading line height.
+ * @cssprop [--qds-component-accordion-trigger-color-content-{state}] - Heading color: `rest`, `disabled`.
+ * @cssprop [--qds-component-accordion-trigger-color-background-hover] - Trigger fill under the pointer.
+ * @cssprop [--qds-component-accordion-panel-padding-block] - Panel vertical padding.
+ * @cssprop [--qds-component-accordion-panel-padding-inline] - Panel horizontal padding.
+ * @cssprop [--qds-component-accordion-panel-font-size] - Panel text size.
+ * @cssprop [--qds-component-accordion-panel-line-height] - Panel line height.
+ * @cssprop [--qds-component-accordion-panel-color-content-rest] - Panel text color.
+ */
+let QdsAccordionItem = class QdsAccordionItem extends QdsElement {
+    constructor() {
+        super(...arguments);
+        this.#open = false;
+        /** Prevents opening or closing, and takes the heading out of the tab order. */
+        this.disabled = false;
+        /** The heading text. */
+        this.heading = '';
+        /** The heading level, to fit the page outline. */
+        this.headingLevel = 3;
+    }
+    static { this.shadowRootOptions = {
+        ...QdsElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        border-block-end: var(--qds-component-accordion-border-width, 0.0625rem) solid
+          var(--qds-component-accordion-color-border-rest, #e2e8f0);
+      }
+
+      .heading {
+        margin: 0;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--qds-component-accordion-trigger-gap, 0.75rem);
+        width: 100%;
+        margin: 0;
+        padding: var(--qds-component-accordion-trigger-padding-block, 0.75rem)
+          var(--qds-component-accordion-trigger-padding-inline, 0.5rem);
+
+        font: inherit;
+        font-size: var(--qds-component-accordion-trigger-font-size, 1rem);
+        font-weight: var(--qds-component-accordion-trigger-font-weight, 500);
+        line-height: var(--qds-component-accordion-trigger-line-height, 1.375);
+        text-align: start;
+        color: var(--qds-component-accordion-trigger-color-content-rest, #0f172a);
+
+        background: none;
+        border: 0;
+        cursor: pointer;
+      }
+
+      button:where(:hover) {
+        background-color: var(--qds-component-accordion-trigger-color-background-hover, #f1f5f9);
+      }
+
+      button:focus-visible {
+        outline: var(--_focus-ring);
+        outline-offset: -0.125rem;
+      }
+
+      button:disabled {
+        color: var(--qds-component-accordion-trigger-color-content-disabled, #64748b);
+        background: none;
+        cursor: not-allowed;
+      }
+
+      .icon {
+        flex: none;
+        width: 1em;
+        height: 1em;
+        transition: rotate var(--qds-component-accordion-duration, 120ms);
+      }
+
+      :host([open]) .icon {
+        rotate: 180deg;
+      }
+
+      .panel {
+        padding: 0 var(--qds-component-accordion-panel-padding-inline, 0.5rem)
+          var(--qds-component-accordion-panel-padding-block, 0.75rem);
+        font-size: var(--qds-component-accordion-panel-font-size, 0.875rem);
+        line-height: var(--qds-component-accordion-panel-line-height, 1.5);
+        color: var(--qds-component-accordion-panel-color-content-rest, #0f172a);
+      }
+
+      /*
+       * until-found panels are hidden with content-visibility rather than
+       * display:none, so they keep their padding box unless it is removed.
+       */
+      .panel[hidden] {
+        padding: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .icon {
+          transition: none;
+        }
+      }
+
+      @media (forced-colors: active) {
+        button:disabled {
+          color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    /** Whether the panel is shown. */
+    get open() {
+        return this.#open;
+    }
+    set open(open) {
+        const old = this.#open;
+        this.#open = open;
+        this.requestUpdate('open', old);
+        // Announced from the setter, synchronously, so that qds-accordion can enforce
+        // exclusive however the item opened — a click or code — and in the order
+        // items were opened: when two open in one tick, the last one wins.
+        // Not before the first render: the open state in markup is reconciled by the
+        // accordion itself, keeping the first, as native exclusive <details> does.
+        // qds-open is the public event, and only fires for the user.
+        if (open && !old && this.hasUpdated && !isServer) {
+            this.dispatchEvent(new Event('qds-accordion-item-opened', { bubbles: true }));
+        }
+    }
+    #open;
+    #setOpen(open) {
+        if (open === this.open)
+            return;
+        this.open = open;
+        this.dispatchEvent(new CustomEvent(open ? 'qds-open' : 'qds-close', { bubbles: true, composed: true }));
+    }
+    /**
+     * Find-in-page matched text in the collapsed panel. The browser has already
+     * revealed it; mirror that into `open` so the item's state and aria-expanded
+     * agree. Listened for on the panel itself: beforematch is not composed, so it
+     * never reaches the host.
+     */
+    #handleBeforeMatch() {
+        this.#setOpen(true);
+    }
+    #handleClick() {
+        if (this.disabled)
+            return;
+        this.#setOpen(!this.open);
+    }
+    render() {
+        return html `
+      <div class="heading" part="heading" role="heading" aria-level=${this.headingLevel}>
+        <button
+          id="trigger"
+          part="trigger"
+          type="button"
+          aria-expanded=${String(this.open)}
+          aria-controls="panel"
+          ?disabled=${this.disabled}
+          @click=${this.#handleClick}
+        >
+          <slot name="heading">${this.heading}</slot>
+          <svg class="icon" part="icon" viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="4 6 8 10 12 6"></polyline>
+          </svg>
+        </button>
+      </div>
+      <div
+        id="panel"
+        class="panel"
+        part="panel"
+        role="region"
+        aria-labelledby="trigger"
+        hidden=${this.open ? nothing : 'until-found'}
+        @beforematch=${this.#handleBeforeMatch}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsAccordionItem.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsAccordionItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], QdsAccordionItem.prototype, "heading", void 0);
+__decorate([
+    property({ type: Number, attribute: 'heading-level' })
+], QdsAccordionItem.prototype, "headingLevel", void 0);
+QdsAccordionItem = __decorate([
+    customElement('qds-accordion-item')
+], QdsAccordionItem);
+export { QdsAccordionItem };
+//# sourceMappingURL=qds-accordion-item.js.map

package/dist/components/qds-accordion-item/qds-accordion-item.js.map

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

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

@@ -0,0 +1,92 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type QdsButtonSize = 'sm' | 'md' | 'lg';
+export type QdsButtonType = 'button' | 'submit' | 'reset';
+/**
+ * A button.
+ *
+ * Every visual property resolves through the component tier of the token system,
+ * so `--qds-component-button-*` is simultaneously the token API and the styling
+ * API — overriding one of those variables is the supported way to restyle a
+ * button, and it is the same variable the design tokens define.
+ *
+ * When it submits a form, `event.submitter` is not the `qds-button` itself: a
+ * custom element cannot be a submitter, so it submits through a temporary native
+ * button carrying its `name` and `value`, which exists only while the submit
+ * event is being dispatched. Read `event.submitter.value` (or
+ * `new FormData(form, event.submitter)`) inside the submit handler, and give
+ * buttons distinct values to tell them apart.
+ *
+ * @element qds-button
+ *
+ * @slot - The button label.
+ * @slot start - Content before the label, typically an icon.
+ * @slot end - Content after the label, typically an icon.
+ *
+ * @fires {CustomEvent<void>} qds-click - Fired on activation. Not fired when
+ * disabled or loading. Prefer this over listening for `click`, which a disabled
+ * host can still receive.
+ *
+ * @csspart button - The native button element.
+ * @csspart label - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-button-border-radius] - Corner radius.
+ * @cssprop [--qds-component-button-border-width] - Border thickness.
+ * @cssprop [--qds-component-button-font-weight] - Label weight.
+ * @cssprop [--qds-component-button-duration] - State transition duration.
+ * @cssprop [--qds-component-button-{variant}-color-background-{state}] - Background per variant and state.
+ * @cssprop [--qds-component-button-{variant}-color-content-{state}] - Label color per variant and state.
+ * @cssprop [--qds-component-button-{variant}-color-border-{state}] - Border color per variant and state.
+ * @cssprop [--qds-component-button-{size}-padding-block] - Vertical padding per size.
+ * @cssprop [--qds-component-button-{size}-padding-inline] - Horizontal padding per size.
+ */
+export declare class QdsButton extends QdsElement {
+    #private;
+    /**
+     * `delegatesFocus` makes the host focusable by forwarding focus to the inner
+     * button, so `qds-button.focus()` and tab order behave like a native button
+     * without the host needing its own tabindex.
+     */
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * Form association is what lets a button inside shadow DOM submit the form
+     * around it. `attachInternals().form` finds the containing form across the
+     * shadow boundary, which `HTMLFormElement`'s own logic cannot do — a plain
+     * shadow-DOM button silently fails to submit.
+     */
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Visual emphasis. */
+    variant: QdsButtonVariant;
+    /** Control size. */
+    size: QdsButtonSize;
+    /** Behavior within a form. */
+    type: QdsButtonType;
+    /** Prevents interaction and removes the button from the tab order. */
+    disabled: boolean;
+    /**
+     * Shows a spinner and blocks activation, while keeping the button focusable so
+     * focus is not lost mid-interaction.
+     */
+    loading: boolean;
+    /** Stretches the button to fill its container. */
+    fullWidth: boolean;
+    /** Accessible name, for when the button has no text (an icon-only button). */
+    label: string | null;
+    /** Submitted as the name of this button's entry when it submits a form. */
+    name: string;
+    /**
+     * Submitted with `name` when this button submits a form, and reported as the
+     * dialog's `returnValue` when it submits a `<form method="dialog">`.
+     */
+    value: string;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-button': QdsButton;
+    }
+}
+//# sourceMappingURL=qds-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-button.d.ts","sourceRoot":"","sources":["../../../src/components/qds-button/qds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,qBACa,SAAU,SAAQ,UAAU;;IACvC;;;;OAIG;IACH,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF;;;;;OAKG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BA0NpB;IAEF,uBAAuB;IAEvB,OAAO,EAAE,gBAAgB,CAAa;IAEtC,oBAAoB;IAEpB,IAAI,EAAE,aAAa,CAAQ;IAE3B,8BAA8B;IAE9B,IAAI,EAAE,aAAa,CAAY;IAE/B,sEAAsE;IAEtE,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB,kDAAkD;IAElD,SAAS,UAAS;IAElB,8EAA8E;IAE9E,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B,2EAA2E;IAE3E,IAAI,SAAM;IAEV;;;OAGG;IAEH,KAAK,SAAM;;IA+DF,MAAM,IAAI,cAAc;CAqBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}