@chiralkit/design-system 0.1.0-alpha.0

package/dist/collection/components/ds-select/ds-select.js

@@ -0,0 +1,235 @@
+import { h, Host, } from "@stencil/core";
+export class DsSelect {
+    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 is() { return "ds-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"md\" | \"lg\"",
+                    "resolved": "\"lg\" | \"md\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"md\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ReadonlyArray<DsSelectOption>",
+                    "resolved": "readonly DsSelectOption[] | string",
+                    "references": {
+                        "ReadonlyArray": {
+                            "location": "global",
+                            "id": "global::ReadonlyArray"
+                        },
+                        "DsSelectOption": {
+                            "location": "local",
+                            "path": "/Users/alex/projects/MyGitHub/chiralkit/packages/design-system/src/components/ds-select/ds-select.tsx",
+                            "id": "src/components/ds-select/ds-select.tsx::DsSelectOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options rendered inside the internal shadow `<select>`. Accepts either:\n- a JSON string (SSR-friendly \u2014 server-rendered HTML can only set\n  string attributes, and Stencil does not JSON-parse array attributes),\n  e.g. `options='[{\"value\":\"en\",\"label\":\"EN\"}]'`\n- an array property set from client-side JS,\n  e.g. `el.options = [{ value: 'en', label: 'EN' }]`\n\nMalformed JSON fails safe to an empty list rather than throwing, so the\ncomponent still renders a visible (if empty) select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "\"[]\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "options",
+                "methodName": "watchOptions"
+            }];
+    }
+}

package/dist/collection/components/ds-tabs/ds-tabs.css

@@ -0,0 +1,59 @@
+/*
+ * ds-tabs uses shadow: false so the tab <button> ids are addressable
+ * from consumers' light-DOM tabpanels via aria-labelledby. Selectors
+ * here match on the class hooks emitted by the component so consumer
+ * CSS can override without specificity wars.
+ */
+
+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;
+}

package/dist/collection/components/ds-tabs/ds-tabs.js

@@ -0,0 +1,248 @@
+import { h, Host, } from "@stencil/core";
+export class DsTabs {
+    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 is() { return "ds-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ReadonlyArray<DsTabItem>",
+                    "resolved": "readonly DsTabItem[] | string",
+                    "references": {
+                        "ReadonlyArray": {
+                            "location": "global",
+                            "id": "global::ReadonlyArray"
+                        },
+                        "DsTabItem": {
+                            "location": "local",
+                            "path": "/Users/alex/projects/MyGitHub/chiralkit/packages/design-system/src/components/ds-tabs/ds-tabs.tsx",
+                            "id": "src/components/ds-tabs/ds-tabs.tsx::DsTabItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "\"[]\""
+            },
+            "active": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"horizontal\" | \"vertical\"",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "\"horizontal\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "watchItems"
+            }];
+    }
+}

package/dist/collection/components/ds-textarea/ds-textarea.css

@@ -0,0 +1,41 @@
+: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);
+}