@pithyjs/ui-kit 0.1.0-beta.0

package/dist/atoms/actions/icon-group/IconGroup.js

@@ -0,0 +1,191 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.icon-group",
+  "title": "<IconGroup> Action Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { effect } from '@pithyjs/signals';
+import { ICON_SIZE_LEVELS, } from '@pithyjs/design-system/iconography';
+import { resolveIconSvg } from '../../content/icon/resolveIconSvg';
+import { ICON_SIZE_CLASS } from '../../../shared/icon';
+import { hasReactive, readReactive, } from '../../../shared/clickable';
+import { applyRovingTabindex, bindSegmentedKeyboard, } from '../../../shared/segmented';
+import { CONTROL_SIZES } from '../../../shared/types';
+/**
+ * Single-select icon-only segmented control. Renders a `role="radiogroup"`
+ * pill with one `role="radio"` button per item. The selected option gets a
+ * circular indicator behind its icon.
+ *
+ * @example
+ * ```html
+ * <IconGroup
+ *   items="viewportItems"
+ *   value="viewport"
+ *   onChange="setViewport"
+ *   ariaLabel="'Viewport size'"
+ * />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.icon-group","name":"IconGroup","stability":"stable","signature":"<T extends string>(props: IconGroupProps<T>) => { el: HTMLDivElement; destroy: () => void }"} */
+export function IconGroup(props) {
+    const { items, value, onChange, ariaLabel: rawAriaLabel, size: rawSize = 'md', iconSize: rawIconSize = 'sm', disabled = false, } = props;
+    const isDisabled = () => readReactive(disabled) === true;
+    const ariaLabel = rawAriaLabel?.trim();
+    const validSize = CONTROL_SIZES.includes(rawSize);
+    const validIconSize = ICON_SIZE_LEVELS.includes(rawIconSize);
+    if (import.meta.env?.DEV && !validSize) {
+        const valid = CONTROL_SIZES.join(', ');
+        console.warn(`[<IconGroup>] Invalid size: "${rawSize}". Expected one of: ${valid}. Falling back to "md".`);
+    }
+    if (import.meta.env?.DEV && !validIconSize) {
+        const valid = ICON_SIZE_LEVELS.join(', ');
+        console.warn(`[<IconGroup>] Invalid iconSize: "${rawIconSize}". Expected one of: ${valid}. Falling back to "sm".`);
+    }
+    const size = validSize ? rawSize : 'md';
+    const iconSize = validIconSize ? rawIconSize : 'sm';
+    if (import.meta.env?.DEV) {
+        if (!ariaLabel) {
+            console.warn('[<IconGroup>] `ariaLabel` is required and must be a non-empty string.');
+        }
+        if (!items || items.length < 2) {
+            console.warn('[<IconGroup>] expects at least two items.');
+        }
+        for (const item of items ?? []) {
+            if (!item.ariaLabel?.trim()) {
+                console.warn(`[<IconGroup>] item "${item.value}" is missing ariaLabel — icon-only buttons require a per-option label.`);
+            }
+        }
+        if (!hasReactive(value)) {
+            console.warn('[<IconGroup>] `value` is a static string. Pass a signal accessor `() => value` for interactive use — the UI will not update after user interaction otherwise.');
+        }
+    }
+    const root = document.createElement('div');
+    root.classList.add('ui-icon-group');
+    root.setAttribute('role', 'radiogroup');
+    root.setAttribute('data-size', size);
+    if (ariaLabel)
+        root.setAttribute('aria-label', ariaLabel);
+    const disposers = [];
+    const buttons = items.map(item => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.classList.add('ui-icon-group-option');
+        btn.setAttribute('role', 'radio');
+        btn.dataset.value = item.value;
+        btn.setAttribute('aria-label', item.ariaLabel);
+        const iconWrap = document.createElement('span');
+        iconWrap.classList.add('ui-icon', ICON_SIZE_CLASS[iconSize]);
+        iconWrap.setAttribute('aria-hidden', 'true');
+        iconWrap.setAttribute('role', 'none');
+        iconWrap.dataset.icon = item.icon;
+        const resolved = resolveIconSvg(item.icon);
+        if (resolved) {
+            iconWrap.appendChild(resolved.svg);
+            if (resolved.missing)
+                iconWrap.dataset.iconMissing = item.icon;
+        }
+        btn.appendChild(iconWrap);
+        root.appendChild(btn);
+        return btn;
+    });
+    const readValue = () => readReactive(value);
+    const apply = () => {
+        const v = readValue();
+        const activeIndex = items.findIndex(it => it.value === v);
+        buttons.forEach((btn, i) => {
+            const isActive = i === activeIndex;
+            btn.setAttribute('aria-checked', String(isActive));
+            btn.dataset.active = String(isActive);
+        });
+        applyRovingTabindex(buttons, activeIndex);
+    };
+    if (hasReactive(value)) {
+        disposers.push(effect(apply));
+    }
+    else {
+        apply();
+    }
+    // Disabled state: reflect on the group + each option; block activation.
+    const applyDisabled = () => {
+        const d = isDisabled();
+        // Presence-style marker (set when disabled, removed otherwise) — matches the
+        // rest of the kit (Tile/Card) so consumers needn't special-case "false". The
+        // `"true"` value keeps the `[data-disabled="true"]` style hook working.
+        if (d)
+            root.dataset.disabled = 'true';
+        else
+            delete root.dataset.disabled;
+        // Likewise set aria-disabled only when blocked (standard ARIA — matches Button).
+        if (d)
+            root.setAttribute('aria-disabled', 'true');
+        else
+            root.removeAttribute('aria-disabled');
+        for (const btn of buttons)
+            btn.disabled = d;
+    };
+    if (hasReactive(disabled)) {
+        disposers.push(effect(applyDisabled));
+    }
+    else {
+        applyDisabled();
+    }
+    buttons.forEach((btn, i) => {
+        const handler = () => {
+            if (isDisabled())
+                return;
+            onChange(items[i].value);
+        };
+        btn.addEventListener('click', handler);
+        disposers.push(() => btn.removeEventListener('click', handler));
+    });
+    disposers.push(bindSegmentedKeyboard(buttons, i => {
+        if (isDisabled())
+            return;
+        onChange(items[i].value);
+    }));
+    let fromUserGesture = false;
+    const markGesture = () => {
+        fromUserGesture = true;
+        queueMicrotask(() => {
+            fromUserGesture = false;
+        });
+    };
+    root.addEventListener('pointerdown', markGesture, true);
+    root.addEventListener('keydown', markGesture, true);
+    disposers.push(() => root.removeEventListener('pointerdown', markGesture, true));
+    disposers.push(() => root.removeEventListener('keydown', markGesture, true));
+    const onFocusIn = (e) => {
+        if (fromUserGesture)
+            return;
+        const target = e.target;
+        if (!(target instanceof HTMLElement) ||
+            !buttons.includes(target)) {
+            return;
+        }
+        const activeBtn = buttons[items.findIndex(it => it.value === readValue())];
+        if (activeBtn && target !== activeBtn)
+            activeBtn.focus();
+    };
+    root.addEventListener('focusin', onFocusIn);
+    disposers.push(() => root.removeEventListener('focusin', onFocusIn));
+    return {
+        el: root,
+        destroy: () => {
+            for (const dispose of disposers) {
+                try {
+                    dispose();
+                }
+                catch (err) {
+                    if (import.meta.env?.DEV) {
+                        console.error('[<IconGroup>] disposer threw:', err);
+                    }
+                }
+            }
+            disposers.length = 0;
+            root.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=IconGroup.js.map

package/dist/atoms/actions/icon-group/IconGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconGroup.js","sourceRoot":"","sources":["../../../../src/atoms/actions/icon-group/IconGroup.ts"],"names":[],"mappings":"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"}

package/dist/atoms/actions/icon-group/icon-group.scss

@@ -0,0 +1,36 @@
+/// IconGroup component styles
+/// Single-select icon-only pill with a circular indicator behind the active option.
+///
+/// @group atoms/actions
+
+@use '../../../shared/tokens' as shared;
+@use '../icon-control' as icon-control;
+
+.ui-icon-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-xs);
+  border-radius: var(--radius-pill);
+  border: var(--border-width-hairline) solid var(--color-border);
+  background-color: var(--color-surface);
+}
+
+// Size-based option dimensions — maps data-size to --control-min-height-{size}.
+@each $size in shared.$control-sizes {
+  .ui-icon-group[data-size='#{$size}'] .ui-icon-group-option {
+    inline-size: var(--control-min-height-#{$size});
+    block-size: var(--control-min-height-#{$size});
+  }
+}
+
+.ui-icon-group-option {
+  @include icon-control.icon-control-button;
+}
+
+// Disabled group — dim + non-interactive. The wrapping element (e.g. a
+// <Tooltip>) still receives hover so a hint can explain why it's disabled.
+.ui-icon-group[data-disabled='true'] {
+  opacity: var(--state-disabled-opacity);
+  pointer-events: none;
+}

package/dist/atoms/actions/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,49 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.segmented-control",
+  "title": "<SegmentedControl> Action Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import type { ControlSize } from '@pithyjs/design-system';
+import { type Reactive } from '../../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.segmented-control","name":"SegmentedItem","stability":"stable","signature":"interface SegmentedItem<T extends string>"} */
+export interface SegmentedItem<T extends string = string> {
+    value: T;
+    label: string;
+}
+/** @codexApi {"parent":"pithy.ui-kit.segmented-control","name":"SegmentedControlProps","stability":"stable","signature":"interface SegmentedControlProps<T extends string>"} */
+export interface SegmentedControlProps<T extends string = string> {
+    /** Options to choose from. Order is preserved. */
+    items: ReadonlyArray<SegmentedItem<T>>;
+    /** Currently selected value. Static or `() => T` accessor for reactive state. */
+    value: Reactive<T>;
+    /** Fires when the user selects a different item (click or keyboard). */
+    onChange: (value: T) => void;
+    /** Required accessible label — announced by screen readers as the radiogroup name. */
+    ariaLabel: string;
+    /** Control size (default: "md"). */
+    size?: ControlSize;
+}
+/**
+ * Single-select segmented filter. Renders a `role="radiogroup"` with one
+ * `role="radio"` button per item. Supports arrow-key nav (Left/Right wrap,
+ * Home/End jump) per WAI-ARIA radiogroup semantics.
+ *
+ * @example
+ * ```html
+ * <SegmentedControl
+ *   items="filters"
+ *   value="activeFilter"
+ *   onChange="setFilter"
+ *   ariaLabel="'Component scope'"
+ * />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.segmented-control","name":"SegmentedControl","stability":"stable","signature":"<T extends string>(props: SegmentedControlProps<T>) => { el: HTMLDivElement; destroy: () => void }"} */
+export declare function SegmentedControl<T extends string = string>(props: SegmentedControlProps<T>): {
+    el: HTMLDivElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/atoms/actions/segmented-control/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/atoms/actions/segmented-control/SegmentedControl.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAGF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAQnC,gKAAgK;AAChK,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AAED,gLAAgL;AAChL,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,kDAAkD;IAClD,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,iFAAiF;IACjF,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,sFAAsF;IACtF,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,4NAA4N;AAC5N,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACxD,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC9B;IAAE,EAAE,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,CAiG7C"}

package/dist/atoms/actions/segmented-control/SegmentedControl.js

@@ -0,0 +1,107 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.segmented-control",
+  "title": "<SegmentedControl> Action Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { effect } from '@pithyjs/signals';
+import { CONTROL_SIZES } from '../../../shared/types';
+import { hasReactive, readReactive, } from '../../../shared/clickable';
+import { applyRovingTabindex, bindSegmentedKeyboard, } from '../../../shared/segmented';
+/**
+ * Single-select segmented filter. Renders a `role="radiogroup"` with one
+ * `role="radio"` button per item. Supports arrow-key nav (Left/Right wrap,
+ * Home/End jump) per WAI-ARIA radiogroup semantics.
+ *
+ * @example
+ * ```html
+ * <SegmentedControl
+ *   items="filters"
+ *   value="activeFilter"
+ *   onChange="setFilter"
+ *   ariaLabel="'Component scope'"
+ * />
+ * ```
+ */
+/** @codexApi {"parent":"pithy.ui-kit.segmented-control","name":"SegmentedControl","stability":"stable","signature":"<T extends string>(props: SegmentedControlProps<T>) => { el: HTMLDivElement; destroy: () => void }"} */
+export function SegmentedControl(props) {
+    const { items, value, onChange, ariaLabel: rawAriaLabel, size: rawSize = 'md', } = props;
+    const ariaLabel = rawAriaLabel?.trim();
+    if (import.meta.env?.DEV) {
+        if (!ariaLabel) {
+            console.warn('[<SegmentedControl>] `ariaLabel` is required and must be a non-empty string.');
+        }
+        if (!items || items.length < 2) {
+            console.warn('[<SegmentedControl>] expects at least two items.');
+        }
+        if (!CONTROL_SIZES.includes(rawSize)) {
+            console.warn(`[<SegmentedControl>] Invalid size: "${rawSize}". Expected one of: ${CONTROL_SIZES.join(', ')}. Falling back to "md".`);
+        }
+        if (!hasReactive(value)) {
+            console.warn('[<SegmentedControl>] `value` is a static string. Pass a signal accessor `() => value` for interactive use — the UI will not update after user interaction otherwise.');
+        }
+    }
+    const size = CONTROL_SIZES.includes(rawSize)
+        ? rawSize
+        : 'md';
+    const root = document.createElement('div');
+    root.classList.add('ui-segmented-control');
+    root.setAttribute('role', 'radiogroup');
+    if (ariaLabel)
+        root.setAttribute('aria-label', ariaLabel);
+    root.dataset.size = size;
+    const disposers = [];
+    const buttons = items.map(item => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.classList.add('ui-segmented-control-option');
+        btn.setAttribute('role', 'radio');
+        btn.dataset.value = item.value;
+        btn.textContent = item.label;
+        root.appendChild(btn);
+        return btn;
+    });
+    const readValue = () => readReactive(value);
+    const apply = () => {
+        const v = readValue();
+        const activeIndex = items.findIndex(it => it.value === v);
+        buttons.forEach((btn, i) => {
+            const isActive = i === activeIndex;
+            btn.setAttribute('aria-checked', String(isActive));
+            btn.dataset.active = String(isActive);
+        });
+        applyRovingTabindex(buttons, activeIndex);
+    };
+    if (hasReactive(value)) {
+        disposers.push(effect(apply));
+    }
+    else {
+        apply();
+    }
+    buttons.forEach((btn, i) => {
+        const handler = () => onChange(items[i].value);
+        btn.addEventListener('click', handler);
+        disposers.push(() => btn.removeEventListener('click', handler));
+    });
+    disposers.push(bindSegmentedKeyboard(buttons, i => onChange(items[i].value)));
+    return {
+        el: root,
+        destroy: () => {
+            for (const dispose of disposers) {
+                try {
+                    dispose();
+                }
+                catch (err) {
+                    if (import.meta.env?.DEV) {
+                        console.error('[<SegmentedControl>] disposer threw:', err);
+                    }
+                }
+            }
+            disposers.length = 0;
+            root.replaceChildren();
+        },
+    };
+}
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/atoms/actions/segmented-control/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../../src/atoms/actions/segmented-control/SegmentedControl.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAEF,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EACL,WAAW,EACX,YAAY,GAEb,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,2BAA2B,CAAC;AAwBnC;;;;;;;;;;;;;;GAcG;AACH,4NAA4N;AAC5N,MAAM,UAAU,gBAAgB,CAC9B,KAA+B;IAE/B,MAAM,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,IAAI,GACrB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,YAAY,EAAE,IAAI,EAAE,CAAC;IAEvC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CACV,8EAA8E,CAC/E,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;QACnE,CAAC;QACD,IAAI,CAAE,aAAmC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5D,OAAO,CAAC,IAAI,CACV,uCAAuC,OAAO,uBAAuB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CACvH,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;YACxB,OAAO,CAAC,IAAI,CACV,sKAAsK,CACvK,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,IAAI,GAAI,aAAmC,CAAC,QAAQ,CAAC,OAAO,CAAC;QACjE,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACxC,IAAI,SAAS;QAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAC1D,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;IAEzB,MAAM,SAAS,GAAsB,EAAE,CAAC;IAExC,MAAM,OAAO,GAAwB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACpD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC7C,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC;QACpB,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QACjD,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAClC,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACtB,OAAO,GAAG,CAAC;IACb,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,MAAM,CAAC,GAAG,SAAS,EAAE,CAAC;QACtB,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;QAC1D,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,CAAC,KAAK,WAAW,CAAC;YACnC,GAAG,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnD,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,KAAK,EAAE,CAAC;IACV,CAAC;IAED,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;QACzB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC/C,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACvC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAE9E,OAAO;QACL,EAAE,EAAE,IAAI;QACR,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,MAAM,OAAO,IAAI,SAAS,EAAE,CAAC;gBAChC,IAAI,CAAC;oBACH,OAAO,EAAE,CAAC;gBACZ,CAAC;gBAAC,OAAO,GAAG,EAAE,CAAC;oBACb,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;wBACzB,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,GAAG,CAAC,CAAC;oBAC7D,CAAC;gBACH,CAAC;YACH,CAAC;YACD,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;YACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/atoms/actions/segmented-control/segmented-control.scss

@@ -0,0 +1,90 @@
+/// SegmentedControl component styles
+/// Single-select pill filter — radiogroup with raised selected option.
+///
+/// @group atoms/actions
+
+@use 'sass:map';
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '../../../shared/tokens' as shared;
+
+.ui-segmented-control {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  padding: var(--border-width-thin);
+  background-color: var(--color-surface-variant);
+  border-radius: var(--radius-sm);
+}
+
+.ui-segmented-control-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  appearance: none;
+  margin: 0;
+  background-color: transparent;
+  color: var(--color-text-muted);
+  border: 0;
+  border-radius: calc(var(--radius-sm) - var(--border-width-thin));
+  cursor: pointer;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--body-letter-spacing);
+  line-height: 1;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @include a11y.motion-safe {
+    transition:
+      var(--motion-transition-background),
+      var(--motion-transition-color),
+      box-shadow var(--motion-duration-normal) var(--motion-easing-standard);
+  }
+
+  &:hover:not([data-active='true']) {
+    color: var(--color-text);
+  }
+
+  &[data-active='true'] {
+    color: var(--color-text);
+    background-color: var(--color-surface-bright);
+    box-shadow:
+      0 0 0 var(--border-width-hairline) var(--color-border),
+      var(--shadow-xs);
+  }
+
+  &:focus-visible {
+    @include a11y.focus-ring;
+  }
+
+  @include a11y.forced-colors {
+    &[data-active='true'] {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+
+@each $size in shared.$control-sizes {
+  .ui-segmented-control[data-size='#{$size}'] .ui-segmented-control-option {
+    font-size: map.get(shared.$control-font-sizes, $size);
+  }
+}
+
+.ui-segmented-control[data-size='sm'] .ui-segmented-control-option {
+  padding-block: var(--space-xs);
+  padding-inline: var(--space-sm);
+}
+
+.ui-segmented-control[data-size='md'] .ui-segmented-control-option {
+  padding-block: var(--space-sm);
+  padding-inline: var(--space-md);
+}
+
+.ui-segmented-control[data-size='lg'] .ui-segmented-control-option {
+  padding-block: var(--space-md);
+  padding-inline: var(--space-lg);
+}

package/dist/atoms/content/_mixins.scss

@@ -0,0 +1,79 @@
+/// Shared mixins for content components (Text, Heading, etc.)
+/// Extracts common color-scheme, alignment, and a11y patterns.
+///
+/// @group atoms/content
+
+@use '@pithyjs/design-system/a11y/styles/mixins' as a11y;
+@use '@pithyjs/design-system/typography/_generated/tokens' as typo;
+@use '../../shared/tokens' as shared;
+
+// ============================================
+// Color scheme (maps data-color to --color-* tokens)
+// ============================================
+
+@mixin color-scheme($selector) {
+  // Text colors (explicit overrides — "text" is needed by components
+  // whose base is `currentColor` rather than `var(--color-text)`)
+  $text-colors: (text, text-muted, text-inverse);
+
+  @each $scheme in $text-colors {
+    #{$selector}[data-color='#{$scheme}'] {
+      color: var(--color-#{$scheme});
+    }
+  }
+
+  // Brand + status colors
+  @each $scheme in shared.$semantic-colors {
+    #{$selector}[data-color='#{$scheme}'] {
+      color: var(--color-#{$scheme});
+    }
+  }
+}
+
+// ============================================
+// Weight scheme (maps data-weight to font-weight values)
+// ============================================
+
+@mixin weight-scheme($selector) {
+  @each $name, $value in typo.$font-weights {
+    #{$selector}[data-weight='#{$name}'] {
+      font-weight: var(--font-weight-#{$name});
+    }
+  }
+}
+
+// ============================================
+// Alignment (logical properties for RTL support)
+// ============================================
+
+@mixin alignment($selector) {
+  @each $align in (start, center, end, justify) {
+    #{$selector}[data-align='#{$align}'] {
+      text-align: #{$align};
+    }
+  }
+}
+
+// ============================================
+// High Contrast (forced-colors)
+// ============================================
+
+@mixin forced-colors($selector) {
+  @include a11y.forced-colors {
+    #{$selector} {
+      color: CanvasText;
+    }
+  }
+}
+
+// ============================================
+// Increased contrast preference
+// ============================================
+
+@mixin high-contrast($selector) {
+  @include a11y.high-contrast {
+    #{$selector}[data-color='text-muted'] {
+      color: var(--color-text);
+    }
+  }
+}

package/dist/atoms/content/action-tile/ActionTile.d.ts

@@ -0,0 +1,27 @@
+/** @codex
+{
+  "id": "pithy.ui-kit.action-tile",
+  "title": "<ActionTile> Content Component",
+  "category": "feature",
+  "risk": "medium"
+}
+*/
+import { type Reactive } from '../../../shared/clickable';
+/** @codexApi {"parent":"pithy.ui-kit.action-tile","name":"ActionTileProps","stability":"stable","signature":"interface ActionTileProps"} */
+export interface ActionTileProps {
+    title: string;
+    description?: string;
+    /** Sets `aria-busy`, shows the media spinner, and blocks clicks. */
+    loading?: Reactive<boolean>;
+    disabled?: Reactive<boolean>;
+    /** Guarded against `disabled` and `loading`. */
+    onClick?: (e: MouseEvent) => void;
+    /** Defaults to the title + description text. */
+    ariaLabel?: string;
+}
+/** @codexApi {"parent":"pithy.ui-kit.action-tile","name":"ActionTile","stability":"stable","signature":"(props: ActionTileProps) => { el: HTMLButtonElement; destroy: () => void }"} */
+export declare function ActionTile(props: ActionTileProps): {
+    el: HTMLButtonElement;
+    destroy: () => void;
+};
+//# sourceMappingURL=ActionTile.d.ts.map

package/dist/atoms/content/action-tile/ActionTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionTile.d.ts","sourceRoot":"","sources":["../../../../src/atoms/content/action-tile/ActionTile.ts"],"names":[],"mappings":"AAAA;;;;;;;EAOE;AAGF,OAAO,EAKL,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAEnC,4IAA4I;AAC5I,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC7B,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wLAAwL;AACxL,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG;IAClD,EAAE,EAAE,iBAAiB,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CA+GA"}