@quieto/ui 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @quieto/ui — QDS web components.
+ *
+ * Importing this module registers every element. To register only what you use,
+ * import the component directly instead:
+ *
+ * ```js
+ * import '@quieto/ui/qds-button.js';
+ * ```
+ *
+ * Components are styled entirely by CSS custom properties from
+ * `@quieto/design-tokens`, which inherit through shadow DOM. Load the stylesheet
+ * once, at document level:
+ *
+ * ```js
+ * import '@quieto/design-tokens/css';
+ * ```
+ *
+ * Without it the components fall back to hardcoded values baked into each
+ * component — they render, but nothing is themeable and dark mode does nothing.
+ */
+export { QdsElement } from './internal/qds-element.js';
+export { QdsButton } from './components/qds-button/qds-button.js';
+export type { QdsButtonVariant, QdsButtonSize, QdsButtonType, } from './components/qds-button/qds-button.js';
+export { QdsStack } from './components/qds-stack/qds-stack.js';
+export type { QdsStackDirection, QdsStackGap, QdsStackAlign, QdsStackJustify, } from './components/qds-stack/qds-stack.js';
+export { QdsCheckbox } from './components/qds-checkbox/qds-checkbox.js';
+export { QdsRadioGroup } from './components/qds-radio-group/qds-radio-group.js';
+export type { QdsRadioGroupOrientation, } from './components/qds-radio-group/qds-radio-group.js';
+export { QdsRadio } from './components/qds-radio/qds-radio.js';
+export { QdsToggle } from './components/qds-toggle/qds-toggle.js';
+export { QdsInput } from './components/qds-input/qds-input.js';
+export type { QdsInputType, QdsInputSize, } from './components/qds-input/qds-input.js';
+export { QdsTextField } from './components/qds-text-field/qds-text-field.js';
+export type { QdsTextFieldType, } from './components/qds-text-field/qds-text-field.js';
+export { QdsChip } from './components/qds-chip/qds-chip.js';
+export type { QdsChipVariant, } from './components/qds-chip/qds-chip.js';
+export { QdsCard } from './components/qds-card/qds-card.js';
+export type { QdsCardVariant, } from './components/qds-card/qds-card.js';
+export { QdsProgressBar } from './components/qds-progress-bar/qds-progress-bar.js';
+export type { QdsProgressBarVariant, } from './components/qds-progress-bar/qds-progress-bar.js';
+export { QdsAccordion } from './components/qds-accordion/qds-accordion.js';
+export { QdsAccordionItem } from './components/qds-accordion-item/qds-accordion-item.js';
+export type { QdsAccordionItemHeadingLevel, } from './components/qds-accordion-item/qds-accordion-item.js';
+export { QdsTabs } from './components/qds-tabs/qds-tabs.js';
+export { QdsTab } from './components/qds-tab/qds-tab.js';
+export { QdsTabPanel } from './components/qds-tab-panel/qds-tab-panel.js';
+export { QdsModal } from './components/qds-modal/qds-modal.js';
+export type { QdsModalSize, } from './components/qds-modal/qds-modal.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAClE,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,GACd,MAAM,uCAAuC,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,eAAe,GAChB,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAChF,YAAY,EACV,wBAAwB,GACzB,MAAM,iDAAiD,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EACV,YAAY,EACZ,YAAY,GACb,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,YAAY,EACV,gBAAgB,GACjB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,YAAY,EACV,cAAc,GACf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,YAAY,EACV,cAAc,GACf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AACnF,YAAY,EACV,qBAAqB,GACtB,MAAM,mDAAmD,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uDAAuD,CAAC;AACzF,YAAY,EACV,4BAA4B,GAC7B,MAAM,uDAAuD,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAC/D,YAAY,EACV,YAAY,GACb,MAAM,qCAAqC,CAAC"}

package/dist/index.js

@@ -0,0 +1,40 @@
+/**
+ * @quieto/ui — QDS web components.
+ *
+ * Importing this module registers every element. To register only what you use,
+ * import the component directly instead:
+ *
+ * ```js
+ * import '@quieto/ui/qds-button.js';
+ * ```
+ *
+ * Components are styled entirely by CSS custom properties from
+ * `@quieto/design-tokens`, which inherit through shadow DOM. Load the stylesheet
+ * once, at document level:
+ *
+ * ```js
+ * import '@quieto/design-tokens/css';
+ * ```
+ *
+ * Without it the components fall back to hardcoded values baked into each
+ * component — they render, but nothing is themeable and dark mode does nothing.
+ */
+export { QdsElement } from './internal/qds-element.js';
+export { QdsButton } from './components/qds-button/qds-button.js';
+export { QdsStack } from './components/qds-stack/qds-stack.js';
+export { QdsCheckbox } from './components/qds-checkbox/qds-checkbox.js';
+export { QdsRadioGroup } from './components/qds-radio-group/qds-radio-group.js';
+export { QdsRadio } from './components/qds-radio/qds-radio.js';
+export { QdsToggle } from './components/qds-toggle/qds-toggle.js';
+export { QdsInput } from './components/qds-input/qds-input.js';
+export { QdsTextField } from './components/qds-text-field/qds-text-field.js';
+export { QdsChip } from './components/qds-chip/qds-chip.js';
+export { QdsCard } from './components/qds-card/qds-card.js';
+export { QdsProgressBar } from './components/qds-progress-bar/qds-progress-bar.js';
+export { QdsAccordion } from './components/qds-accordion/qds-accordion.js';
+export { QdsAccordionItem } from './components/qds-accordion-item/qds-accordion-item.js';
+export { QdsTabs } from './components/qds-tabs/qds-tabs.js';
+export { QdsTab } from './components/qds-tab/qds-tab.js';
+export { QdsTabPanel } from './components/qds-tab-panel/qds-tab-panel.js';
+export { QdsModal } from './components/qds-modal/qds-modal.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAOlE,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAQ/D,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAC;AAKhF,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC;AAM/D,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAK7E,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAK5D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAK5D,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAKnF,OAAO,EAAE,YAAY,EAAE,MAAM,6CAA6C,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uDAAuD,CAAC;AAKzF,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,6CAA6C,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAC"}

package/dist/internal/qds-element.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * Base class for every QDS element.
+ *
+ * Exists so that cross-cutting concerns have exactly one home. Shadow DOM gives
+ * each component its own stylesheet, which means anything genuinely shared —
+ * box-sizing, the `hidden` contract, the focus ring — would otherwise be copied
+ * into every component and drift.
+ */
+export declare class QdsElement extends LitElement {
+    /**
+     * Reset and shared primitives. Components spread this into their own `styles`:
+     *
+     * ```ts
+     * static override styles = [QdsElement.baseStyles, css`…`];
+     * ```
+     *
+     * It is not applied automatically, because a subclass assigning `styles` would
+     * silently replace it rather than extend it.
+     */
+    static baseStyles: import("lit").CSSResult;
+    /**
+     * A focus ring drawn from semantic tokens.
+     *
+     * Uses `:focus-visible` so a pointer click does not draw it, and `outline`
+     * rather than `box-shadow` so it survives forced-colors mode, where
+     * box-shadow is discarded and the focus indicator would disappear entirely.
+     */
+    static focusRingStyles: import("lit").CSSResult;
+}
+//# sourceMappingURL=qds-element.d.ts.map

package/dist/internal/qds-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-element.d.ts","sourceRoot":"","sources":["../../src/internal/qds-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC;;;;;;;;;OASG;IACH,MAAM,CAAC,UAAU,0BAgCf;IAEF;;;;;;OAMG;IACH,MAAM,CAAC,eAAe,0BAKpB;CACH"}

package/dist/internal/qds-element.js

@@ -0,0 +1,68 @@
+import { LitElement, css } from 'lit';
+/**
+ * Base class for every QDS element.
+ *
+ * Exists so that cross-cutting concerns have exactly one home. Shadow DOM gives
+ * each component its own stylesheet, which means anything genuinely shared —
+ * box-sizing, the `hidden` contract, the focus ring — would otherwise be copied
+ * into every component and drift.
+ */
+export class QdsElement extends LitElement {
+    /**
+     * Reset and shared primitives. Components spread this into their own `styles`:
+     *
+     * ```ts
+     * static override styles = [QdsElement.baseStyles, css`…`];
+     * ```
+     *
+     * It is not applied automatically, because a subclass assigning `styles` would
+     * silently replace it rather than extend it.
+     */
+    static { this.baseStyles = css `
+    :host {
+      box-sizing: border-box;
+
+      /*
+       * The focus ring, defined once. Components draw it on different elements —
+       * the host, an inner button, a drawn box, the outline of a text box — so
+       * each writes its own selector and offset, but takes the ring itself from
+       * here: outline: var(--_focus-ring). The tokens it reads change in one
+       * place.
+       */
+      --_focus-ring: var(--qds-semantic-border-primary, 0.125rem) solid
+        var(--qds-semantic-color-border-primary, currentColor);
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    /*
+     * The hidden attribute has no effect on a custom element whose :host sets an
+     * explicit display, which every component here does. The !important is
+     * warranted: hidden must win over the component's own display.
+     *
+     * Note: no backticks in these comments. This is inside a css tagged template,
+     * so one would terminate the literal and the file would not parse.
+     */
+    :host([hidden]) {
+      display: none !important;
+    }
+  `; }
+    /**
+     * A focus ring drawn from semantic tokens.
+     *
+     * Uses `:focus-visible` so a pointer click does not draw it, and `outline`
+     * rather than `box-shadow` so it survives forced-colors mode, where
+     * box-shadow is discarded and the focus indicator would disappear entirely.
+     */
+    static { this.focusRingStyles = css `
+    .focus-ring:focus-visible {
+      outline: var(--_focus-ring);
+      outline-offset: 0.125rem;
+    }
+  `; }
+}
+//# sourceMappingURL=qds-element.js.map

package/dist/internal/qds-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-element.js","sourceRoot":"","sources":["../../src/internal/qds-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEtC;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IACxC;;;;;;;;;OASG;aACI,eAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCtB,CAAC;IAEF;;;;;;OAMG;aACI,oBAAe,GAAG,GAAG,CAAA;;;;;GAK3B,CAAC"}

package/dist/internal/qds-text-control.d.ts

@@ -0,0 +1,79 @@
+import { type PropertyValues } from 'lit';
+import { QdsElement } from './qds-element.js';
+/** The single-line text types the text controls accept. */
+export type QdsTextControlType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+/**
+ * Shared base for the components that wrap one native `<input>`: `qds-input`
+ * and `qds-text-field`.
+ *
+ * Holds everything about being a form control that the two would otherwise
+ * duplicate — the native input's properties, form association, mirroring the
+ * input's constraint validation onto the host, the input and change events, and
+ * focusing the input from a click anywhere in the control. Subclasses render the
+ * markup around the input, and bind their `<input>` to the handlers here.
+ *
+ * Not registered as an element, and not exported from the package.
+ */
+export declare class QdsTextControl extends QdsElement {
+    static shadowRootOptions: ShadowRootInit;
+    static formAssociated: boolean;
+    /** Input type. Only the single-line text types; use a dedicated component for dates or files. */
+    type: QdsTextControlType;
+    /** The current value. The `value` attribute sets the initial value, restored on form reset. */
+    value: string;
+    /** Field name used when the form is submitted. */
+    name: string;
+    /** Hint shown while empty. Not a substitute for a label. */
+    placeholder: string;
+    /** Prevents interaction and excludes the value from form submission. */
+    disabled: boolean;
+    /** Prevents editing but keeps the value focusable, selectable, and submitted. */
+    readonly: boolean;
+    /** Makes the form invalid while empty. */
+    required: boolean;
+    /** Minimum length, as on a native input. */
+    minlength?: number;
+    /** Maximum length, as on a native input. */
+    maxlength?: number;
+    /** A regular expression the value must match, as on a native input. */
+    pattern?: string;
+    /** Autofill hint, as on a native input. */
+    autocomplete?: string;
+    protected readonly input: HTMLInputElement;
+    /** Disabled by its own attribute or by an ancestor `<fieldset disabled>`. */
+    protected formDisabled: boolean;
+    protected readonly internals: ElementInternals;
+    constructor();
+    /** The form this control 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;
+    /** Selects all of the text, as the native `select()`. */
+    select(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    /** Called by the form on reset: restore the value the markup declared. */
+    formResetCallback(): void;
+    /** Called when this element's disabled state changes, from its own attribute or a fieldset. */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Mirror the native input's validity onto the host, anchored to the input so
+     * the browser's validation bubble points at the text rather than the host.
+     */
+    protected syncValidity(): void;
+    /** Bind to the native input's `input` event. */
+    protected handleInput(): void;
+    /** Bind to the native input's `change` event. */
+    protected handleChange(): void;
+    /**
+     * Bind to the click of the box drawn around the input. Clicking its padding or
+     * an affix should land in the text, as it would on a native input whose box is
+     * the whole control.
+     */
+    protected focusInput(event: MouseEvent): void;
+}
+//# sourceMappingURL=qds-text-control.d.ts.map

package/dist/internal/qds-text-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-text-control.d.ts","sourceRoot":"","sources":["../../src/internal/qds-text-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AAErG;;;;;;;;;;;GAWG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,MAAM,CAAC,cAAc,UAAQ;IAE7B,iGAAiG;IAEjG,IAAI,EAAE,kBAAkB,CAAU;IAElC,+FAA+F;IAE/F,KAAK,SAAM;IAEX,kDAAkD;IAElD,IAAI,SAAM;IAEV,4DAA4D;IAE5D,WAAW,SAAM;IAEjB,wEAAwE;IAExE,QAAQ,UAAS;IAEjB,iFAAiF;IAEjF,QAAQ,UAAS;IAEjB,0CAA0C;IAE1C,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4CAA4C;IAE5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uEAAuE;IAEvE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2CAA2C;IAE3C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,gBAAgB,CAAC;IAE5C,6EAA6E;IAE7E,SAAS,CAAC,YAAY,UAAS;IAE/B,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;;IAO/C,gDAAgD;IAChD,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;IAED,yDAAyD;IACzD,MAAM,IAAI,IAAI;cAIK,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAM/C,OAAO,IAAI,IAAI;IAIlC,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI;IAIzB,+FAA+F;IAC/F,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C;;;OAGG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B,gDAAgD;IAChD,SAAS,CAAC,WAAW,IAAI,IAAI;IAW7B,iDAAiD;IACjD,SAAS,CAAC,YAAY,IAAI,IAAI;IAM9B;;;;OAIG;IACH,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAG9C"}

package/dist/internal/qds-text-control.js

@@ -0,0 +1,159 @@
+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 {} from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { QdsElement } from './qds-element.js';
+/**
+ * Shared base for the components that wrap one native `<input>`: `qds-input`
+ * and `qds-text-field`.
+ *
+ * Holds everything about being a form control that the two would otherwise
+ * duplicate — the native input's properties, form association, mirroring the
+ * input's constraint validation onto the host, the input and change events, and
+ * focusing the input from a click anywhere in the control. Subclasses render the
+ * markup around the input, and bind their `<input>` to the handlers here.
+ *
+ * Not registered as an element, and not exported from the package.
+ */
+export class QdsTextControl extends QdsElement {
+    static { this.shadowRootOptions = {
+        ...QdsElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.formAssociated = true; }
+    constructor() {
+        super();
+        /** Input type. Only the single-line text types; use a dedicated component for dates or files. */
+        this.type = 'text';
+        /** The current value. The `value` attribute sets the initial value, restored on form reset. */
+        this.value = '';
+        /** Field name used when the form is submitted. */
+        this.name = '';
+        /** Hint shown while empty. Not a substitute for a label. */
+        this.placeholder = '';
+        /** Prevents interaction and excludes the value from form submission. */
+        this.disabled = false;
+        /** Prevents editing but keeps the value focusable, selectable, and submitted. */
+        this.readonly = false;
+        /** Makes the form invalid while empty. */
+        this.required = false;
+        /** Disabled by its own attribute or by an ancestor `<fieldset disabled>`. */
+        this.formDisabled = false;
+        this.internals = this.attachInternals();
+    }
+    /** The form this control 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;
+    }
+    /** Selects all of the text, as the native `select()`. */
+    select() {
+        this.input.select();
+    }
+    willUpdate(changed) {
+        if (changed.has('value')) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    updated() {
+        this.syncValidity();
+    }
+    /** Called by the form on reset: restore the value the markup declared. */
+    formResetCallback() {
+        this.value = this.getAttribute('value') ?? '';
+    }
+    /** Called when this element's disabled state changes, from its own attribute or a fieldset. */
+    formDisabledCallback(disabled) {
+        this.formDisabled = disabled;
+    }
+    /**
+     * Mirror the native input's validity onto the host, anchored to the input so
+     * the browser's validation bubble points at the text rather than the host.
+     */
+    syncValidity() {
+        const { validity, validationMessage } = this.input;
+        if (validity.valid) {
+            this.internals.setValidity({});
+        }
+        else {
+            this.internals.setValidity(validity, validationMessage, this.input);
+        }
+    }
+    /** Bind to the native input's `input` event. */
+    handleInput() {
+        this.value = this.input.value;
+        // Synchronously, not left to willUpdate: a listener reading FormData from
+        // this very event would otherwise see the previous value.
+        this.internals.setFormValue(this.value);
+        this.syncValidity();
+        this.dispatchEvent(new CustomEvent('qds-input', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    /** Bind to the native input's `change` event. */
+    handleChange() {
+        this.dispatchEvent(new CustomEvent('qds-change', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    /**
+     * Bind to the click of the box drawn around the input. Clicking its padding or
+     * an affix should land in the text, as it would on a native input whose box is
+     * the whole control.
+     */
+    focusInput(event) {
+        if (event.target !== this.input)
+            this.input.focus();
+    }
+}
+__decorate([
+    property()
+], QdsTextControl.prototype, "type", void 0);
+__decorate([
+    property()
+], QdsTextControl.prototype, "value", void 0);
+__decorate([
+    property()
+], QdsTextControl.prototype, "name", void 0);
+__decorate([
+    property()
+], QdsTextControl.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsTextControl.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsTextControl.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsTextControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Number })
+], QdsTextControl.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number })
+], QdsTextControl.prototype, "maxlength", void 0);
+__decorate([
+    property()
+], QdsTextControl.prototype, "pattern", void 0);
+__decorate([
+    property()
+], QdsTextControl.prototype, "autocomplete", void 0);
+__decorate([
+    query('input')
+], QdsTextControl.prototype, "input", void 0);
+__decorate([
+    state()
+], QdsTextControl.prototype, "formDisabled", void 0);
+//# sourceMappingURL=qds-text-control.js.map

package/dist/internal/qds-text-control.js.map

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

package/package.json

@@ -1,6 +1,128 @@
 {
   "name": "@quieto/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "QDS web components — Lit elements styled entirely by @quieto/design-tokens.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Dillon Schultz",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dillonschultz93/qds.git",
+    "directory": "packages/ui"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "design-system",
+    "custom-elements"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./qds-button.js": {
+      "types": "./dist/components/qds-button/qds-button.d.ts",
+      "default": "./dist/components/qds-button/qds-button.js"
+    },
+    "./qds-stack.js": {
+      "types": "./dist/components/qds-stack/qds-stack.d.ts",
+      "default": "./dist/components/qds-stack/qds-stack.js"
+    },
+    "./qds-checkbox.js": {
+      "types": "./dist/components/qds-checkbox/qds-checkbox.d.ts",
+      "default": "./dist/components/qds-checkbox/qds-checkbox.js"
+    },
+    "./qds-radio-group.js": {
+      "types": "./dist/components/qds-radio-group/qds-radio-group.d.ts",
+      "default": "./dist/components/qds-radio-group/qds-radio-group.js"
+    },
+    "./qds-radio.js": {
+      "types": "./dist/components/qds-radio/qds-radio.d.ts",
+      "default": "./dist/components/qds-radio/qds-radio.js"
+    },
+    "./qds-toggle.js": {
+      "types": "./dist/components/qds-toggle/qds-toggle.d.ts",
+      "default": "./dist/components/qds-toggle/qds-toggle.js"
+    },
+    "./qds-input.js": {
+      "types": "./dist/components/qds-input/qds-input.d.ts",
+      "default": "./dist/components/qds-input/qds-input.js"
+    },
+    "./qds-text-field.js": {
+      "types": "./dist/components/qds-text-field/qds-text-field.d.ts",
+      "default": "./dist/components/qds-text-field/qds-text-field.js"
+    },
+    "./qds-chip.js": {
+      "types": "./dist/components/qds-chip/qds-chip.d.ts",
+      "default": "./dist/components/qds-chip/qds-chip.js"
+    },
+    "./qds-card.js": {
+      "types": "./dist/components/qds-card/qds-card.d.ts",
+      "default": "./dist/components/qds-card/qds-card.js"
+    },
+    "./qds-progress-bar.js": {
+      "types": "./dist/components/qds-progress-bar/qds-progress-bar.d.ts",
+      "default": "./dist/components/qds-progress-bar/qds-progress-bar.js"
+    },
+    "./qds-accordion.js": {
+      "types": "./dist/components/qds-accordion/qds-accordion.d.ts",
+      "default": "./dist/components/qds-accordion/qds-accordion.js"
+    },
+    "./qds-accordion-item.js": {
+      "types": "./dist/components/qds-accordion-item/qds-accordion-item.d.ts",
+      "default": "./dist/components/qds-accordion-item/qds-accordion-item.js"
+    },
+    "./qds-tabs.js": {
+      "types": "./dist/components/qds-tabs/qds-tabs.d.ts",
+      "default": "./dist/components/qds-tabs/qds-tabs.js"
+    },
+    "./qds-tab.js": {
+      "types": "./dist/components/qds-tab/qds-tab.d.ts",
+      "default": "./dist/components/qds-tab/qds-tab.js"
+    },
+    "./qds-tab-panel.js": {
+      "types": "./dist/components/qds-tab-panel/qds-tab-panel.d.ts",
+      "default": "./dist/components/qds-tab-panel/qds-tab-panel.js"
+    },
+    "./qds-modal.js": {
+      "types": "./dist/components/qds-modal/qds-modal.d.ts",
+      "default": "./dist/components/qds-modal/qds-modal.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "custom-elements.json"
+  ],
+  "customElements": "custom-elements.json",
+  "//sideEffects": "Defining a custom element IS a side effect, so every module that calls customElements.define must be listed — including the index barrel, which registers everything by re-exporting the component modules. Omitting index.js lets a bundler tree-shake `import '@quieto/ui'` down to nothing: no error, no elements registered, and the page shows un-upgraded markup.",
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/**/qds-*.js"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "lit": "^3.3.3",
+    "@quieto/design-tokens": "0.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^2.0.0",
+    "@web/test-runner": "^1.0.0",
+    "@web/test-runner-playwright": "^0.11.1",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "build": "tsc --build && npm run analyze",
+    "dev": "tsc --build --watch --preserveWatchOutput",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\"",
+    "test": "wtr --coverage",
+    "test:watch": "wtr --watch",
+    "type-check": "tsc --build --dry",
+    "clean": "rm -rf dist custom-elements.json .turbo tsconfig.tsbuildinfo"
+  }
 }