@hyperpackai/hyperui 0.2.0 → 0.3.0

package/README.md

@@ -72,6 +72,19 @@ All components support customization through CSS variables and theme config.
 - [Theming Guide](https://hyperpack.dev/docs/hyperui/theming)
 - [Component Gallery](https://hyperpack.dev/docs)
 
+## Release Readiness
+
+HyperUI owns its benchmark baselines and release gate. Before publishing
+HyperUI-facing changes, run:
+
+```bash
+npm run release:gate:hyperui
+```
+
+The gate builds HyperUI, runs API/accessibility/keyboard/theme tests, enforces
+Node and Chromium benchmark budgets, checks the HyperDocs bundle size, and
+captures HyperDocs visual smoke screenshots.
+
 ## License
 
 MIT

package/dist/components/Accordion/index.d.ts

@@ -1,3 +1,4 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface AccordionItem {
     id: string;
@@ -9,7 +10,12 @@ export interface AccordionItem {
 export interface AccordionProps {
     items: AccordionItem[];
     multiple?: boolean;
+    openItems?: string[] | Signal<string[]>;
+    value?: string[] | Signal<string[]>;
     defaultOpen?: string[];
+    defaultValue?: string[];
+    onChange?: (openItems: string[]) => void;
+    onValueChange?: (openItems: string[]) => void;
     variant?: "default" | "ghost";
     class?: string;
 }

package/dist/components/Accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAqCtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAmFtD"}

package/dist/components/Accordion/index.js

@@ -21,26 +21,82 @@ const ACCORDION_CSS = `
 `;
 export function Accordion(props) {
     injectCSS("hu-accordion", ACCORDION_CSS);
-    const { items, multiple = false, defaultOpen = [], variant = "default" } = props;
-    const open = signal(defaultOpen);
+    const { items, multiple = false, variant = "default", onChange, onValueChange } = props;
+    const uncontrolledOpen = signal(props.defaultValue ?? props.defaultOpen ?? []);
+    const controlledSignal = getStringArraySignalProp(props.value) ?? getStringArraySignalProp(props.openItems);
+    const controlledValue = Array.isArray(props.value) ? props.value : Array.isArray(props.openItems) ? props.openItems : undefined;
+    const controlled = controlledSignal != null || controlledValue !== undefined;
+    const getOpenItems = () => controlledSignal?.value ?? controlledValue ?? uncontrolledOpen.value;
+    const setOpenItems = (next) => {
+        if (!controlled)
+            uncontrolledOpen.value = next;
+        if (controlledSignal)
+            controlledSignal.value = next;
+        onChange?.(next);
+        onValueChange?.(next);
+    };
     const toggle = (id) => {
-        const current = open.value;
+        const current = getOpenItems();
+        let next;
         if (multiple) {
-            open.value = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
+            next = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
         }
         else {
-            open.value = current.includes(id) ? [] : [id];
+            next = current.includes(id) ? [] : [id];
         }
+        setOpenItems(next);
+    };
+    const focusTrigger = (id, event) => {
+        const root = event.currentTarget;
+        const next = root.querySelector(`#accordion-trigger-${cssEscape(id)}`);
+        next?.focus();
+    };
+    const handleKeyDown = (event) => {
+        const enabled = items.filter((item) => !item.disabled);
+        if (enabled.length === 0)
+            return;
+        const currentButton = event.target;
+        const currentId = currentButton.getAttribute("data-accordion-id");
+        const currentIndex = Math.max(0, enabled.findIndex((item) => item.id === currentId));
+        let nextIndex = currentIndex;
+        if (event.key === "ArrowDown")
+            nextIndex = (currentIndex + 1) % enabled.length;
+        else if (event.key === "ArrowUp")
+            nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        else if (event.key === "Home")
+            nextIndex = 0;
+        else if (event.key === "End")
+            nextIndex = enabled.length - 1;
+        else
+            return;
+        event.preventDefault();
+        focusTrigger(enabled[nextIndex].id, event);
     };
-    const chevronSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>`;
-    return h("div", { class: cn("hu-accordion", variant !== "default" && `hu-accordion--${variant}`, props.class) }, ...items.map((item) => {
-        const isOpen = () => open.value.includes(item.id);
+    const chevronIcon = h("svg", {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "aria-hidden": "true"
+    }, h("path", { d: "M4 6l4 4 4-4" }));
+    return h("div", { class: cn("hu-accordion", variant !== "default" && `hu-accordion--${variant}`, props.class), onKeyDown: handleKeyDown }, ...items.map((item) => {
+        const isOpen = () => getOpenItems().includes(item.id);
         return h("div", { key: item.id, class: "hu-accordion-item" }, h("button", {
+            id: `accordion-trigger-${item.id}`,
             class: "hu-accordion-trigger",
+            "data-accordion-id": item.id,
             "aria-expanded": () => isOpen() ? "true" : "false",
             "aria-controls": `accordion-${item.id}`,
             disabled: item.disabled,
             onClick: () => toggle(item.id)
-        }, h("span", { style: "display:flex;align-items:center;gap:8px;" }, item.icon && h("span", {}, item.icon), item.title), h("span", { class: "hu-accordion-icon", innerHTML: chevronSVG, "aria-hidden": "true" })), () => isOpen() ? h("div", { id: `accordion-${item.id}`, class: "hu-accordion-content" }, item.content) : null);
+        }, h("span", { style: "display:flex;align-items:center;gap:8px;" }, item.icon && h("span", {}, item.icon), item.title), h("span", { class: "hu-accordion-icon", "aria-hidden": "true" }, chevronIcon)), () => isOpen() ? h("div", { id: `accordion-${item.id}`, class: "hu-accordion-content", role: "region", "aria-labelledby": `accordion-trigger-${item.id}` }, item.content) : null);
     }));
 }
+function getStringArraySignalProp(value) {
+    return typeof value === "object" && value !== null && "peek" in value ? value : undefined;
+}
+function cssEscape(value) {
+    return typeof CSS !== "undefined" && typeof CSS.escape === "function"
+        ? CSS.escape(value)
+        : value.replace(/["\\#.;?+*~':!^$[\]()=>|/@]/g, "\\$&");
+}

package/dist/components/Autocomplete/index.d.ts

@@ -1,3 +1,4 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface AutocompleteOption {
     label: string;
@@ -7,14 +8,23 @@ export interface AutocompleteOption {
 }
 export interface AutocompleteProps {
     options: AutocompleteOption[];
-    value?: string;
+    value?: string | Signal<string>;
+    defaultValue?: string;
     placeholder?: string;
     label?: string;
     multiple?: boolean;
     clearable?: boolean;
     disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    helper?: string;
+    error?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     noOptionsText?: string;
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string | null, option?: AutocompleteOption | null) => void;
+    onValueChange?: (value: string | null, option?: AutocompleteOption | null) => void;
     class?: string;
 }
 export declare function Autocomplete(props: AutocompleteProps): VNode;

package/dist/components/Autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqDpE,MAAM,WAAW,kBAAkB;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAExG,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CA+D5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyDpE,MAAM,WAAW,kBAAkB;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAExG,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CA2L5D"}

package/dist/components/Autocomplete/index.js

@@ -49,46 +49,170 @@ const AUTOCOMPLETE_CSS = `
 .hu-autocomplete__check { margin-inline-start: auto; color: var(--hu-primary); font-size: 12px; }
 .hu-autocomplete__no-options { padding: var(--hu-space-5); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); text-align: center; }
 .hu-autocomplete__group-label { padding: var(--hu-space-2) var(--hu-space-3); font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .06em; }
+.hu-autocomplete__helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.45; }
+.hu-autocomplete__error { font-size: var(--hu-font-size-xs); color: var(--hu-error); line-height: 1.45; }
+.hu-autocomplete--error .hu-autocomplete__input { border-color: var(--hu-error); }
+.hu-autocomplete--error .hu-autocomplete__input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-error) 18%, transparent), var(--hu-shadow-sm); }
 `;
+let autocompleteId = 0;
 export function Autocomplete(props) {
     injectCSS("hu-autocomplete", AUTOCOMPLETE_CSS);
-    const { options, placeholder, label, clearable, disabled, noOptionsText = "No options", onChange } = props;
-    const inputVal = signal(props.value ? (options.find(o => o.value === props.value)?.label ?? "") : "");
+    const { options, placeholder, label, clearable, disabled, required, helper, error, noOptionsText = "No options", onChange, onValueChange } = props;
+    const generatedId = props.id ?? `hu-autocomplete-${++autocompleteId}`;
+    const listboxId = `${generatedId}-listbox`;
+    const helperId = helper && !error ? `${generatedId}-helper` : undefined;
+    const errorId = error ? `${generatedId}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId, helperId].filter(Boolean).join(" ") || undefined;
+    const valueSignal = getSignalProp(props.value);
+    const isControlled = typeof props.value === "string" || !!valueSignal;
+    const internalValue = signal(typeof props.value === "string" ? props.value : props.defaultValue ?? "");
+    const currentValue = () => valueSignal ? valueSignal.value : typeof props.value === "string" ? props.value : internalValue.value;
+    const optionForValue = (value) => options.find(o => o.value === value);
+    const inputVal = signal(optionForValue(currentValue())?.label ?? "");
     const isOpen = signal(false);
-    const selected = signal(props.value ?? "");
+    const activeIndex = signal(-1);
     const filtered = () => options.filter(o => !inputVal.value || o.label.toLowerCase().includes(inputVal.value.toLowerCase()));
+    const selectedValue = () => currentValue();
+    const activeOption = () => activeIndex.value >= 0 ? filtered()[activeIndex.value] : undefined;
+    const optionId = (opt) => `${generatedId}-option-${toIdPart(opt.value)}`;
+    const activeDescendant = () => {
+        const opt = activeOption();
+        return opt ? optionId(opt) : undefined;
+    };
+    const firstEnabledIndex = () => filtered().findIndex(opt => !opt.disabled);
+    const selectedIndex = () => {
+        const index = filtered().findIndex(opt => opt.value === selectedValue() && !opt.disabled);
+        return index >= 0 ? index : firstEnabledIndex();
+    };
+    const setOpen = (next) => {
+        isOpen.value = next;
+        if (next && activeIndex.value < 0)
+            activeIndex.value = selectedIndex();
+        if (!next)
+            activeIndex.value = -1;
+    };
+    const setValue = (value, option) => {
+        if (valueSignal)
+            valueSignal.value = value;
+        else if (!isControlled)
+            internalValue.value = value;
+        onChange?.(value || null, option);
+        onValueChange?.(value || null, option);
+    };
+    const selectOption = (opt) => {
+        if (!opt || opt.disabled)
+            return;
+        inputVal.value = opt.label;
+        setValue(opt.value, opt);
+        setOpen(false);
+    };
+    const clearSelection = () => {
+        inputVal.value = "";
+        setValue("", null);
+        setOpen(false);
+    };
+    const moveActive = (delta) => {
+        const items = filtered();
+        if (!items.length)
+            return;
+        let index = activeIndex.value;
+        for (let i = 0; i < items.length; i++) {
+            index = (index + delta + items.length) % items.length;
+            if (!items[index]?.disabled) {
+                activeIndex.value = index;
+                return;
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            if (!isOpen.value)
+                setOpen(true);
+            moveActive(e.key === "ArrowDown" ? 1 : -1);
+            return;
+        }
+        if (e.key === "Home" || e.key === "End") {
+            if (!isOpen.value)
+                return;
+            e.preventDefault();
+            const items = filtered();
+            const start = e.key === "Home" ? 0 : items.length - 1;
+            const step = e.key === "Home" ? 1 : -1;
+            for (let index = start; index >= 0 && index < items.length; index += step) {
+                if (!items[index]?.disabled) {
+                    activeIndex.value = index;
+                    break;
+                }
+            }
+            return;
+        }
+        if (e.key === "Enter" && isOpen.value) {
+            e.preventDefault();
+            selectOption(activeOption());
+            return;
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setOpen(false);
+        }
+    };
     return h("div", {
-        class: cn("hu-autocomplete", isOpen.value && "hu-autocomplete--open", props.class)
-    }, label && h("label", { class: "hu-autocomplete__label" }, label), h("div", { class: "hu-autocomplete__input-wrap" }, h("input", {
+        class: cn("hu-autocomplete", isOpen.value && "hu-autocomplete--open", error && "hu-autocomplete--error", props.class)
+    }, label && h("label", { class: "hu-autocomplete__label", for: generatedId }, label), h("div", { class: "hu-autocomplete__input-wrap" }, h("input", {
+        id: generatedId,
+        name: props.name,
         class: "hu-autocomplete__input",
-        value: inputVal.value, placeholder, disabled,
-        onFocus: () => { isOpen.value = true; },
-        onInput: (e) => { inputVal.value = e.target.value; isOpen.value = true; },
-        onBlur: () => setTimeout(() => { isOpen.value = false; }, 150)
-    }), clearable && selected.value && h("button", {
+        value: inputVal.value,
+        placeholder,
+        disabled,
+        required,
+        role: "combobox",
+        autocomplete: "off",
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        "aria-expanded": isOpen.value ? "true" : "false",
+        "aria-activedescendant": activeDescendant(),
+        "aria-invalid": error ? "true" : undefined,
+        "aria-describedby": describedBy,
+        "aria-label": props["aria-label"],
+        onFocus: () => { setOpen(true); },
+        onInput: (e) => {
+            inputVal.value = e.target.value;
+            activeIndex.value = firstEnabledIndex();
+            setOpen(true);
+        },
+        onKeyDown: handleKeyDown,
+        onBlur: () => setTimeout(() => { setOpen(false); }, 150)
+    }), clearable && selectedValue() && h("button", {
         class: "hu-autocomplete__clear",
         type: "button",
+        "aria-label": "Clear selection",
         onMouseDown: (e) => {
             e.preventDefault();
-            selected.value = "";
-            inputVal.value = "";
-            onChange?.(null);
+            clearSelection();
         }
-    }, "×"), h("span", { class: "hu-autocomplete__arrow" }, "▾")), isOpen.value && h("div", { class: "hu-autocomplete__listbox-wrap" }, h("ul", { class: "hu-autocomplete__listbox", role: "listbox" }, filtered().length === 0
+    }, "×"), h("span", { class: "hu-autocomplete__arrow" }, "▾")), isOpen.value && h("div", { class: "hu-autocomplete__listbox-wrap" }, h("ul", { id: listboxId, class: "hu-autocomplete__listbox", role: "listbox" }, filtered().length === 0
         ? h("li", { class: "hu-autocomplete__no-options" }, noOptionsText)
-        : filtered().map(opt => h("li", {
-            class: cn("hu-autocomplete__option", selected.value === opt.value && "hu-autocomplete__option--selected", opt.disabled && "hu-autocomplete__option--disabled"),
+        : filtered().map((opt, index) => h("li", {
+            id: optionId(opt),
+            class: cn("hu-autocomplete__option", selectedValue() === opt.value && "hu-autocomplete__option--selected", activeIndex.value === index && "hu-autocomplete__option--focused", opt.disabled && "hu-autocomplete__option--disabled"),
             role: "option",
-            "aria-selected": selected.value === opt.value,
+            "aria-selected": selectedValue() === opt.value ? "true" : "false",
             "aria-disabled": opt.disabled ? "true" : undefined,
+            onMouseEnter: () => { if (!opt.disabled)
+                activeIndex.value = index; },
             onMouseDown: (e) => {
                 e.preventDefault();
-                if (opt.disabled)
-                    return;
-                selected.value = opt.value;
-                inputVal.value = opt.label;
-                isOpen.value = false;
-                onChange?.(opt.value);
+                selectOption(opt);
             }
-        }, opt.label, selected.value === opt.value && h("span", { class: "hu-autocomplete__check", "aria-hidden": "true" }, "✓"))))));
+        }, opt.label, selectedValue() === opt.value && h("span", { class: "hu-autocomplete__check", "aria-hidden": "true" }, "✓"))))), error && h("span", { id: errorId, class: "hu-autocomplete__error", role: "alert" }, error), !error && helper && h("span", { id: helperId, class: "hu-autocomplete__helper" }, helper));
+}
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
+}
+function toIdPart(value) {
+    return value.replace(/[^a-zA-Z0-9_-]/g, "-");
 }

package/dist/components/Backdrop/index.d.ts

@@ -1,6 +1,7 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface BackdropProps {
-    open: boolean;
+    open: boolean | Signal<boolean>;
     invisible?: boolean;
     onClick?: (e: MouseEvent) => void;
     class?: string;

package/dist/components/Backdrop/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiBpE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,GAAG,IAAI,CAQ3D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiBpE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,GAAG,IAAI,CAY3D"}

package/dist/components/Backdrop/index.js

@@ -15,11 +15,14 @@ const CSS = `
 `;
 export function Backdrop(props) {
     injectCSS("hu-backdrop", CSS);
-    if (!props.open)
-        return null;
-    return renderInPortal(h("div", {
+    const isSignalOpen = typeof props.open === "object" && props.open != null && "peek" in props.open;
+    const isOpen = () => isSignalOpen ? props.open.value : props.open;
+    const renderBackdrop = () => renderInPortal(h("div", {
         class: cn("hu-backdrop", props.invisible && "hu-backdrop--invisible", props.class),
         onClick: props.onClick,
         "aria-hidden": "true"
     }, props.children), "backdrop");
+    if (!isSignalOpen)
+        return isOpen() ? renderBackdrop() : null;
+    return (() => isOpen() ? renderBackdrop() : null);
 }

package/dist/components/Checkbox/index.d.ts

@@ -12,6 +12,7 @@ export interface CheckboxProps {
     description?: string;
     class?: string;
     onChange?: (e: Event) => void;
+    onCheckedChange?: (checked: boolean, e: Event) => void;
 }
 export declare function Checkbox(props: CheckboxProps): VNode;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAuCpE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAWpD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAuCpE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAepD"}

package/dist/components/Checkbox/index.js

@@ -37,6 +37,10 @@ const CHECKBOX_CSS = `
 `;
 export function Checkbox(props) {
     injectCSS("hu-checkbox", CHECKBOX_CSS);
-    const { label, description, disabled, id, ...rest } = props;
-    return h("label", { class: cn("hu-checkbox-wrap", disabled && "hu-checkbox-wrap--disabled", props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, class: "hu-checkbox" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
+    const { label, description, disabled, id, onChange, onCheckedChange, ...rest } = props;
+    const handleChange = (event) => {
+        onChange?.(event);
+        onCheckedChange?.(event.target.checked, event);
+    };
+    return h("label", { class: cn("hu-checkbox-wrap", disabled && "hu-checkbox-wrap--disabled", props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, onChange: handleChange, class: "hu-checkbox" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
 }

package/dist/components/DashboardLayout/index.d.ts

@@ -1,15 +1,28 @@
 import { type VNode } from "../../theme/index.js";
 export interface DashboardLayoutProps {
+    id?: string;
     header?: unknown;
     sidebar?: unknown;
     aside?: unknown;
+    footer?: unknown;
     sidebarWidth?: string | number;
     collapsedSidebarWidth?: string | number;
     asideWidth?: string | number;
     collapsed?: boolean;
     padding?: string | number;
+    skipLinkLabel?: string | null;
+    skipLinkTarget?: string;
+    headerLabel?: string;
+    sidebarLabel?: string;
+    asideLabel?: string;
+    footerLabel?: string;
+    mainLabel?: string;
+    testId?: string;
+    style?: string;
     class?: string;
     children?: unknown;
 }
 export declare function DashboardLayout(props: DashboardLayoutProps): VNode;
+export type AppShellProps = DashboardLayoutProps;
+export declare function AppShell(props: AppShellProps): VNode;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/DashboardLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsDpE,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAsBlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqEpE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAgDlE;AAED,MAAM,MAAM,aAAa,GAAG,oBAAoB,CAAC;AAEjD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAEpD"}

package/dist/components/DashboardLayout/index.js

@@ -4,11 +4,20 @@ const DASHBOARD_LAYOUT_CSS = `
   min-height: 100dvh; display: grid; color: var(--hu-text); background: var(--hu-bg-2);
   grid-template-areas:
     "sidebar header"
-    "sidebar main";
+    "sidebar main"
+    "sidebar footer";
   grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr);
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .hu-dashboard-layout--collapsed { grid-template-columns: var(--hu-dashboard-sidebar-collapsed, 72px) minmax(0, 1fr); }
+.hu-dashboard-layout__skip {
+  position: fixed; inset-inline-start: var(--hu-space-3); inset-block-start: var(--hu-space-3);
+  z-index: calc(var(--hu-z-toast) + 1); transform: translateY(-150%);
+  padding: var(--hu-space-2) var(--hu-space-3); border-radius: var(--hu-radius);
+  background: var(--hu-primary); color: var(--hu-primary-text); text-decoration: none;
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-dashboard-layout__skip:focus { transform: translateY(0); outline: 2px solid var(--hu-primary-text); outline-offset: 2px; }
 .hu-dashboard-layout__header {
   grid-area: header; min-width: 0; position: sticky; inset-block-start: 0;
   z-index: var(--hu-z-sticky); background: var(--hu-bg);
@@ -26,10 +35,15 @@ const DASHBOARD_LAYOUT_CSS = `
   border-inline-start: 1px solid var(--hu-border); background: var(--hu-bg);
   min-width: 0; overflow: auto;
 }
+.hu-dashboard-layout__footer {
+  grid-area: footer; min-width: 0; background: var(--hu-bg);
+  border-block-start: 1px solid var(--hu-border);
+}
 .hu-dashboard-layout--with-aside {
   grid-template-areas:
     "sidebar header header"
-    "sidebar main aside";
+    "sidebar main aside"
+    "sidebar footer aside";
   grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr) var(--hu-dashboard-aside, 320px);
 }
 @media (max-width: 768px) {
@@ -37,9 +51,10 @@ const DASHBOARD_LAYOUT_CSS = `
   .hu-dashboard-layout--with-aside {
     grid-template-areas:
       "header"
-      "main";
+      "main"
+      "footer";
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr) auto;
   }
   .hu-dashboard-layout__sidebar,
   .hu-dashboard-layout__aside { display: none; }
@@ -60,8 +75,36 @@ export function DashboardLayout(props) {
         styles.push(`--hu-dashboard-aside:${toCssUnit(props.asideWidth)}`);
     if (props.padding !== undefined)
         styles.push(`--hu-dashboard-padding:${toCssUnit(props.padding)}`);
+    if (props.style)
+        styles.push(props.style);
+    const mainId = props.skipLinkTarget?.replace(/^#/, "") ?? (props.id ? `${props.id}-main` : "hu-dashboard-main");
     return h("div", {
+        id: props.id,
         class: cn("hu-dashboard-layout", props.collapsed && "hu-dashboard-layout--collapsed", props.aside != null && "hu-dashboard-layout--with-aside", props.class),
-        style: styles.join(";") || undefined
-    }, props.header && h("header", { class: "hu-dashboard-layout__header" }, props.header), props.sidebar && h("aside", { class: "hu-dashboard-layout__sidebar", "aria-label": "Primary navigation" }, props.sidebar), h("main", { class: "hu-dashboard-layout__main" }, props.children), props.aside && h("aside", { class: "hu-dashboard-layout__aside", "aria-label": "Secondary panel" }, props.aside));
+        style: styles.join(";") || undefined,
+        "data-testid": props.testId
+    }, props.skipLinkLabel !== null && h("a", {
+        class: "hu-dashboard-layout__skip",
+        href: `#${mainId}`
+    }, props.skipLinkLabel ?? "Skip to main content"), props.header && h("header", {
+        class: "hu-dashboard-layout__header",
+        "aria-label": props.headerLabel
+    }, props.header), props.sidebar && h("aside", {
+        class: "hu-dashboard-layout__sidebar",
+        "aria-label": props.sidebarLabel ?? "Primary navigation"
+    }, props.sidebar), h("main", {
+        id: mainId,
+        class: "hu-dashboard-layout__main",
+        tabindex: "-1",
+        "aria-label": props.mainLabel
+    }, props.children), props.aside && h("aside", {
+        class: "hu-dashboard-layout__aside",
+        "aria-label": props.asideLabel ?? "Secondary panel"
+    }, props.aside), props.footer && h("footer", {
+        class: "hu-dashboard-layout__footer",
+        "aria-label": props.footerLabel
+    }, props.footer));
+}
+export function AppShell(props) {
+    return DashboardLayout(props);
 }

package/dist/components/DataTable/index.d.ts

@@ -2,26 +2,69 @@ import { type VNode } from "../../theme/index.js";
 export interface TableColumn<T> {
     key: string;
     header: string;
+    id?: string;
     width?: string;
     sortable?: boolean;
     render?: (row: T, i: number) => unknown;
     align?: "left" | "center" | "right";
+    headerLabel?: string;
+    cellLabel?: (row: T, i: number) => string;
 }
+export interface DataTableSortEvent {
+    key: string;
+    direction: "asc" | "desc";
+}
+export interface DataTableRowEvent<T> {
+    row: T;
+    key: string;
+    index: number;
+}
+export interface DataTableSelectionEvent<T> {
+    row: T;
+    key: string;
+    selected: boolean;
+}
+export interface DataTableSelectAllEvent<T> {
+    selected: boolean;
+    keys: string[];
+    rows: T[];
+}
+export type DataTableDensity = "compact" | "default" | "comfortable";
 export interface DataTableProps<T extends Record<string, unknown>> {
+    id?: string;
     columns: TableColumn<T>[];
     rows: T[];
     rowKey?: (row: T) => string;
+    caption?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    density?: DataTableDensity;
+    stickyHeader?: boolean;
+    maxHeight?: string | number;
     sortColumn?: string;
     sortDir?: "asc" | "desc";
     onSort?: (key: string) => void;
+    onSortChange?: (event: DataTableSortEvent) => void;
     onRowClick?: (row: T) => void;
+    onRowAction?: (event: DataTableRowEvent<T>) => void;
+    isRowDisabled?: (row: T, index: number) => boolean;
+    getRowLabel?: (row: T, index: number) => string;
     emptyMessage?: string;
+    emptyState?: unknown;
+    loading?: boolean;
+    loadingState?: unknown;
+    error?: unknown;
+    errorState?: unknown;
     footer?: unknown;
     selectable?: boolean;
     selectedRows?: Set<string>;
     onSelectRow?: (key: string, selected: boolean) => void;
+    onSelectionChange?: (event: DataTableSelectionEvent<T>) => void;
     onSelectAll?: (selected: boolean) => void;
+    onSelectAllChange?: (event: DataTableSelectAllEvent<T>) => void;
     class?: string;
+    style?: string;
+    testId?: string;
 }
 export declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): VNode;
 //# sourceMappingURL=index.d.ts.map