@chiralkit/design-system 0.1.0-alpha.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var dsButton_entry = require('./ds-button.entry.cjs.js');
+var dsSelect_entry = require('./ds-select.entry.cjs.js');
+require('./index-mMvyq7U_.js');
+
+
+
+exports.DsButton = dsButton_entry.ds_button;
+exports.DsSelect = dsSelect_entry.ds_select;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var index = require('./index-mMvyq7U_.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["ds-badge.cjs",[[769,"ds-badge",{"variant":[1]}]]],["ds-button.cjs",[[769,"ds-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"href":[1]}]]],["ds-card.cjs",[[257,"ds-card"]]],["ds-checkbox.cjs",[[513,"ds-checkbox",{"checked":[4],"indeterminate":[4],"name":[1],"value":[1],"disabled":[4],"required":[4],"invalid":[4],"describedBy":[1,"described-by"],"label":[1]},null,{"checked":[{"watchChecked":0}],"indeterminate":[{"watchIndeterminate":0}]}]]],["ds-code-block.cjs",[[513,"ds-code-block",{"code":[1],"language":[1],"copied":[32]}]]],["ds-dialog.cjs",[[769,"ds-dialog",{"open":[4],"label":[1],"labelledBy":[1,"labelled-by"],"describedBy":[1,"described-by"]},null,{"open":[{"watchOpen":0}]}]]],["ds-input.cjs",[[513,"ds-input",{"value":[1],"name":[1],"type":[1],"placeholder":[1],"disabled":[4],"required":[4],"invalid":[4],"describedBy":[1,"described-by"],"label":[1],"size":[1]},null,{"value":[{"watchValue":0}]}]]],["ds-loader.cjs",[[513,"ds-loader",{"size":[1],"label":[1],"speed":[1]}]]],["ds-select.cjs",[[513,"ds-select",{"value":[1],"name":[1],"disabled":[4],"size":[1],"label":[1],"options":[1]},null,{"value":[{"watchValue":0}],"options":[{"watchOptions":0}]}]]],["ds-tabs.cjs",[[512,"ds-tabs",{"items":[1],"active":[1025],"orientation":[1],"label":[1]},null,{"items":[{"watchItems":0}]}]]],["ds-textarea.cjs",[[513,"ds-textarea",{"value":[1],"name":[1],"placeholder":[1],"disabled":[4],"required":[4],"invalid":[4],"describedBy":[1,"described-by"],"label":[1],"rows":[2],"size":[1]},null,{"value":[{"watchValue":0}]}]]],["ds-tooltip.cjs",[[772,"ds-tooltip",{"label":[1],"openDelay":[2,"open-delay"],"closeDelay":[2,"close-delay"],"placement":[1]},null,{"label":[{"watchLabel":0}]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,24 @@
+{
+  "entries": [
+    "components/ds-button/ds-button.js",
+    "components/ds-select/ds-select.js",
+    "components/ds-badge/ds-badge.js",
+    "components/ds-card/ds-card.js",
+    "components/ds-checkbox/ds-checkbox.js",
+    "components/ds-code-block/ds-code-block.js",
+    "components/ds-dialog/ds-dialog.js",
+    "components/ds-input/ds-input.js",
+    "components/ds-loader/ds-loader.js",
+    "components/ds-tabs/ds-tabs.js",
+    "components/ds-textarea/ds-textarea.js",
+    "components/ds-tooltip/ds-tooltip.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.5",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,36 @@
+:host {
+  display: inline-block;
+}
+
+.ds-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-family: var(--ds-font-family);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  white-space: nowrap;
+  color: currentColor;
+}
+
+.ds-badge--neutral {
+  background-color: oklch(0.65 0.03 260 / 0.15);
+}
+
+.ds-badge--ui-component {
+  background-color: oklch(0.733 0.178 307 / 0.15);
+}
+
+.ds-badge--recipe {
+  background-color: oklch(0.75 0.13 190 / 0.15);
+}
+
+.ds-badge--agent {
+  background-color: oklch(0.82 0.15 80 / 0.15);
+}
+
+.ds-badge--config {
+  background-color: oklch(0.65 0.03 260 / 0.15);
+}

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

@@ -0,0 +1,93 @@
+import { h, Host } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** static-display
+ * **APG pattern:** N/A — non-interactive text label.
+ *
+ * **Keyboard interactions:**
+ * - Tab: N/A — the badge is not focusable and does not appear in tab order.
+ * - Enter: N/A.
+ * - Escape: N/A.
+ * - Arrow keys: N/A.
+ * - Printable characters: N/A.
+ *
+ * **ARIA:**
+ * - Roles used: none — renders a plain `<span>` around a `<slot />`. The
+ *   `variant` prop is a purely visual axis and MUST NOT be the sole carrier
+ *   of information (color/style alone fails WCAG 1.4.1 Use of Color); the
+ *   textual content inside the slot must convey the same meaning.
+ * - State attributes: none.
+ * - Labeling strategy: visible text via `<slot />`. Consumers place the
+ *   readable label directly inside the tag.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On activate/open: N/A — non-interactive.
+ * - On close/deactivate: N/A.
+ * - Focus indicator: N/A — the host is not focusable. If a consumer wraps
+ *   `ds-badge` in an interactive element (e.g. `<button>`, `<a>`), that
+ *   wrapper owns the focus indicator via the DS `--ds-color-focus` token
+ *   and its own `:focus-visible` rule.
+ *
+ * **Motion:**
+ * - Animations: none.
+ * - Reduced-motion behavior: N/A.
+ *
+ * **Contrast:**
+ * - Text: inherits `color: inherit` / `currentColor` from the host page and
+ *   the variant-specific style; not verified in isolation here. Consumers
+ *   are responsible for confirming ≥ 4.5:1 (WCAG 1.4.3) against the surface
+ *   the badge is placed on.
+ * - Non-text: no state-conveying icons or borders that need the 3:1
+ *   non-text contrast threshold.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: announces the slot text as inline content within its
+ *   surrounding context (no role means AT reads it as plain text). The
+ *   `variant` value is not announced — that is intentional; the label text
+ *   is the source of truth for meaning.
+ * - State change: N/A — no dynamic state owned by this component.
+ */
+export class DsBadge {
+    variant = "neutral";
+    render() {
+        return (h(Host, { key: '45ef132e5fd2c8a1623768ea58431b0cd4f581b4' }, h("span", { key: 'a406af30e18ffee0751ad5f10499f9ff394ae086', class: `ds-badge ds-badge--${this.variant}` }, h("slot", { key: '59bf92a176deeddf23a2f96f194ae4ed02ea0506' }))));
+    }
+    static get is() { return "ds-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| \"neutral\"\n    | \"ui-component\"\n    | \"recipe\"\n    | \"agent\"\n    | \"config\"",
+                    "resolved": "\"agent\" | \"config\" | \"neutral\" | \"recipe\" | \"ui-component\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"neutral\""
+            }
+        };
+    }
+}

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

@@ -0,0 +1,66 @@
+:host {
+  display: inline-block;
+}
+
+.ds-button {
+  font-family: var(--ds-font-family);
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-spacing-sm);
+  transition: background-color 0.15s ease-in-out;
+}
+
+.ds-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-button:focus-visible {
+  outline: 2px solid var(--ds-color-focus);
+  outline-offset: 2px;
+}
+
+.ds-button--md {
+  font-size: var(--ds-font-size-md);
+  padding: var(--ds-spacing-sm) var(--ds-spacing-lg);
+  border-radius: var(--ds-radius-sm);
+}
+
+.ds-button--lg {
+  font-size: var(--ds-font-size-md);
+  padding: var(--ds-spacing-md) var(--ds-spacing-xl);
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-button--primary {
+  background-color: var(--ds-color-primary);
+  color: var(--ds-color-text-on-primary);
+}
+
+.ds-button--primary:hover:not(:disabled) {
+  background-color: var(--ds-color-primary-hover);
+}
+
+.ds-button--secondary {
+  background-color: var(--ds-color-secondary);
+  color: var(--ds-color-text-on-secondary);
+}
+
+.ds-button--secondary:hover:not(:disabled) {
+  background-color: var(--ds-color-secondary-hover);
+}
+
+.ds-button--ghost {
+  background-color: transparent;
+  color: inherit;
+  border: 1px solid currentColor;
+  opacity: 0.85;
+}
+
+.ds-button--ghost:hover:not(:disabled) {
+  opacity: 1;
+}

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

@@ -0,0 +1,197 @@
+import { h, Host } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** interactive-display
+ * **APG pattern:** Button — https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ * (satisfied natively by the underlying `<button>` element). When `href` is
+ * set, the component renders `<a href>` instead — a link, not a button — and
+ * that surface follows native `<a>` semantics rather than the Button pattern.
+ *
+ * **Keyboard interactions:**
+ * - Tab: moves focus to the internal `<button>` or `<a>` (shadow DOM does not
+ *   interrupt tab order).
+ * - Enter: activates (fires click on `<button>`, navigates on `<a>`).
+ * - Space: activates the `<button>` variant only (native behavior); on the
+ *   `<a>` variant Space scrolls the page as usual.
+ * - Escape: N/A — no dismissible state owned by this component.
+ * - Arrow keys: N/A.
+ * - Printable characters: N/A.
+ *
+ * **ARIA:**
+ * - Roles used: none explicit — the native `<button>` / `<a href>` supplies
+ *   the implicit `button` / `link` role.
+ * - State attributes: `disabled` (native attribute on `<button>`, not
+ *   `aria-disabled`). The `<a>` variant does not accept `disabled` — a
+ *   disabled navigation is a spec smell (see spec §"Button vs Link"); if a
+ *   link needs a disabled state, model it as a `<button>` action instead.
+ * - Labeling strategy: visible text via `<slot />`. Consumers MUST place
+ *   readable text (or a labeled icon) inside the tag. An empty slot leaves
+ *   the button/link without an accessible name and fails
+ *   `button-name` / `link-name` axe rules. Icon-only usage is out of contract
+ *   for `ds-button`; use a future `ds-icon-button` with a required
+ *   `aria-label` prop when that lands.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - On activate: focus stays on the element (native click behavior; the
+ *   component does not move focus on its own).
+ * - On close/deactivate: N/A.
+ * - Focus indicator: 2px `outline` in `var(--ds-color-focus)` with 2px
+ *   `outline-offset`, applied via `:focus-visible` — replaces the browser
+ *   default so both `<button>` and `<a>` variants use the same DS ring
+ *   (spec universal rule 3, WCAG 1.4.11 non-text contrast ≥ 3:1).
+ *
+ * **Motion:**
+ * - Animations: 150ms `background-color` ease-in-out transition on
+ *   `primary`/`secondary` variants (hover).
+ * - Reduced-motion behavior: N/A — 150ms is below the spec's 200ms threshold
+ *   for `prefers-reduced-motion` handling, and the transition animates color
+ *   only (no motion of position, scale, or opacity).
+ *
+ * **Contrast:**
+ * - Text: `primary` and `secondary` variants pair `--ds-color-{primary,secondary}`
+ *   with `--ds-color-text-on-{primary,secondary}` — the token pairs are
+ *   authored to meet WCAG 2.1 AA (≥ 4.5:1). The `ghost` variant inherits
+ *   `color: inherit` and pins `opacity: 0.85`, so its effective contrast
+ *   depends on the consumer's surface — verify per site.
+ * - Non-text (border on `ghost`): 1px `currentColor`; contrast tracks the
+ *   text color 1:1, subject to the same host-page caveat.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: announces the slot text followed by "button" (or "link"
+ *   for the `href` variant), plus "dimmed" / "unavailable" when `disabled`
+ *   is set (browser/AT dependent wording).
+ * - State change: N/A — this component does not own toggle state. A pressed
+ *   toggle needs `aria-pressed`, which is out of scope here; model that as
+ *   a distinct component or extend the API deliberately per the spec.
+ */
+export class DsButton {
+    variant = "primary";
+    size = "md";
+    disabled = false;
+    type = "button";
+    href;
+    render() {
+        const cls = `ds-button ds-button--${this.variant} ds-button--${this.size}`;
+        if (this.href !== undefined) {
+            return (h(Host, null, h("a", { class: cls, href: this.href }, h("slot", null))));
+        }
+        return (h(Host, null, h("button", { class: cls, type: this.type, disabled: this.disabled }, h("slot", null))));
+    }
+    static get is() { return "ds-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | \"ghost\"",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"primary\""
+            },
+            "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\""
+            },
+            "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"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"button\" | \"submit\" | \"reset\"",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"button\""
+            },
+            "href": {
+                "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": "href"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+.ds-card {
+  color: inherit;
+  background-color: color-mix(in oklch, currentColor 4%, transparent);
+  border: 1px solid color-mix(in oklch, currentColor 15%, transparent);
+  border-radius: var(--ds-radius-md);
+  padding: var(--ds-spacing-lg);
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,68 @@
+import { h, Host } from "@stencil/core";
+/**
+ * ## Accessibility
+ *
+ * **Category:** static-display
+ * **APG pattern:** N/A — a container surface with no interactive
+ * behavior of its own. If a consumer nests interactive elements
+ * inside (button, link, form field), those elements satisfy their
+ * own a11y bucket independently.
+ *
+ * **Keyboard interactions:**
+ * - Tab / Shift+Tab: N/A — the card itself is not focusable. Any
+ *   interactive descendant carries its own tab semantics.
+ * - Enter / Space / Arrow / Escape / Printable: N/A.
+ *
+ * **ARIA:**
+ * - Roles used: none. `<ds-card>` is a purely visual grouping and
+ *   deliberately does not carry `role="region"` — that would demand
+ *   a labelledby target, which would only be correct in a subset of
+ *   uses. Consumers that need a labeled landmark should render a
+ *   `<section aria-labelledby>` around the card.
+ * - State attributes: none.
+ * - Labeling strategy: none applied by the component; consumer's
+ *   heading structure inside the slot supplies the accessible name
+ *   when needed.
+ *
+ * **Focus:**
+ * - On mount: nothing auto-focuses.
+ * - Focus indicator: N/A — the card itself is not focusable.
+ *
+ * **Motion:**
+ * - Animations: none.
+ * - Reduced-motion behavior: N/A.
+ *
+ * **Contrast:**
+ * - Text: inherits `color: inherit` / `currentColor`; the card does
+ *   not impose a text color, so contrast is the consumer theme's
+ *   responsibility.
+ * - Non-text (border, subtle background tint): both derived from
+ *   `color-mix(in oklch, currentColor N%, transparent)`, matching
+ *   the pattern used by `ds-input` and `ds-select`. WCAG 1.4.11
+ *   (3:1 non-text contrast) is met in themes where the surface has
+ *   enough delta against the page background; the component does
+ *   not override the consumer's palette to force it.
+ *
+ * **Screen reader announcement:**
+ * - Rendered state: no announcement of the card itself. AT
+ *   navigates to the slotted content directly, using whatever
+ *   heading and landmark structure the consumer places inside.
+ * - State change: N/A.
+ */
+export class DsCard {
+    render() {
+        return (h(Host, { key: '288726502b909d34c3498bbac671ae892b0f6e17' }, h("div", { key: '2d9efecfdc78292d47d1c322e7d5f30820467ac4', class: "ds-card" }, h("slot", { key: '76ee24c626aaef9528200fc4665a50c491f9f7a0' }))));
+    }
+    static get is() { return "ds-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-card.css"]
+        };
+    }
+}

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

@@ -0,0 +1,22 @@
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+/*
+ * No `appearance: none` override on purpose. Keeping the native
+ * checkbox rendering preserves the OS/browser accessibility rendering
+ * that assistive tech and forced-color modes rely on. A themed
+ * checkbox visual (custom glyph, custom fill) is a future decision
+ * once the DS commits to a design that still passes 3:1 non-text
+ * contrast in every theme and forced-color mode.
+ */
+.ds-checkbox {
+  cursor: pointer;
+  margin: 0;
+}
+
+.ds-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}