@openchamber/sdk 1.23.2-preview.1

package/dist/ui/popup.js

@@ -0,0 +1,43 @@
+import { onOutsideClick } from "./dom.js";
+/** Places a fixed popup under `trigger`; flips above when the room below is too small. */
+const placePopup = (popup, trigger) => {
+    const rect = trigger.getBoundingClientRect();
+    popup.style.minWidth = `${Math.round(rect.width)}px`;
+    popup.style.left = `${Math.round(rect.left)}px`;
+    popup.style.top = `${Math.round(rect.bottom + 4)}px`;
+    const height = popup.offsetHeight;
+    const roomBelow = window.innerHeight - rect.bottom - 8;
+    if (height > roomBelow && rect.top - 8 > roomBelow) {
+        popup.style.top = `${Math.max(8, Math.round(rect.top - 4 - height))}px`;
+    }
+    const overflow = rect.left + popup.offsetWidth - window.innerWidth + 8;
+    if (overflow > 0) {
+        popup.style.left = `${Math.max(8, Math.round(rect.left - overflow))}px`;
+    }
+};
+/**
+ * Attaches `popup` next to `trigger` and wires the ways it closes: outside press,
+ * viewport resize, or scroll. Returns the disposer; the caller decides what `close` does.
+ */
+export const openPopup = (host, trigger, popup, close) => {
+    host.append(popup);
+    placePopup(popup, trigger);
+    const stopOutside = onOutsideClick(host, close);
+    const onResize = () => {
+        close();
+    };
+    const onScroll = (event) => {
+        if (event.target instanceof Node && popup.contains(event.target)) {
+            return;
+        }
+        close();
+    };
+    window.addEventListener('resize', onResize);
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+        stopOutside();
+        window.removeEventListener('resize', onResize);
+        window.removeEventListener('scroll', onScroll, true);
+        popup.remove();
+    };
+};

package/dist/ui/progress.d.ts

@@ -0,0 +1,11 @@
+import { type Tone } from './badge.ts';
+import { type Handle } from './dom.ts';
+export type ProgressProps = {
+    /** 0 to 100. Values outside that range are clamped. */
+    value: number;
+    tone?: Tone;
+    label?: string;
+};
+export type ProgressHandle = Handle<ProgressProps>;
+export declare const clampProgress: (value: number) => number;
+export declare const mountProgress: (root: Element, initial: ProgressProps) => ProgressHandle;

package/dist/ui/progress.js

@@ -0,0 +1,44 @@
+import { applyTone } from "./badge.js";
+import { el, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const clampProgress = (value) => (Number.isFinite(value) ? Math.min(100, Math.max(0, Math.round(value))) : 0);
+export const mountProgress = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = el('div', 'oc-sdk oc-sdk-progress');
+    const caption = el('div', 'oc-sdk-progress-label');
+    const label = el('span');
+    const percent = el('span');
+    caption.append(label, percent);
+    const track = el('div', 'oc-sdk-progress-track');
+    track.setAttribute('role', 'progressbar');
+    track.setAttribute('aria-valuemin', '0');
+    track.setAttribute('aria-valuemax', '100');
+    const fill = el('div', 'oc-sdk-progress-fill');
+    track.append(fill);
+    node.append(caption, track);
+    root.append(node);
+    const paint = () => {
+        const value = clampProgress(props.value);
+        applyTone(fill, props.tone);
+        fill.style.transform = `scaleX(${value / 100})`;
+        track.setAttribute('aria-valuenow', String(value));
+        if (props.label)
+            track.setAttribute('aria-label', props.label);
+        else
+            track.removeAttribute('aria-label');
+        setText(label, props.label);
+        setText(percent, `${value}%`);
+        caption.hidden = !props.label;
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.remove();
+        },
+    };
+};

package/dist/ui/search.d.ts

@@ -0,0 +1,11 @@
+import { type Handle } from './dom.ts';
+export type SearchFieldProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    /** Accessible name. Falls back to the placeholder. */
+    label?: string;
+    autofocus?: boolean;
+};
+export type SearchFieldHandle = Handle<SearchFieldProps>;
+export declare const mountSearchField: (root: Element, initial: SearchFieldProps) => SearchFieldHandle;

package/dist/ui/search.js

@@ -0,0 +1,62 @@
+import { button, el, ensureStyle, setAttr } from "./dom.js";
+import { icon } from "./icons.js";
+import { UI_CSS } from "./style.js";
+export const mountSearchField = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const wrap = el('div', 'oc-sdk oc-sdk-search');
+    const input = el('input', 'oc-sdk-input');
+    input.type = 'text';
+    input.spellcheck = false;
+    input.autocomplete = 'off';
+    input.setAttribute('role', 'searchbox');
+    const clear = button('oc-sdk-search-clear');
+    clear.append(icon('close', 14));
+    clear.tabIndex = -1;
+    wrap.append(icon('search', 16, 'oc-sdk-search-icon'), input, clear);
+    root.append(wrap);
+    const paint = () => {
+        const placeholder = props.placeholder ?? 'Search';
+        setAttr(input, 'placeholder', placeholder);
+        input.setAttribute('aria-label', props.label ?? placeholder);
+        clear.setAttribute('aria-label', 'Clear search');
+        if (input.value !== props.value) {
+            input.value = props.value;
+        }
+        wrap.dataset.active = props.value.trim() === '' ? 'false' : 'true';
+    };
+    const clearValue = () => {
+        if (props.value !== '') {
+            props.onChange('');
+        }
+        input.focus();
+    };
+    const onInput = () => {
+        props.onChange(input.value);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape' && input.value !== '') {
+            event.preventDefault();
+            clearValue();
+        }
+    };
+    input.addEventListener('input', onInput);
+    input.addEventListener('keydown', onKeyDown);
+    clear.addEventListener('click', clearValue);
+    paint();
+    if (props.autofocus) {
+        input.focus();
+    }
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            input.removeEventListener('input', onInput);
+            input.removeEventListener('keydown', onKeyDown);
+            clear.removeEventListener('click', clearValue);
+            wrap.remove();
+        },
+    };
+};

package/dist/ui/select.d.ts

@@ -0,0 +1,22 @@
+import { type Handle } from './dom.ts';
+export type SelectOption = {
+    id: string;
+    label: string;
+    /** Small muted text at the right of the option. */
+    hint?: string;
+};
+export type SelectProps = {
+    label?: string;
+    value: string | null;
+    options: SelectOption[];
+    onChange: (id: string) => void;
+    placeholder?: string;
+    /** Adds a search box at the top of the popup. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+};
+export type SelectHandle = Handle<SelectProps>;
+/** Case-insensitive substring match on label and id. Empty query keeps every option. */
+export declare const filterSelectOptions: (options: readonly SelectOption[], query: string) => SelectOption[];
+export declare const mountSelect: (root: Element, initial: SelectProps) => SelectHandle;

package/dist/ui/select.js

@@ -0,0 +1,164 @@
+import { button, clearNode, el, ensureStyle, setText } from "./dom.js";
+import { icon } from "./icons.js";
+import { moveListSelection, navigationKey } from "./navigation.js";
+import { createOption, highlightOption } from "./option.js";
+import { openPopup } from "./popup.js";
+import { UI_CSS } from "./style.js";
+/** Case-insensitive substring match on label and id. Empty query keeps every option. */
+export const filterSelectOptions = (options, query) => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) {
+        return [...options];
+    }
+    return options.filter((option) => (option.label.toLowerCase().includes(needle) || option.id.toLowerCase().includes(needle)));
+};
+let selectCount = 0;
+export const mountSelect = (root, initial) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const uid = `oc-sdk-select-${selectCount += 1}`;
+    const wrap = el('div', 'oc-sdk oc-sdk-select');
+    const caption = el('span', 'oc-sdk-field-label');
+    caption.id = `${uid}-label`;
+    const trigger = button('oc-sdk-trigger');
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-labelledby', caption.id);
+    const value = el('span', 'oc-sdk-trigger-value');
+    trigger.append(value, icon('chevron', 14, 'oc-sdk-trigger-chevron'));
+    wrap.append(caption, trigger);
+    root.append(wrap);
+    let query = '';
+    let activeId = null;
+    let closePopup = null;
+    const popup = el('div', 'oc-sdk oc-sdk-popup');
+    const searchSlot = el('div', 'oc-sdk-popup-search');
+    const search = el('input', 'oc-sdk-input');
+    search.type = 'text';
+    search.autocomplete = 'off';
+    searchSlot.append(search);
+    const listbox = el('div');
+    listbox.setAttribute('role', 'listbox');
+    listbox.tabIndex = -1;
+    popup.append(listbox);
+    const visible = () => filterSelectOptions(props.options, props.searchable ? query : '');
+    const focusOwner = () => (props.searchable ? search : listbox);
+    const setActive = (id) => {
+        activeId = id;
+        highlightOption(listbox, focusOwner(), uid, id);
+    };
+    const paintOptions = () => {
+        clearNode(listbox);
+        const options = visible();
+        if (options.length === 0) {
+            const empty = el('div', 'oc-sdk-popup-empty');
+            empty.textContent = 'No matches';
+            listbox.append(empty);
+        }
+        for (const option of options) {
+            listbox.append(createOption(uid, 'option', { ...option, selected: option.id === props.value }, {
+                hover: () => setActive(option.id),
+                pick: () => pick(option.id),
+            }));
+        }
+        setActive(options.some((option) => option.id === activeId) ? activeId : options[0]?.id ?? null);
+    };
+    const close = () => {
+        closePopup?.();
+        closePopup = null;
+        query = '';
+        search.value = '';
+        trigger.setAttribute('aria-expanded', 'false');
+    };
+    const open = () => {
+        if (closePopup || props.disabled) {
+            return;
+        }
+        activeId = props.value;
+        search.placeholder = props.searchPlaceholder ?? 'Search';
+        if (props.searchable)
+            popup.prepend(searchSlot);
+        else
+            searchSlot.remove();
+        paintOptions();
+        closePopup = openPopup(wrap, trigger, popup, close);
+        trigger.setAttribute('aria-expanded', 'true');
+        focusOwner().focus();
+    };
+    const pick = (id) => {
+        close();
+        trigger.focus();
+        if (id !== props.value)
+            props.onChange(id);
+    };
+    const onTriggerClick = () => {
+        if (closePopup)
+            close();
+        else
+            open();
+    };
+    const onTriggerKey = (event) => {
+        if (!closePopup && navigationKey(event)) {
+            event.preventDefault();
+            open();
+        }
+    };
+    const onPopupKey = (event) => {
+        const step = navigationKey(event);
+        if (step) {
+            event.preventDefault();
+            setActive(moveListSelection(visible(), activeId, step));
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            if (activeId)
+                pick(activeId);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+            trigger.focus();
+        }
+        else if (props.searchable && event.target !== search && event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+            search.focus();
+        }
+    };
+    const onSearchInput = () => {
+        query = search.value;
+        paintOptions();
+    };
+    const onFocusOut = (event) => {
+        if (closePopup && !(event.relatedTarget instanceof Node && wrap.contains(event.relatedTarget)))
+            close();
+    };
+    const paint = () => {
+        setText(caption, props.label);
+        caption.hidden = !props.label;
+        const current = props.options.find((option) => option.id === props.value);
+        setText(value, current?.label ?? props.placeholder ?? 'Select');
+        value.dataset.empty = current ? 'false' : 'true';
+        trigger.disabled = Boolean(props.disabled);
+        if (closePopup)
+            paintOptions();
+    };
+    trigger.addEventListener('click', onTriggerClick);
+    trigger.addEventListener('keydown', onTriggerKey);
+    popup.addEventListener('keydown', onPopupKey);
+    search.addEventListener('input', onSearchInput);
+    wrap.addEventListener('focusout', onFocusOut);
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            close();
+            trigger.removeEventListener('click', onTriggerClick);
+            trigger.removeEventListener('keydown', onTriggerKey);
+            popup.removeEventListener('keydown', onPopupKey);
+            search.removeEventListener('input', onSearchInput);
+            wrap.removeEventListener('focusout', onFocusOut);
+            wrap.remove();
+        },
+    };
+};

package/dist/ui/separator.d.ts

@@ -0,0 +1,6 @@
+import { type Handle } from './dom.ts';
+export type SeparatorProps = {
+    label?: string;
+};
+export type SeparatorHandle = Handle<SeparatorProps>;
+export declare const mountSeparator: (root: Element, initial?: SeparatorProps) => SeparatorHandle;

package/dist/ui/separator.js

@@ -0,0 +1,26 @@
+import { el, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountSeparator = (root, initial = {}) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = el('div', 'oc-sdk oc-sdk-separator');
+    node.setAttribute('role', 'separator');
+    const label = el('span');
+    node.append(label);
+    root.append(node);
+    const paint = () => {
+        setText(label, props.label);
+        label.hidden = !props.label;
+        node.dataset.labeled = props.label ? 'true' : 'false';
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.remove();
+        },
+    };
+};

package/dist/ui/spinner.d.ts

@@ -0,0 +1,8 @@
+import { type Handle } from './dom.ts';
+export type SpinnerProps = {
+    size?: 'sm' | 'default';
+    /** Text next to the ring. Also the accessible name. */
+    label?: string;
+};
+export type SpinnerHandle = Handle<SpinnerProps>;
+export declare const mountSpinner: (root: Element, initial?: SpinnerProps) => SpinnerHandle;

package/dist/ui/spinner.js

@@ -0,0 +1,29 @@
+import { el, ensureStyle, setText } from "./dom.js";
+import { UI_CSS } from "./style.js";
+export const mountSpinner = (root, initial = {}) => {
+    ensureStyle(UI_CSS);
+    let props = initial;
+    const node = el('span', 'oc-sdk oc-sdk-spinner');
+    node.setAttribute('role', 'status');
+    const ring = el('span', 'oc-sdk-spinner-ring');
+    ring.setAttribute('aria-hidden', 'true');
+    const label = el('span');
+    node.append(ring, label);
+    root.append(node);
+    const paint = () => {
+        node.dataset.size = props.size ?? 'default';
+        setText(label, props.label);
+        label.hidden = !props.label;
+        node.setAttribute('aria-label', props.label ?? 'Loading');
+    };
+    paint();
+    return {
+        update: (next) => {
+            props = { ...props, ...next };
+            paint();
+        },
+        dispose: () => {
+            node.remove();
+        },
+    };
+};

package/dist/ui/style.d.ts

@@ -0,0 +1 @@
+export declare const UI_CSS: string;

package/dist/ui/style.js

@@ -0,0 +1,190 @@
+/** Host CSS variable → `--oc-*` alias written by `theme.ts`. */
+const OC_ALIAS = {
+    'surface-background': 'bg',
+    'surface-elevated': 'elevated',
+    'surface-elevated-foreground': 'elevated-fg',
+    'surface-foreground': 'fg',
+    'surface-muted-foreground': 'muted',
+    'surface-subtle': 'subtle',
+    'interactive-border': 'border',
+    'interactive-hover': 'hover',
+    'interactive-active': 'active',
+    'interactive-selection': 'selection',
+    'interactive-selection-foreground': 'selection-fg',
+    'interactive-focus-ring': 'focus',
+    'primary': 'primary',
+    'primary-foreground': 'primary-fg',
+    'status-success': 'success',
+    'status-warning': 'warning',
+    'status-error': 'error',
+    'status-info': 'info',
+    'font-sans': 'font',
+    'font-mono': 'mono',
+    'radius': 'radius',
+};
+const v = (name, fallback) => (`var(--${name}, var(--oc-${OC_ALIAS[name]}, ${fallback}))`);
+const bg = v('surface-background', 'transparent');
+const elevated = v('surface-elevated', 'transparent');
+const elevatedFg = v('surface-elevated-foreground', 'inherit');
+const fg = v('surface-foreground', 'inherit');
+const muted = v('surface-muted-foreground', 'gray');
+const subtle = v('surface-subtle', 'transparent');
+const border = v('interactive-border', 'currentColor');
+const hover = v('interactive-hover', 'transparent');
+const active = v('interactive-active', 'transparent');
+const selection = v('interactive-selection', 'transparent');
+const selectionFg = v('interactive-selection-foreground', 'inherit');
+const focus = v('interactive-focus-ring', 'currentColor');
+const primary = v('primary', 'currentColor');
+const font = v('font-sans', 'inherit');
+const mono = v('font-mono', 'monospace');
+const radius = v('radius', '9px');
+const mix = (color, pct, base = 'transparent') => (`color-mix(in srgb, ${color} ${pct}%, ${base})`);
+const focusRing = `box-shadow: 0 0 0 2px ${focus};`;
+const tone = (name) => {
+    const color = v(`status-${name}`, 'currentColor');
+    return `
+.oc-sdk[data-tone="${name}"], .oc-sdk [data-tone="${name}"] { --oc-sdk-tone: ${color}; }`;
+};
+export const UI_CSS = `
+.oc-sdk { box-sizing: border-box; color: ${fg}; font-family: ${font}; font-size: 0.875rem; line-height: 1.45; }
+.oc-sdk *, .oc-sdk *::before, .oc-sdk *::after { box-sizing: border-box; }
+/* :where() keeps the reset at zero specificity so every primitive class below overrides it. */
+:where(.oc-sdk) :where(button, input, textarea), :where(button.oc-sdk, input.oc-sdk, textarea.oc-sdk) { font: inherit; color: inherit; margin: 0; }
+:where(.oc-sdk) :where(button), :where(button.oc-sdk) { cursor: pointer; background: none; border: 0; padding: 0; }
+.oc-sdk button:disabled, button.oc-sdk:disabled, .oc-sdk[aria-disabled="true"], .oc-sdk [aria-disabled="true"] { opacity: .5; pointer-events: none; }
+.oc-sdk :focus-visible { outline: none; ${focusRing} }
+.oc-sdk-mono { font-family: ${mono}; }
+.oc-sdk-muted { color: ${muted}; }
+${tone('success')}${tone('warning')}${tone('error')}${tone('info')}
+.oc-sdk[data-tone="primary"], .oc-sdk [data-tone="primary"] { --oc-sdk-tone: ${primary}; }
+
+.oc-sdk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: ${radius}; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background 150ms ease-out, color 150ms ease-out; }
+.oc-sdk-btn[data-size="sm"] { height: 32px; padding: 0 10px; font-size: 0.8125rem; }
+.oc-sdk-btn[data-size="xs"] { height: 24px; padding: 0 8px; font-size: 0.75rem; border-radius: 6px; }
+.oc-sdk-btn[data-variant="default"] { color: ${primary}; background: ${mix(primary, 10, bg)}; border-color: ${mix(primary, 12)}; }
+.oc-sdk-btn[data-variant="default"]:hover { background: ${mix(primary, 16, bg)}; }
+.oc-sdk-btn[data-variant="default"]:active { background: ${mix(primary, 22, bg)}; }
+.oc-sdk-btn[data-variant="secondary"] { background: ${hover}; }
+.oc-sdk-btn[data-variant="secondary"]:hover { background: ${active}; }
+.oc-sdk-btn[data-variant="outline"] { background: ${elevated}; border-color: ${border}; }
+.oc-sdk-btn[data-variant="outline"]:hover { background: ${hover}; }
+.oc-sdk-btn[data-variant="ghost"] { background: transparent; }
+.oc-sdk-btn[data-variant="ghost"]:hover { background: ${hover}; }
+.oc-sdk-btn[data-variant="ghost"]:active { background: ${active}; }
+.oc-sdk-btn[data-variant="destructive"] { --oc-sdk-tone: ${v('status-error', 'red')}; color: var(--oc-sdk-tone); background: ${mix('var(--oc-sdk-tone)', 7, bg)}; border-color: ${mix('var(--oc-sdk-tone)', 12)}; }
+.oc-sdk-btn[data-variant="destructive"]:hover { background: ${mix('var(--oc-sdk-tone)', 9, bg)}; }
+.oc-sdk-btn[data-variant="destructive"]:active { background: ${mix('var(--oc-sdk-tone)', 11, bg)}; }
+.oc-sdk-btn[data-loading="true"] { opacity: .5; pointer-events: none; }
+.oc-sdk-btn > .oc-sdk-spinner-ring { width: 14px; height: 14px; }
+
+.oc-sdk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oc-sdk-field-label { font-size: 0.8125rem; font-weight: 500; }
+.oc-sdk-field-note { font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-field[data-invalid="true"] .oc-sdk-field-note { color: ${v('status-error', 'red')}; }
+.oc-sdk-input { display: block; width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: ${radius}; background: ${elevated}; color: ${fg}; font-size: 0.875rem; line-height: 1.45; appearance: none; box-shadow: inset 0 0 0 1px ${mix(border, 60)}; transition: background 150ms ease-out, box-shadow 150ms ease-out; }
+textarea.oc-sdk-input { height: auto; padding: 8px 12px; resize: vertical; }
+.oc-sdk-input::placeholder { color: ${muted}; }
+.oc-sdk-input:hover:not(:focus) { background: ${subtle}; }
+.oc-sdk-input:focus, .oc-sdk-input:focus-visible { box-shadow: inset 0 0 0 2px ${focus}; }
+.oc-sdk-field[data-invalid="true"] .oc-sdk-input { box-shadow: inset 0 0 0 1px ${v('status-error', 'red')}; }
+.oc-sdk-field[data-invalid="true"] .oc-sdk-input:focus { box-shadow: inset 0 0 0 2px ${v('status-error', 'red')}; }
+.oc-sdk-input[data-mono="true"] { font-family: ${mono}; }
+
+.oc-sdk-search { position: relative; min-width: 0; }
+.oc-sdk-search .oc-sdk-input { padding-left: 34px; padding-right: 34px; }
+.oc-sdk-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: ${muted}; pointer-events: none; }
+.oc-sdk-search[data-active="true"] .oc-sdk-search-icon { color: ${primary}; }
+.oc-sdk-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: ${muted}; }
+.oc-sdk-search[data-active="true"] .oc-sdk-search-clear { display: inline-flex; }
+.oc-sdk-search-clear:hover { background: ${hover}; color: ${fg}; }
+
+.oc-sdk-select { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oc-sdk-trigger { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-width: 0; height: 32px; padding: 0 8px 0 10px; border: 1px solid ${border}; border-radius: 6px; background: transparent; font-size: 0.8125rem; text-align: left; transition: background 150ms ease-out; }
+.oc-sdk-trigger:hover { background: ${hover}; }
+.oc-sdk-trigger[aria-expanded="true"] { background: ${active}; }
+.oc-sdk-trigger-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-sdk-trigger-value[data-empty="true"] { color: ${muted}; }
+.oc-sdk-trigger-chevron { flex: 0 0 auto; color: ${muted}; }
+.oc-sdk-popup { position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 2px; min-width: 160px; max-width: calc(100vw - 16px); max-height: min(320px, calc(100vh - 16px)); overflow: auto; padding: 4px; border: 1px solid ${mix(border, 60)}; border-radius: 12px; background: ${elevated}; color: ${elevatedFg}; box-shadow: 0 8px 24px ${mix(fg, 12)}; }
+.oc-sdk-popup-search { flex: 0 0 auto; padding: 2px 2px 4px; }
+.oc-sdk-popup-search .oc-sdk-input { height: 32px; font-size: 0.8125rem; }
+.oc-sdk-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; font-size: 0.8125rem; text-align: left; }
+.oc-sdk-option[data-active="true"] { background: ${hover}; }
+.oc-sdk-option[aria-selected="true"] { background: ${selection}; color: ${selectionFg}; }
+.oc-sdk-option[data-destructive="true"] { color: ${v('status-error', 'red')}; }
+.oc-sdk-option[data-destructive="true"][data-active="true"] { background: ${mix(v('status-error', 'red'), 10)}; }
+.oc-sdk-option-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-sdk-option-hint { flex: 0 0 auto; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-option-check { flex: 0 0 auto; width: 12px; }
+.oc-sdk-popup-empty { padding: 8px; font-size: 0.8125rem; color: ${muted}; }
+
+.oc-sdk-check { display: inline-flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; }
+.oc-sdk-check-box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-top: 3px; border: 1px solid ${border}; border-radius: 4px; color: ${primary}; transition: border-color 150ms ease-out; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-box { border-color: ${mix(primary, 65, border)}; }
+.oc-sdk-check-box > svg { display: none; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-box > svg { display: block; }
+.oc-sdk-check-thumb { flex: 0 0 auto; position: relative; width: 36px; height: 20px; border-radius: 9999px; background: ${border}; transition: background 150ms ease-out; }
+.oc-sdk-check-thumb::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 9999px; background: ${bg}; transition: transform 150ms ease-out; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-thumb { background: ${primary}; }
+.oc-sdk-check[aria-checked="true"] .oc-sdk-check-thumb::after { transform: translateX(16px); }
+.oc-sdk-check:focus-visible { box-shadow: none; }
+.oc-sdk-check:focus-visible .oc-sdk-check-box, .oc-sdk-check:focus-visible .oc-sdk-check-thumb { ${focusRing} }
+.oc-sdk-check-text { display: flex; flex-direction: column; min-width: 0; }
+.oc-sdk-check-label { font-size: 0.875rem; }
+.oc-sdk-check-desc { font-size: 0.75rem; color: ${muted}; }
+
+.oc-sdk-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; max-width: 100%; overflow: auto; }
+.oc-sdk-tabs[data-track="true"] { background: ${mix(fg, 4)}; }
+.oc-sdk-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; color: ${muted}; white-space: nowrap; transition: color 150ms ease-out, background 150ms ease-out; }
+.oc-sdk-tab:hover { color: ${fg}; }
+.oc-sdk-tab[aria-selected="true"] { color: ${fg}; background: ${elevated}; border-color: ${mix(fg, 7)}; box-shadow: 0 1px 2px ${mix(fg, 6)}; }
+.oc-sdk-tab-count { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: ${muted}; }
+
+.oc-sdk-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; background: ${hover}; color: ${muted}; }
+.oc-sdk-badge[data-tone] { color: var(--oc-sdk-tone); background: ${mix('var(--oc-sdk-tone)', 15)}; }
+
+.oc-sdk-list { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.oc-sdk-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; transition: background 120ms ease-out; }
+.oc-sdk-row:hover, .oc-sdk-row[data-active="true"] { background: ${hover}; }
+.oc-sdk-row[aria-selected="true"] { background: ${selection}; color: ${selectionFg}; }
+.oc-sdk-row-lead { flex: 0 0 auto; width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ${mono}; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
+.oc-sdk-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-sdk-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-row-meta { flex: 0 0 auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: ${muted}; }
+.oc-sdk-row[aria-selected="true"] .oc-sdk-row-lead, .oc-sdk-row[aria-selected="true"] .oc-sdk-row-sub, .oc-sdk-row[aria-selected="true"] .oc-sdk-row-meta { color: inherit; opacity: .75; }
+.oc-sdk-list-empty { padding: 16px 8px; text-align: center; font-size: 0.8125rem; color: ${muted}; }
+
+.oc-sdk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 40px 16px; text-align: center; }
+.oc-sdk-empty-title { margin: 0; font-size: 0.8125rem; font-weight: 600; }
+.oc-sdk-empty-body { margin: 0; max-width: 32rem; font-size: 0.8125rem; color: ${muted}; }
+.oc-sdk-empty-action { margin-top: 12px; }
+
+@keyframes oc-sdk-spin { to { transform: rotate(360deg); } }
+.oc-sdk-spinner { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: ${muted}; }
+.oc-sdk-spinner-ring { width: 16px; height: 16px; border: 2px solid ${border}; border-top-color: ${primary}; border-radius: 9999px; animation: oc-sdk-spin .8s linear infinite; }
+.oc-sdk-spinner[data-size="sm"] .oc-sdk-spinner-ring { width: 12px; height: 12px; }
+
+.oc-sdk-banner { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border: 1px solid ${mix('var(--oc-sdk-tone)', 40)}; border-radius: 8px; background: ${mix('var(--oc-sdk-tone)', 10)}; }
+.oc-sdk-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.oc-sdk-banner-title { font-size: 0.8125rem; font-weight: 500; color: var(--oc-sdk-tone); }
+.oc-sdk-banner-body { font-size: 0.8125rem; color: ${muted}; }
+.oc-sdk-banner-action { flex: 0 0 auto; }
+
+.oc-sdk-separator { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0; font-size: 0.75rem; color: ${muted}; }
+.oc-sdk-separator::before, .oc-sdk-separator::after { content: ""; flex: 1 1 auto; height: 1px; background: ${mix(border, 40)}; }
+.oc-sdk-separator[data-labeled="false"]::after { display: none; }
+.oc-sdk-popup > .oc-sdk-separator { margin: 4px 0; }
+
+.oc-sdk-progress { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.oc-sdk-progress-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: ${muted}; font-variant-numeric: tabular-nums; }
+.oc-sdk-progress-track { height: 6px; border-radius: 9999px; background: ${border}; overflow: hidden; }
+.oc-sdk-progress-fill { height: 100%; border-radius: 9999px; background: var(--oc-sdk-tone, ${primary}); transform-origin: left; transition: transform 200ms ease-out; }
+
+.oc-sdk-menu { position: relative; display: inline-flex; }
+
+.oc-sdk-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.oc-sdk-text a { color: ${primary}; text-decoration: underline; text-underline-offset: 2px; }
+.oc-sdk-text img { display: block; max-width: 100%; margin: 8px 0; border-radius: 8px; border: 1px solid ${mix(border, 60)}; }
+`;

package/dist/ui/tabs.d.ts

@@ -0,0 +1,15 @@
+import { type Handle } from './dom.ts';
+export type TabItem = {
+    id: string;
+    label: string;
+    count?: number;
+};
+export type TabsProps = {
+    items: TabItem[];
+    activeId: string;
+    onChange: (id: string) => void;
+    /** Paints a faint track behind the pills. */
+    trackBackground?: boolean;
+};
+export type TabsHandle = Handle<TabsProps>;
+export declare const mountTabs: (root: Element, initial: TabsProps) => TabsHandle;