@0001-labs/design-system-1 0.0.0-stage → 0.3.0-alpha.13

package/dist/2-core/ds-radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-radio.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,oFAAoF;AACpF,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;;IAEtB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,UAAU,EAAE,KAAK,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-radio.js

@@ -0,0 +1,19 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import styles from "./styles/ds-radio.css?inline";
+/** Native radios keep their group, keyboard, labels and form. DS1 owns the face. */
+export class Radio extends LitElement {
+    constructor() { super(); this.choice = false; this.compact = false; this.preview = false; this.label = ""; }
+    focus(options) { this.querySelector(":scope > input")?.focus(options); }
+    render() {
+        return html `<slot></slot>${this.choice ? html `<span class="face" aria-hidden="true">${this.preview ? html `<span class="preview"><slot name="preview"></slot></span>` : null}<span class="label">${this.label}</span></span>` : null}`;
+    }
+}
+Radio.properties = {
+    choice: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    preview: { type: Boolean, reflect: true },
+    label: { type: String },
+};
+Radio.styles = unsafeCSS(styles);
+define("ds-radio", Radio);

package/dist/2-core/ds-select.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+import "./ds-swatch";
+/** Native selection, labels and forms; one shared face and scale. */
+export declare class Select extends LitElement {
+    static properties: {
+        swatch: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    swatch: string | undefined;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    private listbox;
+    private disabled;
+    private observer;
+    private control;
+    private syncRows;
+    private observeControl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-select": Select;
+    }
+}
+//# sourceMappingURL=ds-select.d.ts.map

package/dist/2-core/ds-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-select.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,aAAa,CAAC;AAErB,qEAAqE;AACrE,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;MAA+C;IACxD,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;;IAEnC,MAAM,CAAC,MAAM,4BAAyH;IACtI,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAA+C;IAC/D,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,cAAc;IAStB,iBAAiB;IACjB,oBAAoB;IACpB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-select.js

@@ -0,0 +1,45 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import down from "../x-icon/down.svg?raw";
+import styles from "./styles/ds-select.css?inline";
+import "./ds-swatch";
+/** Native selection, labels and forms; one shared face and scale. */
+export class Select extends LitElement {
+    constructor() {
+        super();
+        this.listbox = false;
+        this.disabled = false;
+        this.observer = new MutationObserver(() => this.syncRows());
+        this.swatch = undefined;
+    }
+    control() {
+        const select = this.querySelector("select");
+        return select?.parentElement === this ? select : null;
+    }
+    syncRows() {
+        const select = this.control();
+        this.style.setProperty("--ds-select-rows", String(select ? select.size || (select.multiple ? 4 : 1) : 1));
+        this.listbox = Boolean(select && (select.multiple || select.size > 1));
+        this.toggleAttribute("data-listbox", this.listbox);
+        this.disabled = Boolean(select?.matches(":disabled"));
+        this.requestUpdate();
+    }
+    observeControl() {
+        this.observer.disconnect();
+        const select = this.control();
+        if (select)
+            this.observer.observe(select, { attributes: true, attributeFilter: ["size", "multiple", "disabled"] });
+        for (let parent = this.parentElement; parent; parent = parent.parentElement) {
+            if (parent.localName === "fieldset")
+                this.observer.observe(parent, { attributes: true, attributeFilter: ["disabled"] });
+        }
+        this.syncRows();
+    }
+    connectedCallback() { super.connectedCallback(); this.observeControl(); }
+    disconnectedCallback() { this.observer.disconnect(); super.disconnectedCallback(); }
+    focus(options) { this.control()?.focus(options); }
+    render() { return html `<slot @slotchange=${this.observeControl}></slot><span aria-hidden="true" ?hidden=${this.listbox || Boolean(this.swatch)} class=${this.disabled ? "disabled" : ""}></span>${this.swatch && !this.listbox ? html `<ds-swatch aria-hidden="true" .value=${this.swatch} class=${this.disabled ? "disabled" : ""}></ds-swatch>` : null}`; }
+}
+Select.properties = { swatch: { type: String, reflect: true } };
+Select.styles = [unsafeCSS(styles), unsafeCSS(`:host { --ds-select-arrow: url("data:image/svg+xml,${encodeURIComponent(down)}"); }`)];
+define("ds-select", Select);

package/dist/2-core/ds-split.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from "lit";
+import "./ds-icon";
+import "./ds-text";
+export interface SplitSegment<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+/** A compact group of choices or repeated actions, sharing outside corners.
+ * `change` requests a choice; preventDefault keeps the current value. `press`
+ * reports every activation in actions mode. Neither mode submits a form.
+ */
+export declare class Split extends LitElement {
+    static formAssociated: boolean;
+    static properties: {
+        options: {
+            type: StringConstructor;
+        };
+        segments: {
+            attribute: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        actions: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        compact: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _fieldsetDisabled: {
+            state: boolean;
+        };
+    };
+    options: string;
+    segments: ReadonlyArray<SplitSegment> | undefined;
+    value: string;
+    disabled: boolean;
+    actions: boolean;
+    literal: boolean;
+    compact: boolean;
+    private _fieldsetDisabled;
+    constructor();
+    static styles: import("lit").CSSResult;
+    private languageChanged;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** String convenience for HTML: day:Day,back:@left:Back. Use segments for
+     * labels containing commas/colons, translated product labels or disabling
+     * individual actions. An explicit empty array renders no choices.
+     */
+    private get choices();
+    private press;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-split": Split;
+    }
+}
+//# sourceMappingURL=ds-split.d.ts.map

package/dist/2-core/ds-split.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-split.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-split.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAG3D,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAGnB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,cAAc,UAAQ;IAC7B,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MASf;IAEM,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACzB,QAAgB,iBAAiB,CAAU;;IAgB3C,MAAM,CAAC,MAAM,0BAAqB;IAClC,OAAO,CAAC,eAAe,CAA8B;IAErD,iBAAiB;IAOjB,oBAAoB;IAMpB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAEtC;;;OAGG;IACH,OAAO,KAAK,OAAO,GAUlB;IAED,OAAO,CAAC,KAAK;IAYb,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAK5B,MAAM;CAaP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,UAAU,EAAE,KAAK,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-split.js

@@ -0,0 +1,101 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { getText } from "../0-face/i18n";
+import "./ds-icon";
+import "./ds-text";
+import styles from "./styles/ds-split.css?inline";
+/** A compact group of choices or repeated actions, sharing outside corners.
+ * `change` requests a choice; preventDefault keeps the current value. `press`
+ * reports every activation in actions mode. Neither mode submits a form.
+ */
+export class Split extends LitElement {
+    constructor() {
+        super();
+        this.languageChanged = () => this.requestUpdate();
+        // Association supplies native disabled-fieldset behavior, without adding
+        // a form value or making an action button into a submitter.
+        if (typeof this.attachInternals === "function")
+            this.attachInternals();
+        this.options = "";
+        this.value = "";
+        this.disabled = false;
+        this.actions = false;
+        this.literal = false;
+        this.compact = false;
+        this._fieldsetDisabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "group");
+        window.addEventListener("language-changed", this.languageChanged);
+        window.addEventListener("translations-loaded", this.languageChanged);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("language-changed", this.languageChanged);
+        window.removeEventListener("translations-loaded", this.languageChanged);
+    }
+    formDisabledCallback(disabled) { this._fieldsetDisabled = disabled; }
+    /** String convenience for HTML: day:Day,back:@left:Back. Use segments for
+     * labels containing commas/colons, translated product labels or disabling
+     * individual actions. An explicit empty array renders no choices.
+     */
+    get choices() {
+        return this.segments ?? this.options.split(",").map(part => part.trim()).filter(Boolean).map(part => {
+            const colon = part.indexOf(":");
+            if (colon < 0)
+                return { value: part.toLowerCase(), label: part };
+            const value = part.slice(0, colon).trim();
+            const label = part.slice(colon + 1).trim();
+            if (!label.startsWith("@"))
+                return { value, label };
+            const end = label.indexOf(":");
+            return { value, icon: label.slice(1, end < 0 ? undefined : end).trim(), label: end < 0 ? value : label.slice(end + 1).trim() };
+        });
+    }
+    press(segment) {
+        if (this.disabled || this._fieldsetDisabled || segment.disabled)
+            return;
+        if (this.actions) {
+            this.dispatchEvent(new CustomEvent("press", { detail: { value: segment.value }, bubbles: true, composed: true }));
+        }
+        else if (segment.value !== this.value) {
+            const accepted = this.dispatchEvent(new CustomEvent("change", {
+                detail: { value: segment.value }, bubbles: true, composed: true, cancelable: true,
+            }));
+            if (accepted)
+                this.value = segment.value;
+        }
+    }
+    focus(options) {
+        const buttons = [...this.renderRoot.querySelectorAll("button:not(:disabled)")];
+        (buttons.find(button => button.getAttribute("aria-pressed") === "true") ?? buttons[0])?.focus(options);
+    }
+    render() {
+        return html `${this.choices.map(segment => html `<button
+      type="button" part="segment" value=${segment.value}
+      aria-pressed=${this.actions ? nothing : String(segment.value === this.value)}
+      aria-label=${segment.icon ? (this.literal ? segment.label : getText(segment.label)) : nothing}
+      ?data-icon=${!!segment.icon}
+      ?data-short=${segment.label.length === 1}
+      ?disabled=${this.disabled || this._fieldsetDisabled || segment.disabled}
+      @click=${() => this.press(segment)}
+    >${segment.icon
+            ? html `<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
+            : html `<ds-text .text=${segment.label} .literal=${this.literal}></ds-text>`}</button>`)}`;
+    }
+}
+Split.formAssociated = true;
+Split.properties = {
+    options: { type: String },
+    segments: { attribute: false },
+    value: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    actions: { type: Boolean, reflect: true },
+    literal: { type: Boolean, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    _fieldsetDisabled: { state: true },
+};
+Split.styles = unsafeCSS(styles);
+define("ds-split", Split);

package/dist/2-core/ds-swatch.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+/** A colour sample, composed with ds-button for selectable library choices. */
+export declare class Swatch extends LitElement {
+    static properties: {
+        value: {
+            type: StringConstructor;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    selected: boolean;
+    constructor();
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-swatch": Swatch;
+    }
+}
+//# sourceMappingURL=ds-swatch.d.ts.map

package/dist/2-core/ds-swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-swatch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-swatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,+EAA+E;AAC/E,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;MAA2E;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;;IAE1B,MAAM,CAAC,MAAM,0BAKX;IACF,MAAM;CACP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-swatch.js

@@ -0,0 +1,16 @@
+import { LitElement, html, css } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { define } from "../0-face/define";
+/** A colour sample, composed with ds-button for selectable library choices. */
+export class Swatch extends LitElement {
+    constructor() { super(); this.value = "transparent"; this.selected = false; }
+    render() { return html `<span style=${styleMap({ backgroundColor: this.value })}></span>`; }
+}
+Swatch.properties = { value: { type: String }, selected: { type: Boolean, reflect: true } };
+Swatch.styles = css `
+    :host { display: inline-block; flex: 0 0 auto; width: calc(var(--ds-08) * var(--ds-sf)); height: calc(var(--ds-08) * var(--ds-sf)); vertical-align: middle; }
+    :host([hidden]) { display: none !important; }
+    span { display: block; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid var(--ds-border-color); }
+    :host([selected]) span { outline: 2px solid var(--ds-text-color); outline-offset: 0; }
+  `;
+define("ds-swatch", Swatch);

package/dist/2-core/ds-switch.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+/** The shared switch face. The slotted button retains native activation and refs. */
+export declare class Switch extends LitElement {
+    static styles: import("lit").CSSResult;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-switch": Switch;
+    }
+}
+//# sourceMappingURL=ds-switch.d.ts.map

package/dist/2-core/ds-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qFAAqF;AACrF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-switch.js

@@ -0,0 +1,10 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import styles from "./styles/ds-switch.css?inline";
+/** The shared switch face. The slotted button retains native activation and refs. */
+export class Switch extends LitElement {
+    focus(options) { this.querySelector(":scope > button")?.focus(options); }
+    render() { return html `<slot></slot>`; }
+}
+Switch.styles = unsafeCSS(styles);
+define("ds-switch", Switch);

package/dist/2-core/ds-text.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from "lit";
+/**
+ * A component for displaying text from translations
+ *
+ * @element ds-text
+ * @prop {string} text - The translation key (optional if using slot content)
+ * @prop {boolean} literal - The text is what someone wrote, not a key: show it
+ *   as it stands, never looked up, never translated
+ *
+ * @example
+ * // Using slot content as the key (preferred)
+ * <ds-text>Welcome to the app</ds-text>
+ *
+ * // Using text attribute (still supported)
+ * <ds-text text="Welcome to the app"></ds-text>
+ *
+ * // Something a person typed: a list title, an item, a search they saved
+ * <ds-text literal text="Marketing plan"></ds-text>
+ */
+export declare class Text extends LitElement {
+    static get properties(): {
+        text: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        strong: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        wrap: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _text: {
+            type: StringConstructor;
+            state: boolean;
+        };
+    };
+    text: string;
+    literal: boolean;
+    tone?: "muted" | "title";
+    size?: "small" | "heading";
+    strong: boolean;
+    wrap: boolean;
+    _text: string;
+    _currentLanguage: string;
+    private _slotKey;
+    private boundHandlers;
+    constructor();
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    _updateLanguageAttribute(): void;
+    _loadText(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-text": Text;
+    }
+}
+//# sourceMappingURL=ds-text.d.ts.map

package/dist/2-core/ds-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IA8BjB,oBAAoB;IAYpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQlD,wBAAwB;IA8BxB,SAAS;IA4BT,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-text.js

@@ -0,0 +1,142 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText, currentLanguage } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import styles from "./styles/ds-text.css?inline";
+/**
+ * A component for displaying text from translations
+ *
+ * @element ds-text
+ * @prop {string} text - The translation key (optional if using slot content)
+ * @prop {boolean} literal - The text is what someone wrote, not a key: show it
+ *   as it stands, never looked up, never translated
+ *
+ * @example
+ * // Using slot content as the key (preferred)
+ * <ds-text>Welcome to the app</ds-text>
+ *
+ * // Using text attribute (still supported)
+ * <ds-text text="Welcome to the app"></ds-text>
+ *
+ * // Something a person typed: a list title, an item, a search they saved
+ * <ds-text literal text="Marketing plan"></ds-text>
+ */
+export class Text extends LitElement {
+    static get properties() {
+        return {
+            text: { type: String, reflect: true },
+            literal: { type: Boolean, reflect: true },
+            tone: { type: String, reflect: true },
+            size: { type: String, reflect: true },
+            strong: { type: Boolean, reflect: true },
+            wrap: { type: Boolean, reflect: true },
+            _text: { type: String, state: true },
+        };
+    }
+    constructor() {
+        super();
+        this._slotKey = "";
+        this.text = "";
+        this.literal = false;
+        this.strong = false;
+        this.wrap = false;
+        this._text = "";
+        this._currentLanguage = currentLanguage.value;
+        // Create bound event handlers for proper cleanup
+        this.boundHandlers = {
+            languageChanged: (() => {
+                this._currentLanguage = currentLanguage.value;
+                this._updateLanguageAttribute();
+                this._loadText();
+                this.requestUpdate();
+            }),
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Capture slot content as the translation key if no text attribute
+        if (!this.text && !this.literal) {
+            const slotContent = this.textContent?.trim() || "";
+            if (slotContent) {
+                this._slotKey = slotContent;
+                // Clear the slot content - we'll render the translation in shadow DOM
+                this.textContent = "";
+            }
+        }
+        this._currentLanguage = currentLanguage.value;
+        this._updateLanguageAttribute();
+        this._loadText();
+        // Listen for language changes
+        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
+        // Also listen for translations loaded event
+        window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
+        window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("text") || changedProperties.has("literal")) {
+            this._loadText();
+        }
+    }
+    _updateLanguageAttribute() {
+        const lang = this._currentLanguage || currentLanguage.value;
+        // Handles "ja", "ja-JP", "zh-Hant", "zh-Hans", etc.
+        const parts = (lang || "").toLowerCase().split(/[-_]/).filter(Boolean);
+        const primaryLang = parts[0] || "";
+        if (primaryLang === "ja") {
+            this.setAttribute("data-language", "ja");
+            return;
+        }
+        if (primaryLang === "zh") {
+            // Prefer explicit script; otherwise infer from common regions.
+            const hasHans = parts.includes("hans") || parts.includes("cn") || parts.includes("sg");
+            const hasHant = parts.includes("hant") ||
+                parts.includes("tw") ||
+                parts.includes("hk") ||
+                parts.includes("mo");
+            if (hasHans)
+                this.setAttribute("data-language", "zh-hans");
+            else if (hasHant)
+                this.setAttribute("data-language", "zh-hant");
+            else
+                this.setAttribute("data-language", "zh");
+            return;
+        }
+        this.removeAttribute("data-language");
+    }
+    _loadText() {
+        // Use text attribute first, then slot content as fallback
+        const key = this.text || this._slotKey;
+        if (!key) {
+            this._text = "";
+            this._updateLanguageAttribute();
+            return;
+        }
+        // What someone wrote stands as it is: a list called "Home" stays "Home",
+        // and nothing about it reaches the translations.
+        if (this.literal) {
+            this._text = key;
+            this._updateLanguageAttribute();
+            return;
+        }
+        try {
+            const translatedText = getText(key);
+            this._text = translatedText || key;
+        }
+        catch (error) {
+            console.error("Error loading text for key:", key, error);
+            this._text = key;
+        }
+        this._updateLanguageAttribute();
+    }
+    render() {
+        if (this.literal && !this.text)
+            return html `<slot></slot>`;
+        return html `<span>${this._text || this.text || this._slotKey}</span>`;
+    }
+}
+Text.styles = unsafeCSS(styles);
+define("ds-text", Text);

package/dist/2-core/ds-textarea.d.ts

@@ -0,0 +1,46 @@
+import { type CSSResultGroup } from "lit";
+import { Input } from "./ds-input";
+/** Multiline text shares values, labels, validation and forms with ds-input. */
+export declare class Textarea extends Input {
+    static properties: {
+        rows: {
+            type: NumberConstructor;
+        };
+        maxRows: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        autoGrow: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        wrap: {
+            type: StringConstructor;
+        };
+    };
+    static styles: CSSResultGroup;
+    rows: number;
+    maxRows: number;
+    autoGrow: boolean;
+    wrap: "soft" | "hard" | "off";
+    private resizeFrame;
+    private measuredWidth;
+    private resizeObserver?;
+    private readonly fontsChanged;
+    protected get isMultiline(): boolean;
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    /** Grow on the row grid, bounded by maxRows; the remainder scrolls. */
+    private resizeToContent;
+    protected renderControl(hasError: boolean, description: string): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-textarea": Textarea;
+    }
+}
+//# sourceMappingURL=ds-textarea.d.ts.map

package/dist/2-core/ds-textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-textarea.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,gFAAgF;AAChF,qBAAa,QAAS,SAAQ,KAAK;IACjC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IACF,MAAM,CAAC,MAAM,EAAE,cAAc,CAAqC;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IACtC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,cAAc,CAAC,CAAiB;IACxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAC7D,SAAS,KAAK,WAAW,IAAI,OAAO,CAEnC;;IAWD,iBAAiB,IAAI,IAAI;IAgBzB,YAAY,IAAI,IAAI;IAQpB,oBAAoB,IAAI,IAAI;IAO5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAK5C,uEAAuE;IACvE,OAAO,CAAC,eAAe;IAyBvB,SAAS,CAAC,aAAa,CAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM;CA6B/D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}