@chiralkit/design-system 0.1.0-alpha.0

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

@@ -0,0 +1,339 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** form-field
+ * **APG pattern:** N/A — native element. This wraps a native
+ * `<input type="checkbox">`; the browser already implements the
+ * checkbox role and its state semantics. Reference:
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ *
+ * Note: `ds-checkbox` intentionally does NOT reach for the WAI-ARIA
+ * APG "tri-state checkbox" pattern (indeterminate + on + off) as a
+ * scratch-built ARIA widget. The native input already exposes the
+ * `indeterminate` DOM property and browsers report it to AT
+ * correctly; the `indeterminate` prop here forwards to that DOM
+ * property so the native mechanism carries the semantics.
+ *
+ * **Keyboard interactions:**
+ * - Tab: moves focus to the native `<input type="checkbox">`.
+ * - Space: toggles the checked state (native behavior).
+ * - Enter: no native effect on a checkbox (unlike button). Form
+ *   submission triggered by Enter comes from the enclosing form's
+ *   default submit button, not from the checkbox itself.
+ *
+ * **ARIA:**
+ * - Roles used: none explicit — the native checkbox supplies the
+ *   implicit `checkbox` role.
+ * - State attributes: `checked` (DOM property, kept in sync via
+ *   componentDidRender because Stencil does not JSX-forward the
+ *   attribute cleanly for controlled use), `disabled` (native
+ *   attribute, not `aria-disabled`), `aria-invalid` (from the
+ *   `invalid` prop), `aria-required` (from the `required` prop),
+ *   `aria-describedby` (from the `describedBy` prop).
+ * - Labeling strategy: `aria-label` set from the `label` prop onto
+ *   the internal checkbox. This is the **canonical, recommended**
+ *   mode. Wrapping the host in a light-DOM `<label>` also produces
+ *   an accessible name in Chromium via flattened-tree resolution —
+ *   same secondary mode documented on `ds-input`.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On toggle: focus remains on the native checkbox.
+ * - Focus indicator: browser default `:focus-visible` ring, kept on
+ *   purpose until the DS ships a themed focus utility using
+ *   `--ds-color-focus`. Not overridden by `ds-checkbox.css`.
+ *
+ * **Motion:**
+ * - Animations: none.
+ * - Reduced-motion behavior: N/A.
+ *
+ * **Contrast:**
+ * - Text: N/A — the checkbox itself renders no text (labels are
+ *   supplied by the consumer via `label` prop or wrapping <label>).
+ * - Non-text (the box and its check glyph): browser default rendering
+ *   is kept on purpose (no `appearance: none` override); this
+ *   preserves the OS/browser accessibility rendering that AT and
+ *   forced-color modes rely on. A themed override is a future
+ *   decision once the DS commits to a checkbox visual language that
+ *   still passes 3:1 non-text contrast in every theme.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: announces the `label` prop text as the
+ *   accessible name, followed by "checkbox", followed by "checked"
+ *   / "not checked" / "mixed" per the current DOM state.
+ * - State change: on toggle, AT announces the new state (native
+ *   behavior); no `aria-live` added.
+ *
+ * **Consumer contract:**
+ * - `checked` is the source of truth for controlled use. Reading
+ *   `event.detail` from `dsChange` gives the new state; the internal
+ *   input is kept in sync via a Watch + a re-sync in componentDidRender.
+ * - `indeterminate` is a visual/AT state, not a value — it is NOT
+ *   submitted with a form and clears on the next user toggle.
+ */
+export class DsCheckbox {
+    inputEl;
+    checked = false;
+    indeterminate = false;
+    name;
+    value;
+    disabled = false;
+    required = false;
+    invalid = false;
+    describedBy;
+    label;
+    dsChange;
+    watchChecked(newValue) {
+        if (this.inputEl && this.inputEl.checked !== newValue) {
+            this.inputEl.checked = newValue;
+        }
+    }
+    watchIndeterminate(newValue) {
+        if (this.inputEl && this.inputEl.indeterminate !== newValue) {
+            this.inputEl.indeterminate = newValue;
+        }
+    }
+    componentDidLoad() {
+        this.syncNativeState();
+    }
+    componentDidUpdate() {
+        this.syncNativeState();
+    }
+    syncNativeState() {
+        if (!this.inputEl)
+            return;
+        if (this.inputEl.checked !== this.checked) {
+            this.inputEl.checked = this.checked;
+        }
+        if (this.inputEl.indeterminate !== this.indeterminate) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    onChange = (event) => {
+        const target = event.target;
+        this.dsChange.emit(target.checked);
+    };
+    render() {
+        return (h(Host, { key: 'a935a67c0f4fa5d6cb36c2338d761318344573ef' }, h("input", { key: '4664d7a5a2fbce7987bbaf25b50355ddfc1be97f', class: "ds-checkbox", type: "checkbox", name: this.name, value: this.value, 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), onChange: this.onChange })));
+    }
+    static get is() { return "ds-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "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"
+            },
+            "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"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "describedBy": {
+                "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": "described-by"
+            },
+            "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": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "watchChecked"
+            }, {
+                "propName": "indeterminate",
+                "methodName": "watchIndeterminate"
+            }];
+    }
+}

package/dist/collection/components/ds-code-block/ds-code-block.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+}
+
+.ds-code-block {
+  border: 1px solid var(--ds-code-block-border, currentColor);
+  border-color: color-mix(in oklch, currentColor 15%, transparent);
+  background: var(--ds-code-block-bg, color-mix(in oklch, currentColor 4%, transparent));
+  border-radius: 10px;
+  overflow: hidden;
+  font-family: var(--ds-font-family);
+  font-size: 13px;
+}
+
+.ds-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent);
+  color: color-mix(in oklch, currentColor 55%, transparent);
+}
+
+.ds-code-block__lang {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ds-code-block__copy {
+  background: transparent;
+  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);
+  color: color-mix(in oklch, currentColor 70%, transparent);
+  padding: 4px 8px;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: color 120ms ease, border-color 120ms ease;
+}
+
+.ds-code-block__copy:hover {
+  color: currentColor;
+  border-color: color-mix(in oklch, currentColor 30%, transparent);
+}
+
+.ds-code-block__copy:focus-visible {
+  outline: 2px solid var(--ds-color-focus);
+  outline-offset: 2px;
+}
+
+pre {
+  margin: 0;
+  padding: 16px;
+  overflow-x: auto;
+}
+
+code {
+  font-family: inherit;
+  color: currentColor;
+  white-space: pre;
+}

package/dist/collection/components/ds-code-block/ds-code-block.js

@@ -0,0 +1,162 @@
+import { h, Host } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** interactive-display
+ * **APG pattern:** Button — https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ * (for the internal copy control; the code readout itself is static text).
+ *
+ * **Keyboard interactions:**
+ * - Tab: moves focus into the internal copy `<button>`; the code readout
+ *   (`<pre><code>`) is not focusable itself, but its container is
+ *   horizontally scrollable and remains reachable via the browser's caret
+ *   browsing / find-in-page path.
+ * - Enter: activates the copy button (writes `code` to the clipboard).
+ * - Space: activates the copy button (native `<button>` behavior).
+ * - Escape: N/A — the "Copied" state auto-clears after 1.4s; no dismissible
+ *   modal state.
+ * - Arrow keys: N/A.
+ * - Printable characters: N/A.
+ *
+ * **ARIA:**
+ * - Roles used: none explicit — the native `<button>` supplies the implicit
+ *   `button` role; `<pre>` and `<code>` supply their semantic roles.
+ * - State attributes: none. The `copied` flag lives only in the button's
+ *   accessible name (see below); it is intentionally not surfaced via
+ *   `aria-pressed` because it is not a toggle — it is a transient
+ *   post-action confirmation.
+ * - Labeling strategy: `aria-label` on the copy button — "Copy code" in the
+ *   resting state, "Copied" while the confirmation is visible. This is
+ *   authoritative because the button carries both an icon and the words
+ *   "Copy" / "Copied", and mixed icon+text needs an explicit accessible
+ *   name to avoid AT reading the SVG as a separate node.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On activate: focus stays on the copy button (clipboard write is
+ *   synchronous from the user's perspective; no focus is moved).
+ * - On close/deactivate: N/A — no popup or overlay to close.
+ * - Focus indicator: 2px `outline` in `var(--ds-color-focus)` with 2px
+ *   `outline-offset`, applied to `.ds-code-block__copy:focus-visible`. The
+ *   readout itself is not focusable and has no focus indicator by design.
+ *
+ * **Motion:**
+ * - Animations: 120ms `color` / `border-color` ease transition on the copy
+ *   button (hover/focus).
+ * - Reduced-motion behavior: N/A — 120ms is below the spec's 200ms
+ *   threshold, and the transition animates color only.
+ *
+ * **Contrast:**
+ * - Text (code readout): inherits `color: currentColor`; contrast depends
+ *   on the host page's text color vs. the block's tinted background
+ *   (`color-mix(currentColor 4%, transparent)`). Verify per site.
+ * - Text (copy button): `color-mix(in oklch, currentColor 70%, transparent)`
+ *   at rest, `currentColor` on hover. The 70%-mixed resting color can drop
+ *   below 4.5:1 on low-contrast surfaces — audit per usage site, and lean
+ *   on the hover/focus states (both restore full `currentColor`) as the
+ *   accessible fallback.
+ * - Non-text (button border, language tag border-bottom): both use
+ *   `color-mix(currentColor <15|12>%, transparent)` — decorative separators,
+ *   they do not convey state, so the 3:1 non-text contrast rule does not
+ *   apply. Focus and hover borders shift up to 30% for clearer edges.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: announces "Copy code, button" (the `aria-label`), then
+ *   the code content when the user navigates into the `<pre><code>` block
+ *   (usually announced as a code block on VoiceOver).
+ * - State change: after clicking Copy, the button's `aria-label` flips to
+ *   "Copied"; AT will announce this on the next focus or re-read of the
+ *   button, but NOT proactively — there is no `aria-live` region. This is
+ *   deliberate per spec §"What we explicitly do NOT do" (avoid live-region
+ *   overuse), and the trade-off is that a screen-reader-only user does not
+ *   get an unsolicited confirmation. If a future review decides that
+ *   confirmation must be audible, add a visually-hidden
+ *   `aria-live="polite"` element whose text toggles on `copied`.
+ */
+export class DsCodeBlock {
+    code;
+    language = "bash";
+    copied = false;
+    timer;
+    disconnectedCallback() {
+        if (this.timer !== undefined)
+            window.clearTimeout(this.timer);
+    }
+    async onCopy() {
+        try {
+            await navigator.clipboard.writeText(this.code);
+            this.copied = true;
+            if (this.timer !== undefined)
+                window.clearTimeout(this.timer);
+            this.timer = window.setTimeout(() => {
+                this.copied = false;
+            }, 1400);
+        }
+        catch {
+            // Clipboard permissions may be denied; leave state unchanged.
+        }
+    }
+    render() {
+        return (h(Host, { key: '27b2c85bb8cf97c4b176c175f818bd077cfaa3f3' }, h("div", { key: '0f08c5d94ce947207d02692bfd733e9d90ca8b59', class: "ds-code-block" }, h("div", { key: '66dcbf8c59d1ecb4c373b5c1daad583f7e7a05ad', class: "ds-code-block__header" }, h("span", { key: 'fddc6fc3943ffcfafc68bf56d84859cfd016dea9', class: "ds-code-block__lang" }, this.language), h("button", { key: '277ef9eee0a8d9aa3ac54a75b11074315f26fa5e', type: "button", class: "ds-code-block__copy", onClick: () => this.onCopy(), "aria-label": this.copied ? "Copied" : "Copy code" }, this.copied ? (h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))) : (h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), h("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))), h("span", { key: '81e87579225b696300fd2f2b8035553a55d3c7f0' }, this.copied ? "Copied" : "Copy"))), h("pre", { key: '06dc49a58e9fd80b0d334a349ef1ad9f540d37d7' }, h("code", { key: 'ba689fa980819ee4c12e9d5382d80d21919c8100' }, this.code)))));
+    }
+    static get is() { return "ds-code-block"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-code-block.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-code-block.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "\"bash\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copied": {}
+        };
+    }
+}

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

@@ -0,0 +1,30 @@
+: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;
+  /*
+   * Default the dialog to a comfortable maximum width without pinning
+   * it, so short content sits centered and long content wraps. Consumers
+   * override via ::part or their own selectors as needed.
+   */
+  max-width: min(90vw, 32rem);
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.ds-dialog::backdrop {
+  /*
+   * Neutral dim. Deliberately not using currentColor here — currentColor
+   * inside ::backdrop resolves against the pseudo-element itself, not
+   * the dialog, and would collapse to black. The rgba() literal keeps
+   * the dim readable in both light and dark themes.
+   */
+  background-color: rgba(0, 0, 0, 0.5);
+}