@chiralkit/design-system 0.1.0-alpha.0

package/dist/esm/ds-dialog.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e-glNjK6.js';
+
+const dsDialogCss = () => `:host{display:contents}.ds-dialog{color:inherit;background-color:color-mix(in oklch, currentColor 4%, Canvas);border:1px solid color-mix(in oklch, currentColor 15%, transparent);border-radius:var(--ds-radius-md);padding:var(--ds-spacing-xl);box-sizing:border-box;max-width:min(90vw, 32rem);max-height:90vh;overflow:auto}.ds-dialog::backdrop{background-color:rgba(0, 0, 0, 0.5)}`;
+
+const DsDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsOpen = createEvent(this, "dsOpen");
+        this.dsClose = createEvent(this, "dsClose");
+    }
+    dialogEl;
+    open = false;
+    label;
+    labelledBy;
+    describedBy;
+    dsOpen;
+    dsClose;
+    watchOpen(newValue) {
+        this.syncOpen(newValue);
+    }
+    componentDidLoad() {
+        // The `close` event on the native <dialog> is not composed by
+        // default, so it does not bubble out of the shadow root. Wire it
+        // here rather than in the JSX so we can re-emit as a Stencil
+        // Event that composed-crosses the boundary.
+        this.dialogEl?.addEventListener("close", this.onNativeClose);
+        if (this.open) {
+            this.syncOpen(true);
+        }
+    }
+    disconnectedCallback() {
+        this.dialogEl?.removeEventListener("close", this.onNativeClose);
+    }
+    syncOpen(shouldOpen) {
+        if (!this.dialogEl)
+            return;
+        const isOpen = this.dialogEl.open;
+        if (shouldOpen && !isOpen) {
+            // showModal() is the modal form — traps focus, adds the ::backdrop,
+            // makes background inert. show() (non-modal) is intentionally not
+            // exposed in v1.
+            this.dialogEl.showModal();
+            this.dsOpen.emit();
+        }
+        else if (!shouldOpen && isOpen) {
+            this.dialogEl.close();
+            // dsClose is emitted by onNativeClose to also cover Escape /
+            // form-submit paths — no need to emit here.
+        }
+    }
+    onNativeClose = () => {
+        this.dsClose.emit();
+    };
+    render() {
+        return (h(Host, { key: '8b25b70865ea028c81405f77a4d016348507aae6' }, h("dialog", { key: '0c82754fe4e4ecf68232a93616bbff3621866375', class: "ds-dialog", "aria-label": this.label, "aria-labelledby": this.labelledBy, "aria-describedby": this.describedBy, ref: (el) => (this.dialogEl = el) }, h("slot", { key: '30131eed9eec7db67a407770b5caefe42c78b68a' }))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "watchOpen": 0
+            }]
+    }; }
+};
+DsDialog.style = dsDialogCss();
+
+export { DsDialog as ds_dialog };

package/dist/esm/ds-input.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e-glNjK6.js';
+
+const dsInputCss = () => `:host{display:inline-block}.ds-input{font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);background-color:transparent;color:inherit;border:1px solid color-mix(in oklch, currentColor 22%, transparent);-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%}.ds-input::placeholder{color:color-mix(in oklch, currentColor 45%, transparent)}.ds-input:disabled{opacity:0.5;cursor:not-allowed}.ds-input[aria-invalid="true"]{border-color:color-mix(in oklch, currentColor 55%, transparent)}.ds-input--md{border-radius:var(--ds-radius-sm);padding:var(--ds-spacing-sm) var(--ds-spacing-lg)}.ds-input--lg{border-radius:var(--ds-radius-md);padding:var(--ds-spacing-md) var(--ds-spacing-xl)}`;
+
+const DsInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsInput = createEvent(this, "dsInput");
+    }
+    inputEl;
+    value;
+    name;
+    type = "text";
+    placeholder;
+    disabled = false;
+    required = false;
+    invalid = false;
+    describedBy;
+    label;
+    size = "md";
+    dsInput;
+    watchValue(newValue) {
+        if (this.inputEl && this.inputEl.value !== (newValue ?? "")) {
+            this.inputEl.value = newValue ?? "";
+        }
+    }
+    componentDidLoad() {
+        if (this.inputEl && this.value !== undefined) {
+            this.inputEl.value = this.value;
+        }
+    }
+    onInput = (event) => {
+        const value = event.target.value;
+        this.dsInput.emit(value);
+    };
+    render() {
+        const cls = `ds-input ds-input--${this.size}`;
+        return (h(Host, { key: 'efce39c6ecfb8dda71577e7fb7b285ddc16287f5' }, h("input", { key: '5f6ad573f20e6eca20f42aa96c8acdf386508d1c', class: cls, type: this.type, name: this.name, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label, "aria-required": this.required ? "true" : undefined, "aria-invalid": this.invalid ? "true" : undefined, "aria-describedby": this.describedBy, ref: (el) => (this.inputEl = el), onInput: this.onInput })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }]
+    }; }
+};
+DsInput.style = dsInputCss();
+
+export { DsInput as ds_input };

package/dist/esm/ds-loader.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-e-glNjK6.js';
+
+const dsLoaderCss = () => `:host{display:inline-flex;color:currentColor;line-height:0}.ds-loader{display:block;width:40px;height:40px;color:inherit}.ds-loader--sm{width:16px;height:16px}.ds-loader--md{width:40px;height:40px}.ds-loader--lg{width:120px;height:120px}.ds-loader__half{transform-box:view-box;transform-origin:50% 50%;animation:ds-loader-swing 1.4s cubic-bezier(0.6, 0, 0.4, 1) infinite}.ds-loader__half--b{animation-name:ds-loader-swing-mirror}.ds-loader__mirror{transform-box:view-box;transform-origin:50% 50%;transform:scaleX(-1)}.ds-loader--speed-slow .ds-loader__half{animation-duration:2.2s}.ds-loader--speed-fast .ds-loader__half{animation-duration:0.9s}@keyframes ds-loader-swing{0%{transform:rotate(180deg)}50%{transform:rotate(0deg)}100%{transform:rotate(180deg)}}@keyframes ds-loader-swing-mirror{0%{transform:rotate(-180deg)}50%{transform:rotate(0deg)}100%{transform:rotate(-180deg)}}@media (prefers-reduced-motion: reduce){.ds-loader__half,.ds-loader__half--b{animation:ds-loader-pulse 2s ease-in-out infinite}@keyframes ds-loader-pulse{0%,100%{opacity:0.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(0deg)}}}`;
+
+const DsLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    size = "md";
+    label = "Loading";
+    speed = "normal";
+    render() {
+        const cls = [
+            "ds-loader",
+            `ds-loader--${this.size}`,
+            `ds-loader--speed-${this.speed}`,
+        ].join(" ");
+        return (h(Host, { key: 'd7017e7e3c970e27bffa30c193abd937c5ec13cd', role: "status", "aria-label": this.label }, h("svg", { key: '9eb10695249bc4c833b6347d38226fdc37d4be7d', class: cls, viewBox: "-48 -48 96 96", "aria-hidden": "true", focusable: "false" }, h("g", { key: '711ee60648593d216687087c5b2145ec25120bc5', class: "ds-loader__half ds-loader__half--a" }, h("path", { key: '9efdc31104b6037a57d7bdc802303938f7285666', d: LOGO_PATH_D, fill: "none", stroke: "currentColor", "stroke-width": "14", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("g", { key: 'fcbeefc154e0e9db5b0378f77dafa3f9c0162e92', class: "ds-loader__half ds-loader__half--b" }, h("g", { key: '790b3ec1c4b262352cc383ab6b9f7d5cbb77474b', class: "ds-loader__mirror" }, h("path", { key: '694713be37532568852b2de2530cc50c1ff3b8de', d: LOGO_PATH_D, fill: "none", stroke: "currentColor", "stroke-width": "14", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+    }
+};
+const LOGO_PATH_D = "M14.09 -27.22 L13.04 -28.53 L11.94 -29.76 L10.78 -30.92 L9.57 -32.01 L8.30 -33.02 L7.00 -33.95 L5.65 -34.80 L4.27 -35.57 L2.85 -36.25 L1.40 -36.84 L-0.07 -37.35 L-1.56 -37.76 L-3.07 -38.08 L-4.59 -38.31 L-6.13 -38.45 L-7.66 -38.50 L-9.20 -38.45 L-10.73 -38.31 L-12.25 -38.08 L-13.76 -37.76 L-15.25 -37.35 L-16.73 -36.84 L-18.17 -36.25 L-19.59 -35.57 L-20.97 -34.80 L-22.32 -33.95 L-23.63 -33.02 L-24.89 -32.01 L-26.10 -30.92 L-27.26 -29.76 L-28.37 -28.53 L-29.41 -27.22 L-30.40 -25.86 L-31.32 -24.42 L-32.17 -22.93 L-32.95 -21.39 L-33.66 -19.79 L-34.30 -18.15 L-34.86 -16.46 L-35.34 -14.73 L-35.74 -12.97 L-36.06 -11.18 L-36.29 -9.35 L-36.44 -7.51 L-36.50 -5.65 L-36.48 -3.77 L-36.37 -1.89 L-36.18 0 L-35.90 1.89 L-35.53 3.77 L-35.07 5.65 L-34.53 7.51 L-33.90 9.35 L-33.18 11.18 L-32.39 12.97 L-31.51 14.73 L-30.55 16.46 L-29.51 18.15 L-28.40 19.79 L-27.21 21.39 L-25.95 22.93 L-24.61 24.42 L-23.22 25.86 L-21.75 27.22 L-20.23 28.53 L-18.64 29.76 L-17.00 30.92 L-15.31 32.01 L-13.57 33.02 L-11.79 33.95 L-9.96 34.80 L-8.10 35.57 L-6.20 36.25 L-4.28 36.84 L-2.33 37.35 L-0.35 37.76 L1.63 38.08 L3.64 38.31 L5.65 38.45 L7.66 38.50 L9.68 38.45 L11.69 38.31 L13.69 38.08 L15.68 37.76 L17.65 37.35 L19.60 36.84 L21.53 36.25 L23.42 35.57 L25.28 34.80 L27.11 33.95 L28.89 33.02 L30.63 32.01 L32.32 30.92 L33.96 29.76 L35.55 28.53 L37.07 27.22";
+DsLoader.style = dsLoaderCss();
+
+export { DsLoader as ds_loader };

package/dist/esm/ds-select.entry.js

@@ -0,0 +1,83 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e-glNjK6.js';
+
+const dsSelectCss = () => `:host{display:inline-block;position:relative}.ds-select{font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);background-color:transparent;color:inherit;border:1px solid color-mix(in oklch, currentColor 22%, transparent);cursor:pointer;-webkit-appearance:none;appearance:none}:host::after{content:"";position:absolute;top:50%;right:var(--ds-spacing-sm);width:12px;height:12px;transform:translateY(-50%);background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.ds-select:disabled{opacity:0.5;cursor:not-allowed}:host(:has(.ds-select:disabled))::after{opacity:0.5}.ds-select--md{border-radius:var(--ds-radius-sm);padding:var(--ds-spacing-sm) var(--ds-spacing-lg);padding-right:calc(var(--ds-spacing-lg) + var(--ds-spacing-lg))}.ds-select--lg{border-radius:var(--ds-radius-md);padding:var(--ds-spacing-md) var(--ds-spacing-xl);padding-right:calc(var(--ds-spacing-xl) + var(--ds-spacing-lg))}`;
+
+const DsSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsChange = createEvent(this, "dsChange");
+    }
+    selectEl;
+    value;
+    name;
+    disabled = false;
+    size = "md";
+    label;
+    /**
+     * Options rendered inside the internal shadow `<select>`. Accepts either:
+     * - a JSON string (SSR-friendly — server-rendered HTML can only set
+     *   string attributes, and Stencil does not JSON-parse array attributes),
+     *   e.g. `options='[{"value":"en","label":"EN"}]'`
+     * - an array property set from client-side JS,
+     *   e.g. `el.options = [{ value: 'en', label: 'EN' }]`
+     *
+     * Malformed JSON fails safe to an empty list rather than throwing, so the
+     * component still renders a visible (if empty) select.
+     */
+    options = "[]";
+    dsChange;
+    watchValue(newValue) {
+        if (this.selectEl && this.selectEl.value !== newValue) {
+            this.selectEl.value = newValue ?? "";
+        }
+    }
+    // Empty-bodied on purpose: `options` is already a @Prop, so Stencil
+    // schedules a re-render on its own whenever it changes — this watcher
+    // exists only to document that `options` is reactive. The actual value
+    // re-sync happens in componentDidUpdate, once the new <option> elements
+    // are actually in the DOM (syncing here, before that render lands, would
+    // assign `this.value` against the *old* option list and get dropped).
+    watchOptions() { }
+    componentDidLoad() {
+        this.syncValue();
+    }
+    componentDidUpdate() {
+        this.syncValue();
+    }
+    syncValue() {
+        if (this.selectEl && this.value !== undefined) {
+            this.selectEl.value = this.value;
+        }
+    }
+    parseOptions() {
+        if (typeof this.options === "string") {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                console.warn("[ds-select] failed to parse options prop:", this.options);
+                return [];
+            }
+        }
+        return this.options;
+    }
+    onChange = (event) => {
+        const value = event.target.value;
+        this.dsChange.emit(value);
+    };
+    render() {
+        const cls = `ds-select ds-select--${this.size}`;
+        return (h(Host, { key: '9c5755ca98a3a3a1340414de0109133ffb6617c4' }, h("select", { key: '7ac471b32e083e754c398ed22baf8ba993997ee5', class: cls, name: this.name, disabled: this.disabled, "aria-label": this.label, ref: (el) => (this.selectEl = el), onChange: this.onChange }, this.parseOptions().map((o) => (h("option", { value: o.value }, o.label))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "options": [{
+                "watchOptions": 0
+            }]
+    }; }
+};
+DsSelect.style = dsSelectCss();
+
+export { DsSelect as ds_select };

package/dist/esm/ds-tabs.entry.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e-glNjK6.js';
+
+const dsTabsCss = () => `ds-tabs{display:block;color:inherit;font-family:var(--ds-font-family);font-size:var(--ds-font-size-md)}.ds-tabs{display:flex;gap:var(--ds-spacing-sm);border-bottom:1px solid color-mix(in oklch, currentColor 15%, transparent)}.ds-tabs--vertical{flex-direction:column;align-items:stretch;border-bottom:none;border-right:1px solid color-mix(in oklch, currentColor 15%, transparent)}.ds-tab{font:inherit;color:inherit;background-color:transparent;border:none;padding:var(--ds-spacing-sm) var(--ds-spacing-lg);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.ds-tabs--vertical .ds-tab{text-align:left;border-bottom:none;border-right:2px solid transparent;margin-bottom:0;margin-right:-1px}.ds-tab--active{border-bottom-color:currentColor}.ds-tabs--vertical .ds-tab--active{border-bottom-color:transparent;border-right-color:currentColor}.ds-tab:disabled{opacity:0.5;cursor:not-allowed}`;
+
+const DsTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsChange = createEvent(this, "dsChange");
+    }
+    tabRefs = new Map();
+    pendingFocusId;
+    items = "[]";
+    active;
+    orientation = "horizontal";
+    label;
+    dsChange;
+    watchItems() {
+        // Re-reconcile the active id when items change: if the current
+        // active is no longer in the list, fall back to the first enabled.
+        const parsed = this.parseItems();
+        if (parsed.length === 0)
+            return;
+        if (!parsed.some((it) => it.id === this.active && !it.disabled)) {
+            const firstEnabled = parsed.find((it) => !it.disabled);
+            if (firstEnabled) {
+                this.active = firstEnabled.id;
+                this.dsChange.emit(firstEnabled.id);
+            }
+        }
+    }
+    componentWillLoad() {
+        const parsed = this.parseItems();
+        if (parsed.length === 0)
+            return;
+        // Reconcile initial active — if the consumer passed an id that
+        // isn't in items (or none at all), fall back to the first enabled
+        // and emit dsChange once so their state matches ours.
+        if (!this.active || !parsed.some((it) => it.id === this.active && !it.disabled)) {
+            const firstEnabled = parsed.find((it) => !it.disabled);
+            if (firstEnabled) {
+                this.active = firstEnabled.id;
+                this.dsChange.emit(firstEnabled.id);
+            }
+        }
+    }
+    componentDidRender() {
+        // Move programmatic focus to the newly selected tab after
+        // arrow/Home/End nav so the visible focus ring tracks selection.
+        // Click-driven selection does not set pendingFocusId — the native
+        // button click already lands focus on the clicked element.
+        if (this.pendingFocusId) {
+            const target = this.tabRefs.get(this.pendingFocusId);
+            target?.focus();
+            this.pendingFocusId = undefined;
+        }
+    }
+    parseItems() {
+        if (typeof this.items === "string") {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                console.warn("[ds-tabs] failed to parse items prop:", this.items);
+                return [];
+            }
+        }
+        return this.items;
+    }
+    enabledItems() {
+        return this.parseItems().filter((it) => !it.disabled);
+    }
+    selectAndFocus(id) {
+        if (id === this.active)
+            return;
+        this.active = id;
+        this.pendingFocusId = id;
+        this.dsChange.emit(id);
+    }
+    onClick = (id) => {
+        if (id === this.active)
+            return;
+        this.active = id;
+        // No pendingFocusId: click already focused the button natively.
+        this.dsChange.emit(id);
+    };
+    onKeyDown = (event, currentId) => {
+        const enabled = this.enabledItems();
+        if (enabled.length === 0)
+            return;
+        const isHorizontal = this.orientation === "horizontal";
+        const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+        const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+        const currentIdx = enabled.findIndex((it) => it.id === currentId);
+        if (event.key === nextKey) {
+            event.preventDefault();
+            const nextIdx = (currentIdx + 1) % enabled.length;
+            this.selectAndFocus(enabled[nextIdx].id);
+        }
+        else if (event.key === prevKey) {
+            event.preventDefault();
+            const prevIdx = (currentIdx - 1 + enabled.length) % enabled.length;
+            this.selectAndFocus(enabled[prevIdx].id);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            this.selectAndFocus(enabled[0].id);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            this.selectAndFocus(enabled[enabled.length - 1].id);
+        }
+        // Enter / Space intentionally not handled — automatic activation
+        // already selected the tab on focus move, and the native button
+        // click behavior remains available for consumers who bind to it.
+    };
+    render() {
+        const items = this.parseItems();
+        return (h(Host, { key: 'efc6a329ddbc14550f7e186480e41218f52b4865' }, h("div", { key: '4d475ddcb89198d97440e1e807acbef5984f658e', class: `ds-tabs ds-tabs--${this.orientation}`, role: "tablist", "aria-label": this.label, "aria-orientation": this.orientation === "vertical" ? "vertical" : undefined }, items.map((item) => {
+            const isActive = item.id === this.active;
+            return (h("button", { key: item.id, type: "button", role: "tab", id: item.id, class: `ds-tab${isActive ? " ds-tab--active" : ""}`, "aria-selected": isActive ? "true" : "false", "aria-controls": item.controls ?? item.id, tabindex: isActive ? 0 : -1, disabled: item.disabled, ref: (el) => {
+                    if (el)
+                        this.tabRefs.set(item.id, el);
+                    else
+                        this.tabRefs.delete(item.id);
+                }, onClick: () => this.onClick(item.id), onKeyDown: (e) => this.onKeyDown(e, item.id) }, item.label));
+        }))));
+    }
+    static get watchers() { return {
+        "items": [{
+                "watchItems": 0
+            }]
+    }; }
+};
+DsTabs.style = dsTabsCss();
+
+export { DsTabs as ds_tabs };

package/dist/esm/ds-textarea.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-e-glNjK6.js';
+
+const dsTextareaCss = () => `:host{display:inline-block;width:100%}.ds-textarea{font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);background-color:transparent;color:inherit;border:1px solid color-mix(in oklch, currentColor 22%, transparent);-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;resize:vertical}.ds-textarea::placeholder{color:color-mix(in oklch, currentColor 45%, transparent)}.ds-textarea:disabled{opacity:0.5;cursor:not-allowed;resize:none}.ds-textarea[aria-invalid="true"]{border-color:color-mix(in oklch, currentColor 55%, transparent)}.ds-textarea--md{border-radius:var(--ds-radius-sm);padding:var(--ds-spacing-sm) var(--ds-spacing-lg)}.ds-textarea--lg{border-radius:var(--ds-radius-md);padding:var(--ds-spacing-md) var(--ds-spacing-xl)}`;
+
+const DsTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsInput = createEvent(this, "dsInput");
+    }
+    textareaEl;
+    value;
+    name;
+    placeholder;
+    disabled = false;
+    required = false;
+    invalid = false;
+    describedBy;
+    label;
+    rows = 3;
+    size = "md";
+    dsInput;
+    watchValue(newValue) {
+        if (this.textareaEl && this.textareaEl.value !== (newValue ?? "")) {
+            this.textareaEl.value = newValue ?? "";
+        }
+    }
+    componentDidLoad() {
+        if (this.textareaEl && this.value !== undefined) {
+            this.textareaEl.value = this.value;
+        }
+    }
+    onInput = (event) => {
+        const value = event.target.value;
+        this.dsInput.emit(value);
+    };
+    render() {
+        const cls = `ds-textarea ds-textarea--${this.size}`;
+        return (h(Host, { key: '89e63314bca9f6f1b70f36c540a3ac48eed7311c' }, h("textarea", { key: '59f9b8ee9a48a4e495da7fb56745102a1f0ee7c2', class: cls, name: this.name, placeholder: this.placeholder, disabled: this.disabled, rows: this.rows, "aria-label": this.label, "aria-required": this.required ? "true" : undefined, "aria-invalid": this.invalid ? "true" : undefined, "aria-describedby": this.describedBy, ref: (el) => (this.textareaEl = el), onInput: this.onInput })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }]
+    }; }
+};
+DsTextarea.style = dsTextareaCss();
+
+export { DsTextarea as ds_textarea };

package/dist/esm/ds-tooltip.entry.js

@@ -0,0 +1,231 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-e-glNjK6.js';
+
+const dsTooltipCss = () => `ds-tooltip{display:inline-block;position:relative;color:inherit}.ds-tooltip{position:absolute;left:50%;transform:translateX(-50%);z-index:1;max-width:240px;padding:var(--ds-spacing-xs) var(--ds-spacing-sm);font-family:var(--ds-font-family);font-size:var(--ds-font-size-md);line-height:1.3;color:inherit;background-color:Canvas;border:1px solid color-mix(in oklch, currentColor 25%, transparent);border-radius:var(--ds-radius-sm);pointer-events:none;white-space:normal}.ds-tooltip--bottom{top:calc(100% + var(--ds-spacing-xs))}.ds-tooltip--top{bottom:calc(100% + var(--ds-spacing-xs))}`;
+
+/**
+ * ## Accessibility
+ *
+ * **Category:** state-machine (Tier 2)
+ * **APG pattern:** https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ *
+ * Scratch build (there is no native tooltip element). Per the a11y
+ * spec §D ceremony: APG citation above, full keyboard enumeration
+ * and ARIA below, focus lifecycle in the tsx and spec.json, manual
+ * VoiceOver evidence pending (see commit message TODO).
+ *
+ * **Scope choice — wraps the consumer's first Element child as the
+ * trigger.** `<ds-tooltip label="Delete"><ds-button>×</ds-button>`
+ * — the first Element inside the ds-tooltip host is treated as the
+ * trigger. shadow:false so we can imperatively set `aria-describedby`
+ * on that light-DOM child (shadow-scoped ids can't be referenced
+ * from a light-DOM `aria-describedby`).
+ *
+ * **Consumer contract:** the first Element child MUST be focusable
+ * (`<button>`, `<a href>`, native form control, or an element with
+ * `tabindex="0"`) — otherwise keyboard users cannot summon the
+ * tooltip and the pattern fails WCAG 1.4.13. The component does not
+ * force focusability onto arbitrary children; that would produce
+ * silent AT surprises. The tooltip's `label` prop is required — a
+ * tooltip with no accessible text is inert.
+ *
+ * **Keyboard interactions (full APG enumeration):**
+ * - Focus (Tab into trigger): tooltip opens immediately (no
+ *   `openDelay`). Delay-on-open is a mouse-hover ergonomic, not a
+ *   keyboard one — waiting for keyboard users to see supplementary
+ *   info is friction, not smoothing.
+ * - Escape (anywhere inside the tooltip's host, tooltip open):
+ *   dismisses the tooltip WITHOUT moving focus. The trigger remains
+ *   focused so the user can Tab away or re-summon. This is the WCAG
+ *   1.4.13 "dismissable" requirement.
+ * - Blur (Tab out of the trigger): tooltip closes immediately.
+ * - Enter / Space / arrow / printable: forwarded to the trigger
+ *   (the tooltip does not intercept them). If Enter activates the
+ *   underlying `<button>`, the button click closes the tooltip via
+ *   the natural blur-then-refocus cycle.
+ *
+ * **Pointer interactions:**
+ * - mouseenter on the host → start `openDelay` timer → show.
+ * - mouseleave on the host → start `closeDelay` timer → hide.
+ * - Re-entering during the closeDelay window cancels the hide (the
+ *   tooltip is "hoverable" — WCAG 1.4.13 — so users can move the
+ *   pointer INTO the tooltip surface without it disappearing).
+ *
+ * **Persistence** (WCAG 1.4.13): the tooltip stays visible while
+ * the trigger is focused or hovered, and while the pointer is over
+ * the tooltip content itself. Dismissal only happens via Escape,
+ * blur, or genuine mouseleave (no residual hover on host or
+ * tooltip content).
+ *
+ * **ARIA attributes and value triggers:**
+ * - Tooltip element: `role="tooltip"`, `id` (auto-generated per
+ *   instance so multiple tooltips on a page do not collide).
+ * - Trigger (the first Element child): `aria-describedby={tooltipId}`
+ *   set on componentDidLoad and refreshed on slot mutations. We use
+ *   describedby (APG default), NOT labelledby — the trigger has its
+ *   own accessible name (its text or aria-label), and the tooltip
+ *   supplements it.
+ *
+ * **Focus lifecycle:**
+ * - On mount: no auto-focus.
+ * - On trigger focus: tooltip opens immediately.
+ * - On trigger blur: tooltip closes.
+ * - On Escape while open: tooltip closes, focus stays on trigger.
+ * - The tooltip surface itself is NOT focusable — it is
+ *   supplementary content, not an interactive region.
+ *
+ * **Motion:**
+ * - Animations: none applied by the component. Consumers who want a
+ *   fade can style `[data-open="true"]` transitions gated on
+ *   `prefers-reduced-motion: no-preference`.
+ *
+ * **Contrast:**
+ * - Tooltip surface: solid background via `Canvas` system color
+ *   with `currentColor` text so it inherits the consumer theme's
+ *   text color. Border uses `color-mix(currentColor 25%,
+ *   transparent)`. Consumer theme owns the 4.5:1 text contrast and
+ *   3:1 non-text.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state (closed): tooltip content is `hidden`, not in
+ *   the a11y tree.
+ * - On focus: because the trigger has `aria-describedby`, AT reads
+ *   the trigger's accessible name plus the tooltip text as a
+ *   description. AT usually announces "…, [description]" after the
+ *   trigger's role.
+ * - On Escape: the tooltip vanishes silently; AT falls back to
+ *   announcing the trigger without its description on next
+ *   interaction. This is APG behavior for dismissed tooltips.
+ *
+ * **Pending manual verification (see commit message TODO):**
+ * - VoiceOver on macOS: confirm the tooltip text is announced as a
+ *   description of the trigger when the trigger gains focus.
+ * - VoiceOver: confirm Escape dismisses the tooltip and leaves the
+ *   trigger focused; confirm re-focusing brings it back.
+ * - Chromium reduced-motion: confirm no residual animation is added
+ *   by the component.
+ */
+let tooltipIdCounter = 0;
+const DsTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostEl() { return getElement(this); }
+    label;
+    openDelay = 250;
+    closeDelay = 100;
+    placement = "bottom";
+    tooltipId = `ds-tooltip-${++tooltipIdCounter}`;
+    tooltipEl;
+    openTimer;
+    closeTimer;
+    isOpen = false;
+    watchLabel() {
+        if (this.tooltipEl) {
+            this.tooltipEl.textContent = this.label;
+        }
+    }
+    componentDidLoad() {
+        this.wireTrigger();
+        this.hostEl.addEventListener("mouseenter", this.onMouseEnter);
+        this.hostEl.addEventListener("mouseleave", this.onMouseLeave);
+        this.hostEl.addEventListener("focusin", this.onFocusIn);
+        this.hostEl.addEventListener("focusout", this.onFocusOut);
+        this.hostEl.addEventListener("keydown", this.onKeyDown);
+    }
+    disconnectedCallback() {
+        this.clearTimers();
+        this.hostEl.removeEventListener("mouseenter", this.onMouseEnter);
+        this.hostEl.removeEventListener("mouseleave", this.onMouseLeave);
+        this.hostEl.removeEventListener("focusin", this.onFocusIn);
+        this.hostEl.removeEventListener("focusout", this.onFocusOut);
+        this.hostEl.removeEventListener("keydown", this.onKeyDown);
+    }
+    wireTrigger() {
+        // First Element child within the host, ignoring our own tooltip
+        // <span> which we render at the end.
+        const children = Array.from(this.hostEl.children).filter((el) => el !== this.tooltipEl);
+        const trigger = children[0];
+        if (!trigger)
+            return;
+        trigger.setAttribute("aria-describedby", this.tooltipId);
+    }
+    clearTimers() {
+        if (this.openTimer !== undefined) {
+            window.clearTimeout(this.openTimer);
+            this.openTimer = undefined;
+        }
+        if (this.closeTimer !== undefined) {
+            window.clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+    }
+    show(delay = 0) {
+        if (this.closeTimer !== undefined) {
+            window.clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+        if (this.isOpen)
+            return;
+        if (delay === 0) {
+            this.applyOpen(true);
+            return;
+        }
+        if (this.openTimer !== undefined)
+            return;
+        this.openTimer = window.setTimeout(() => {
+            this.openTimer = undefined;
+            this.applyOpen(true);
+        }, delay);
+    }
+    hide(delay = 0) {
+        if (this.openTimer !== undefined) {
+            window.clearTimeout(this.openTimer);
+            this.openTimer = undefined;
+        }
+        if (!this.isOpen)
+            return;
+        if (delay === 0) {
+            this.applyOpen(false);
+            return;
+        }
+        if (this.closeTimer !== undefined)
+            return;
+        this.closeTimer = window.setTimeout(() => {
+            this.closeTimer = undefined;
+            this.applyOpen(false);
+        }, delay);
+    }
+    applyOpen(open) {
+        this.isOpen = open;
+        if (!this.tooltipEl)
+            return;
+        if (open) {
+            this.tooltipEl.removeAttribute("hidden");
+            this.tooltipEl.dataset.open = "true";
+        }
+        else {
+            this.tooltipEl.setAttribute("hidden", "");
+            this.tooltipEl.dataset.open = "false";
+        }
+    }
+    onMouseEnter = () => this.show(this.openDelay);
+    onMouseLeave = () => this.hide(this.closeDelay);
+    onFocusIn = () => this.show(0);
+    onFocusOut = () => this.hide(0);
+    onKeyDown = (event) => {
+        if (event.key === "Escape" && this.isOpen) {
+            this.hide(0);
+        }
+    };
+    render() {
+        return (h(Host, { key: 'e3822251c9edab36fdffa9178473823f3e9ae525' }, h("slot", { key: 'f7c490f42ae09a739d8d91d32c2394dbdef03aa5' }), h("span", { key: '8bda1876026129859665f82b1983065df602d092', class: `ds-tooltip ds-tooltip--${this.placement}`, role: "tooltip", id: this.tooltipId, hidden: true, "data-open": "false", ref: (el) => (this.tooltipEl = el) }, this.label)));
+    }
+    static get watchers() { return {
+        "label": [{
+                "watchLabel": 0
+            }]
+    }; }
+};
+DsTooltip.style = dsTooltipCss();
+
+export { DsTooltip as ds_tooltip };