@quieto/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,85 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A checkbox.
+ *
+ * A native `<input type="checkbox">` sits inside the shadow root, visually
+ * hidden, with a token-styled box drawn over it. Keeping the native input is
+ * what gives the component keyboard handling, `indeterminate`, and a correct
+ * accessibility role for free; the drawn box is purely presentational.
+ *
+ * @element qds-checkbox
+ *
+ * @slot - The label.
+ *
+ * @fires {CustomEvent<{ checked: boolean }>} qds-change - Fired when the user
+ * toggles the checkbox. Not fired for programmatic changes.
+ *
+ * @csspart base - The label element wrapping the control and its text.
+ * @csspart control - The drawn box.
+ * @csspart label - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-checkbox-gap] - Space between the box and the label.
+ * @cssprop [--qds-component-checkbox-font-size] - Label size.
+ * @cssprop [--qds-component-checkbox-line-height] - Label line height.
+ * @cssprop [--qds-component-checkbox-duration] - State transition duration.
+ * @cssprop [--qds-component-checkbox-control-width] - Box width.
+ * @cssprop [--qds-component-checkbox-control-height] - Box height.
+ * @cssprop [--qds-component-checkbox-control-border-radius] - Box corner radius.
+ * @cssprop [--qds-component-checkbox-control-border-width] - Box border thickness.
+ * @cssprop [--qds-component-checkbox-control-color-background-{state}] - Box fill: `unchecked`, `checked`, `hover` (checked, under the pointer), `disabled`.
+ * @cssprop [--qds-component-checkbox-control-color-border-{state}] - Box border: `unchecked`, `hover` (unchecked, under the pointer), `checked`, `disabled`.
+ * @cssprop [--qds-component-checkbox-control-color-content-{state}] - Check mark color: `checked`, `disabled`.
+ * @cssprop [--qds-component-checkbox-label-color-content-{state}] - Label color: `rest`, `disabled`.
+ */
+export declare class QdsCheckbox extends QdsElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Whether the box is checked. The `checked` attribute sets the initial state, restored on form reset. */
+    checked: boolean;
+    /**
+     * Shows a dash instead of a check, for a parent checkbox whose children are
+     * partly checked. Cleared as soon as the user toggles the box, like the native
+     * property.
+     */
+    indeterminate: boolean;
+    /** Prevents interaction and excludes the value from form submission. */
+    disabled: boolean;
+    /** Makes the form invalid until the box is checked. */
+    required: boolean;
+    /** Field name used when the form is submitted. */
+    name: string;
+    /** Value submitted when checked. */
+    value: string;
+    private readonly input;
+    /**
+     * Disabled by the form machinery: this element's own attribute OR an ancestor
+     * `<fieldset disabled>`. Kept apart from `disabled` so that re-enabling the
+     * fieldset does not clear a checkbox that was disabled on its own.
+     */
+    private formDisabled;
+    constructor();
+    /** The form this checkbox belongs to, if any. */
+    get form(): HTMLFormElement | null;
+    /** Same as the native `checkValidity()`. */
+    checkValidity(): boolean;
+    /** Same as the native `reportValidity()`. */
+    reportValidity(): boolean;
+    /** Same as the native `validity`. */
+    get validity(): ValidityState;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    /** Called by the form on reset: restore the state the markup declared. */
+    formResetCallback(): void;
+    /** Called when this element's disabled state changes, from its own attribute or a fieldset. */
+    formDisabledCallback(disabled: boolean): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-checkbox': QdsCheckbox;
+    }
+}
+//# sourceMappingURL=qds-checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/qds-checkbox/qds-checkbox.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,WAAY,SAAQ,UAAU;;IACzC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAiIpB;IAEF,0GAA0G;IAE1G,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,aAAa,UAAS;IAEtB,wEAAwE;IAExE,QAAQ,UAAS;IAEjB,uDAAuD;IAEvD,QAAQ,UAAS;IAEjB,kDAAkD;IAElD,IAAI,SAAM;IAEV,oCAAoC;IAEpC,KAAK,SAAQ;IAGb,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoB;IAE1C;;;;OAIG;IAEH,OAAO,CAAC,YAAY,CAAS;;IAS7B,iDAAiD;IACjD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,4CAA4C;IAC5C,aAAa,IAAI,OAAO;IAIxB,6CAA6C;IAC7C,cAAc,IAAI,OAAO;IAIzB,qCAAqC;IACrC,IAAI,QAAQ,IAAI,aAAa,CAE5B;cAEkB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM/C,OAAO,IAAI,IAAI;IAqBlC,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI;IAKzB,+FAA+F;IAC/F,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAoBpC,MAAM,IAAI,cAAc;CAuBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -0,0 +1,316 @@
+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, query, state } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A checkbox.
+ *
+ * A native `<input type="checkbox">` sits inside the shadow root, visually
+ * hidden, with a token-styled box drawn over it. Keeping the native input is
+ * what gives the component keyboard handling, `indeterminate`, and a correct
+ * accessibility role for free; the drawn box is purely presentational.
+ *
+ * @element qds-checkbox
+ *
+ * @slot - The label.
+ *
+ * @fires {CustomEvent<{ checked: boolean }>} qds-change - Fired when the user
+ * toggles the checkbox. Not fired for programmatic changes.
+ *
+ * @csspart base - The label element wrapping the control and its text.
+ * @csspart control - The drawn box.
+ * @csspart label - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-checkbox-gap] - Space between the box and the label.
+ * @cssprop [--qds-component-checkbox-font-size] - Label size.
+ * @cssprop [--qds-component-checkbox-line-height] - Label line height.
+ * @cssprop [--qds-component-checkbox-duration] - State transition duration.
+ * @cssprop [--qds-component-checkbox-control-width] - Box width.
+ * @cssprop [--qds-component-checkbox-control-height] - Box height.
+ * @cssprop [--qds-component-checkbox-control-border-radius] - Box corner radius.
+ * @cssprop [--qds-component-checkbox-control-border-width] - Box border thickness.
+ * @cssprop [--qds-component-checkbox-control-color-background-{state}] - Box fill: `unchecked`, `checked`, `hover` (checked, under the pointer), `disabled`.
+ * @cssprop [--qds-component-checkbox-control-color-border-{state}] - Box border: `unchecked`, `hover` (unchecked, under the pointer), `checked`, `disabled`.
+ * @cssprop [--qds-component-checkbox-control-color-content-{state}] - Check mark color: `checked`, `disabled`.
+ * @cssprop [--qds-component-checkbox-label-color-content-{state}] - Label color: `rest`, `disabled`.
+ */
+let QdsCheckbox = class QdsCheckbox extends QdsElement {
+    static { this.shadowRootOptions = {
+        ...QdsElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: inline-block;
+      }
+
+      label {
+        position: relative;
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--qds-component-checkbox-gap, 0.5rem);
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--qds-component-checkbox-font-size, 0.875rem);
+        line-height: var(--qds-component-checkbox-line-height, 1.375);
+        color: var(--qds-component-checkbox-label-color-content-rest, #0f172a);
+
+        cursor: pointer;
+      }
+
+      /*
+       * Visually hidden, not display:none: the native input has to stay focusable
+       * and in the accessibility tree, since it is the actual control.
+       */
+      input {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: var(--qds-component-checkbox-control-width, 1rem);
+        height: var(--qds-component-checkbox-control-height, 1rem);
+        margin: 0;
+        opacity: 0;
+        cursor: inherit;
+      }
+
+      .control {
+        display: inline-grid;
+        place-items: center;
+        flex: none;
+        width: var(--qds-component-checkbox-control-width, 1rem);
+        height: var(--qds-component-checkbox-control-height, 1rem);
+        /* Centre the box on the first line of the label, however tall the text. */
+        margin-block-start: calc((1lh - var(--qds-component-checkbox-control-height, 1rem)) / 2);
+
+        color: var(--qds-component-checkbox-control-color-content-checked, #f8fafc);
+        background-color: var(--qds-component-checkbox-control-color-background-unchecked, #f8fafc);
+        border: var(--qds-component-checkbox-control-border-width, 0.0625rem) solid
+          var(--qds-component-checkbox-control-color-border-unchecked, #64748b);
+        border-radius: var(--qds-component-checkbox-control-border-radius, 0.25rem);
+
+        transition:
+          background-color var(--qds-component-checkbox-duration, 120ms),
+          border-color var(--qds-component-checkbox-duration, 120ms);
+      }
+
+      /* Both marks share the one grid cell; only one is ever visible. */
+      .mark {
+        grid-area: 1 / 1;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+      }
+
+      :where(label:hover) .control {
+        border-color: var(--qds-component-checkbox-control-color-border-hover, #2563eb);
+      }
+
+      input:checked + .control,
+      input:indeterminate + .control {
+        background-color: var(--qds-component-checkbox-control-color-background-checked, #2563eb);
+        border-color: var(--qds-component-checkbox-control-color-border-checked, #2563eb);
+      }
+
+      :where(label:hover) input:checked + .control,
+      :where(label:hover) input:indeterminate + .control {
+        background-color: var(--qds-component-checkbox-control-color-background-hover, #1d4ed8);
+      }
+
+      input:checked:not(:indeterminate) + .control .check,
+      input:indeterminate + .control .dash {
+        visibility: visible;
+      }
+
+      input:focus-visible + .control {
+        outline: var(--_focus-ring);
+        outline-offset: 0.125rem;
+      }
+
+      /*
+       * :disabled rather than [disabled]: a form-associated element matches it
+       * when either its own attribute or an ancestor fieldset disables it.
+       */
+      :host(:disabled) label {
+        color: var(--qds-component-checkbox-label-color-content-disabled, #64748b);
+        cursor: not-allowed;
+      }
+
+      :host(:disabled) .control,
+      :host(:disabled) input:checked + .control,
+      :host(:disabled) input:indeterminate + .control {
+        color: var(--qds-component-checkbox-control-color-content-disabled, #64748b);
+        background-color: var(--qds-component-checkbox-control-color-background-disabled, #f1f5f9);
+        border-color: var(--qds-component-checkbox-control-color-border-disabled, #e2e8f0);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .control {
+          transition: none;
+        }
+      }
+
+      /*
+       * Forced colors discards the drawn box's fill, so a checked box would be
+       * indistinguishable from an unchecked one apart from the mark. Give the mark
+       * a system color, and keep the border visible.
+       */
+      @media (forced-colors: active) {
+        .control {
+          border-color: ButtonText;
+          color: Highlight;
+        }
+
+        :host(:disabled) .control {
+          border-color: GrayText;
+          color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    #internals;
+    constructor() {
+        super();
+        /** Whether the box is checked. The `checked` attribute sets the initial state, restored on form reset. */
+        this.checked = false;
+        /**
+         * Shows a dash instead of a check, for a parent checkbox whose children are
+         * partly checked. Cleared as soon as the user toggles the box, like the native
+         * property.
+         */
+        this.indeterminate = false;
+        /** Prevents interaction and excludes the value from form submission. */
+        this.disabled = false;
+        /** Makes the form invalid until the box is checked. */
+        this.required = false;
+        /** Field name used when the form is submitted. */
+        this.name = '';
+        /** Value submitted when checked. */
+        this.value = 'on';
+        /**
+         * Disabled by the form machinery: this element's own attribute OR an ancestor
+         * `<fieldset disabled>`. Kept apart from `disabled` so that re-enabling the
+         * fieldset does not clear a checkbox that was disabled on its own.
+         */
+        this.formDisabled = false;
+        this.#internals = this.attachInternals();
+    }
+    /** The form this checkbox 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;
+    }
+    willUpdate(changed) {
+        if (changed.has('checked') || changed.has('value')) {
+            this.#internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+    updated() {
+        this.#syncValidity();
+    }
+    /**
+     * Validity is anchored to the native input so reportValidity() points the
+     * browser's bubble at the box rather than the host's corner. Not run before the
+     * first render, because the input does not exist until then.
+     */
+    #syncValidity() {
+        if (this.required && !this.checked) {
+            this.#internals.setValidity({ valueMissing: true }, this.input.validationMessage || 'Check this box to continue.', this.input);
+        }
+        else {
+            this.#internals.setValidity({});
+        }
+    }
+    /** Called by the form on reset: restore the state the markup declared. */
+    formResetCallback() {
+        this.checked = this.hasAttribute('checked');
+        this.indeterminate = false;
+    }
+    /** Called when this element's disabled state changes, from its own attribute or a fieldset. */
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    #handleChange() {
+        this.checked = this.input.checked;
+        this.indeterminate = false;
+        // 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.checked ? this.value : null);
+        this.#syncValidity();
+        this.dispatchEvent(new CustomEvent('qds-change', {
+            detail: { checked: this.checked },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <label part="base">
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled || this.formDisabled}
+          ?required=${this.required}
+          @change=${this.#handleChange}
+        />
+        <span class="control" part="control" aria-hidden="true">
+          <svg class="mark check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="3.5 8.5 6.5 11.5 12.5 4.5"></polyline>
+          </svg>
+          <svg class="mark dash" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="4" y1="8" x2="12" y2="8"></line>
+          </svg>
+        </span>
+        <span part="label"><slot></slot></span>
+      </label>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], QdsCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsCheckbox.prototype, "required", void 0);
+__decorate([
+    property()
+], QdsCheckbox.prototype, "name", void 0);
+__decorate([
+    property()
+], QdsCheckbox.prototype, "value", void 0);
+__decorate([
+    query('input')
+], QdsCheckbox.prototype, "input", void 0);
+__decorate([
+    state()
+], QdsCheckbox.prototype, "formDisabled", void 0);
+QdsCheckbox = __decorate([
+    customElement('qds-checkbox')
+], QdsCheckbox);
+export { QdsCheckbox };
+//# sourceMappingURL=qds-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-checkbox.js","sourceRoot":"","sources":["../../../src/components/qds-checkbox/qds-checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1E,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;aACzB,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;aAEK,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEb,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8HF;KACF,AAjIqB,CAiIpB;IAyCO,UAAU,CAAmB;IAEtC;QACE,KAAK,EAAE,CAAC;QA1CV,0GAA0G;QAE1G,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;WAIG;QAEH,kBAAa,GAAG,KAAK,CAAC;QAEtB,wEAAwE;QAExE,aAAQ,GAAG,KAAK,CAAC;QAEjB,uDAAuD;QAEvD,aAAQ,GAAG,KAAK,CAAC;QAEjB,kDAAkD;QAElD,SAAI,GAAG,EAAE,CAAC;QAEV,oCAAoC;QAEpC,UAAK,GAAG,IAAI,CAAC;QAKb;;;;WAIG;QAEK,iBAAY,GAAG,KAAK,CAAC;QAM3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IAED,iDAAiD;IACjD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,4CAA4C;IAC5C,aAAa;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;IACzC,CAAC;IAED,6CAA6C;IAC7C,cAAc;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC1C,CAAC;IAED,qCAAqC;IACrC,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAEkB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IAEkB,OAAO;QACxB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED;;;;OAIG;IACH,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,EAAE,YAAY,EAAE,IAAI,EAAE,EACtB,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,6BAA6B,EAC7D,IAAI,CAAC,KAAK,CACX,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,0EAA0E;IAC1E,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QAC5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,+FAA+F;IAC/F,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;IAC/B,CAAC;IAED,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,2EAA2E;QAC3E,uEAAuE;QACvE,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,OAAO;2BACN,IAAI,CAAC,aAAa;sBACvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;sBAClC,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,aAAa;;;;;;;;;;;;KAYjC,CAAC;IACJ,CAAC;;AA5ID;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAQhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACrB;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAIjB;IADC,QAAQ,EAAE;yCACD;AAIV;IADC,QAAQ,EAAE;0CACE;AAGI;IADhB,KAAK,CAAC,OAAO,CAAC;0CAC2B;AAQlC;IADP,KAAK,EAAE;iDACqB;AAhLlB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA0RvB"}

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

@@ -0,0 +1,79 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsChipVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+/**
+ * A compact label for a status, category, or applied filter.
+ *
+ * A chip is not interactive on its own. With `removable` it gains a remove
+ * button — the only focusable thing in it — which fires `qds-remove` and leaves
+ * the decision to the page: the chip does not delete itself, because the page
+ * usually needs to update its own state (a filter list, a set of tags) first.
+ *
+ * With `selectable` it becomes a filter chip instead: the whole chip is a toggle
+ * button, announced as pressed or not, showing a check mark while selected.
+ * Wrap a set of them in an element with `role="group"` and an `aria-label` so
+ * the set is announced together. A selectable chip ignores `removable`, since a
+ * button cannot contain another button.
+ *
+ * Meaning is never carried by color alone: the variant tints the chip, but the
+ * text has to say what it means.
+ *
+ * @element qds-chip
+ *
+ * @slot - The chip text.
+ * @slot start - Content before the text, typically an icon.
+ *
+ * @fires {CustomEvent<void>} qds-remove - Fired when the remove button is
+ * activated. The chip stays in the DOM; remove it in the handler.
+ * @fires {CustomEvent<{ selected: boolean }>} qds-change - Fired when the user
+ * toggles a selectable chip. Not fired for programmatic changes.
+ *
+ * @csspart base - The chip body. A button when the chip is selectable.
+ * @csspart label - The wrapper around the default slot.
+ * @csspart remove - The remove button.
+ *
+ * @cssprop [--qds-component-chip-gap] - Space between the icon, text, and remove button.
+ * @cssprop [--qds-component-chip-padding-block] - Vertical padding.
+ * @cssprop [--qds-component-chip-padding-inline] - Horizontal padding.
+ * @cssprop [--qds-component-chip-border-radius] - Corner radius.
+ * @cssprop [--qds-component-chip-border-width] - Border thickness.
+ * @cssprop [--qds-component-chip-font-size] - Text size.
+ * @cssprop [--qds-component-chip-font-weight] - Text weight.
+ * @cssprop [--qds-component-chip-line-height] - Text line height.
+ * @cssprop [--qds-component-chip-{variant}-color-background-rest] - Fill per variant.
+ * @cssprop [--qds-component-chip-{variant}-color-content-rest] - Text color per variant.
+ * @cssprop [--qds-component-chip-{variant}-color-border-rest] - Border color per variant.
+ * @cssprop [--qds-component-chip-selectable-color-border-rest] - Border of an unselected selectable chip.
+ * @cssprop [--qds-component-chip-selectable-color-background-hover] - Fill of an unselected selectable chip under the pointer.
+ * @cssprop [--qds-component-chip-selected-color-background-{state}] - Fill of a selected chip: `rest`, `hover`.
+ * @cssprop [--qds-component-chip-selected-color-content-rest] - Text of a selected chip.
+ * @cssprop [--qds-component-chip-selected-color-border-rest] - Border of a selected chip.
+ */
+export declare class QdsChip extends QdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Tone. Pair it with text that states the meaning; color alone does not. */
+    variant: QdsChipVariant;
+    /** Makes the chip a toggle button, for filtering. */
+    selectable: boolean;
+    /** Whether a selectable chip is selected. */
+    selected: boolean;
+    /** Prevents toggling a selectable chip. */
+    disabled: boolean;
+    /** Adds a remove button that fires `qds-remove`. Ignored when `selectable`. */
+    removable: boolean;
+    /**
+     * Accessible name for the remove button. Defaults to "Remove" followed by the
+     * chip's text, so a list of chips does not read as a list of identical
+     * "Remove" buttons. Set it when the chip text alone would not make sense after
+     * "Remove", or to translate it.
+     */
+    removeLabel: string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-chip': QdsChip;
+    }
+}
+//# sourceMappingURL=qds-chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-chip.d.ts","sourceRoot":"","sources":["../../../src/components/qds-chip/qds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,OAAQ,SAAQ,UAAU;;IACrC,OAAgB,MAAM,4BAyJpB;IAEF,6EAA6E;IAE7E,OAAO,EAAE,cAAc,CAAa;IAEpC,qDAAqD;IAErD,UAAU,UAAS;IAEnB,6CAA6C;IAE7C,QAAQ,UAAS;IAEjB,2CAA2C;IAE3C,QAAQ,UAAS;IAEjB,+EAA+E;IAE/E,SAAS,UAAS;IAElB;;;;;OAKG;IAEH,WAAW,SAAM;IAiBR,MAAM,IAAI,cAAc;CAgDlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}