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

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

@@ -0,0 +1,69 @@
+import { LitElement } from "lit";
+import "./styles/ds-composer-frame.css";
+export type TextHighlight = {
+    start: number;
+    end: number;
+    color?: string;
+};
+/** A native writing field with metric-preserving highlights. Products own the
+ * text and mention data; DS1 owns its face, growth and synchronized overlay.
+ * Keeping the textarea in light DOM preserves native forms and ARIA ID refs.
+ */
+export declare class Composer extends LitElement {
+    static properties: {
+        highlights: {
+            attribute: boolean;
+        };
+        autoGrow: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        maxRows: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        text: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    highlights: TextHighlight[];
+    autoGrow: boolean;
+    maxRows: number;
+    variant: "field" | "plain";
+    private text;
+    private control;
+    private form;
+    private frame;
+    private width;
+    private observer?;
+    private mutations;
+    private readonly edited;
+    private readonly scrolled;
+    private readonly reset;
+    private readonly fontLoaded;
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private releaseControl;
+    private bindControl;
+    /** Call after programmatic native-value changes. React's adapter does this. */
+    refresh(): void;
+    updated(): void;
+    private syncScroll;
+    private validHighlights;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-composer": Composer;
+    }
+}
+//# sourceMappingURL=ds-composer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-composer.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-composer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,gCAAgC,CAAC;AAYxC,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E;;;GAGG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;MAMf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAC1B,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC,QAAgB,IAAI,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,IAAI,CAAgC;IAC5C,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,QAAQ,CAAC,CAAiB;IAClC,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAIrB;IACF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IACpD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA8C;IACpE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;;IAWnD,iBAAiB;IAMjB,YAAY;IACZ,oBAAoB;IAMpB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,WAAW;IAuBnB,+EAA+E;IAC/E,OAAO;IAaP,OAAO;IA6BP,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,eAAe;IAOvB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CASP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,aAAa,EAAE,QAAQ,CAAA;KAAE;CAAE"}

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

@@ -0,0 +1,183 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { define } from "../0-face/define";
+import styles from "./styles/ds-composer.css?inline";
+import "./styles/ds-composer-frame.css";
+import frameStyles from "./styles/ds-composer-frame.css?inline";
+const styledRoots = new WeakSet();
+function styleRoot(root) {
+    if (!(root instanceof ShadowRoot) || styledRoots.has(root))
+        return;
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(frameStyles);
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    styledRoots.add(root);
+}
+/** A native writing field with metric-preserving highlights. Products own the
+ * text and mention data; DS1 owns its face, growth and synchronized overlay.
+ * Keeping the textarea in light DOM preserves native forms and ARIA ID refs.
+ */
+export class Composer extends LitElement {
+    constructor() {
+        super();
+        this.control = null;
+        this.form = null;
+        this.frame = 0;
+        this.width = 0;
+        this.mutations = new MutationObserver(() => this.refresh());
+        this.edited = () => {
+            this.refresh();
+            // Controlled frameworks can restore a declined edit after input bubbles.
+            queueMicrotask(() => { if (this.isConnected)
+                this.refresh(); });
+        };
+        this.scrolled = () => this.syncScroll();
+        this.reset = () => queueMicrotask(() => this.refresh());
+        this.fontLoaded = () => this.refresh();
+        this.highlights = [];
+        this.autoGrow = false;
+        this.maxRows = 12;
+        this.variant = "field";
+        this.text = "";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        styleRoot(this.getRootNode());
+        document.fonts?.addEventListener("loadingdone", this.fontLoaded);
+        this.bindControl();
+    }
+    firstUpdated() { this.bindControl(); }
+    disconnectedCallback() {
+        this.releaseControl();
+        document.fonts?.removeEventListener("loadingdone", this.fontLoaded);
+        cancelAnimationFrame(this.frame);
+        super.disconnectedCallback();
+    }
+    releaseControl() {
+        this.control?.removeEventListener("input", this.edited);
+        this.control?.removeEventListener("change", this.edited);
+        this.control?.removeEventListener("scroll", this.scrolled);
+        this.form?.removeEventListener("reset", this.reset);
+        this.form = null;
+        this.observer?.disconnect();
+        this.mutations.disconnect();
+    }
+    bindControl() {
+        this.releaseControl();
+        this.control = Array.from(this.children).find(child => child.localName === "textarea") ?? null;
+        const control = this.control;
+        if (!control) {
+            this.text = "";
+            return;
+        }
+        control.addEventListener("input", this.edited);
+        control.addEventListener("change", this.edited);
+        control.addEventListener("scroll", this.scrolled);
+        this.mutations.observe(control, { attributes: true, attributeFilter: ["rows", "wrap", "dir", "form"], childList: true, characterData: true, subtree: true });
+        if (typeof ResizeObserver !== "undefined") {
+            this.observer = new ResizeObserver(entries => {
+                this.syncScroll();
+                if (control.clientWidth !== this.width || entries.some(entry => entry.target !== control)) {
+                    this.width = control.clientWidth;
+                    this.refresh();
+                }
+            });
+            this.observer.observe(control);
+            const metric = this.shadowRoot?.querySelector(".row-metric");
+            if (metric)
+                this.observer.observe(metric);
+        }
+        this.refresh();
+    }
+    /** Call after programmatic native-value changes. React's adapter does this. */
+    refresh() {
+        const control = this.control;
+        if (!control)
+            return;
+        if (this.form !== control.form) {
+            this.form?.removeEventListener("reset", this.reset);
+            this.form = control.form;
+            this.form?.addEventListener("reset", this.reset);
+        }
+        this.text = control.value;
+        this.style.setProperty("--composer-rows", String(Math.max(1, control.rows || 1)));
+        this.toggleAttribute("data-nowrap", control.wrap === "off");
+        this.requestUpdate();
+    }
+    updated() {
+        this.toggleAttribute("data-highlighted", this.validHighlights().length > 0);
+        cancelAnimationFrame(this.frame);
+        this.frame = requestAnimationFrame(() => {
+            const control = this.control;
+            if (!this.isConnected || !control)
+                return;
+            // Browsers may run microtasks between native and framework listeners.
+            // Read the settled native value before painting a controlled edit.
+            if (this.text !== control.value) {
+                this.text = control.value;
+                return;
+            }
+            if (this.autoGrow) {
+                const row = this.shadowRoot.querySelector(".row-metric").getBoundingClientRect().height || 20;
+                const minimum = Math.max(1, control.rows || 1) * row;
+                const maximum = Math.max(minimum, Math.floor(this.maxRows || 1) * row);
+                const scrollTop = control.scrollTop;
+                this.style.setProperty("--composer-height", "0px");
+                const css = getComputedStyle(control);
+                const border = parseFloat(css.borderTopWidth) + parseFloat(css.borderBottomWidth);
+                const needed = Math.ceil((control.scrollHeight + border) / row) * row;
+                this.style.setProperty("--composer-height", `${Math.max(minimum, Math.min(maximum, needed))}px`);
+                this.style.setProperty("--composer-overflow", needed > maximum ? "auto" : "hidden");
+                control.scrollTop = scrollTop;
+            }
+            else {
+                this.style.removeProperty("--composer-height");
+                this.style.removeProperty("--composer-overflow");
+            }
+            this.syncScroll();
+        });
+        this.syncScroll();
+    }
+    syncScroll() {
+        const mirror = this.shadowRoot?.querySelector(".mirror");
+        const control = this.control;
+        if (!mirror || !control)
+            return;
+        // clientWidth excludes the scrollbar, so both layers wrap at the same x.
+        const css = getComputedStyle(control);
+        mirror.style.width = `${control.clientWidth + parseFloat(css.borderLeftWidth) + parseFloat(css.borderRightWidth)}px`;
+        mirror.style.height = `${control.offsetHeight}px`;
+        mirror.style.left = `${control.offsetLeft}px`;
+        mirror.style.top = `${control.offsetTop}px`;
+        mirror.dir = control.dir;
+        mirror.scrollTop = control.scrollTop;
+        mirror.scrollLeft = control.scrollLeft;
+    }
+    validHighlights() {
+        let end = 0;
+        return [...(this.highlights ?? [])]
+            .filter(range => Number.isInteger(range.start) && Number.isInteger(range.end) && range.start >= 0 && range.end > range.start && range.end <= this.text.length)
+            .sort((a, b) => a.start - b.start || b.end - a.end)
+            .filter(range => { if (range.start < end)
+            return false; end = range.end; return true; });
+    }
+    focus(options) { this.control?.focus(options); }
+    render() {
+        let cursor = 0;
+        const parts = this.validHighlights().map(range => {
+            const before = this.text.slice(cursor, range.start);
+            cursor = range.end;
+            return html `${before}<mark style=${styleMap({ "--composer-highlight-color": range.color || undefined })}>${this.text.slice(range.start, range.end)}</mark>`;
+        });
+        return html `<span class="row-metric" aria-hidden="true"></span><slot @slotchange=${this.bindControl}></slot><div class="mirror" aria-hidden="true">${parts}${this.text.slice(cursor)}${"\n"}</div>`;
+    }
+}
+Composer.properties = {
+    highlights: { attribute: false },
+    autoGrow: { type: Boolean, attribute: "auto-grow", reflect: true },
+    maxRows: { type: Number, attribute: "max-rows" },
+    variant: { type: String, reflect: true },
+    text: { state: true },
+};
+Composer.styles = unsafeCSS(styles);
+define("ds-composer", Composer);

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

@@ -0,0 +1,85 @@
+import { LitElement } from "lit";
+import "./ds-button";
+import "./ds-icon";
+import "./ds-text";
+export declare class Cycle extends LitElement {
+    static formAssociated: boolean;
+    static get properties(): {
+        type: {
+            type: StringConstructor;
+        };
+        values: {
+            type: ArrayConstructor;
+        };
+        currentValue: {
+            type: StringConstructor;
+            state: boolean;
+        };
+        translationsReady: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _fieldsetDisabled: {
+            state: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+        };
+        primary: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        secondary: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    type: string;
+    values: string[];
+    currentValue: string;
+    translationsReady: boolean;
+    disabled: boolean;
+    protected _fieldsetDisabled: boolean;
+    variant: string;
+    primary: boolean;
+    secondary: boolean;
+    private boundHandlers;
+    constructor();
+    formDisabledCallback(disabled: boolean): void;
+    focus(options?: FocusOptions): void;
+    connectedCallback(): void;
+    initializeValues(): Promise<void>;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    setupInitialValue(): Promise<void>;
+    handleSettingsChanges(): void;
+    disconnectedCallback(): void;
+    handleButtonClick(e: Event): void;
+    getValueDisplay(value: string): string | any;
+    getColorKey(colorVar: string): string;
+    getColorName(colorVar: string): string;
+    getNotesStyleIcon(style: string): import("lit").TemplateResult<1>;
+    /**
+     * A cycle without a stated look takes the one its type has always had: the
+     * language and theme cycles are grey chips, every other one, the accent
+     * colour's included, is in the accent. Written onto the host before the
+     * first paint, so the inner button and any page sheet see the same word.
+     */
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+    private handleTranslationsLoaded;
+    private handleLanguageChanged;
+    private handleThemeChanged;
+    private handleAccentColorChanged;
+    private handleNoteBehaviorChanged;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-cycle": Cycle;
+    }
+}
+//# sourceMappingURL=ds-cycle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-cycle.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-cycle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAalD,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AAsCnB,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAepB;IAED,MAAM,CAAC,MAAM,0BAAqB;IAI1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAC1B,UAAkB,iBAAiB,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IAG3B,OAAO,CAAC,aAAa,CAOnB;;IA4BF,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAEtC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAE5B,iBAAiB;IA6BX,gBAAgB;IA8DtB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IASnE,iBAAiB;IAqCvB,qBAAqB;IAKrB,oBAAoB;IA0BpB,iBAAiB,CAAC,CAAC,EAAE,KAAK;IA2I1B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG;IA+C5C,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAgBrC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAyBtC,iBAAiB,CAAC,KAAK,EAAE,MAAM;IAe/B;;;;;OAKG;IACH,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAW7C,MAAM;IAsCN,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,yBAAyB;CAGlC;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}