@ketvietlab/design-system 0.1.12 → 0.1.14

package/dist/layouts/app-navigation/index.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'app-navigation',
+    'navigation-trigger',
+    'navigation-trigger-icon',
+    'navigation-trigger-identity',
+    'navigation-trigger-label',
+    'navigation-layer',
+    'navigation-backdrop',
+    'navigation-drawer',
+    'navigation-header',
+    'navigation-identity',
+    'navigation-context',
+    'navigation-close',
+    'navigation-groups',
+    'navigation-group',
+    'navigation-group-label',
+    'navigation-items',
+    'navigation-supplementary',
+    'navigation-item',
+    'navigation-branch',
+    'navigation-branch-trigger',
+    'navigation-children',
+    'navigation-item-leading',
+    'navigation-item-copy',
+    'navigation-item-label',
+    'navigation-item-description',
+    'navigation-item-count',
+    'navigation-footer',
+];
+export const NavigationTrigger = (props) => (_jsxs("summary", { "data-ui": "navigation-trigger", "aria-controls": props.controls, "data-open": props.open === true ? 'true' : 'false', children: [_jsxs("span", { "data-ui": "navigation-trigger-icon", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { "data-ui": "navigation-trigger-identity", children: props.identity }), _jsx("span", { "data-ui": "navigation-trigger-label", children: props.label })] }));
+export const NavigationHeader = (props) => (_jsxs("header", { "data-ui": "navigation-header", children: [_jsxs("div", { children: [_jsx("div", { "data-ui": "navigation-identity", children: props.identity }), props.context !== undefined && _jsx("div", { "data-ui": "navigation-context", children: props.context })] }), _jsx("button", { "data-ui": "navigation-close", type: "button", "aria-label": props.closeLabel, children: _jsx("span", { "aria-hidden": "true" }) })] }));
+const NavigationItemContent = (props) => (_jsxs(_Fragment, { children: [props.item.leading !== undefined && (_jsx("span", { "data-ui": "navigation-item-leading", "aria-hidden": "true", children: props.item.leading })), _jsxs("span", { "data-ui": "navigation-item-copy", children: [_jsx("span", { "data-ui": "navigation-item-label", children: props.item.label }), props.item.description !== undefined && (_jsx("span", { "data-ui": "navigation-item-description", children: props.item.description }))] }), props.item.count !== undefined && (_jsx("span", { "data-ui": "navigation-item-count", children: String(props.item.count) }))] }));
+const hasActiveItem = (item) => item.active === true || item.children?.some(hasActiveItem) === true;
+const renderNavigationItem = (props, branchGroup, level) => {
+    if (props.children !== undefined) {
+        const open = props.expanded === true || hasActiveItem(props);
+        return (_jsxs("details", { "data-ui": "navigation-branch", "data-level": String(level), name: branchGroup, open: open, children: [_jsx("summary", { "data-ui": "navigation-branch-trigger", children: _jsx(NavigationItemContent, { item: props }) }), _jsx("div", { "data-ui": "navigation-children", "data-level": String(level + 1), children: each(props.children, (item) => item.id, (item) => renderNavigationItem(item, `${props.id}-branches`, level + 1)) })] }));
+    }
+    return (_jsx("a", { "data-ui": "navigation-item", "data-active": props.active === true ? 'true' : null, "data-level": String(level), href: props.href, "aria-current": props.active === true ? 'page' : null, children: _jsx(NavigationItemContent, { item: props }) }));
+};
+export const NavigationItem = (props) => (_jsx(_Fragment, { children: renderNavigationItem(props, `${props.id}-root-branches`, 1) }));
+export const NavigationGroup = (props) => (_jsxs("section", { "data-ui": "navigation-group", "aria-labelledby": props.label ? `${props.id}-label` : null, children: [props.label !== undefined && (_jsx("h2", { "data-ui": "navigation-group-label", id: `${props.id}-label`, children: props.label })), _jsx("div", { "data-ui": "navigation-items", children: each(props.items, (item) => item.id, (item) => renderNavigationItem(item, props.branchGroup ?? `${props.id}-branches`, 1)) })] }));
+export const NavigationDrawer = (props) => (_jsxs("div", { "data-ui": "navigation-layer", children: [_jsx("button", { "data-ui": "navigation-backdrop", type: "button", "aria-label": props.closeLabel, tabIndex: -1 }), _jsxs("div", { "data-ui": "navigation-drawer", id: props.id, "data-navigation-label": props.label, tabIndex: -1, children: [_jsx(NavigationHeader, { identity: props.identity, context: props.context, closeLabel: props.closeLabel }), _jsxs("nav", { "data-ui": "navigation-groups", "aria-label": props.label, "data-ket-slot": props.navigationSlot, children: [each(props.groups, (group) => group.id, (group) => (_jsx(NavigationGroup, { ...group, id: `${props.id}-${group.id}`, branchGroup: `${props.id}-branches` }))), props.supplementary !== undefined && (_jsx("div", { "data-ui": "navigation-supplementary", children: props.supplementary }))] }), props.footer !== undefined && _jsx("footer", { "data-ui": "navigation-footer", children: props.footer })] })] }));
+export const AppNavigation = (props) => {
+    const drawerId = `${props.id}-drawer`;
+    const closeLabel = props.closeLabel ?? 'Close navigation';
+    return (_jsxs("details", { "data-ui": "app-navigation", "data-navigation-id": props.id, open: props.open === true, children: [_jsx(NavigationTrigger, { controls: drawerId, label: props.menuLabel ?? 'Menu', identity: props.identity, open: props.open }), _jsx(NavigationDrawer, { id: drawerId, label: props.label, identity: props.identity, groups: props.groups, context: props.context, supplementary: props.supplementary, footer: props.footer, navigationSlot: props.navigationSlot, closeLabel: closeLabel })] }));
+};
+//# sourceMappingURL=index.js.map

package/dist/layouts/app-navigation/index.js.map

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

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

@@ -0,0 +1,355 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="app-navigation"] {
+    position: relative;
+    height: 100%;
+    min-height: 100%;
+    overflow: hidden;
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) details[data-ui="app-navigation"]::details-content {
+    content-visibility: visible;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-trigger"] {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-layer"],
+  :where([data-kv-design-system]) [data-ui="navigation-drawer"] {
+    height: 100%;
+    min-height: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-layer"] {
+    position: absolute;
+    inset: 0;
+  }
+
+  :where([data-kv-design-system])
+    details[data-ui="app-navigation"]:not([open])
+    > [data-ui="navigation-layer"] {
+    display: block;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-backdrop"] {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-drawer"] {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    background: var(--kv-sidebar-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-header"] {
+    display: flex;
+    min-height: 3.5rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kv-space-3);
+    padding: var(--kv-space-3);
+    border-bottom: 1px solid var(--kv-sidebar-border);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-header"] > div {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-identity"] {
+    font-size: var(--kv-text-base);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: -0.01em;
+    line-height: var(--kv-leading-tight);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-context"] {
+    margin-top: var(--kv-space-1);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    line-height: var(--kv-leading-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-close"] {
+    display: none;
+    width: var(--kv-density-control-height);
+    height: var(--kv-density-control-height);
+    place-items: center;
+    padding: 0;
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-sm);
+    background: transparent;
+    color: var(--kv-text-secondary);
+    cursor: pointer;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-close"] > span,
+  :where([data-kv-design-system]) [data-ui="navigation-close"] > span::after {
+    display: block;
+    width: 0.875rem;
+    height: 1px;
+    background: currentcolor;
+    content: "";
+    transform: rotate(45deg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-close"] > span::after {
+    transform: rotate(90deg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-groups"] {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--kv-space-5);
+    padding: var(--kv-space-2) var(--kv-space-2) var(--kv-space-3);
+    overflow-y: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-group"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-supplementary"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-group-label"] {
+    margin: 0 0 var(--kv-space-1-5);
+    padding-inline: var(--kv-space-2);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0.075em;
+    line-height: var(--kv-leading-normal);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-items"] {
+    display: grid;
+    gap: var(--kv-space-0-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-branch"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]) {
+    display: grid;
+    width: 100%;
+    min-height: var(--kv-sidebar-item-height);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-2-5);
+    padding: var(--kv-space-1) var(--kv-space-2);
+    border: 1px solid transparent;
+    border-radius: var(--kv-radius-sm);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-md);
+    line-height: var(--kv-leading-tight);
+    text-decoration: none;
+    cursor: pointer;
+    list-style: none;
+    transition:
+      color var(--kv-motion-fast),
+      background var(--kv-motion-fast),
+      border-color var(--kv-motion-fast);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-branch-trigger"]::-webkit-details-marker {
+    display: none;
+  }
+
+  :where([data-kv-design-system])
+    :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]):hover {
+    background: var(--kv-surface-hover);
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item"][data-active="true"] {
+    border-color: var(--kv-border-default);
+    background: var(--kv-accent-subtle);
+    color: var(--kv-text-main);
+    font-weight: var(--kv-weight-medium);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-children"] {
+    display: grid;
+    gap: var(--kv-space-0-5);
+    padding: var(--kv-space-0-5) 0 var(--kv-space-1) var(--kv-space-5);
+    margin-left: var(--kv-space-3);
+    border-left: 1px solid var(--kv-sidebar-border);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="navigation-children"]
+    :is([data-ui="navigation-item"], [data-ui="navigation-branch-trigger"]) {
+    min-height: var(--kv-control-height-sm);
+    padding: var(--kv-space-0-5) var(--kv-space-2);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-children"][data-level="3"] {
+    padding-left: var(--kv-space-3);
+    margin-left: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-leading"] {
+    display: grid;
+    width: var(--kv-space-5);
+    place-items: center;
+    color: var(--kv-text-muted);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-copy"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-0-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-label"],
+  :where([data-kv-design-system]) [data-ui="navigation-item-description"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-description"] {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-item-count"] {
+    min-width: var(--kv-space-5);
+    padding: var(--kv-space-0-5) var(--kv-space-1-5);
+    border-radius: var(--kv-radius-full);
+    background: var(--kv-panel-bg-subtle);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-2xs);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="navigation-footer"] {
+    padding: var(--kv-space-3) var(--kv-space-4);
+    border-top: 1px solid var(--kv-sidebar-border);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  @media (max-width: 48rem) {
+    :where([data-kv-design-system]) [data-ui="app-navigation"] {
+      height: auto;
+      min-height: 0;
+      overflow: visible;
+    }
+
+    :where([data-kv-design-system]) details[data-ui="app-navigation"]:not([open])::details-content {
+      content-visibility: hidden;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger"] {
+      display: flex;
+      min-height: 3.25rem;
+      align-items: center;
+      gap: var(--kv-space-2-5);
+      padding: var(--kv-space-3) var(--kv-space-4);
+      color: var(--kv-text-main);
+      cursor: pointer;
+      font-size: var(--kv-text-sm);
+      font-weight: var(--kv-weight-semibold);
+      list-style: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger"]::-webkit-details-marker {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-identity"] {
+      min-width: 0;
+      overflow: hidden;
+      font-size: var(--kv-text-base);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-label"] {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-icon"] {
+      display: grid;
+      width: var(--kv-space-4);
+      gap: var(--kv-space-1);
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-trigger-icon"] > span {
+      display: block;
+      height: 1px;
+      background: currentcolor;
+    }
+
+    :where([data-kv-design-system])
+      details[data-ui="app-navigation"]:not([open])
+      > [data-ui="navigation-layer"] {
+      display: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-layer"] {
+      position: fixed;
+      z-index: var(--kv-layer-dialog);
+      inset: 0;
+      display: grid;
+      min-height: 0;
+      height: auto;
+      grid-template-columns: min(20rem, 86vw) minmax(0, 1fr);
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-backdrop"] {
+      display: block;
+      grid-column: 2;
+      padding: 0;
+      border: 0;
+      background: rgb(15 16 18 / 58%);
+      cursor: pointer;
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-drawer"] {
+      grid-column: 1;
+      height: 100dvh;
+      min-height: 100dvh;
+      box-shadow: var(--kv-shadow-float);
+      animation: kv-navigation-enter var(--kv-motion-normal);
+    }
+
+    :where([data-kv-design-system]) [data-ui="navigation-close"] {
+      display: grid;
+    }
+  }
+
+  @keyframes kv-navigation-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/dist/layouts/app-navigation.d.ts

@@ -0,0 +1,2 @@
+export * from './app-navigation/index.tsx';
+//# sourceMappingURL=app-navigation.d.ts.map

package/dist/layouts/app-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-navigation.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/app-navigation.tsx"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

package/dist/layouts/app-navigation.js

@@ -0,0 +1,2 @@
+export * from './app-navigation/index.js';
+//# sourceMappingURL=app-navigation.js.map

package/dist/layouts/app-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-navigation.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/app-navigation.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA4B,CAAA"}

package/dist/layouts/grouped/styles.css

@@ -30,7 +30,6 @@
   }
 
   [data-kv-design-system][data-presentation="grouped"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
-    color-scheme: light;
     --kv-page-chrome-bg: var(--kv-page-bg);
     color: var(--kv-text-main);
   }
@@ -92,18 +91,18 @@
   }
 
   [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
+    margin: var(--kv-space-3) var(--kv-space-3) var(--kv-space-3) 0;
     padding: var(--kv-space-3);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
   }
 
   [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] > [data-ui="stack"] {
     gap: var(--kv-space-3);
   }
 
-  [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
-    background: var(--kv-panel-bg);
-  }
-
-  /* The context column already owns its white background. */
+  /* The context surface already owns its background. */
   [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] [data-ui="metric"] {
     padding: 0;
     min-height: 0;
@@ -112,6 +111,12 @@
     background: transparent;
   }
 
+  @media (max-width: 63.9375rem) {
+    [data-kv-design-system][data-presentation="grouped"] [data-ui="record-page-aside"] {
+      margin: 0 var(--kv-space-3) var(--kv-space-3);
+    }
+  }
+
   [data-kv-design-system][data-presentation="grouped"] [data-ui="surface"] [data-ui="disclosure"] {
     border: 0;
     border-radius: 0;

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

@@ -1,5 +1,14 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['nav-list', 'nav-item', 'nav-item-leading', 'nav-item-label', 'nav-item-count', 'tabs', 'tab', 'tab-count'];
+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 type BreadcrumbItem = {
+    id?: string;
+    label: string;
+    href?: string;
+};
+export declare const Breadcrumbs: (props: {
+    label: string;
+    items: readonly BreadcrumbItem[];
+}) => TemplateResult;
 export type NavItemProps = {
     label: string;
     href: string;
@@ -22,5 +31,6 @@ export type TabItem = {
 export declare const Tabs: (props: {
     label: string;
     items: readonly TabItem[];
+    extension?: JSXChild;
 }) => TemplateResult;
 //# sourceMappingURL=index.d.ts.map

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,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,MAAM,EACN,KAAK,EACL,WAAW,CACH,CAAA;AAEV,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;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;CAAE,KAAG,cAkB1E,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,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"}

package/dist/primitives/navigation/index.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
 import { each } from '@ketvietlab/ketjs-view';
 export const HOOKS = [
+    'breadcrumbs',
+    'breadcrumb',
     'nav-list',
     'nav-item',
     'nav-item-leading',
@@ -10,7 +12,8 @@ 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 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) => (_jsx("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) })] }))) }));
+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] }));
 //# 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":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,UAAU;IACV,UAAU;IACV,kBAAkB;IAClB,gBAAgB;IAChB,gBAAgB;IAChB,MAAM;IACN,KAAK;IACL,WAAW;CACH,CAAA;AAUV,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAkB,EAAE,CAAC,CAC9D,wBACU,UAAU,iBACL,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAClD,IAAI,EAAE,KAAK,CAAC,IAAI,kBACF,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAElD,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,CAC9B,0BAAc,kBAAkB,iBAAa,MAAM,YAChD,KAAK,CAAC,OAAO,GACT,CACR,EACD,0BAAc,gBAAgB,YAAE,KAAK,CAAC,KAAK,GAAQ,EAClD,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,0BAAc,gBAAgB,YAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAQ,IACvF,CACL,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAwD,EAAkB,EAAE,CAAC,CACnG,yBAAa,UAAU,gBAAa,KAAK,CAAC,KAAK,YAC5C,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACtC,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,KAAC,OAAO,OAAK,IAAI,GAAI,CACtB,CACF,GACG,CACP,CAAA;AAUD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAmD,EAAkB,EAAE,CAAC,CAC3F,yBAAa,MAAM,gBAAa,KAAK,CAAC,KAAK,YACxC,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,EACjB,CAAC,IAAI,EAAE,EAAE,CAAC,CACR,wBACU,KAAK,iBACA,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACjD,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAEjD,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,0BAAc,WAAW,YAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,IAChF,CACL,CACF,GACG,CACP,CAAA"}
+{"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,4 +1,55 @@
 @layer ket.app {
+  :where([data-kv-design-system]) [data-ui="breadcrumbs"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumbs"] ol {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--kv-space-1-5);
+    padding: 0;
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-sm);
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb"] {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--kv-space-1-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="breadcrumb"] + [data-ui="breadcrumb"]::before {
+    flex: none;
+    color: var(--kv-border-strong);
+    content: "/";
+  }
+
+  :where([data-kv-design-system]) [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 {
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [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"] {
+    color: var(--kv-text-main);
+    font-weight: var(--kv-weight-medium);
+  }
+
   :where([data-kv-design-system]) [data-ui="nav-list"] {
     display: grid;
     gap: var(--kv-space-1);

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":"AAmBA;;;;;;GAMG;AACH,eAAO,MAAM,8BAA8B,UAHhC,UAAU,KACR,MAAM,IAoLlB,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,IAyVlB,CAAA"}