@quieto/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,76 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsModalSize = 'sm' | 'md' | 'lg';
+/**
+ * A modal dialog.
+ *
+ * Built on the native `<dialog>` and `showModal()`, which is what provides the
+ * hard parts: the dialog renders in the top layer above everything, the rest of
+ * the page becomes inert (unreachable by Tab, click, or screen reader), focus
+ * moves into the dialog on open and returns to where it was on close, and
+ * Escape closes it. None of that is reimplemented here.
+ *
+ * Escape always closes the dialog. Clicking the backdrop does only with
+ * `light-dismiss`, since a stray click should not throw away a half-filled form.
+ *
+ * @element qds-modal
+ *
+ * @slot - The body.
+ * @slot heading - The title, in place of the `heading` attribute when it needs markup.
+ * @slot footer - Actions, typically buttons, aligned to the inline end.
+ *
+ * @fires {CustomEvent<void>} qds-open - Fired after the dialog opens.
+ * @fires {CustomEvent<{ returnValue: string }>} qds-close - Fired after the
+ * dialog closes, however it was closed. `returnValue` is the value passed to
+ * `close()`, or the `value` of the `<form method="dialog">` button that closed it.
+ *
+ * @csspart dialog - The native dialog element.
+ * @csspart header - The row holding the heading and the close button.
+ * @csspart heading - The heading.
+ * @csspart close - The close button.
+ * @csspart body - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-modal-padding] - Inner padding.
+ * @cssprop [--qds-component-modal-gap] - Space between the header, body, and footer.
+ * @cssprop [--qds-component-modal-border-radius] - Corner radius.
+ * @cssprop [--qds-component-modal-border-width] - Border thickness.
+ * @cssprop [--qds-component-modal-box-shadow] - Shadow.
+ * @cssprop [--qds-component-modal-duration] - Open animation duration.
+ * @cssprop [--qds-component-modal-color-background-rest] - Fill.
+ * @cssprop [--qds-component-modal-color-border-rest] - Border color.
+ * @cssprop [--qds-component-modal-color-content-rest] - Text color.
+ * @cssprop [--qds-component-modal-header-font-size] - Heading size.
+ * @cssprop [--qds-component-modal-header-font-weight] - Heading weight.
+ * @cssprop [--qds-component-modal-header-line-height] - Heading line height.
+ * @cssprop [--qds-component-modal-backdrop-color-background-rest] - Backdrop color.
+ * @cssprop [--qds-component-modal-backdrop-opacity] - Backdrop opacity.
+ * @cssprop [--qds-component-modal-{size}-max-width] - Maximum width per size.
+ */
+export declare class QdsModal extends QdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Whether the dialog is open. Setting it opens or closes the dialog. */
+    open: boolean;
+    /** The title. Also the dialog's accessible name. */
+    heading: string;
+    /** Maximum width. */
+    size: QdsModalSize;
+    /** Closes the dialog when the backdrop is clicked, as well as on Escape. */
+    lightDismiss: boolean;
+    /** Accessible name for the close button. */
+    closeLabel: string;
+    private readonly dialog;
+    constructor();
+    /** Opens the dialog. */
+    show(): void;
+    /** Closes the dialog, reporting `returnValue` in the `qds-close` event. */
+    close(returnValue?: string): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-modal': QdsModal;
+    }
+}
+//# sourceMappingURL=qds-modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qds-modal.d.ts","sourceRoot":"","sources":["../../../src/components/qds-modal/qds-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnF,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAgJpB;IAEF,yEAAyE;IAEzE,IAAI,UAAS;IAEb,oDAAoD;IAEpD,OAAO,SAAM;IAEb,qBAAqB;IAErB,IAAI,EAAE,YAAY,CAAQ;IAE1B,4EAA4E;IAE5E,YAAY,UAAS;IAErB,4CAA4C;IAE5C,UAAU,SAAW;IAGrB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAqB;;IAO5C,wBAAwB;IACxB,IAAI,IAAI,IAAI;IAIZ,2EAA2E;IAC3E,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI;cAQd,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoFtD,MAAM,IAAI,cAAc;CA8BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

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

@@ -0,0 +1,362 @@
+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, query } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A modal dialog.
+ *
+ * Built on the native `<dialog>` and `showModal()`, which is what provides the
+ * hard parts: the dialog renders in the top layer above everything, the rest of
+ * the page becomes inert (unreachable by Tab, click, or screen reader), focus
+ * moves into the dialog on open and returns to where it was on close, and
+ * Escape closes it. None of that is reimplemented here.
+ *
+ * Escape always closes the dialog. Clicking the backdrop does only with
+ * `light-dismiss`, since a stray click should not throw away a half-filled form.
+ *
+ * @element qds-modal
+ *
+ * @slot - The body.
+ * @slot heading - The title, in place of the `heading` attribute when it needs markup.
+ * @slot footer - Actions, typically buttons, aligned to the inline end.
+ *
+ * @fires {CustomEvent<void>} qds-open - Fired after the dialog opens.
+ * @fires {CustomEvent<{ returnValue: string }>} qds-close - Fired after the
+ * dialog closes, however it was closed. `returnValue` is the value passed to
+ * `close()`, or the `value` of the `<form method="dialog">` button that closed it.
+ *
+ * @csspart dialog - The native dialog element.
+ * @csspart header - The row holding the heading and the close button.
+ * @csspart heading - The heading.
+ * @csspart close - The close button.
+ * @csspart body - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-modal-padding] - Inner padding.
+ * @cssprop [--qds-component-modal-gap] - Space between the header, body, and footer.
+ * @cssprop [--qds-component-modal-border-radius] - Corner radius.
+ * @cssprop [--qds-component-modal-border-width] - Border thickness.
+ * @cssprop [--qds-component-modal-box-shadow] - Shadow.
+ * @cssprop [--qds-component-modal-duration] - Open animation duration.
+ * @cssprop [--qds-component-modal-color-background-rest] - Fill.
+ * @cssprop [--qds-component-modal-color-border-rest] - Border color.
+ * @cssprop [--qds-component-modal-color-content-rest] - Text color.
+ * @cssprop [--qds-component-modal-header-font-size] - Heading size.
+ * @cssprop [--qds-component-modal-header-font-weight] - Heading weight.
+ * @cssprop [--qds-component-modal-header-line-height] - Heading line height.
+ * @cssprop [--qds-component-modal-backdrop-color-background-rest] - Backdrop color.
+ * @cssprop [--qds-component-modal-backdrop-opacity] - Backdrop opacity.
+ * @cssprop [--qds-component-modal-{size}-max-width] - Maximum width per size.
+ */
+let QdsModal = class QdsModal extends QdsElement {
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: contents;
+
+        --_max-width: var(--qds-component-modal-md-max-width, 32rem);
+        --_padding: var(--qds-component-modal-padding, 1.5rem);
+      }
+
+      :host([size='sm']) {
+        --_max-width: var(--qds-component-modal-sm-max-width, 24rem);
+      }
+
+      :host([size='lg']) {
+        --_max-width: var(--qds-component-modal-lg-max-width, 48rem);
+      }
+
+      dialog {
+        width: calc(100% - 2 * var(--qds-spacing-400, 1rem));
+        max-width: var(--_max-width);
+        max-height: calc(100% - 2 * var(--qds-spacing-400, 1rem));
+        margin: auto;
+        padding: 0;
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        color: var(--qds-component-modal-color-content-rest, #0f172a);
+
+        background-color: var(--qds-component-modal-color-background-rest, #f8fafc);
+        border: var(--qds-component-modal-border-width, 0.0625rem) solid
+          var(--qds-component-modal-color-border-rest, #e2e8f0);
+        border-radius: var(--qds-component-modal-border-radius, 0.5rem);
+        box-shadow: var(
+          --qds-component-modal-box-shadow,
+          0 0.375rem 1rem 0.0625rem rgb(15 23 42 / 0.2)
+        );
+
+        /* Scrolling inside the dialog must not chain to the page behind it. */
+        overscroll-behavior: contain;
+      }
+
+      dialog[open] {
+        display: flex;
+        flex-direction: column;
+        animation: enter var(--qds-component-modal-duration, 200ms) ease-out;
+      }
+
+      /*
+       * ::backdrop inherits custom properties from the dialog, so the tokens
+       * reach it. The color and opacity are separate tokens, which is why the
+       * opacity is applied with color-mix rather than to the whole pseudo-element.
+       */
+      dialog::backdrop {
+        background-color: color-mix(
+          in srgb,
+          var(--qds-component-modal-backdrop-color-background-rest, #020617)
+            calc(var(--qds-component-modal-backdrop-opacity, 0.5) * 100%),
+          transparent
+        );
+      }
+
+      @keyframes enter {
+        from {
+          opacity: 0;
+          translate: 0 0.5rem;
+        }
+      }
+
+      .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--qds-component-modal-gap, 1rem);
+        padding: var(--_padding) var(--_padding) 0;
+      }
+
+      .heading {
+        margin: 0;
+        font-size: var(--qds-component-modal-header-font-size, 1.25rem);
+        font-weight: var(--qds-component-modal-header-font-weight, 600);
+        line-height: var(--qds-component-modal-header-line-height, 1.375);
+      }
+
+      .close {
+        display: inline-grid;
+        place-items: center;
+        flex: none;
+        width: 2rem;
+        height: 2rem;
+        margin: -0.25rem -0.5rem 0 0;
+        padding: 0;
+
+        color: inherit;
+        background: none;
+        border: 0;
+        border-radius: var(--qds-semantic-radius-default, 0.375rem);
+        cursor: pointer;
+      }
+
+      .close:hover {
+        background-color: var(--qds-semantic-color-background-subtle, #f1f5f9);
+      }
+
+      .close:focus-visible {
+        outline: var(--_focus-ring);
+        outline-offset: 0;
+      }
+
+      .close svg {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      .body {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--qds-component-modal-gap, 1rem) var(--_padding);
+      }
+
+      /*
+       * Unwrapped, like qds-card's regions: an empty footer slot is
+       * display: contents and takes no space at all.
+       */
+      ::slotted([slot='footer']) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: var(--qds-spacing-200, 0.5rem);
+        padding: 0 var(--_padding) var(--_padding);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        dialog[open] {
+          animation: none;
+        }
+      }
+
+      @media (forced-colors: active) {
+        dialog {
+          border-color: CanvasText;
+        }
+      }
+    `,
+    ]; }
+    constructor() {
+        super();
+        /** Whether the dialog is open. Setting it opens or closes the dialog. */
+        this.open = false;
+        /** The title. Also the dialog's accessible name. */
+        this.heading = '';
+        /** Maximum width. */
+        this.size = 'md';
+        /** Closes the dialog when the backdrop is clicked, as well as on Escape. */
+        this.lightDismiss = false;
+        /** Accessible name for the close button. */
+        this.closeLabel = 'Close';
+        /**
+         * `<form method="dialog">` closes the nearest ancestor dialog in its own tree.
+         * A form slotted into this component has none — the dialog is in the shadow
+         * root — so natively it would do nothing. Do what it would have done.
+         */
+        this.#handleSubmit = (event) => {
+            const form = event.target;
+            if (form.method !== 'dialog' || form.closest('qds-modal') !== this)
+                return;
+            // Read now: a qds-button submits through a temporary submitter that is gone
+            // once the event has been dispatched.
+            const submitter = event.submitter;
+            const returnValue = submitter?.value ?? '';
+            // Decide after the event has reached every listener, as the native dialog
+            // does: one on the document runs after this one, and may still cancel. No
+            // preventDefault here — natively this form, with no dialog ancestor, does
+            // nothing anyway.
+            setTimeout(() => {
+                if (!event.defaultPrevented)
+                    this.close(returnValue);
+            });
+        };
+        /** Whether the current press started outside the dialog box. */
+        this.#pressedOnBackdrop = false;
+        this.addEventListener('submit', this.#handleSubmit);
+    }
+    /** Opens the dialog. */
+    show() {
+        this.open = true;
+    }
+    /** Closes the dialog, reporting `returnValue` in the `qds-close` event. */
+    close(returnValue) {
+        if (!this.dialog?.open) {
+            this.open = false;
+            return;
+        }
+        this.dialog.close(returnValue);
+    }
+    updated(changed) {
+        if (!changed.has('open'))
+            return;
+        if (this.open && !this.dialog.open) {
+            // showModal, not show: only the modal form makes the page inert and
+            // renders in the top layer.
+            this.dialog.showModal();
+            this.dispatchEvent(new CustomEvent('qds-open', { bubbles: true, composed: true }));
+        }
+        else if (!this.open && this.dialog.open) {
+            this.dialog.close();
+        }
+    }
+    /** The dialog closed, by Escape, a dialog form, close(), or `open = false`. */
+    #handleClose() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('qds-close', {
+            detail: { returnValue: this.dialog.returnValue },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dialog.returnValue = '';
+    }
+    /**
+     * `<form method="dialog">` closes the nearest ancestor dialog in its own tree.
+     * A form slotted into this component has none — the dialog is in the shadow
+     * root — so natively it would do nothing. Do what it would have done.
+     */
+    #handleSubmit;
+    /** Whether the current press started outside the dialog box. */
+    #pressedOnBackdrop;
+    /**
+     * Whether a pointer event lies outside the dialog's box. The target alone
+     * cannot say: the dialog is also the target for a click on its own border,
+     * and for the release of a drag that started inside it.
+     */
+    #isOutside(event) {
+        const box = this.dialog.getBoundingClientRect();
+        return (event.clientX < box.left ||
+            event.clientX > box.right ||
+            event.clientY < box.top ||
+            event.clientY > box.bottom);
+    }
+    #handlePointerDown(event) {
+        this.#pressedOnBackdrop = event.target === this.dialog && this.#isOutside(event);
+    }
+    #handleClick(event) {
+        // Both the press and the release must be on the backdrop: a text selection
+        // dragged out of the dialog ends with a click on it too.
+        const pressedOnBackdrop = this.#pressedOnBackdrop;
+        this.#pressedOnBackdrop = false;
+        if (this.lightDismiss &&
+            pressedOnBackdrop &&
+            event.target === this.dialog &&
+            this.#isOutside(event)) {
+            this.dialog.close();
+        }
+    }
+    render() {
+        return html `
+      <dialog
+        part="dialog"
+        aria-labelledby="heading"
+        @close=${this.#handleClose}
+        @pointerdown=${this.#handlePointerDown}
+        @click=${this.#handleClick}
+      >
+        <div class="header" part="header">
+          <h2 id="heading" class="heading" part="heading">
+            <slot name="heading">${this.heading}</slot>
+          </h2>
+          <button
+            class="close"
+            part="close"
+            type="button"
+            aria-label=${this.closeLabel || nothing}
+            @click=${() => this.dialog.close()}
+          >
+            <svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round">
+              <path d="M4 4l8 8M12 4l-8 8"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="body" part="body"><slot></slot></div>
+        <slot name="footer"></slot>
+      </dialog>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsModal.prototype, "open", void 0);
+__decorate([
+    property()
+], QdsModal.prototype, "heading", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsModal.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'light-dismiss' })
+], QdsModal.prototype, "lightDismiss", void 0);
+__decorate([
+    property({ attribute: 'close-label' })
+], QdsModal.prototype, "closeLabel", void 0);
+__decorate([
+    query('dialog')
+], QdsModal.prototype, "dialog", void 0);
+QdsModal = __decorate([
+    customElement('qds-modal')
+], QdsModal);
+export { QdsModal };
+//# sourceMappingURL=qds-modal.js.map

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

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

package/dist/components/qds-progress-bar/qds-progress-bar.d.ts

@@ -0,0 +1,47 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsProgressBarVariant = 'primary' | 'success' | 'warning' | 'error';
+/**
+ * Shows how far along a task is.
+ *
+ * Determinate when `value` is set, indeterminate when it is not — for work whose
+ * length is unknown. The indeterminate state is announced as busy with no
+ * percentage, rather than as 0%, which would claim the task had not started.
+ *
+ * Needs an accessible name: set `label` to say what is progressing ("Uploading
+ * report.pdf"). It is not shown visibly; put visible text beside the bar if
+ * sighted users need it too.
+ *
+ * @element qds-progress-bar
+ *
+ * @csspart track - The full-width background, carrying the progressbar role.
+ * @csspart indicator - The filled portion.
+ *
+ * @cssprop [--qds-component-progress-bar-height] - Bar thickness.
+ * @cssprop [--qds-component-progress-bar-border-radius] - Corner radius of the track and indicator.
+ * @cssprop [--qds-component-progress-bar-duration] - How long the indicator takes to move to a new value.
+ * @cssprop [--qds-component-progress-bar-color-background-rest] - Track color.
+ * @cssprop [--qds-component-progress-bar-{variant}-color-background-rest] - Indicator color per variant.
+ */
+export declare class QdsProgressBar extends QdsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Progress from 0 to `max`. Leave unset for an indeterminate bar. Values
+     * outside the range are clamped.
+     */
+    value: number | null;
+    /** The value that means complete. */
+    max: number;
+    /** Accessible name: what is progressing. */
+    label: string;
+    /** Indicator color. */
+    variant: QdsProgressBarVariant;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-progress-bar': QdsProgressBar;
+    }
+}
+//# sourceMappingURL=qds-progress-bar.d.ts.map

package/dist/components/qds-progress-bar/qds-progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/qds-progress-bar/qds-progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BAoFpB;IAEF;;;OAGG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5B,qCAAqC;IAErC,GAAG,SAAO;IAEV,4CAA4C;IAE5C,KAAK,SAAM;IAEX,uBAAuB;IAEvB,OAAO,EAAE,qBAAqB,CAAa;IASlC,MAAM,IAAI,cAAc;CAwBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/qds-progress-bar/qds-progress-bar.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * Shows how far along a task is.
+ *
+ * Determinate when `value` is set, indeterminate when it is not — for work whose
+ * length is unknown. The indeterminate state is announced as busy with no
+ * percentage, rather than as 0%, which would claim the task had not started.
+ *
+ * Needs an accessible name: set `label` to say what is progressing ("Uploading
+ * report.pdf"). It is not shown visibly; put visible text beside the bar if
+ * sighted users need it too.
+ *
+ * @element qds-progress-bar
+ *
+ * @csspart track - The full-width background, carrying the progressbar role.
+ * @csspart indicator - The filled portion.
+ *
+ * @cssprop [--qds-component-progress-bar-height] - Bar thickness.
+ * @cssprop [--qds-component-progress-bar-border-radius] - Corner radius of the track and indicator.
+ * @cssprop [--qds-component-progress-bar-duration] - How long the indicator takes to move to a new value.
+ * @cssprop [--qds-component-progress-bar-color-background-rest] - Track color.
+ * @cssprop [--qds-component-progress-bar-{variant}-color-background-rest] - Indicator color per variant.
+ */
+let QdsProgressBar = class QdsProgressBar extends QdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Progress from 0 to `max`. Leave unset for an indeterminate bar. Values
+         * outside the range are clamped.
+         */
+        this.value = null;
+        /** The value that means complete. */
+        this.max = 100;
+        /** Accessible name: what is progressing. */
+        this.label = '';
+        /** Indicator color. */
+        this.variant = 'primary';
+    }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+
+        --_fill: var(--qds-component-progress-bar-primary-color-background-rest, #2563eb);
+      }
+
+      :host([variant='success']) {
+        --_fill: var(--qds-component-progress-bar-success-color-background-rest, #059669);
+      }
+
+      :host([variant='warning']) {
+        --_fill: var(--qds-component-progress-bar-warning-color-background-rest, #d97706);
+      }
+
+      :host([variant='error']) {
+        --_fill: var(--qds-component-progress-bar-error-color-background-rest, #dc2626);
+      }
+
+      .track {
+        position: relative;
+        height: var(--qds-component-progress-bar-height, 0.5rem);
+        overflow: hidden;
+        background-color: var(--qds-component-progress-bar-color-background-rest, #e2e8f0);
+        border-radius: var(--qds-component-progress-bar-border-radius, 9999px);
+      }
+
+      .indicator {
+        height: 100%;
+        background-color: var(--_fill);
+        border-radius: inherit;
+        transition: width var(--qds-component-progress-bar-duration, 200ms) ease-out;
+      }
+
+      .indeterminate .indicator {
+        position: absolute;
+        width: 40%;
+        animation: slide 1.4s ease-in-out infinite;
+      }
+
+      /* Travels toward the inline end, so it reverses under RTL. */
+      @keyframes slide {
+        from {
+          inset-inline-start: -40%;
+        }
+        to {
+          inset-inline-start: 100%;
+        }
+      }
+
+      /*
+       * Without motion an indeterminate bar has to say "working" some other way.
+       * A slow pulse across the whole track does, without anything travelling.
+       */
+      @media (prefers-reduced-motion: reduce) {
+        .indicator {
+          transition: none;
+        }
+
+        .indeterminate .indicator {
+          inset-inline-start: 0;
+          width: 100%;
+          animation: pulse 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+          50% {
+            opacity: 0.4;
+          }
+        }
+      }
+
+      @media (forced-colors: active) {
+        .track {
+          border: 0.0625rem solid CanvasText;
+        }
+
+        .indicator {
+          background-color: Highlight;
+        }
+      }
+    `,
+    ]; }
+    /** The value clamped to 0..max, or null when indeterminate. */
+    get #clamped() {
+        if (this.value === null || Number.isNaN(this.value))
+            return null;
+        const max = this.max > 0 ? this.max : 100;
+        return Math.min(Math.max(this.value, 0), max);
+    }
+    render() {
+        const value = this.#clamped;
+        const max = this.max > 0 ? this.max : 100;
+        const indeterminate = value === null;
+        return html `
+      <div
+        class=${indeterminate ? 'track indeterminate' : 'track'}
+        part="track"
+        role="progressbar"
+        aria-label=${this.label || nothing}
+        aria-valuemin="0"
+        aria-valuemax=${max}
+        aria-valuenow=${indeterminate ? nothing : value}
+        aria-busy=${indeterminate ? 'true' : nothing}
+      >
+        <div
+          class="indicator"
+          part="indicator"
+          style=${styleMap(indeterminate ? {} : { width: `${(value / max) * 100}%` })}
+        ></div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], QdsProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], QdsProgressBar.prototype, "max", void 0);
+__decorate([
+    property()
+], QdsProgressBar.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsProgressBar.prototype, "variant", void 0);
+QdsProgressBar = __decorate([
+    customElement('qds-progress-bar')
+], QdsProgressBar);
+export { QdsProgressBar };
+//# sourceMappingURL=qds-progress-bar.js.map