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

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

@@ -0,0 +1,121 @@
+import { html, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { define } from "../0-face/define";
+import { Input } from "./ds-input";
+import styles from "./styles/ds-textarea.css?inline";
+/** Multiline text shares values, labels, validation and forms with ds-input. */
+export class Textarea extends Input {
+    get isMultiline() {
+        return true;
+    }
+    constructor() {
+        super();
+        this.resizeFrame = 0;
+        this.measuredWidth = 0;
+        this.fontsChanged = () => this.resizeToContent();
+        this.variant = "field";
+        this.rows = 3;
+        this.maxRows = 10;
+        this.autoGrow = false;
+        this.wrap = "soft";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                if (this.clientWidth !== this.measuredWidth || entries.some(entry => entry.target !== this)) {
+                    this.measuredWidth = this.clientWidth;
+                    this.resizeToContent();
+                }
+            });
+            this.resizeObserver.observe(this);
+            const metric = this.shadowRoot?.querySelector(".row-metric");
+            if (metric)
+                this.resizeObserver.observe(metric);
+        }
+        document.fonts?.addEventListener("loadingdone", this.fontsChanged);
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        // A fixed-width field can change scale without changing its width. Measure
+        // one shared row separately from the content height that we set ourselves.
+        const metric = this.shadowRoot?.querySelector(".row-metric");
+        if (metric)
+            this.resizeObserver?.observe(metric);
+    }
+    disconnectedCallback() {
+        this.resizeObserver?.disconnect();
+        document.fonts?.removeEventListener("loadingdone", this.fontsChanged);
+        cancelAnimationFrame(this.resizeFrame);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.resizeToContent();
+    }
+    /** Grow on the row grid, bounded by maxRows; the remainder scrolls. */
+    resizeToContent() {
+        cancelAnimationFrame(this.resizeFrame);
+        const control = this.input;
+        if (!control)
+            return;
+        if (!this.autoGrow) {
+            control.style.height = "";
+            control.style.overflowY = "";
+            return;
+        }
+        this.resizeFrame = requestAnimationFrame(() => {
+            if (!this.isConnected)
+                return;
+            const computed = getComputedStyle(control);
+            const row = parseFloat(computed.getPropertyValue("--ds-row-height")) ||
+                20 * (parseFloat(computed.getPropertyValue("--ds-sf")) || 1);
+            const minimum = Math.max(1, Math.floor(this.rows || 1)) * row;
+            const maximum = Math.max(minimum, Math.floor(this.maxRows || this.rows || 1) * row);
+            control.style.height = "0px";
+            const border = parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
+            const needed = Math.ceil((control.scrollHeight + border) / row) * row;
+            control.style.height = `${Math.max(minimum, Math.min(maximum, needed))}px`;
+            control.style.overflowY = needed > maximum ? "auto" : "hidden";
+        });
+    }
+    renderControl(hasError, description) {
+        return html `<span class="row-metric" aria-hidden="true"></span><textarea
+      id="input"
+      part="input"
+      aria-label=${ifDefined(this.accessibleLabel())}
+      aria-invalid=${ifDefined(this.ariaInvalid || (hasError ? "true" : undefined))}
+      aria-describedby=${ifDefined([description ? "description" : "", hasError ? "error" : ""].filter(Boolean).join(" ") || undefined)}
+      inputmode=${ifDefined(this.inputMode || undefined)}
+      spellcheck=${ifDefined(this.spellcheckHint || undefined)}
+      .name=${this.name}
+      .value=${live(this.value)}
+      .placeholder=${this._placeholder || this.placeholder}
+      ?disabled=${this.disabled || this._formDisabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      ?autofocus=${this.autofocus}
+      autocomplete=${this.autocomplete}
+      minlength=${ifDefined(this.minlength || undefined)}
+      maxlength=${ifDefined(this.maxlength >= 0 ? this.maxlength : undefined)}
+      rows=${Math.max(1, Math.floor(this.rows || 1))}
+      wrap=${this.wrap || "soft"}
+      style=${styleMap({ "--ds-textarea-rows": String(Math.max(1, Math.floor(this.rows || 1))) })}
+      class=${hasError ? "has-error" : ""}
+      @input=${this._handleInput}
+      @change=${this.handleChange}
+      @focus=${this._handleFocus}
+      @blur=${this._handleBlur}
+    ></textarea>`;
+    }
+}
+Textarea.properties = {
+    rows: { type: Number },
+    maxRows: { type: Number, attribute: "max-rows" },
+    autoGrow: { type: Boolean, attribute: "auto-grow", reflect: true },
+    wrap: { type: String },
+};
+Textarea.styles = [Input.styles, unsafeCSS(styles)];
+define("ds-textarea", Textarea);

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

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+import "./ds-button";
+import "./ds-icon";
+/** A removable value. Products own its identity and decide whether to remove it. */
+export declare class Token extends LitElement {
+    static formAssociated: boolean;
+    static properties: {
+        value: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        detail: {
+            type: StringConstructor;
+        };
+        removeLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        fieldDisabled: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    value: string;
+    label: string;
+    detail: string;
+    removeLabel: string;
+    disabled: boolean;
+    fieldDisabled: boolean;
+    private fieldsetDisabled;
+    constructor();
+    formDisabledCallback(disabled: boolean): void;
+    get blocked(): boolean;
+    requestRemove(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-token": Token;
+    }
+}
+//# sourceMappingURL=ds-token.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-token.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC;AAGnB,oFAAoF;AACpF,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,cAAc,UAAQ;IAC7B,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAIf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAC1B,KAAK,EAAE,MAAM,CAAC;IAAS,KAAK,EAAE,MAAM,CAAC;IAAS,MAAM,EAAE,MAAM,CAAC;IAC7D,WAAW,EAAE,MAAM,CAAC;IAAS,QAAQ,EAAE,OAAO,CAAC;IAAS,aAAa,EAAE,OAAO,CAAC;IACvF,OAAO,CAAC,gBAAgB,CAAS;;IAKjC,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAMtC,IAAI,OAAO,YAA2E;IACtF,aAAa;IAKb,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,UAAU,EAAE,KAAK,CAAA;KAAE;CAAE"}

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

@@ -0,0 +1,44 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import "./ds-button";
+import "./ds-icon";
+import styles from "./styles/ds-token.css?inline";
+/** A removable value. Products own its identity and decide whether to remove it. */
+export class Token extends LitElement {
+    constructor() {
+        super();
+        this.fieldsetDisabled = false;
+        this.attachInternals?.();
+        this.value = "";
+        this.label = "";
+        this.detail = "";
+        this.removeLabel = "";
+        this.disabled = false;
+        this.fieldDisabled = false;
+    }
+    formDisabledCallback(disabled) {
+        this.fieldsetDisabled = disabled;
+        // Attribute reflection can call this during Lit's update. Render once the
+        // effective native state has settled, including re-enabling this token.
+        queueMicrotask(() => { if (this.isConnected)
+            this.requestUpdate(); });
+    }
+    get blocked() { return this.disabled || this.fieldDisabled || this.fieldsetDisabled; }
+    requestRemove() {
+        if (!this.blocked)
+            this.dispatchEvent(new CustomEvent("ds-token-remove", {
+                detail: { value: this.value }, bubbles: true, composed: true, cancelable: true,
+            }));
+    }
+    render() {
+        return html `<span class="frame" part="frame"><slot name="leading"></slot><span class="copy"><span>${this.label}<slot></slot></span>${this.detail ? html `<small>${this.detail}</small>` : null}</span>${this.removeLabel ? html `<ds-button control="slotted" icon .disabled=${this.blocked}><button type="button" aria-label=${this.removeLabel} ?disabled=${this.blocked} @click=${() => this.requestRemove()}><ds-icon type="close"></ds-icon></button></ds-button>` : null}</span>`;
+    }
+}
+Token.formAssociated = true;
+Token.properties = {
+    value: { type: String }, label: { type: String }, detail: { type: String },
+    removeLabel: { type: String, attribute: "remove-label" },
+    disabled: { type: Boolean, reflect: true }, fieldDisabled: { state: true },
+};
+Token.styles = unsafeCSS(styles);
+define("ds-token", Token);

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

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+/** A translated or literal label for one slotted control. */
+export declare class Tooltip extends LitElement {
+    static properties: {
+        text: {
+            type: StringConstructor;
+        };
+        defaultValue: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        literal: {
+            type: BooleanConstructor;
+        };
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        _visible: {
+            state: boolean;
+        };
+    };
+    text: string;
+    defaultValue: string;
+    literal: boolean;
+    placement: "top" | "bottom";
+    private _visible;
+    private hovered;
+    private focused;
+    private trigger?;
+    private description?;
+    constructor();
+    static styles: import("lit").CSSResult;
+    private languageChanged;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get label();
+    private releaseDescription;
+    private describe;
+    updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-tooltip": Tooltip;
+    }
+}
+//# sourceMappingURL=ds-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAOlD,6DAA6D;AAC7D,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;MAMf;IAEM,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,QAAgB,QAAQ,CAAU;IAClC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,WAAW,CAAC,CAAkB;;IAsBtC,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,eAAe,CAA8B;IAErD,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,KAAK,KAAK,GAKhB;IAED,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,QAAQ,CAgBd;IAEF,OAAO,IAAI,IAAI;IAEf,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,YAAY,EAAE,OAAO,CAAC;KAAE;CAC3D"}

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

@@ -0,0 +1,99 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { translate } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import styles from "./styles/ds-tooltip.css?inline";
+let nextDescription = 0;
+/** A translated or literal label for one slotted control. */
+export class Tooltip extends LitElement {
+    constructor() {
+        super();
+        this.hovered = false;
+        this.focused = false;
+        this.languageChanged = () => this.requestUpdate();
+        // ID references cannot cross a shadow boundary. Keep a hidden description
+        // beside the consumer's children, never replacing or moving those children.
+        this.describe = () => {
+            const trigger = this.querySelector("button, a[href], input, select, textarea, [tabindex], [role=button], [role=tab]")
+                ?? [...this.children].find(child => child !== this.description);
+            this.releaseDescription();
+            if (!trigger || !this.label)
+                return;
+            if (!this.description) {
+                this.description = document.createElement("span");
+                this.description.id = `ds-tooltip-${++nextDescription}`;
+                this.description.slot = "description";
+                this.description.hidden = true;
+            }
+            this.description.textContent = this.label;
+            if (!this.description.isConnected)
+                this.append(this.description);
+            this.trigger = trigger;
+            const ids = (trigger.getAttribute("aria-describedby") || "").split(/\s+/).filter(Boolean);
+            trigger.setAttribute("aria-describedby", [...ids, this.description.id].join(" "));
+        };
+        this.text = "";
+        this.defaultValue = "";
+        this.literal = false;
+        this.placement = "top";
+        this._visible = false;
+        this.addEventListener("mouseenter", () => { this.hovered = true; this._visible = true; });
+        this.addEventListener("mouseleave", () => { this.hovered = false; this._visible = this.focused; });
+        this.addEventListener("focusin", () => { this.focused = true; this._visible = true; });
+        this.addEventListener("focusout", event => {
+            if (event.relatedTarget instanceof Node && this.contains(event.relatedTarget))
+                return;
+            this.focused = false;
+            this._visible = this.hovered;
+        });
+        this.addEventListener("keydown", event => {
+            if (event.key === "Escape")
+                this._visible = false;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.requestUpdate();
+        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);
+        this.releaseDescription();
+        this.hovered = this.focused = this._visible = false;
+    }
+    get label() {
+        if (this.literal)
+            return this.text || this.defaultValue;
+        if (!this.text)
+            return this.defaultValue;
+        const translated = translate(this.text);
+        return translated !== this.text ? translated : this.defaultValue || this.text;
+    }
+    releaseDescription() {
+        if (!this.trigger || !this.description)
+            return;
+        const ids = (this.trigger.getAttribute("aria-describedby") || "").split(/\s+/)
+            .filter(id => id && id !== this.description.id);
+        if (ids.length)
+            this.trigger.setAttribute("aria-describedby", ids.join(" "));
+        else
+            this.trigger.removeAttribute("aria-describedby");
+        this.trigger = undefined;
+    }
+    updated() { this.describe(); }
+    render() {
+        return html `<slot @slotchange=${this.describe}></slot>
+      <span class="bubble" role="tooltip" aria-hidden="true" ?hidden=${!this._visible || !this.label}>${this.label}</span>`;
+    }
+}
+Tooltip.properties = {
+    text: { type: String },
+    defaultValue: { type: String, attribute: "default-value" },
+    literal: { type: Boolean },
+    placement: { type: String, reflect: true },
+    _visible: { state: true },
+};
+Tooltip.styles = unsafeCSS(styles);
+define("ds-tooltip", Tooltip);