@quieto/ui 0.0.0-stage → 0.1.1

package/dist/components/qds-text-field/qds-text-field.js

@@ -0,0 +1,332 @@
+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 { live } from 'lit/directives/live.js';
+import { QdsElement } from '../../internal/qds-element.js';
+import { QdsTextControl } from '../../internal/qds-text-control.js';
+/**
+ * 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.
+ */
+let QdsTextField = class QdsTextField extends QdsTextControl {
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+
+        --_border: var(--qds-component-text-field-control-color-border-rest, #64748b);
+      }
+
+      .base {
+        display: flex;
+        flex-direction: column;
+        gap: var(--qds-component-text-field-gap, 0.25rem);
+        font-family: var(--qds-typography-font-family-sans, inherit);
+      }
+
+      label {
+        font-size: var(--qds-component-text-field-label-font-size, 0.875rem);
+        font-weight: var(--qds-component-text-field-label-font-weight, 500);
+        color: var(--qds-component-text-field-label-color-content-rest, #0f172a);
+      }
+
+      .required {
+        margin-inline-start: 0.125em;
+        color: var(--qds-component-text-field-error-color-content-rest, #b91c1c);
+      }
+
+      .control {
+        display: flex;
+        align-items: center;
+        gap: var(--qds-component-text-field-control-gap, 0.5rem);
+        padding: 0 var(--qds-component-text-field-control-padding-inline, 0.75rem);
+
+        font-size: var(--qds-component-text-field-control-font-size, 0.875rem);
+        line-height: var(--qds-component-text-field-control-line-height, 1.5);
+        color: var(--qds-component-text-field-control-color-content-rest, #0f172a);
+
+        background-color: var(--qds-component-text-field-control-color-background-rest, #f8fafc);
+        border: var(--qds-component-text-field-control-border-width, 0.0625rem) solid var(--_border);
+        border-radius: var(--qds-component-text-field-control-border-radius, 0.375rem);
+        cursor: text;
+
+        transition: border-color var(--qds-component-text-field-duration, 120ms);
+      }
+
+      .invalid .control {
+        --_border: var(--qds-component-text-field-invalid-color-border-rest, #dc2626);
+      }
+
+      .control:focus-within {
+        border-color: var(--qds-component-text-field-control-color-border-focus, #2563eb);
+        outline: var(--_focus-ring);
+        outline-offset: 0.0625rem;
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+        padding: var(--qds-component-text-field-control-padding-block, 0.5rem) 0;
+
+        font: inherit;
+        color: inherit;
+        background: none;
+        border: 0;
+        outline: none;
+      }
+
+      input::placeholder {
+        color: var(--qds-component-text-field-placeholder-color-content-rest, #64748b);
+        opacity: 1;
+      }
+
+      ::slotted([slot='start']),
+      ::slotted([slot='end']) {
+        flex: none;
+        color: var(--qds-component-text-field-affix-color-content-rest, #64748b);
+      }
+
+      .hint,
+      .error {
+        font-size: var(--qds-component-text-field-hint-font-size, 0.75rem);
+      }
+
+      .hint {
+        color: var(--qds-component-text-field-hint-color-content-rest, #64748b);
+      }
+
+      .error {
+        color: var(--qds-component-text-field-error-color-content-rest, #b91c1c);
+      }
+
+      :host(:disabled) label {
+        color: var(--qds-component-text-field-label-color-content-disabled, #64748b);
+      }
+
+      :host(:disabled) .control {
+        color: var(--qds-component-text-field-control-color-content-disabled, #64748b);
+        background-color: var(--qds-component-text-field-control-color-background-disabled, #f1f5f9);
+        border-color: var(--qds-component-text-field-control-color-border-disabled, #e2e8f0);
+        cursor: not-allowed;
+      }
+
+      :host(:disabled) input {
+        cursor: not-allowed;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .control {
+          transition: none;
+        }
+      }
+
+      @media (forced-colors: active) {
+        .control {
+          border-color: FieldText;
+        }
+
+        :host(:disabled) .control {
+          border-color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    /**
+     * The browser's message for the failing constraint, if any. A plain field, not
+     * reactive state: it is read during render and refreshed after it, and making
+     * it reactive would schedule a second render from inside updated().
+     */
+    #nativeError;
+    constructor() {
+        super();
+        /** The visible label. Also the input's accessible name. */
+        this.label = '';
+        /** Help text shown under the input, and read out with it. */
+        this.hint = '';
+        /**
+         * 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.
+         */
+        this.error = '';
+        /**
+         * 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.
+         */
+        this.touched = false;
+        /**
+         * The browser's message for the failing constraint, if any. A plain field, not
+         * reactive state: it is read during render and refreshed after it, and making
+         * it reactive would schedule a second render from inside updated().
+         */
+        this.#nativeError = '';
+        this.hasHintSlot = false;
+        // The form fires `invalid` at each failing control when submission is
+        // attempted. Treat that as touching the field, so its message appears.
+        this.addEventListener('invalid', () => (this.touched = true));
+    }
+    /** Same as the native `reportValidity()`, and shows the field's message. */
+    reportValidity() {
+        this.touched = true;
+        return super.reportValidity();
+    }
+    /** The message currently shown, or an empty string. */
+    get #shownError() {
+        return this.error || (this.touched ? this.#nativeError : '');
+    }
+    firstUpdated() {
+        // Not left to slotchange alone: server-rendered content is already slotted
+        // when the element hydrates, so slotchange never fires for it.
+        //
+        // This has to be a separate, later update. The first client update of a
+        // server-rendered element adopts the existing DOM rather than writing to it,
+        // so a value that differs from the server's is silently not applied — the
+        // hint would stay hidden. Waiting for updateComplete makes it an ordinary
+        // follow-up render rather than a change scheduled from inside an update.
+        void this.updateComplete.then(() => {
+            this.hasHintSlot = this.querySelector(':scope > [slot="hint"]') !== null;
+        });
+    }
+    /** Called by the form on reset: restore the declared value and hide messages again. */
+    formResetCallback() {
+        super.formResetCallback();
+        this.touched = false;
+    }
+    syncValidity() {
+        super.syncValidity();
+        const { validationMessage } = this.input;
+        // A programmatic value change can alter the message after this render
+        // already showed the old one. Re-render only then, and only if it is shown.
+        const stale = this.touched && !this.error && this.#nativeError !== validationMessage;
+        this.#nativeError = validationMessage;
+        if (stale)
+            this.requestUpdate();
+    }
+    render() {
+        const error = this.#shownError;
+        const hasHint = Boolean(this.hint) || this.hasHintSlot;
+        const describedBy = [hasHint ? 'hint' : '', error ? 'error' : ''].filter(Boolean).join(' ');
+        return html `
+      <div class=${error ? 'base invalid' : 'base'} part="base">
+        <label for="input" part="label">
+          <slot name="label">${this.label}</slot>
+          ${this.required ? html `<span class="required" aria-hidden="true">*</span>` : nothing}
+        </label>
+        <div class="control" part="control" @click=${this.focusInput}>
+          <slot name="start"></slot>
+          <input
+            id="input"
+            part="input"
+            type=${this.type}
+            .value=${live(this.value)}
+            name=${this.name || nothing}
+            placeholder=${this.placeholder || nothing}
+            aria-describedby=${describedBy || nothing}
+            aria-invalid=${error ? 'true' : nothing}
+            autocomplete=${this.autocomplete ?? nothing}
+            minlength=${this.minlength ?? nothing}
+            maxlength=${this.maxlength ?? nothing}
+            pattern=${this.pattern ?? nothing}
+            ?disabled=${this.disabled || this.formDisabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @blur=${() => (this.touched = true)}
+          />
+          <slot name="end"></slot>
+        </div>
+        <div id="hint" class="hint" part="hint" ?hidden=${!hasHint}>
+          <slot
+            name="hint"
+            @slotchange=${(event) => {
+            this.hasHintSlot = event.target.assignedNodes().length > 0;
+        }}
+            >${this.hint}</slot
+          >
+        </div>
+        ${error ? html `<div id="error" class="error" part="error">${error}</div>` : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], QdsTextField.prototype, "label", void 0);
+__decorate([
+    property()
+], QdsTextField.prototype, "hint", void 0);
+__decorate([
+    property()
+], QdsTextField.prototype, "error", void 0);
+__decorate([
+    state()
+], QdsTextField.prototype, "touched", void 0);
+__decorate([
+    state()
+], QdsTextField.prototype, "hasHintSlot", void 0);
+QdsTextField = __decorate([
+    customElement('qds-text-field')
+], QdsTextField);
+export { QdsTextField };
+//# sourceMappingURL=qds-text-field.js.map

package/dist/components/qds-text-field/qds-text-field.js.map

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

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

@@ -0,0 +1,68 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * An on/off switch.
+ *
+ * Use a toggle for a setting that takes effect immediately, and a checkbox for a
+ * choice that is only applied when a form is submitted. It is announced as a
+ * switch ("on"/"off") rather than a checkbox ("checked"/"not checked"), which is
+ * the whole difference to a screen reader user.
+ *
+ * Rendered as a native `<button role="switch">`, so Space and Enter both toggle
+ * it and it is focusable without a tabindex.
+ *
+ * @element qds-toggle
+ *
+ * @slot - The label.
+ *
+ * @fires {CustomEvent<{ checked: boolean }>} qds-change - Fired when the user
+ * toggles the switch. Not fired for programmatic changes.
+ *
+ * @csspart base - The native button carrying the switch role.
+ * @csspart track - The pill the thumb slides along.
+ * @csspart thumb - The sliding circle.
+ * @csspart label - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-toggle-gap] - Space between the track and the label.
+ * @cssprop [--qds-component-toggle-font-size] - Label size.
+ * @cssprop [--qds-component-toggle-line-height] - Label line height.
+ * @cssprop [--qds-component-toggle-duration] - Thumb and color transition duration.
+ * @cssprop [--qds-component-toggle-track-width] - Track width.
+ * @cssprop [--qds-component-toggle-track-height] - Track height. The thumb is this minus twice the padding.
+ * @cssprop [--qds-component-toggle-track-padding] - Space between the thumb and the track edge.
+ * @cssprop [--qds-component-toggle-track-border-radius] - Track corner radius.
+ * @cssprop [--qds-component-toggle-track-color-background-{state}] - Track fill: `unchecked`, `checked`, `hover` (checked, under the pointer), `disabled`.
+ * @cssprop [--qds-component-toggle-thumb-color-background-{state}] - Thumb fill: `rest`, `disabled`.
+ * @cssprop [--qds-component-toggle-label-color-content-{state}] - Label color: `rest`, `disabled`.
+ */
+export declare class QdsToggle extends QdsElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Whether the switch is on. The `checked` attribute sets the initial state, restored on form reset. */
+    checked: boolean;
+    /** Prevents interaction and excludes the value from form submission. */
+    disabled: boolean;
+    /** Field name used when the form is submitted. */
+    name: string;
+    /** Value submitted while on. */
+    value: string;
+    /** Disabled by its own attribute or by an ancestor `<fieldset disabled>`. */
+    private formDisabled;
+    constructor();
+    /** The form this toggle belongs to, if any. */
+    get form(): HTMLFormElement | null;
+    protected willUpdate(changed: PropertyValues<this>): 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-toggle': QdsToggle;
+    }
+}
+//# sourceMappingURL=qds-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/qds-toggle/qds-toggle.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,SAAU,SAAQ,UAAU;;IACvC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAkIpB;IAEF,wGAAwG;IAExG,OAAO,UAAS;IAEhB,wEAAwE;IAExE,QAAQ,UAAS;IAEjB,kDAAkD;IAElD,IAAI,SAAM;IAEV,gCAAgC;IAEhC,KAAK,SAAQ;IAEb,6EAA6E;IAE7E,OAAO,CAAC,YAAY,CAAS;;IAS7B,+CAA+C;IAC/C,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;cAEkB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMlE,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI;IAIzB,+FAA+F;IAC/F,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAkBpC,MAAM,IAAI,cAAc;CAelC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,260 @@
+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, state } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * An on/off switch.
+ *
+ * Use a toggle for a setting that takes effect immediately, and a checkbox for a
+ * choice that is only applied when a form is submitted. It is announced as a
+ * switch ("on"/"off") rather than a checkbox ("checked"/"not checked"), which is
+ * the whole difference to a screen reader user.
+ *
+ * Rendered as a native `<button role="switch">`, so Space and Enter both toggle
+ * it and it is focusable without a tabindex.
+ *
+ * @element qds-toggle
+ *
+ * @slot - The label.
+ *
+ * @fires {CustomEvent<{ checked: boolean }>} qds-change - Fired when the user
+ * toggles the switch. Not fired for programmatic changes.
+ *
+ * @csspart base - The native button carrying the switch role.
+ * @csspart track - The pill the thumb slides along.
+ * @csspart thumb - The sliding circle.
+ * @csspart label - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-toggle-gap] - Space between the track and the label.
+ * @cssprop [--qds-component-toggle-font-size] - Label size.
+ * @cssprop [--qds-component-toggle-line-height] - Label line height.
+ * @cssprop [--qds-component-toggle-duration] - Thumb and color transition duration.
+ * @cssprop [--qds-component-toggle-track-width] - Track width.
+ * @cssprop [--qds-component-toggle-track-height] - Track height. The thumb is this minus twice the padding.
+ * @cssprop [--qds-component-toggle-track-padding] - Space between the thumb and the track edge.
+ * @cssprop [--qds-component-toggle-track-border-radius] - Track corner radius.
+ * @cssprop [--qds-component-toggle-track-color-background-{state}] - Track fill: `unchecked`, `checked`, `hover` (checked, under the pointer), `disabled`.
+ * @cssprop [--qds-component-toggle-thumb-color-background-{state}] - Thumb fill: `rest`, `disabled`.
+ * @cssprop [--qds-component-toggle-label-color-content-{state}] - Label color: `rest`, `disabled`.
+ */
+let QdsToggle = class QdsToggle extends QdsElement {
+    static { this.shadowRootOptions = {
+        ...QdsElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: inline-block;
+
+        --_track-width: var(--qds-component-toggle-track-width, 3rem);
+        --_track-height: var(--qds-component-toggle-track-height, 1.5rem);
+        --_padding: var(--qds-component-toggle-track-padding, 0.25rem);
+        --_thumb: calc(var(--_track-height) - 2 * var(--_padding));
+        --_duration: var(--qds-component-toggle-duration, 120ms);
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--qds-component-toggle-gap, 0.5rem);
+
+        margin: 0;
+        padding: 0;
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--qds-component-toggle-font-size, 0.875rem);
+        line-height: var(--qds-component-toggle-line-height, 1.375);
+        text-align: start;
+        color: var(--qds-component-toggle-label-color-content-rest, #0f172a);
+
+        background: none;
+        border: 0;
+        cursor: pointer;
+        -webkit-appearance: none;
+        appearance: none;
+      }
+
+      .track {
+        display: inline-flex;
+        align-items: center;
+        flex: none;
+        width: var(--_track-width);
+        height: var(--_track-height);
+        padding: var(--_padding);
+        border-radius: var(--qds-component-toggle-track-border-radius, 9999px);
+        background-color: var(--qds-component-toggle-track-color-background-unchecked, #64748b);
+        transition: background-color var(--_duration);
+      }
+
+      .thumb {
+        width: var(--_thumb);
+        height: var(--_thumb);
+        border-radius: 50%;
+        background-color: var(--qds-component-toggle-thumb-color-background-rest, #f8fafc);
+        transition: translate var(--_duration);
+      }
+
+      [aria-checked='true'] .track {
+        background-color: var(--qds-component-toggle-track-color-background-checked, #2563eb);
+      }
+
+      [aria-checked='true']:where(:hover) .track {
+        background-color: var(--qds-component-toggle-track-color-background-hover, #1d4ed8);
+      }
+
+      /*
+       * Logical travel: the distance is the same either way, and the sign flips
+       * under RTL so "on" is always toward the inline end.
+       */
+      [aria-checked='true'] .thumb {
+        translate: calc(var(--_track-width) - var(--_thumb) - 2 * var(--_padding));
+      }
+
+      :host(:dir(rtl)) [aria-checked='true'] .thumb {
+        translate: calc(-1 * (var(--_track-width) - var(--_thumb) - 2 * var(--_padding)));
+      }
+
+      button:focus-visible {
+        outline: none;
+      }
+
+      button:focus-visible .track {
+        outline: var(--_focus-ring);
+        outline-offset: 0.125rem;
+      }
+
+      button:disabled {
+        color: var(--qds-component-toggle-label-color-content-disabled, #64748b);
+        cursor: not-allowed;
+      }
+
+      button:disabled .track {
+        background-color: var(--qds-component-toggle-track-color-background-disabled, #f1f5f9);
+      }
+
+      button:disabled .thumb {
+        background-color: var(--qds-component-toggle-thumb-color-background-disabled, #f8fafc);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .track,
+        .thumb {
+          transition: none;
+        }
+      }
+
+      /*
+       * Forced colors flattens the track and thumb to the same color, leaving
+       * only position to tell on from off. Outline the track and fill the thumb
+       * with a system color so the thumb stays visible.
+       */
+      @media (forced-colors: active) {
+        .track {
+          border: 0.0625rem solid ButtonText;
+        }
+
+        .thumb {
+          background-color: ButtonText;
+        }
+
+        [aria-checked='true'] .thumb {
+          background-color: Highlight;
+        }
+
+        button:disabled .track {
+          border-color: GrayText;
+        }
+
+        button:disabled .thumb {
+          background-color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    #internals;
+    constructor() {
+        super();
+        /** Whether the switch is on. The `checked` attribute sets the initial state, restored on form reset. */
+        this.checked = false;
+        /** Prevents interaction and excludes the value from form submission. */
+        this.disabled = false;
+        /** Field name used when the form is submitted. */
+        this.name = '';
+        /** Value submitted while on. */
+        this.value = 'on';
+        /** Disabled by its own attribute or by an ancestor `<fieldset disabled>`. */
+        this.formDisabled = false;
+        this.#internals = this.attachInternals();
+    }
+    /** The form this toggle belongs to, if any. */
+    get form() {
+        return this.#internals.form;
+    }
+    willUpdate(changed) {
+        if (changed.has('checked') || changed.has('value')) {
+            this.#internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+    /** Called by the form on reset: restore the state the markup declared. */
+    formResetCallback() {
+        this.checked = this.hasAttribute('checked');
+    }
+    /** Called when this element's disabled state changes, from its own attribute or a fieldset. */
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    #handleClick() {
+        this.checked = !this.checked;
+        // Synchronously, not left to willUpdate: a qds-change listener reading
+        // FormData would otherwise see the previous state.
+        this.#internals.setFormValue(this.checked ? this.value : null);
+        this.dispatchEvent(new CustomEvent('qds-change', {
+            detail: { checked: this.checked },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <button
+        part="base"
+        type="button"
+        role="switch"
+        aria-checked=${String(this.checked)}
+        ?disabled=${this.disabled || this.formDisabled}
+        @click=${this.#handleClick}
+      >
+        <span class="track" part="track"><span class="thumb" part="thumb"></span></span>
+        <span part="label"><slot></slot></span>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], QdsToggle.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsToggle.prototype, "disabled", void 0);
+__decorate([
+    property()
+], QdsToggle.prototype, "name", void 0);
+__decorate([
+    property()
+], QdsToggle.prototype, "value", void 0);
+__decorate([
+    state()
+], QdsToggle.prototype, "formDisabled", void 0);
+QdsToggle = __decorate([
+    customElement('qds-toggle')
+], QdsToggle);
+export { QdsToggle };
+//# sourceMappingURL=qds-toggle.js.map

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

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