@ketvietlab/design-system 0.1.16 → 0.1.17

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

@@ -1,19 +1,24 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['breadcrumbs', 'breadcrumb', 'nav-list', 'nav-item', 'nav-item-leading', 'nav-item-label', 'nav-item-count', 'tabs', 'tab', 'tab-count'];
+export declare const HOOKS: readonly ['breadcrumbs', 'breadcrumb', 'breadcrumb-overflow', 'breadcrumb-overflow-trigger', 'breadcrumb-overflow-list', 'nav-list', 'nav-item', 'nav-item-leading', 'nav-item-label', 'nav-item-count', 'tabs', 'tab', 'tab-count'];
 export type BreadcrumbItem = {
     id?: string;
     label: string;
     href?: string;
 };
-export declare const Breadcrumbs: (props: {
+export type BreadcrumbsProps = {
     label: string;
     items: readonly BreadcrumbItem[];
-}) => TemplateResult;
+    /** Keep the first and current locations visible; put intermediate ancestors in a native disclosure. */
+    maxItems?: number;
+    /** Accessible label for the collapsed ancestor trigger, supplied in the application's locale. */
+    overflowLabel?: string;
+};
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => TemplateResult;
 export type NavItemProps = {
     label: string;
     href: string;
     leading?: JSXChild;
-    count?: number;
+    count?: number | string;
     active?: boolean;
 };
 export declare const NavItem: (props: NavItemProps) => TemplateResult;
@@ -25,7 +30,8 @@ export type TabItem = {
     id: string;
     label: string;
     href: string;
-    count?: number;
+    /** A number, or a bounded label such as "10.000+" when the exact total is not counted. */
+    count?: number | string;
     active?: boolean;
 };
 export declare const Tabs: (props: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/navigation/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,YAAY,EACZ,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,KAAK,EACL,WAAW,CACH,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,WAAW,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;CAAE,KAAG,cAkBxF,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,OAAO,UAAW,YAAY,KAAG,cAe7C,CAAA;AAED,eAAO,MAAM,OAAO,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,KAAG,cAUlF,CAAA;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,SAAS,CAAC,EAAE,QAAQ,CAAA;CACrB,KAAG,cAmBH,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/navigation/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,6BAA6B,EAC7B,0BAA0B,EAC1B,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,KAAK,EACL,WAAW,CACH,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAQD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,cAAc,EAAE,CAAA;IAChC,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,cA0DrD,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,OAAO,UAAW,YAAY,KAAG,cAe7C,CAAA;AAED,eAAO,MAAM,OAAO,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAAE,KAAG,cAUlF,CAAA;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,SAAS,CAAC,EAAE,QAAQ,CAAA;CACrB,KAAG,cAmBH,CAAA"}

package/dist/primitives/navigation/index.js

@@ -3,6 +3,9 @@ import { each } from '@ketvietlab/ketjs-view';
 export const HOOKS = [
     'breadcrumbs',
     'breadcrumb',
+    'breadcrumb-overflow',
+    'breadcrumb-overflow-trigger',
+    'breadcrumb-overflow-list',
     'nav-list',
     'nav-item',
     'nav-item-leading',
@@ -12,8 +15,20 @@ export const HOOKS = [
     'tab',
     'tab-count',
 ];
-export const Breadcrumbs = (props) => (_jsx("nav", { "data-ui": "breadcrumbs", "aria-label": props.label, children: _jsx("ol", { children: each(props.items, (item, index) => item.id ?? `${index}:${item.label}`, (item, index) => (_jsx("li", { "data-ui": "breadcrumb", children: item.href !== undefined && index < props.items.length - 1 ? (_jsx("a", { href: item.href, children: item.label })) : (_jsx("span", { "aria-current": index === props.items.length - 1 ? 'page' : null, children: item.label })) }))) }) }));
+export const Breadcrumbs = (props) => {
+    const limit = Math.max(3, Math.floor(props.maxItems ?? props.items.length));
+    const overflow = props.items.length > limit;
+    const omitted = overflow ? props.items.slice(1, props.items.length - (limit - 2)) : [];
+    const visible = overflow
+        ? [
+            props.items[0],
+            { id: '__breadcrumb-overflow', kind: 'overflow', items: omitted },
+            ...props.items.slice(props.items.length - (limit - 2)),
+        ]
+        : props.items;
+    return (_jsx("nav", { "data-ui": "breadcrumbs", "data-pattern": "breadcrumbs", "aria-label": props.label, children: _jsx("ol", { children: each(visible, (item, index) => item.id ?? `${index}:${'label' in item ? item.label : 'overflow'}`, (item, index) => 'kind' in item ? (_jsx("li", { "data-ui": "breadcrumb-overflow", children: _jsxs("details", { children: [_jsx("summary", { "data-ui": "breadcrumb-overflow-trigger", "aria-label": props.overflowLabel ?? props.label, children: "\u2026" }), _jsx("ol", { "data-ui": "breadcrumb-overflow-list", children: each(item.items, (ancestor, ancestorIndex) => ancestor.id ?? `${ancestorIndex}:${ancestor.label}`, (ancestor) => (_jsx("li", { children: ancestor.href ? (_jsx("a", { href: ancestor.href, children: ancestor.label })) : (_jsx("span", { children: ancestor.label })) }))) })] }) })) : (_jsx("li", { "data-ui": "breadcrumb", children: item.href !== undefined && index < visible.length - 1 ? (_jsx("a", { href: item.href, children: item.label })) : (_jsx("span", { "aria-current": index === visible.length - 1 ? 'page' : null, children: item.label })) }))) }) }));
+};
 export const NavItem = (props) => (_jsxs("a", { "data-ui": "nav-item", "data-active": props.active === true ? 'true' : null, href: props.href, "aria-current": props.active === true ? 'page' : null, children: [props.leading !== undefined && (_jsx("span", { "data-ui": "nav-item-leading", "aria-hidden": "true", children: props.leading })), _jsx("span", { "data-ui": "nav-item-label", children: props.label }), props.count !== undefined && _jsx("span", { "data-ui": "nav-item-count", children: String(props.count) })] }));
 export const NavList = (props) => (_jsx("nav", { "data-ui": "nav-list", "aria-label": props.label, children: each(props.items, (item) => `${item.href}:${item.label}`, (item) => (_jsx(NavItem, { ...item }))) }));
-export const Tabs = (props) => (_jsxs("nav", { "data-ui": "tabs", "aria-label": props.label, children: [each(props.items, (item) => item.id, (item) => (_jsxs("a", { "data-ui": "tab", "data-active": item.active === true ? 'true' : null, href: item.href, "aria-current": item.active === true ? 'page' : null, children: [item.label, item.count !== undefined && _jsx("span", { "data-ui": "tab-count", children: String(item.count) })] }))), props.extension] }));
+export const Tabs = (props) => (_jsxs("nav", { "data-ui": "tabs", "data-pattern": "tabs", "aria-label": props.label, children: [each(props.items, (item) => item.id, (item) => (_jsxs("a", { "data-ui": "tab", "data-active": item.active === true ? 'true' : null, href: item.href, "aria-current": item.active === true ? 'page' : null, children: [item.label, item.count !== undefined && _jsx("span", { "data-ui": "tab-count", children: String(item.count) })] }))), props.extension] }));
 //# sourceMappingURL=index.js.map

package/dist/primitives/navigation/index.js.map

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

package/dist/primitives/navigation/styles.css

@@ -1,9 +1,9 @@
 @layer ket.app {
-  :where([data-kv-design-system]) [data-ui="breadcrumbs"] {
+  :where([data-kv-design-system]) [data-ui="breadcrumbs"][data-pattern="breadcrumbs"] {
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumbs"] ol {
+  :where([data-kv-design-system]) [data-ui="breadcrumbs"][data-pattern="breadcrumbs"] ol {
     display: flex;
     min-width: 0;
     align-items: center;
@@ -15,37 +15,114 @@
     list-style: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumb"] {
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    :is([data-ui="breadcrumb"], [data-ui="breadcrumb-overflow"]) {
     display: inline-flex;
     min-width: 0;
     align-items: center;
     gap: var(--kv-space-1-5);
+    color: inherit;
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumb"] + [data-ui="breadcrumb"]::before {
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    :is([data-ui="breadcrumb"], [data-ui="breadcrumb-overflow"])
+    + :is([data-ui="breadcrumb"], [data-ui="breadcrumb-overflow"])::before {
     flex: none;
     color: var(--kv-border-strong);
     content: "/";
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumb"] :is(a, span) {
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow"] {
+    position: relative;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow"] details {
+    position: relative;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-trigger"] {
+    display: grid;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    place-items: center;
+    border-radius: var(--kv-radius-sm);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-trigger"]::-webkit-details-marker {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-trigger"]:hover {
+    background: var(--kv-interactive-hover);
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-list"] {
+    position: absolute;
+    z-index: var(--kv-layer-menu);
+    top: calc(100% + var(--kv-space-1));
+    left: 0;
+    display: grid;
+    width: max-content;
+    max-width: min(20rem, calc(100vw - var(--kv-space-8)));
+    gap: var(--kv-space-0-5);
+    padding: var(--kv-space-1);
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
+    box-shadow: var(--kv-shadow-popover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-list"] li {
+    display: contents;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-list"] :is(a, span) {
+    display: block;
+    padding: var(--kv-space-2) var(--kv-space-3);
+    border-radius: var(--kv-radius-sm);
+    color: var(--kv-text-main);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb-overflow-list"] a:hover {
+    background: var(--kv-interactive-hover);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    [data-ui="breadcrumb"]
+    :is(a, span) {
     overflow: hidden;
     color: inherit;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumb"] a {
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    [data-ui="breadcrumb"]
+    a {
     text-decoration: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumb"] a:hover {
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    [data-ui="breadcrumb"]
+    a:hover {
     color: var(--kv-text-main);
     text-decoration: underline;
     text-underline-offset: 0.1875rem;
   }
 
-  :where([data-kv-design-system]) [data-ui="breadcrumb"] [aria-current="page"] {
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    [data-ui="breadcrumb"]
+    [aria-current="page"] {
     color: var(--kv-text-main);
     font-weight: var(--kv-weight-medium);
   }
@@ -107,7 +184,7 @@
     opacity: 0.72;
   }
 
-  :where([data-kv-design-system]) [data-ui="tabs"] {
+  :where([data-kv-design-system]) [data-ui="tabs"][data-pattern="tabs"] {
     display: flex;
     min-height: var(--kv-table-header-height);
     align-items: center;
@@ -116,28 +193,33 @@
     overflow-x: auto;
   }
 
-  :where([data-kv-design-system]) [data-ui="tab"] {
+  :where([data-kv-design-system]) [data-ui="tabs"][data-pattern="tabs"] [data-ui="tab"] {
     position: relative;
     display: inline-flex;
     height: var(--kv-table-header-height);
     flex: none;
     align-items: center;
     gap: var(--kv-space-1-5);
+    padding: 0;
+    border: 0;
+    background: transparent;
     color: var(--kv-text-muted);
     font-size: var(--kv-text-sm);
     font-weight: var(--kv-weight-medium);
     text-decoration: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="tab"]:hover {
+  :where([data-kv-design-system]) [data-ui="tabs"][data-pattern="tabs"] [data-ui="tab"]:hover {
     color: var(--kv-text-secondary);
   }
 
-  :where([data-kv-design-system]) [data-ui="tab"][data-active="true"] {
+  :where([data-kv-design-system]) [data-ui="tabs"][data-pattern="tabs"] [data-ui="tab"][data-active="true"] {
     color: var(--kv-tab-active-text);
   }
 
-  :where([data-kv-design-system]) [data-ui="tab"][data-active="true"]::after {
+  :where([data-kv-design-system])
+    [data-ui="tabs"][data-pattern="tabs"]
+    [data-ui="tab"][data-active="true"]::after {
     position: absolute;
     right: 0;
     bottom: -1px;
@@ -147,4 +229,10 @@
     background: var(--kv-accent);
     content: "";
   }
+
+  :where([data-kv-design-system])
+    [data-ui="breadcrumbs"][data-pattern="breadcrumbs"]
+    [data-ui="breadcrumb"]::after {
+    content: none;
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAE7F,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEzE,eAAO,MAAM,KAAK,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAI7E,CAAA;AAED,eAAO,MAAM,GAAG,UAAW;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,KAAG,cAIpE,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAMvC,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAItF,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAIxE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAE7F,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEzE,eAAO,MAAM,KAAK,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAS7E,CAAA;AAED,eAAO,MAAM,GAAG,UAAW;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,KAAG,cAIpE,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAMvC,CAAA;AAED,eAAO,MAAM,MAAM,UAAW;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAUtF,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAIxE,CAAA"}

package/dist/primitives/status/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
 export const HOOKS = ['badge', 'tag', 'tag-remove', 'count-badge', 'avatar', 'code'];
-export const Badge = (props) => (_jsx("span", { "data-ui": "badge", "data-tone": props.tone ?? 'neutral', "data-value": props.value ?? '', children: props.label }));
+export const Badge = (props) => (_jsx("span", { "data-ui": "badge", "data-pattern": "badge", "data-tone": props.tone ?? 'neutral', "data-value": props.value ?? '', children: props.label }));
 export const Tag = (props) => (_jsxs("span", { "data-ui": "tag", children: [props.label, !!props.removeHref && (_jsx("a", { "data-ui": "tag-remove", href: props.removeHref, "aria-label": props.removeLabel ?? `Remove ${props.label}`, children: "\u00D7" }))] }));
 export const CountBadge = (props) => (_jsx("span", { "data-ui": "count-badge", role: "status", "aria-label": props.label, children: String(props.count) }));
 export const initials = (name) => {
@@ -11,6 +11,6 @@ export const initials = (name) => {
     const second = parts.length > 2 ? parts[parts.length - 2] : '';
     return (second.slice(0, 1) + first.slice(0, 1)).toLocaleUpperCase('vi');
 };
-export const Avatar = (props) => (_jsx("span", { "data-ui": "avatar", "data-size": props.size ?? 'default', title: props.name, "aria-hidden": "true", children: initials(props.name) }));
+export const Avatar = (props) => (_jsx("span", { "data-ui": "avatar", "data-pattern": "avatar", "data-size": props.size ?? 'default', title: props.name, "aria-hidden": "true", children: initials(props.name) }));
 export const Code = (props) => (_jsx("code", { "data-ui": "code", "data-context": props.context ?? null, children: props.value }));
 //# sourceMappingURL=index.js.map

package/dist/primitives/status/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAI7F,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAqD,EAAkB,EAAE,CAAC,CAC9F,0BAAc,OAAO,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,gBAAc,KAAK,CAAC,KAAK,IAAI,EAAE,YACpF,KAAK,CAAC,KAAK,GACP,CACR,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAInB,EAAkB,EAAE,CAAC,CACpB,2BAAc,KAAK,aAChB,KAAK,CAAC,KAAK,EACX,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CACrB,uBACU,YAAY,EACpB,IAAI,EAAE,KAAK,CAAC,UAAU,gBACV,KAAK,CAAC,WAAW,IAAI,UAAU,KAAK,CAAC,KAAK,EAAE,uBAGtD,CACL,IACI,CACR,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAkB,EAAE,CAAC,CACrF,0BAAc,aAAa,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YAC9D,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACf,CACR,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,CAAA;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CACvG,0BAAc,QAAQ,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,iBAAc,MAAM,YAC7F,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAChB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAiD,EAAkB,EAAE,CAAC,CACzF,0BAAc,MAAM,kBAAe,KAAK,CAAC,OAAO,IAAI,IAAI,YACrD,KAAK,CAAC,KAAK,GACP,CACR,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/status/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAA;AAI7F,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAqD,EAAkB,EAAE,CAAC,CAC9F,0BACU,OAAO,kBACF,OAAO,eACT,KAAK,CAAC,IAAI,IAAI,SAAS,gBACtB,KAAK,CAAC,KAAK,IAAI,EAAE,YAE5B,KAAK,CAAC,KAAK,GACP,CACR,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,KAInB,EAAkB,EAAE,CAAC,CACpB,2BAAc,KAAK,aAChB,KAAK,CAAC,KAAK,EACX,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CACrB,uBACU,YAAY,EACpB,IAAI,EAAE,KAAK,CAAC,UAAU,gBACV,KAAK,CAAC,WAAW,IAAI,UAAU,KAAK,CAAC,KAAK,EAAE,uBAGtD,CACL,IACI,CACR,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAuC,EAAkB,EAAE,CAAC,CACrF,0BAAc,aAAa,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YAC9D,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GACf,CACR,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;IAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtD,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IAC7B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAE,CAAA;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC/D,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CACvG,0BACU,QAAQ,kBACH,QAAQ,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,KAAK,EAAE,KAAK,CAAC,IAAI,iBACL,MAAM,YAEjB,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,GAChB,CACR,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAiD,EAAkB,EAAE,CAAC,CACzF,0BAAc,MAAM,kBAAe,KAAK,CAAC,OAAO,IAAI,IAAI,YACrD,KAAK,CAAC,KAAK,GACP,CACR,CAAA"}

package/dist/primitives/status/styles.css

@@ -1,5 +1,5 @@
 @layer ket.app {
-  :where([data-kv-design-system]) [data-ui="badge"] {
+  :where([data-kv-design-system]) [data-ui="badge"][data-pattern="badge"] {
     display: inline-flex;
     min-height: 1.4rem;
     align-items: center;
@@ -16,22 +16,22 @@
     overflow-wrap: anywhere;
   }
 
-  :where([data-kv-design-system]) [data-ui="badge"][data-tone="info"] {
+  :where([data-kv-design-system]) [data-ui="badge"][data-pattern="badge"][data-tone="info"] {
     background: var(--kv-color-info-soft);
     color: var(--kv-color-info);
   }
 
-  :where([data-kv-design-system]) [data-ui="badge"][data-tone="positive"] {
+  :where([data-kv-design-system]) [data-ui="badge"][data-pattern="badge"][data-tone="positive"] {
     background: var(--kv-color-positive-soft);
     color: var(--kv-color-positive);
   }
 
-  :where([data-kv-design-system]) [data-ui="badge"][data-tone="warning"] {
+  :where([data-kv-design-system]) [data-ui="badge"][data-pattern="badge"][data-tone="warning"] {
     background: var(--kv-color-warning-soft);
     color: var(--kv-color-warning);
   }
 
-  :where([data-kv-design-system]) [data-ui="badge"][data-tone="danger"] {
+  :where([data-kv-design-system]) [data-ui="badge"][data-pattern="badge"][data-tone="danger"] {
     background: var(--kv-color-danger-soft);
     color: var(--kv-color-danger);
   }
@@ -78,7 +78,7 @@
     font-weight: 800;
   }
 
-  :where([data-kv-design-system]) [data-ui="avatar"] {
+  :where([data-kv-design-system]) [data-ui="avatar"][data-pattern="avatar"] {
     display: inline-grid;
     width: 2rem;
     height: 2rem;
@@ -91,12 +91,12 @@
     font-weight: 800;
   }
 
-  :where([data-kv-design-system]) [data-ui="avatar"][data-size="small"] {
+  :where([data-kv-design-system]) [data-ui="avatar"][data-pattern="avatar"][data-size="small"] {
     width: 1.5rem;
     height: 1.5rem;
   }
 
-  :where([data-kv-design-system]) [data-ui="avatar"][data-size="large"] {
+  :where([data-kv-design-system]) [data-ui="avatar"][data-pattern="avatar"][data-size="large"] {
     width: 3rem;
     height: 3rem;
     font-size: var(--kv-text-sm);

package/dist/record/display/index.js

@@ -13,7 +13,7 @@ export const HOOKS = [
 ];
 export const KeyValue = (props) => (_jsxs("div", { "data-ui": "key-value", children: [_jsx("dt", { "data-ui": "key-value-label", children: props.label }), _jsx("dd", { "data-ui": "key-value-value", children: props.value ?? props.emptyLabel ?? '—' })] }));
 export const DescriptionList = (props) => (_jsx("dl", { "data-ui": "description-list", "aria-label": props.label, "data-columns": String(props.columns ?? 2), children: each(props.items, (item) => item.id, (item) => (_jsx(KeyValue, { ...item }))) }));
-export const Person = (props) => (_jsxs("span", { "data-ui": "person", children: [_jsx(Avatar, { name: props.name, size: props.size }), _jsxs("span", { "data-ui": "person-body", children: [props.href ? _jsx("a", { href: props.href, children: props.name }) : _jsx("strong", { children: props.name }), props.detail !== undefined && _jsx("small", { children: props.detail })] })] }));
+export const Person = (props) => (_jsxs("span", { "data-ui": "person", "data-pattern": "person", children: [_jsx(Avatar, { name: props.name, size: props.size }), _jsxs("span", { "data-ui": "person-body", children: [props.href ? _jsx("a", { href: props.href, children: props.name }) : _jsx("strong", { children: props.name }), props.detail !== undefined && _jsx("small", { children: props.detail })] })] }));
 export const AvatarGroup = (props) => {
     const visible = props.people.slice(0, props.max ?? 4);
     const remaining = props.people.length - visible.length;

package/dist/record/display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kCAAmC,CAAA;AAGjE,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,kBAAkB;IAClB,WAAW;IACX,iBAAiB;IACjB,iBAAiB;IACjB,QAAQ;IACR,aAAa;IACb,cAAc;IACd,QAAQ;CACA,CAAA;AAGV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,CAChE,0BAAa,WAAW,aACtB,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAM,EAChD,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,IAAI,GAAG,GAAM,IACvE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAI/B,EAAkB,EAAE,CAAC,CACpB,wBAAY,kBAAkB,gBAAa,KAAK,CAAC,KAAK,kBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,YAC7F,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,KAAC,QAAQ,OAAK,IAAI,GAAI,CACvB,CACF,GACE,CACN,CAAA;AAQD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAkB,EAAE,CAAC,CAC5D,2BAAc,QAAQ,aACpB,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,EAC9C,2BAAc,aAAa,aACxB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,IAAI,GAAK,CAAC,CAAC,CAAC,2BAAS,KAAK,CAAC,IAAI,GAAU,EAClF,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,0BAAQ,KAAK,CAAC,MAAM,GAAS,IACvD,IACF,CACR,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAI3B,EAAkB,EAAE;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACtD,OAAO,CACL,2BAAc,cAAc,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,KAAK,aAC9D,IAAI,CACH,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EACrB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAC9B,CACF,EACA,SAAS,GAAG,CAAC,IAAI,CAChB,gBAAM,IAAI,EAAC,KAAK,gBAAa,GAAG,SAAS,cAAc,EAAE,KAAK,EAAE,GAAG,SAAS,cAAc,kBACtF,MAAM,CAAC,SAAS,CAAC,IACd,CACR,IACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsD,EAAkB,EAAE,CAAC,CAChG,0BAAc,QAAQ,EAAC,KAAK,EAAE,KAAK,CAAC,MAAM,YACxC,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,GAC1C,CACR,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/record/display/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kCAAmC,CAAA;AAGjE,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,kBAAkB;IAClB,WAAW;IACX,iBAAiB;IACjB,iBAAiB;IACjB,QAAQ;IACR,aAAa;IACb,cAAc;IACd,QAAQ;CACA,CAAA;AAGV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE,CAAC,CAChE,0BAAa,WAAW,aACtB,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAM,EAChD,wBAAY,iBAAiB,YAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,UAAU,IAAI,GAAG,GAAM,IACvE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAI/B,EAAkB,EAAE,CAAC,CACpB,wBAAY,kBAAkB,gBAAa,KAAK,CAAC,KAAK,kBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,YAC7F,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,KAAC,QAAQ,OAAK,IAAI,GAAI,CACvB,CACF,GACE,CACN,CAAA;AAQD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAkB,EAAE,CAAC,CAC5D,2BAAc,QAAQ,kBAAc,QAAQ,aAC1C,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,EAC9C,2BAAc,aAAa,aACxB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,IAAI,GAAK,CAAC,CAAC,CAAC,2BAAS,KAAK,CAAC,IAAI,GAAU,EAClF,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,0BAAQ,KAAK,CAAC,MAAM,GAAS,IACvD,IACF,CACR,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAI3B,EAAkB,EAAE;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAA;IACrD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACtD,OAAO,CACL,2BAAc,cAAc,EAAC,IAAI,EAAC,OAAO,gBAAa,KAAK,CAAC,KAAK,aAC9D,IAAI,CACH,OAAO,EACP,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EACrB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,GAAI,CAC9B,CACF,EACA,SAAS,GAAG,CAAC,IAAI,CAChB,gBAAM,IAAI,EAAC,KAAK,gBAAa,GAAG,SAAS,cAAc,EAAE,KAAK,EAAE,GAAG,SAAS,cAAc,kBACtF,MAAM,CAAC,SAAS,CAAC,IACd,CACR,IACI,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAsD,EAAkB,EAAE,CAAC,CAChG,0BAAc,QAAQ,EAAC,KAAK,EAAE,KAAK,CAAC,MAAM,YACxC,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,GAAI,GAC1C,CACR,CAAA"}

package/dist/record/display/styles.css

@@ -31,13 +31,13 @@
     overflow-wrap: anywhere;
   }
 
-  :where([data-kv-design-system]) [data-ui="person"] {
+  :where([data-kv-design-system]) [data-ui="person"][data-pattern="person"] {
     display: inline-flex;
     align-items: center;
     gap: var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="person-body"] {
+  :where([data-kv-design-system]) [data-ui="person"][data-pattern="person"] [data-ui="person-body"] {
     display: grid;
     gap: 1px;
   }

package/dist/runtime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/runtime/index.js"],"names":[],"mappings":"AAsBA;;;;;;GAMG;AACH,eAAO,MAAM,8BAA8B,UAHhC,UAAU,KACR,MAAM,IAyVlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/runtime/index.js"],"names":[],"mappings":"AAsBA;;;;;;GAMG;AACH,eAAO,MAAM,8BAA8B,UAHhC,UAAU,KACR,MAAM,IAwblB,CAAA"}

package/dist/runtime/index.js

@@ -38,6 +38,21 @@ export const attachDesignSystemInteractions = (root = document) => {
     ;(first instanceof HTMLElement ? first : modal).focus()
   }
 
+  const menus = /** @type {HTMLDetailsElement[]} */ (
+    [...root.querySelectorAll('[data-ui="menu"]')].filter((menu) => menu instanceof HTMLDetailsElement)
+  )
+  /** @param {HTMLDetailsElement} menu */
+  const syncMenu = (menu) => {
+    const trigger = menu.querySelector('[data-ui="menu-trigger"]')
+    if (trigger instanceof HTMLElement) trigger.setAttribute('aria-expanded', String(menu.open))
+  }
+  const menuCleanups = menus.map((menu) => {
+    const onToggle = () => syncMenu(menu)
+    menu.addEventListener('toggle', onToggle)
+    syncMenu(menu)
+    return () => menu.removeEventListener('toggle', onToggle)
+  })
+
   const navigationMedia = window.matchMedia('(max-width: 48rem)')
   const navigationRoot = document.documentElement
   const priorNavigationOpen = navigationRoot.dataset.kvNavigationOpen
@@ -284,13 +299,33 @@ export const attachDesignSystemInteractions = (root = document) => {
         return
       }
     }
+    const activeMenu = document.activeElement?.closest('[data-ui="menu"]')
+    if (activeMenu instanceof HTMLDetailsElement && !activeMenu.open) {
+      const trigger = activeMenu.querySelector('[data-ui="menu-trigger"]')
+      if (document.activeElement === trigger && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        activeMenu.open = true
+        const items = /** @type {HTMLElement[]} */ (
+          [
+            ...activeMenu.querySelectorAll(
+              '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]',
+            ),
+          ].filter((item) => item instanceof HTMLElement && item.getAttribute('aria-disabled') !== 'true')
+        )
+        const item = event.key === 'ArrowUp' ? items.at(-1) : items[0]
+        if (item instanceof HTMLElement) item.focus()
+        event.preventDefault()
+        return
+      }
+    }
     const openMenu = document.activeElement?.closest('[data-ui="menu"][open]')
     if (openMenu instanceof HTMLDetailsElement) {
       const trigger = openMenu.querySelector('[data-ui="menu-trigger"]')
       const items = /** @type {HTMLElement[]} */ (
-        [...openMenu.querySelectorAll('[role="menuitem"]')].filter(
-          (item) => item instanceof HTMLElement && item.getAttribute('aria-disabled') !== 'true',
-        )
+        [
+          ...openMenu.querySelectorAll(
+            '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]',
+          ),
+        ].filter((item) => item instanceof HTMLElement && item.getAttribute('aria-disabled') !== 'true')
       )
       const active = document.activeElement
       const activeIndex = active instanceof HTMLElement ? items.indexOf(active) : -1
@@ -349,12 +384,70 @@ export const attachDesignSystemInteractions = (root = document) => {
       if (first instanceof HTMLElement) first.focus()
     }
   }
+  /**
+   * Table selection. `select-all` toggles the enabled row checkboxes of its own table, a row
+   * change keeps the header checked or indeterminate, and every bulk bar bound to the same form
+   * (`data-form`) shows the live count and enables its actions only while something is selected.
+   *
+   * @param {Element} table
+   */
+  const syncSelection = (table) => {
+    const rows = /** @type {HTMLInputElement[]} */ (
+      [...table.querySelectorAll('[data-ui="row-select"]')].filter(
+        (input) => input instanceof HTMLInputElement && !input.disabled,
+      )
+    )
+    const checked = rows.filter((input) => input.checked)
+    const all = table.querySelector('[data-ui="select-all"]')
+    if (all instanceof HTMLInputElement) {
+      all.checked = rows.length > 0 && checked.length === rows.length
+      all.indeterminate = checked.length > 0 && checked.length < rows.length
+    }
+    for (const input of rows)
+      input.closest('[data-ui="row"]')?.toggleAttribute('data-selected', input.checked)
+    const form = rows[0]?.getAttribute('form')
+    if (!form) return
+    for (const bar of document.querySelectorAll(
+      `[data-ui="bulk-actions"][data-form="${CSS.escape(form)}"]`,
+    )) {
+      if (checked.length) bar.setAttribute('data-has-selection', 'true')
+      else bar.removeAttribute('data-has-selection')
+      for (const count of bar.querySelectorAll('[data-ui="bulk-count"]'))
+        count.textContent = String(checked.length)
+      for (const button of bar.querySelectorAll('[data-ui="bulk-action-list"] button')) {
+        if (button instanceof HTMLButtonElement && button.dataset.kvAlwaysDisabled !== 'true')
+          button.disabled = checked.length === 0
+      }
+    }
+  }
+  /** @param {Event} event */
+  const onSelectionChange = (event) => {
+    const target = event.target
+    if (!(target instanceof HTMLInputElement)) return
+    const hook = target.getAttribute('data-ui')
+    if (hook !== 'select-all' && hook !== 'row-select') return
+    const table = target.closest('[data-ui="table"]')
+    if (!table) return
+    if (hook === 'select-all') {
+      for (const input of table.querySelectorAll('[data-ui="row-select"]')) {
+        if (input instanceof HTMLInputElement && !input.disabled) input.checked = target.checked
+      }
+    }
+    syncSelection(table)
+  }
+  for (const table of root.querySelectorAll('[data-ui="table"]')) {
+    if (table.querySelector('[data-ui="row-select"]')) syncSelection(table)
+  }
+  document.addEventListener('change', onSelectionChange)
+
   /** @param {MouseEvent} event */
   const onDocumentClick = (event) => {
     const target = event.target
     if (!(target instanceof Node)) return
     for (const menu of root.querySelectorAll('[data-ui="menu"][open]')) {
-      if (menu instanceof HTMLDetailsElement && !menu.contains(target)) menu.open = false
+      if (!(menu instanceof HTMLDetailsElement)) continue
+      const item = target instanceof Element ? target.closest('[data-ui="menu-item"]') : null
+      if (!menu.contains(target) || (item && item.getAttribute('aria-disabled') !== 'true')) menu.open = false
     }
   }
   document.addEventListener('keydown', onKeydown)
@@ -363,6 +456,8 @@ export const attachDesignSystemInteractions = (root = document) => {
   return () => {
     document.removeEventListener('keydown', onKeydown)
     document.removeEventListener('click', onDocumentClick)
+    document.removeEventListener('change', onSelectionChange)
+    for (const cleanup of menuCleanups) cleanup()
     navigationMedia.removeEventListener('change', onNavigationMediaChange)
     for (const cleanup of navigationCleanups) cleanup()
     if (priorNavigationOpen === undefined) delete navigationRoot.dataset.kvNavigationOpen