@ketvietlab/design-system 0.1.20 → 0.1.24

package/dist/interactions/menu/index.js

@@ -3,7 +3,10 @@ import { each } from '@ketvietlab/ketjs-view';
 export const HOOKS = [
     'menu',
     'menu-trigger',
+    'menu-trigger-count',
     'menu-panel',
+    'menu-search',
+    'menu-search-input',
     'menu-label',
     'menu-separator',
     'menu-item',
@@ -12,18 +15,18 @@ export const HOOKS = [
     'menu-item-check',
     'menu-item-shortcut',
 ];
-export const Menu = (props) => (_jsxs("details", { "data-ui": "menu", "data-align": props.align ?? 'start', open: props.open === true ? true : undefined, children: [_jsx("summary", { "data-ui": "menu-trigger", "aria-haspopup": "menu", "aria-controls": `${props.id}-panel`, children: props.trigger ?? props.label }), _jsx("div", { "data-ui": "menu-panel", id: `${props.id}-panel`, role: "menu", "aria-label": props.label, children: each(props.items, (item) => item.id, (item) => {
-                if (item.kind === 'separator')
-                    return _jsx("hr", { "data-ui": "menu-separator" });
-                if (item.kind === 'label')
-                    return (_jsx("span", { "data-ui": "menu-label", role: "presentation", children: item.label }));
-                const role = item.checked === undefined ? 'menuitem' : 'menuitemcheckbox';
-                const content = (_jsxs(_Fragment, { children: [item.checked !== undefined && (_jsx("span", { "data-ui": "menu-item-check", "aria-hidden": "true", children: item.checked ? '✓' : '' })), item.leading !== undefined && (_jsx("span", { "data-ui": "menu-item-leading", "aria-hidden": "true", children: item.leading })), _jsxs("span", { "data-ui": "menu-item-copy", children: [_jsx("span", { children: item.label }), item.description && _jsx("small", { children: item.description })] }), item.shortcut && _jsx("kbd", { "data-ui": "menu-item-shortcut", children: item.shortcut })] }));
-                if (item.disabled)
-                    return (_jsx("span", { "data-ui": "menu-item", role: role, "aria-checked": item.checked === undefined ? null : String(item.checked), "aria-disabled": "true", tabIndex: "-1", children: content }));
-                if (item.href)
-                    return (_jsx("a", { "data-ui": "menu-item", "data-destructive": item.destructive ? 'true' : null, role: role, "aria-checked": item.checked === undefined ? null : String(item.checked), href: item.href, children: content }));
-                return (_jsx("button", { "data-ui": "menu-item", "data-destructive": item.destructive ? 'true' : null, role: role, "aria-checked": item.checked === undefined ? null : String(item.checked), type: "submit", name: item.name ?? 'intent', value: item.value ?? item.id, form: item.form ?? null, children: content }));
-            }) })] }));
+export const Menu = (props) => (_jsxs("details", { "data-ui": "menu", "data-align": props.align ?? 'start', "data-size": props.size === 'compact' ? 'compact' : null, "data-active": props.count ? 'true' : null, "data-placement": props.placement ?? 'bottom', open: props.open === true ? true : undefined, children: [_jsxs("summary", { "data-ui": "menu-trigger", "aria-haspopup": "menu", "aria-controls": `${props.id}-panel`, "aria-label": props.trigger !== undefined ? props.label : undefined, title: props.trigger !== undefined ? props.label : undefined, children: [props.trigger ?? props.label, !!props.count && _jsx("span", { "data-ui": "menu-trigger-count", children: String(props.count) })] }), _jsxs("div", { "data-ui": "menu-panel", id: `${props.id}-panel`, role: "menu", "aria-label": props.label, children: [props.search && (_jsxs("form", { "data-ui": "menu-search", role: "search", method: "get", action: props.search.action, children: [each(Object.entries(props.search.hidden ?? {}), ([name]) => name, ([name, value]) => (_jsx("input", { type: "hidden", name: name, value: value }))), _jsx("input", { "data-ui": "menu-search-input", type: "search", name: props.search.name, value: props.search.value ?? '', placeholder: props.search.placeholder ?? props.search.label, "aria-label": props.search.label, autocomplete: "off" })] })), each(props.items, (item) => item.id, (item) => {
+                    if (item.kind === 'separator')
+                        return _jsx("hr", { "data-ui": "menu-separator" });
+                    if (item.kind === 'label')
+                        return (_jsx("span", { "data-ui": "menu-label", role: "presentation", children: item.label }));
+                    const role = item.checked === undefined ? 'menuitem' : 'menuitemcheckbox';
+                    const content = (_jsxs(_Fragment, { children: [item.checked !== undefined && (_jsx("span", { "data-ui": "menu-item-check", "aria-hidden": "true", children: item.checked ? '✓' : '' })), item.leading !== undefined && (_jsx("span", { "data-ui": "menu-item-leading", "aria-hidden": "true", children: item.leading })), _jsxs("span", { "data-ui": "menu-item-copy", children: [_jsx("span", { children: item.label }), item.description && _jsx("small", { children: item.description })] }), item.shortcut && _jsx("kbd", { "data-ui": "menu-item-shortcut", children: item.shortcut })] }));
+                    if (item.disabled)
+                        return (_jsx("span", { "data-ui": "menu-item", role: role, "aria-checked": item.checked === undefined ? null : String(item.checked), "aria-disabled": "true", tabIndex: "-1", children: content }));
+                    if (item.href)
+                        return (_jsx("a", { "data-ui": "menu-item", "data-destructive": item.destructive ? 'true' : null, role: role, "aria-checked": item.checked === undefined ? null : String(item.checked), href: item.href, children: content }));
+                    return (_jsx("button", { "data-ui": "menu-item", "data-destructive": item.destructive ? 'true' : null, role: role, "aria-checked": item.checked === undefined ? null : String(item.checked), type: "submit", name: item.name ?? 'intent', value: item.value ?? item.id, form: item.form ?? null, children: content }));
+                })] })] }));
 export const ActionMenu = (props) => (_jsx(Menu, { ...props, trigger: _jsxs("span", { children: [props.triggerLabel ?? props.label, " \u00B7\u00B7\u00B7"] }), align: props.align ?? 'end' }));
 //# sourceMappingURL=index.js.map

package/dist/interactions/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/menu/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/menu/index.tsx"],"names":[],"mappings":"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"}

package/dist/interactions/menu/styles.css

@@ -20,6 +20,53 @@
     list-style: none;
   }
 
+  /* In a row of list facets: their height, their shape, their active colour. */
+  :where([data-kv-design-system]) [data-ui="menu"][data-size="compact"] [data-ui="menu-trigger"] {
+    min-height: var(--kv-control-height-compact);
+    gap: var(--kv-space-1);
+    padding: 0 var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu"][data-active="true"] [data-ui="menu-trigger"] {
+    border-color: var(--kv-color-accent);
+    background: var(--kv-color-accent-soft);
+    color: var(--kv-color-accent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-trigger-count"] {
+    display: inline-grid;
+    min-width: 1.125rem;
+    padding: 0 var(--kv-space-1);
+    border-radius: var(--kv-radius-full);
+    background: var(--kv-color-accent);
+    color: var(--kv-color-on-accent);
+    font-size: var(--kv-text-xs);
+    line-height: 1.5;
+    place-items: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-search"] {
+    position: sticky;
+    top: calc(-1 * var(--kv-space-1));
+    z-index: 1;
+    padding: var(--kv-space-1);
+    margin: calc(-1 * var(--kv-space-1)) calc(-1 * var(--kv-space-1)) var(--kv-space-1);
+    border-bottom: 1px solid var(--kv-color-line);
+    background: var(--kv-panel-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-search-input"] {
+    width: 100%;
+    min-height: var(--kv-control-height-compact);
+    padding: 0 var(--kv-space-2);
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-input-bg);
+    color: var(--kv-text-main);
+    font: inherit;
+    font-size: var(--kv-text-sm);
+  }
+
   :where([data-kv-design-system]) [data-ui="menu-trigger"]::-webkit-details-marker {
     display: none;
   }
@@ -63,6 +110,11 @@
     left: auto;
   }
 
+  :where([data-kv-design-system]) [data-ui="menu"][data-placement="top"] [data-ui="menu-panel"] {
+    top: auto;
+    bottom: calc(100% + var(--kv-space-1));
+  }
+
   :where([data-kv-design-system]) [data-ui="menu-item"] {
     display: flex;
     width: 100%;
@@ -102,7 +154,7 @@
 
   :where([data-kv-design-system]) :is([data-ui="menu-item-leading"], [data-ui="menu-item-check"]) {
     display: inline-grid;
-    width: 1rem;
+    min-width: 1rem;
     flex: none;
     place-items: center;
   }

package/dist/layouts/app-navigation/styles.css

@@ -171,6 +171,15 @@
     color: var(--kv-text-main);
   }
 
+  /* Root sections read one weight step above their children: the section list is
+     the page's primary navigation, the children are its detail. */
+  :where([data-kv-design-system])
+  :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]):not(
+    [data-ui="navigation-children"] *
+  ) {
+    font-weight: var(--kv-weight-medium);
+  }
+
   :where([data-kv-design-system]) [data-ui="navigation-item"][data-active="true"] {
     border-color: var(--kv-border-default);
     background: var(--kv-accent-subtle);

package/dist/patterns/data-table/styles.css

@@ -77,10 +77,11 @@
     vertical-align: middle;
   }
 
+  /* Selection controls sit at the table's text size, not the 16px native default. */
   :where([data-kv-design-system]) [data-ui="table-scroll"][data-pattern="data-table"] [data-ui="select-all"],
   :where([data-kv-design-system]) [data-ui="table-scroll"][data-pattern="data-table"] [data-ui="row-select"] {
-    width: 1rem;
-    height: 1rem;
+    width: 0.875rem;
+    height: 0.875rem;
     margin: 0;
     accent-color: var(--kv-color-accent);
   }
@@ -326,6 +327,18 @@
     z-index: 1;
   }
 
+  /* A row that is itself a link may still carry its own controls — a milestone
+     that opens one tab of the record, a per-row action. The row link's overlay
+     covers the whole row, so anything else a reader can press has to sit above
+     it or the row swallows the click. */
+  :where([data-kv-design-system])
+    [data-ui="table-scroll"][data-pattern="data-table"]
+    [data-ui="cell"]
+    :is(a, button, summary, input, select, textarea):not([data-ui="row-link"]) {
+    position: relative;
+    z-index: 1;
+  }
+
   :where([data-kv-design-system])
     [data-ui="table-scroll"][data-pattern="data-table"]
     [data-ui="row"]:focus-within {

package/dist/patterns/list-chrome/index.d.ts

@@ -63,6 +63,11 @@ export type PagerBarProps = {
 };
 export type ListChromeProps = {
     filtersLabel?: string;
+    /**
+     * Filters that pick from a list rather than toggle — a compact `Menu` each.
+     * They lead the facet row, at the facets' height.
+     */
+    filterMenus?: JSXChild;
     viewsLabel?: string;
     search?: ListSearch;
     facets?: readonly ListFacet[];
@@ -73,7 +78,7 @@ export type ListChromeProps = {
     bulk?: BulkActionsProps;
     pager?: PagerBarProps;
 };
-export declare const HOOKS: readonly ['list-chrome', 'list-chrome-row', 'list-search', 'list-search-label', 'list-search-input', 'list-search-submit', 'list-facets', 'list-facet', 'list-facet-count', 'list-view-switch', 'list-view', 'list-sort', 'list-sort-label', 'list-sort-select', 'list-status', 'list-actions', 'bulk-actions', 'bulk-summary', 'bulk-count', 'bulk-action-list', 'pager-bar', 'pager-summary', 'pager-pages', 'pager-page', 'pager-actions', 'pager-link'];
+export declare const HOOKS: readonly ['list-chrome', 'list-chrome-row', 'list-search', 'list-search-label', 'list-search-input', 'list-search-submit', 'list-filter-menus', 'list-facets', 'list-facet', 'list-facet-count', 'list-view-switch', 'list-view', 'list-sort', 'list-sort-label', 'list-sort-select', 'list-status', 'list-actions', 'bulk-actions', 'bulk-summary', 'bulk-count', 'bulk-action-list', 'pager-bar', 'pager-summary', 'pager-pages', 'pager-page', 'pager-actions', 'pager-link'];
 export declare const BulkActions: (props: BulkActionsProps) => TemplateResult;
 export declare const PagerBar: (props: PagerBarProps) => TemplateResult;
 export declare const ListChrome: (props: ListChromeProps) => TemplateResult;

package/dist/patterns/list-chrome/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/list-chrome/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/list-chrome/index.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/list-chrome/index.js

@@ -8,6 +8,7 @@ export const HOOKS = [
     'list-search-label',
     'list-search-input',
     'list-search-submit',
+    'list-filter-menus',
     'list-facets',
     'list-facet',
     'list-facet-count',
@@ -38,7 +39,10 @@ const SortControl = (props) => (_jsxs("form", { "data-ui": "list-sort", action:
 export const BulkActions = (props) => (_jsxs("div", { "data-ui": "bulk-actions", "data-form": props.form ?? null, "data-has-selection": props.selectedCount && props.selectedCount > 0 ? 'true' : null, children: [_jsxs("div", { "data-ui": "bulk-summary", children: [props.summary ?? (_jsxs(_Fragment, { children: [_jsx("span", { "data-ui": "bulk-count", children: String(props.selectedCount ?? 0) }), " selected"] })), props.clearHref && (_jsx(LinkButton, { href: props.clearHref, label: props.clearLabel ?? 'Clear', variant: "tertiary", size: "compact" }))] }), _jsx("div", { "data-ui": "bulk-action-list", children: each(props.actions, (action) => action.id, (action) => (_jsx(Button, { type: "submit", form: props.form ?? null, name: action.name, value: action.value, label: action.label, variant: action.variant ?? 'secondary', size: "compact", disabled: action.disabled === true || !(props.selectedCount && props.selectedCount > 0) }))) })] }));
 export const PagerBar = (props) => (_jsxs("nav", { "data-ui": "pager-bar", "aria-label": props.label ?? 'Pagination', children: [props.summary !== undefined && _jsx("span", { "data-ui": "pager-summary", children: props.summary }), props.pages && props.pages.length > 0 && (_jsx("span", { "data-ui": "pager-pages", children: each(props.pages, (page) => page.href, (page) => (_jsx("a", { "data-ui": "pager-page", "data-active": page.active === true ? 'true' : null, href: page.href, "aria-current": page.active === true ? 'page' : null, children: page.label }))) })), _jsxs("span", { "data-ui": "pager-actions", children: [props.previousHref ? (_jsx("a", { "data-ui": "pager-link", href: props.previousHref, rel: "prev", "aria-label": props.previousLabel ?? 'Previous page', children: "\u2039" })) : (_jsx("span", { "data-ui": "pager-link", "data-disabled": "true", "aria-hidden": "true", children: "\u2039" })), props.nextHref ? (_jsx("a", { "data-ui": "pager-link", href: props.nextHref, rel: "next", "aria-label": props.nextLabel ?? 'Next page', children: "\u203A" })) : (_jsx("span", { "data-ui": "pager-link", "data-disabled": "true", "aria-hidden": "true", children: "\u203A" }))] })] }));
 export const ListChrome = (props) => {
-    const filters = (props.facets?.length ?? 0) > 0 || (props.views?.length ?? 0) > 0 || props.sort ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "filters", children: [props.facets && props.facets.length > 0 && (_jsx(FacetNav, { label: props.filtersLabel ?? 'Filters', ui: "list-facets", itemUi: "list-facet", items: props.facets })), props.views && props.views.length > 0 && (_jsx(FacetNav, { label: props.viewsLabel ?? 'Views', ui: "list-view-switch", itemUi: "list-view", items: props.views })), props.sort && _jsx(SortControl, { ...props.sort })] })) : null;
+    const filters = props.filterMenus !== undefined ||
+        (props.facets?.length ?? 0) > 0 ||
+        (props.views?.length ?? 0) > 0 ||
+        props.sort ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "filters", children: [props.filterMenus !== undefined && _jsx("div", { "data-ui": "list-filter-menus", children: props.filterMenus }), props.facets && props.facets.length > 0 && (_jsx(FacetNav, { label: props.filtersLabel ?? 'Filters', ui: "list-facets", itemUi: "list-facet", items: props.facets })), props.views && props.views.length > 0 && (_jsx(FacetNav, { label: props.viewsLabel ?? 'Views', ui: "list-view-switch", itemUi: "list-view", items: props.views })), props.sort && _jsx(SortControl, { ...props.sort })] })) : null;
     const meta = props.status !== undefined || props.actions !== undefined || props.pager ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "meta", children: [props.status !== undefined && _jsx("div", { "data-ui": "list-status", children: props.status }), props.actions !== undefined && _jsx("div", { "data-ui": "list-actions", children: props.actions }), props.pager && _jsx(PagerBar, { ...props.pager })] })) : null;
     const tail = filters || meta ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "tail", children: [filters, meta] })) : null;
     return (_jsxs("div", { "data-ui": "list-chrome", "data-pattern": "list-chrome", children: [_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "query", children: [props.search && _jsx(SearchControl, { ...props.search }), tail] }), props.bulk && _jsx(BulkActions, { ...props.bulk })] }));

package/dist/patterns/list-chrome/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/list-chrome/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/list-chrome/index.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/list-chrome/styles.css

@@ -36,6 +36,15 @@
     min-width: 0;
   }
 
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-filter-menus"] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
   :where([data-kv-design-system])
     [data-ui="list-chrome"][data-pattern="list-chrome"]
     [data-ui="list-chrome-row"][data-row="tail"] {

package/dist/patterns/modal-sheet/index.d.ts

@@ -1,5 +1,5 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['modal-layer', 'modal-backdrop', 'modal-sheet', 'modal-head', 'modal-heading', 'modal-title', 'modal-description', 'modal-close', 'modal-body', 'modal-actions'];
+export declare const HOOKS: readonly ['modal-layer', 'modal-backdrop', 'modal-sheet', 'modal-head', 'modal-heading', 'modal-title-row', 'modal-title', 'modal-description', 'modal-close', 'modal-body', 'modal-actions'];
 export declare const ModalSheet: (props: {
     id: string;
     title: string;
@@ -8,9 +8,31 @@ export declare const ModalSheet: (props: {
     closeHref?: string;
     closeLabel: string;
     description?: string | null;
+    /**
+     * What state the thing in this dialog is in, beside its title — a badge, not a
+     * sentence. It belongs to the heading, so it stays put when the body scrolls
+     * and is read out with the title rather than after it.
+     */
+    status?: JSXChild;
     actions?: JSXChild;
     presentation?: 'sheet' | 'dialog';
     size?: 'default' | 'large';
+    /**
+     * `content` (default) lets a dialog grow with its body up to the viewport cap. `fixed`
+     * holds the dialog at that cap so switching between tabs of different heights does not
+     * resize it; the body scrolls inside while the head stays put.
+     */
+    height?: 'content' | 'fixed';
+    /**
+     * Overrides `fixed`'s height (default: the viewport cap, `100dvh` minus a margin —
+     * tall on most screens). A CSS length or `calc()`/`min()` expression, for a dialog
+     * whose own content is shorter than the viewport and would otherwise sit in a mostly
+     * empty frame. Set inline with `!important`, not as a plain CSS rule: a legacy
+     * admin stylesheet (`packages/ketsuite/src/modules/backend/design/forms.css`)
+     * still targets these same `data-ui` hooks at equal specificity and would
+     * otherwise win the cascade by loading later. Ignored when `height` isn't `fixed`.
+     */
+    fixedHeight?: string;
     /**
      * `overlay` is URL-owned: its close controls are links the route runtime
      * follows. `client` belongs to a modal island that opens and closes it in the

package/dist/patterns/modal-sheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/modal-sheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,CACP,CAAA;AAEV,eAAO,MAAM,UAAU,UAAW;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAA;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,KAAG,cAmEH,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/modal-sheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,CACP,CAAA;AAEV,eAAO,MAAM,UAAU,UAAW;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC5B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAA;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,KAAG,cAwEH,CAAA"}

package/dist/patterns/modal-sheet/index.js

@@ -5,6 +5,7 @@ export const HOOKS = [
     'modal-sheet',
     'modal-head',
     'modal-heading',
+    'modal-title-row',
     'modal-title',
     'modal-description',
     'modal-close',
@@ -14,6 +15,6 @@ export const HOOKS = [
 export const ModalSheet = (props) => {
     const client = props.mode === 'client';
     const embedded = props.mode === 'embedded';
-    return (_jsxs("div", { "data-ui": "modal-layer", "data-mode": props.mode ?? 'overlay', "data-route-modal": embedded || client ? null : 'true', "data-client-modal": client ? 'true' : null, "data-presentation": props.presentation ?? 'sheet', "data-unsaved-prompt": props.unsavedPrompt ?? null, children: [client ? (_jsx("button", { "data-ui": "modal-backdrop", type: "button", "aria-label": props.closeLabel, tabindex: "-1", children: _jsx("span", { children: props.closeLabel }) })) : (_jsx("a", { "data-ui": "modal-backdrop", href: props.closeHref ?? '#', "aria-label": props.closeLabel, children: _jsx("span", { children: props.closeLabel }) })), _jsxs("section", { id: props.id, "data-ui": "modal-sheet", "data-size": props.size ?? 'default', role: "dialog", "aria-modal": embedded ? 'false' : 'true', "aria-labelledby": `${props.id}-title`, "aria-describedby": props.description ? `${props.id}-description` : null, tabindex: embedded ? null : '-1', children: [_jsxs("header", { "data-ui": "modal-head", children: [_jsxs("div", { "data-ui": "modal-heading", children: [_jsx("h2", { "data-ui": "modal-title", id: `${props.id}-title`, children: props.title }), !!props.description && (_jsx("p", { "data-ui": "modal-description", id: `${props.id}-description`, children: props.description }))] }), client ? (_jsx("button", { "data-ui": "modal-close", type: "button", "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" })) : (_jsx("a", { "data-ui": "modal-close", href: props.closeHref ?? '#', "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" }))] }), _jsx("div", { "data-ui": "modal-body", children: props.body }), props.actions !== undefined && _jsx("footer", { "data-ui": "modal-actions", children: props.actions })] })] }));
+    return (_jsxs("div", { "data-ui": "modal-layer", "data-mode": props.mode ?? 'overlay', "data-route-modal": embedded || client ? null : 'true', "data-client-modal": client ? 'true' : null, "data-presentation": props.presentation ?? 'sheet', "data-unsaved-prompt": props.unsavedPrompt ?? null, children: [client ? (_jsx("button", { "data-ui": "modal-backdrop", type: "button", "aria-label": props.closeLabel, tabindex: "-1", children: _jsx("span", { children: props.closeLabel }) })) : (_jsx("a", { "data-ui": "modal-backdrop", href: props.closeHref ?? '#', "aria-label": props.closeLabel, children: _jsx("span", { children: props.closeLabel }) })), _jsxs("section", { id: props.id, "data-ui": "modal-sheet", "data-size": props.size ?? 'default', "data-height": props.height === 'fixed' ? 'fixed' : null, style: props.height === 'fixed' && props.fixedHeight ? `height: ${props.fixedHeight} !important` : '', role: "dialog", "aria-modal": embedded ? 'false' : 'true', "aria-labelledby": `${props.id}-title`, "aria-describedby": props.description ? `${props.id}-description` : null, tabindex: embedded ? null : '-1', children: [_jsxs("header", { "data-ui": "modal-head", children: [_jsxs("div", { "data-ui": "modal-heading", children: [_jsxs("div", { "data-ui": "modal-title-row", children: [_jsx("h2", { "data-ui": "modal-title", id: `${props.id}-title`, children: props.title }), props.status !== undefined && props.status] }), !!props.description && (_jsx("p", { "data-ui": "modal-description", id: `${props.id}-description`, children: props.description }))] }), client ? (_jsx("button", { "data-ui": "modal-close", type: "button", "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" })) : (_jsx("a", { "data-ui": "modal-close", href: props.closeHref ?? '#', "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" }))] }), _jsx("div", { "data-ui": "modal-body", children: props.body }), props.actions !== undefined && _jsx("footer", { "data-ui": "modal-actions", children: props.actions })] })] }));
 };
 //# sourceMappingURL=index.js.map

package/dist/patterns/modal-sheet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/modal-sheet/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,YAAY;IACZ,eAAe;IACf,aAAa;IACb,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,eAAe;CACP,CAAA;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAmB1B,EAAkB,EAAE;IACnB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAA;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAA;IAC1C,OAAO,CACL,0BACU,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,sBAChB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,uBACjC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,uBACtB,KAAK,CAAC,YAAY,IAAI,OAAO,yBAC3B,KAAK,CAAC,aAAa,IAAI,IAAI,aAE/C,MAAM,CAAC,CAAC,CAAC,CACR,4BAAgB,gBAAgB,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAC,IAAI,YACxF,yBAAO,KAAK,CAAC,UAAU,GAAQ,GACxB,CACV,CAAC,CAAC,CAAC,CACF,uBAAW,gBAAgB,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG,gBAAc,KAAK,CAAC,UAAU,YACpF,yBAAO,KAAK,CAAC,UAAU,GAAQ,GAC7B,CACL,EACD,mBACE,EAAE,EAAE,KAAK,CAAC,EAAE,aACJ,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,qBACtB,GAAG,KAAK,CAAC,EAAE,QAAQ,sBAClB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,EACtE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,aAEhC,6BAAgB,YAAY,aAC1B,0BAAa,eAAe,aAC1B,wBAAY,aAAa,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,QAAQ,YAC9C,KAAK,CAAC,KAAK,GACT,EACJ,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,CACtB,uBAAW,mBAAmB,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,cAAc,YACzD,KAAK,CAAC,WAAW,GAChB,CACL,IACG,EACL,MAAM,CAAC,CAAC,CAAC,CACR,4BACU,aAAa,EACrB,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,UAAU,uBAGhB,CACV,CAAC,CAAC,CAAC,CACF,uBACU,aAAa,EACrB,IAAI,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG,gBAChB,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,UAAU,uBAGrB,CACL,IACM,EACT,yBAAa,YAAY,YAAE,KAAK,CAAC,IAAI,GAAO,EAC3C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,4BAAgB,eAAe,YAAE,KAAK,CAAC,OAAO,GAAU,IAChF,IACN,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/modal-sheet/index.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/modal-sheet/styles.css

@@ -90,6 +90,13 @@
     height: auto;
   }
 
+  /* A tabbed dialog keeps one height so switching tabs never resizes it; the body scrolls. */
+  :where([data-kv-design-system])
+    [data-ui="modal-layer"][data-presentation="dialog"]
+    [data-ui="modal-sheet"][data-height="fixed"] {
+    height: calc(100dvh - var(--kv-space-12));
+  }
+
   :where([data-kv-design-system]) [data-ui="modal-layer"][data-mode="embedded"] [data-ui="modal-sheet"] {
     width: min(34rem, 100%);
     height: auto;
@@ -115,6 +122,14 @@
     gap: var(--kv-space-1);
   }
 
+  /* The title and what state its record is in read as one line. */
+  :where([data-kv-design-system]) [data-ui="modal-title-row"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
   :where([data-kv-design-system]) [data-ui="modal-title"] {
     min-width: 0;
     margin: 0;
@@ -141,11 +156,15 @@
     width: 2rem;
     height: 2rem;
     place-items: center;
+    appearance: none;
+    border: none;
     border-radius: 50%;
+    background: none;
     color: var(--kv-color-ink-muted);
     font-size: 1.4rem;
     line-height: 1;
     text-decoration: none;
+    cursor: pointer;
   }
 
   :where([data-kv-design-system]) [data-ui="modal-close"]:hover {
@@ -160,6 +179,12 @@
     overscroll-behavior: contain;
   }
 
+  /* TabbedView owns the scroll container so its navigation stays visible. */
+  :where([data-kv-design-system]) [data-ui="modal-body"]:has(> [data-ui="tabbed-view"]) {
+    min-height: 0;
+    overflow: hidden;
+  }
+
   :where([data-kv-design-system]) [data-ui="modal-actions"] {
     display: flex;
     flex-wrap: wrap;

package/dist/primitives/feedback/styles.css

@@ -1,10 +1,17 @@
 @layer ket.app {
+  /*
+   * One line by default — an icon, then title and message flowing together as
+   * a single sentence ("Saved: the change is in."), not a heading over a
+   * paragraph. `notice-copy` wraps on its own when a message is genuinely too
+   * long for the width available, so nothing is lost for a longer error list;
+   * it just stops reading as "one line" for that one case.
+   */
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    gap: var(--kv-space-3);
-    align-items: start;
-    padding: var(--kv-space-3) var(--kv-space-4);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-1) var(--kv-space-2);
+    padding: var(--kv-space-2) var(--kv-space-3);
     border: 1px solid var(--kv-color-line);
     border-left: 3px solid var(--kv-color-info);
     border-radius: var(--kv-radius-sm);
@@ -28,15 +35,16 @@
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-mark"] {
     display: inline-flex;
-    width: 1.25rem;
-    height: calc(var(--kv-text-base) * var(--kv-leading-normal));
+    flex: none;
+    width: 1rem;
+    height: 1rem;
     align-items: center;
     color: var(--kv-color-info);
   }
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-mark"] svg {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: 1rem;
+    height: 1rem;
   }
 
   :where([data-kv-design-system])
@@ -58,24 +66,36 @@
   }
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-copy"] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 0.3em;
     min-width: 0;
   }
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-title"] {
-    margin-bottom: var(--kv-space-1);
-    font-size: var(--kv-text-base);
+    margin: 0;
+    color: var(--kv-color-ink);
+    font-size: var(--kv-text-sm);
     font-weight: var(--kv-weight-semibold);
     line-height: var(--kv-leading-normal);
   }
 
+  :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-title"]::after {
+    content: ":";
+  }
+
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-message"] {
-    margin-bottom: 0;
+    margin: 0;
     color: var(--kv-color-ink-secondary);
     font-size: var(--kv-text-sm);
+    line-height: var(--kv-leading-normal);
   }
 
   :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-actions"] {
-    align-self: center;
+    flex: none;
+    margin-left: auto;
   }
 
   :where([data-kv-design-system]) [data-ui="empty"] {
@@ -131,12 +151,11 @@
   }
 
   @media (max-width: 42rem) {
-    :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] {
-      grid-template-columns: auto minmax(0, 1fr);
-    }
-
+    /* Flex-wrap already reflows icon/copy/actions onto their own lines as
+       needed; only the auto margin — meant to pin actions to the far end of
+       a shared row — needs to give way once actions wrap onto a row alone. */
     :where([data-kv-design-system]) [data-ui="notice"][data-pattern="notice"] [data-ui="notice-actions"] {
-      grid-column: 1 / -1;
+      margin-left: 0;
     }
   }
 }

package/dist/primitives/field/index.d.ts

@@ -27,6 +27,11 @@ export type FieldProps = {
     help?: string | null;
     error?: string | null;
     options?: readonly FieldOption[];
+    /**
+     * How checkbox-group and radio options flow. `horizontal` (default) wraps them on a line; `vertical` lists
+     * one option per line under the shared label, for choices whose labels should scan as a column.
+     */
+    optionsOrientation?: 'horizontal' | 'vertical';
     span?: 'half' | 'full';
     step?: string | null;
     autocomplete?: string | null;

package/dist/primitives/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAItE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,OAAO,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAID,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cAgLzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAItE,eAAO,MAAM,KAAK,YAChB,OAAO,EACP,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,aAAa,CACL,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,6EAA6E;IAC7E,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EACD,MAAM,GACN,OAAO,GACP,KAAK,GACL,QAAQ,GACR,SAAS,GACT,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,OAAO,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAChC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B,CAAA;AAID,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cA0LzC,CAAA"}

package/dist/primitives/field/index.js

@@ -26,9 +26,9 @@ export const Field = (props) => {
                             readOnly: props.readOnly || field.readOnly,
                         })), (field) => field.id, (field) => (_jsx(Field, { ...field }))) }) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
     if (props.type === 'checkbox-group')
-        return (_jsxs("div", { "data-ui": "field", "data-kind": "checkbox-group", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", role: "group", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.name ?? option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "checkbox", name: option.name ?? `${props.name}[]`, value: option.value, checked: option.checked === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
+        return (_jsxs("div", { "data-ui": "field", "data-kind": "checkbox-group", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", "data-orientation": props.optionsOrientation === 'vertical' ? 'vertical' : null, role: "group", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.name ?? option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "checkbox", name: option.name ?? `${props.name}[]`, value: option.value, checked: option.checked === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
     if (props.type === 'radio')
-        return (_jsxs("div", { "data-ui": "field", "data-kind": "radio", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", role: "radiogroup", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "radio", name: props.name, value: option.value, checked: String(props.value ?? '') === option.value, required: props.required === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
+        return (_jsxs("div", { "data-ui": "field", "data-kind": "radio", "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), children: [_jsxs("span", { "data-ui": "field-label", id: `${props.id}-label`, children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }), _jsx("div", { "data-ui": "field-options", "data-orientation": props.optionsOrientation === 'vertical' ? 'vertical' : null, role: "radiogroup", "aria-labelledby": `${props.id}-label`, children: each(props.options ?? [], (option) => option.value, (option) => (_jsxs("label", { "data-ui": "field-option", children: [_jsx("input", { "data-ui": "field-option-input", type: "radio", name: props.name, value: option.value, checked: String(props.value ?? '') === option.value, required: props.required === true, disabled: props.disabled === true || option.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: "off" }), _jsx("span", { children: option.label })] }))) }), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
     return (_jsxs("label", { "data-ui": "field", "data-kind": props.type ?? 'text', "data-span": props.span ?? 'half', "data-invalid": String(!!props.error), for: props.id, children: [props.type === 'checkbox' && NativeFieldControl(props, describedBy), label, props.type !== 'checkbox' && NativeFieldControl(props, describedBy), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
 };
 //# sourceMappingURL=index.js.map