@quieto/ui 0.0.0-stage → 0.1.1

package/dist/components/qds-radio-group/qds-radio-group.js

@@ -0,0 +1,317 @@
+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, state } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+import { QdsRadio } from '../qds-radio/qds-radio.js';
+/**
+ * A set of `qds-radio` options, of which at most one is chosen.
+ *
+ * The group owns everything that makes radios a group: the value, form
+ * submission, required validation, and keyboard navigation. Tab moves into the
+ * group and lands on the chosen option (or the first, if none is chosen); arrow
+ * keys then move between options and choose as they go, following the ARIA
+ * radio group pattern.
+ *
+ * @element qds-radio-group
+ *
+ * @slot - The `qds-radio` options.
+ * @slot label - The group label, in place of the `label` attribute when it needs markup.
+ *
+ * @fires {CustomEvent<{ value: string }>} qds-change - Fired when the user
+ * chooses an option. Not fired for programmatic changes.
+ *
+ * @csspart base - The element carrying the radiogroup role.
+ * @csspart label - The group label.
+ * @csspart options - The wrapper around the options.
+ *
+ * @cssprop [--qds-component-radio-group-gap] - Space between options.
+ * @cssprop [--qds-component-radio-group-font-size] - Group label size.
+ * @cssprop [--qds-component-radio-group-font-weight] - Group label weight.
+ * @cssprop [--qds-component-radio-group-color-content-rest] - Group label color.
+ */
+let QdsRadioGroup = class QdsRadioGroup extends QdsElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .label {
+        margin-block-end: var(--qds-component-radio-group-gap, 0.5rem);
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--qds-component-radio-group-font-size, 0.875rem);
+        font-weight: var(--qds-component-radio-group-font-weight, 600);
+        color: var(--qds-component-radio-group-color-content-rest, #0f172a);
+      }
+
+      .options {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--qds-component-radio-group-gap, 0.5rem);
+      }
+
+      :host([orientation='inline']) .options {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: calc(var(--qds-component-radio-group-gap, 0.5rem) * 2);
+      }
+    `,
+    ]; }
+    #internals;
+    /** The value restored on form reset, captured from the markup on first sync. */
+    #defaultValue;
+    constructor() {
+        super();
+        /** The chosen option's value, or an empty string when none is chosen. */
+        this.value = '';
+        /** Field name used when the form is submitted. */
+        this.name = '';
+        /** Visible group label. Also the group's accessible name. */
+        this.label = '';
+        /** Makes the form invalid until an option is chosen. */
+        this.required = false;
+        /** Disables every option. */
+        this.disabled = false;
+        /** Lays the options out in a column (`block`) or a row (`inline`). */
+        this.orientation = 'block';
+        /** Disabled by its own attribute or by an ancestor `<fieldset disabled>`. */
+        this.formDisabled = false;
+        this.hasLabelSlot = false;
+        /** The value restored on form reset, captured from the markup on first sync. */
+        this.#defaultValue = null;
+        this.#handleSelect = (event) => {
+            if (this.disabled || this.formDisabled)
+                return;
+            const radio = event.target;
+            // A nested group's radio bubbles its event up through this one too.
+            if (!this.#radios.includes(radio))
+                return;
+            this.#choose(radio);
+            radio.focus();
+        };
+        this.#handleKeydown = (event) => {
+            if (this.disabled || this.formDisabled)
+                return;
+            // Alt+Left is the browser's Back; leave every modified key to the browser.
+            if (event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            const radios = this.#enabledRadios;
+            const current = radios.indexOf(event.target);
+            if (current === -1)
+                return;
+            // Left and Right follow the visual order, which reverses under RTL.
+            const rtl = getComputedStyle(this).direction === 'rtl';
+            const forward = (current + 1) % radios.length;
+            const backward = (current - 1 + radios.length) % radios.length;
+            let next;
+            switch (event.key) {
+                case 'ArrowDown':
+                    next = forward;
+                    break;
+                case 'ArrowUp':
+                    next = backward;
+                    break;
+                case 'ArrowRight':
+                    next = rtl ? backward : forward;
+                    break;
+                case 'ArrowLeft':
+                    next = rtl ? forward : backward;
+                    break;
+                case ' ':
+                    next = current;
+                    break;
+                default:
+                    return;
+            }
+            // Arrow keys and Space would otherwise scroll the page.
+            event.preventDefault();
+            const radio = radios[next];
+            this.#choose(radio);
+            radio.focus();
+        };
+        this.#internals = this.attachInternals();
+        this.addEventListener('qds-radio-select', this.#handleSelect);
+        this.addEventListener('keydown', this.#handleKeydown);
+    }
+    /** The form this group belongs to, if any. */
+    get form() {
+        return this.#internals.form;
+    }
+    /** Same as the native `checkValidity()`. */
+    checkValidity() {
+        return this.#internals.checkValidity();
+    }
+    /** Same as the native `reportValidity()`. */
+    reportValidity() {
+        return this.#internals.reportValidity();
+    }
+    /** Same as the native `validity`. */
+    get validity() {
+        return this.#internals.validity;
+    }
+    /**
+     * This group's radios: every qds-radio inside it, however deeply wrapped for
+     * layout, except those that belong to a group nested inside this one.
+     */
+    get #radios() {
+        return [...this.querySelectorAll('qds-radio')].filter((radio) => radio.closest('qds-radio-group') === this);
+    }
+    get #enabledRadios() {
+        return this.#radios.filter((radio) => !radio.disabled);
+    }
+    willUpdate(changed) {
+        if (changed.has('value')) {
+            this.#internals.setFormValue(this.value || null);
+        }
+    }
+    firstUpdated() {
+        // Not left to slotchange alone. When the docs site server-renders this into
+        // declarative shadow DOM, the radios are already assigned to the slot before
+        // the element hydrates, so slotchange never fires and nothing would sync.
+        //
+        // After updateComplete, because the first client update of a server-rendered
+        // element adopts the existing DOM rather than writing to it: a label-slot
+        // change made during it would silently not be applied.
+        void this.updateComplete.then(() => {
+            this.hasLabelSlot = this.querySelector(':scope > [slot="label"]') !== null;
+            this.#captureDefault();
+        });
+    }
+    updated() {
+        // Syncing before the default is captured would uncheck every radio while the
+        // value is still empty, erasing a `checked` attribute in the markup before
+        // #captureDefault gets the chance to read it.
+        if (this.#defaultValue !== null)
+            this.#syncRadios();
+    }
+    /** Called by the form on reset. */
+    formResetCallback() {
+        this.value = this.#defaultValue ?? '';
+    }
+    /** Called when this element's disabled state changes, from its own attribute or a fieldset. */
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    /**
+     * Adopt a radio's `checked` attribute as the initial value, so markup can mark
+     * the default on the option itself. The group's own value wins. Runs once, as
+     * soon as there are radios to read: when the parser upgrades the group before
+     * reaching its children, the first slotchange is what finds them.
+     */
+    #captureDefault() {
+        const radios = this.#radios;
+        if (this.#defaultValue !== null || radios.length === 0)
+            return;
+        if (!this.value) {
+            this.value = radios.find((radio) => radio.hasAttribute('checked'))?.value ?? '';
+        }
+        this.#defaultValue = this.value;
+        this.#syncRadios();
+    }
+    #handleSlotChange() {
+        this.#captureDefault();
+        if (this.#defaultValue !== null)
+            this.#syncRadios();
+    }
+    #syncRadios() {
+        const groupDisabled = this.disabled || this.formDisabled;
+        const radios = this.#radios;
+        for (const radio of radios) {
+            radio.checked = this.value !== '' && radio.value === this.value;
+            radio.groupDisabled = groupDisabled;
+        }
+        // Roving tabindex: exactly one option is in the tab order — the chosen one,
+        // or the first enabled one when nothing is chosen yet.
+        const tabbable = groupDisabled
+            ? undefined
+            : (radios.find((radio) => radio.checked && !radio.disabled) ?? this.#enabledRadios[0]);
+        for (const radio of radios) {
+            radio.tabIndex = radio === tabbable ? 0 : -1;
+        }
+        const anchor = radios[0];
+        if (this.required && !this.value) {
+            this.#internals.setValidity({ valueMissing: true }, 'Select one of these options.', anchor);
+        }
+        else {
+            this.#internals.setValidity({});
+        }
+    }
+    #choose(radio) {
+        if (radio.value === this.value)
+            return;
+        this.value = radio.value;
+        // Synchronously, not left to willUpdate and updated: a qds-change listener
+        // reading FormData or validity would otherwise see the previous state.
+        this.#internals.setFormValue(this.value);
+        this.#syncRadios();
+        this.dispatchEvent(new CustomEvent('qds-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    #handleSelect;
+    #handleKeydown;
+    render() {
+        const labelled = this.label || this.hasLabelSlot;
+        return html `
+      <div
+        part="base"
+        role="radiogroup"
+        aria-labelledby=${labelled ? 'label' : nothing}
+        aria-required=${this.required ? 'true' : nothing}
+        aria-disabled=${this.disabled || this.formDisabled ? 'true' : nothing}
+      >
+        <div id="label" class="label" part="label" ?hidden=${!labelled}>
+          <slot
+            name="label"
+            @slotchange=${(event) => {
+            this.hasLabelSlot = event.target.assignedNodes().length > 0;
+        }}
+            >${this.label}</slot
+          >
+        </div>
+        <div class="options" part="options">
+          <slot @slotchange=${this.#handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], QdsRadioGroup.prototype, "value", void 0);
+__decorate([
+    property()
+], QdsRadioGroup.prototype, "name", void 0);
+__decorate([
+    property()
+], QdsRadioGroup.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsRadioGroup.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsRadioGroup.prototype, "orientation", void 0);
+__decorate([
+    state()
+], QdsRadioGroup.prototype, "formDisabled", void 0);
+__decorate([
+    state()
+], QdsRadioGroup.prototype, "hasLabelSlot", void 0);
+QdsRadioGroup = __decorate([
+    customElement('qds-radio-group')
+], QdsRadioGroup);
+export { QdsRadioGroup };
+//# sourceMappingURL=qds-radio-group.js.map

package/dist/components/qds-radio-group/qds-radio-group.js.map

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

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

@@ -0,0 +1,46 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsStackDirection = 'block' | 'inline';
+export type QdsStackGap = '0' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export type QdsStackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type QdsStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Layout primitive that spaces its children using the spacing scale.
+ *
+ * Deliberately the least visual component in the library: its whole job is to
+ * prove that the non-color tiers flow through the pipeline. A colour token
+ * failing is obvious on sight, whereas a broken spacing token just looks like
+ * slightly-off design, so `gap` is constrained to scale steps and nothing else —
+ * an arbitrary value cannot be passed in.
+ *
+ * @element qds-stack
+ *
+ * @slot - The items to lay out.
+ *
+ * @cssprop [--qds-spacing-{step}] - The spacing scale this reads `gap` from.
+ */
+export declare class QdsStack extends QdsElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Stacking axis. Named `block`/`inline` rather than `vertical`/`horizontal`
+     * because the layout follows writing mode — `inline` runs right-to-left in an
+     * RTL context, which is the behavior you want and the wrong thing to call
+     * "horizontal".
+     */
+    direction: QdsStackDirection;
+    /** Spacing scale step. */
+    gap: QdsStackGap;
+    /** Cross-axis alignment. */
+    align?: QdsStackAlign;
+    /** Main-axis distribution. */
+    justify?: QdsStackJustify;
+    /** Allows items to wrap onto multiple lines. */
+    wrap: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-stack': QdsStack;
+    }
+}
+//# sourceMappingURL=qds-stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-stack.d.ts","sourceRoot":"","sources":["../../../src/components/qds-stack/qds-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACtG,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAChF,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhF;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAqFpB;IAEF;;;;;OAKG;IAEH,SAAS,EAAE,iBAAiB,CAAW;IAEvC,0BAA0B;IAE1B,GAAG,EAAE,WAAW,CAAS;IAEzB,4BAA4B;IAE5B,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,8BAA8B;IAE9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B,gDAAgD;IAEhD,IAAI,UAAS;IAEJ,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,149 @@
+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';
+/**
+ * Layout primitive that spaces its children using the spacing scale.
+ *
+ * Deliberately the least visual component in the library: its whole job is to
+ * prove that the non-color tiers flow through the pipeline. A colour token
+ * failing is obvious on sight, whereas a broken spacing token just looks like
+ * slightly-off design, so `gap` is constrained to scale steps and nothing else —
+ * an arbitrary value cannot be passed in.
+ *
+ * @element qds-stack
+ *
+ * @slot - The items to lay out.
+ *
+ * @cssprop [--qds-spacing-{step}] - The spacing scale this reads `gap` from.
+ */
+let QdsStack = class QdsStack extends QdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Stacking axis. Named `block`/`inline` rather than `vertical`/`horizontal`
+         * because the layout follows writing mode — `inline` runs right-to-left in an
+         * RTL context, which is the behavior you want and the wrong thing to call
+         * "horizontal".
+         */
+        this.direction = 'block';
+        /** Spacing scale step. */
+        this.gap = '400';
+        /** Allows items to wrap onto multiple lines. */
+        this.wrap = false;
+    }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--_gap, var(--qds-spacing-400, 1rem));
+      }
+
+      :host([direction='inline']) {
+        flex-direction: row;
+      }
+
+      :host([wrap]) {
+        flex-wrap: wrap;
+      }
+
+      /*
+       * One rule per scale step, because CSS cannot build a variable name from an
+       * attribute value. Constraining gap to the scale is the point: it makes
+       * gap="17px" impossible rather than merely discouraged.
+       */
+      :host([gap='0']) {
+        --_gap: var(--qds-spacing-0, 0rem);
+      }
+      :host([gap='100']) {
+        --_gap: var(--qds-spacing-100, 0.25rem);
+      }
+      :host([gap='200']) {
+        --_gap: var(--qds-spacing-200, 0.5rem);
+      }
+      :host([gap='300']) {
+        --_gap: var(--qds-spacing-300, 0.75rem);
+      }
+      :host([gap='400']) {
+        --_gap: var(--qds-spacing-400, 1rem);
+      }
+      :host([gap='500']) {
+        --_gap: var(--qds-spacing-500, 1.5rem);
+      }
+      :host([gap='600']) {
+        --_gap: var(--qds-spacing-600, 2rem);
+      }
+      :host([gap='700']) {
+        --_gap: var(--qds-spacing-700, 3rem);
+      }
+      :host([gap='800']) {
+        --_gap: var(--qds-spacing-800, 4rem);
+      }
+      :host([gap='900']) {
+        --_gap: var(--qds-spacing-900, 6rem);
+      }
+
+      :host([align='start']) {
+        align-items: flex-start;
+      }
+      :host([align='center']) {
+        align-items: center;
+      }
+      :host([align='end']) {
+        align-items: flex-end;
+      }
+      :host([align='stretch']) {
+        align-items: stretch;
+      }
+      :host([align='baseline']) {
+        align-items: baseline;
+      }
+
+      :host([justify='start']) {
+        justify-content: flex-start;
+      }
+      :host([justify='center']) {
+        justify-content: center;
+      }
+      :host([justify='end']) {
+        justify-content: flex-end;
+      }
+      :host([justify='between']) {
+        justify-content: space-between;
+      }
+      :host([justify='around']) {
+        justify-content: space-around;
+      }
+    `,
+    ]; }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], QdsStack.prototype, "direction", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsStack.prototype, "gap", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsStack.prototype, "align", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsStack.prototype, "justify", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsStack.prototype, "wrap", void 0);
+QdsStack = __decorate([
+    customElement('qds-stack')
+], QdsStack);
+export { QdsStack };
+//# sourceMappingURL=qds-stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-stack.js","sourceRoot":"","sources":["../../../src/components/qds-stack/qds-stack.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;AAO3D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAwFL;;;;;WAKG;QAEH,cAAS,GAAsB,OAAO,CAAC;QAEvC,0BAA0B;QAE1B,QAAG,GAAgB,KAAK,CAAC;QAUzB,gDAAgD;QAEhD,SAAI,GAAG,KAAK,CAAC;IAKf,CAAC;aAnHiB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;KACF,AArFqB,CAqFpB;IA2BO,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AApBD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACW;AAIvC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCACH;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACN;AAItB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACF;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AA/GF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoHpB"}

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

@@ -0,0 +1,55 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+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.
+ */
+export declare class QdsTab extends QdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether this tab is the selected one. `qds-tabs` manages this; as an
+     * attribute in markup it marks the tab selected initially.
+     */
+    selected: boolean;
+    /** Prevents selecting this tab. Arrow keys skip it. */
+    disabled: boolean;
+    constructor();
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-tab': QdsTab;
+    }
+}
+//# sourceMappingURL=qds-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-tab.d.ts","sourceRoot":"","sources":["../../../src/components/qds-tab/qds-tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1E,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAqEpB;IAEF;;;OAGG;IAEH,QAAQ,UAAS;IAEjB,uDAAuD;IAEvD,QAAQ,UAAS;;IAOR,iBAAiB,IAAI,IAAI;cAOf,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAetD,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}