@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/primitives/field/styles.css

@@ -0,0 +1,160 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="field"] {
+    display: grid;
+    grid-template-columns: minmax(0, min(35%, 9rem)) minmax(0, 1fr);
+    align-items: center;
+    align-content: start;
+    min-width: 0;
+    gap: var(--kv-space-1) var(--kv-space-3);
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"][data-kind="checkbox"] {
+    min-height: var(--kv-control-height);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"][data-kind="group"] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"] > [data-ui="field-label"] {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="field"]
+    > :is([data-ui="field-control"], [data-ui="field-options"]) {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"] > :is([data-ui="field-help"], [data-ui="field-error"]) {
+    grid-column: 2;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="field"][data-kind="group"]
+    > :is([data-ui="field-help"], [data-ui="field-error"]) {
+    grid-column: 1;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"][data-kind="textarea"] > [data-ui="field-label"] {
+    align-self: start;
+    padding-top: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-label"] {
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+    font-weight: var(--kv-weight-medium);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-required"] {
+    color: var(--kv-color-danger);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-control"] {
+    width: 100%;
+    min-width: 0;
+    min-height: var(--kv-control-height);
+    padding: 0 var(--kv-space-2-5);
+    border: 1px solid var(--kv-field-border);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-input-bg);
+    color: var(--kv-input-text);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-control"]::placeholder {
+    color: var(--kv-input-placeholder);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-control"]:hover:not(:focus-visible, :disabled) {
+    border-color: var(--kv-input-border-hover);
+    background: var(--kv-input-bg-hover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-control"]:focus-visible {
+    border-color: var(--kv-input-border-focus);
+    background: var(--kv-input-bg-focus);
+    box-shadow: var(--kv-input-ring);
+    outline: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-control"]:disabled {
+    border-color: var(--kv-panel-border);
+    background: var(--kv-interactive-disabled);
+    color: var(--kv-text-disabled);
+    cursor: not-allowed;
+  }
+
+  :where([data-kv-design-system]) textarea[data-ui="field-control"] {
+    min-height: 6.875rem;
+    padding: var(--kv-space-2-5) var(--kv-space-3);
+    resize: vertical;
+  }
+
+  :where([data-kv-design-system]) input[type="checkbox"][data-ui="field-control"] {
+    width: 1rem;
+    min-height: 1rem;
+    accent-color: var(--kv-color-accent);
+  }
+
+  :where([data-kv-design-system]) input[type="color"][data-ui="field-control"] {
+    min-width: 3rem;
+    padding: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field"][data-invalid="true"] > [data-ui="field-control"] {
+    border-color: var(--kv-color-danger);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-options"] {
+    display: flex;
+    min-width: 0;
+    min-height: var(--kv-control-height);
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-option"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kv-space-2);
+    color: var(--kv-color-ink-secondary);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-option-input"] {
+    width: 1rem;
+    min-height: 1rem;
+    flex: 0 0 auto;
+    accent-color: var(--kv-color-accent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-help"] {
+    color: var(--kv-color-ink-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="field"][data-kind="checkbox"]
+    :is([data-ui="field-help"], [data-ui="field-error"]) {
+    grid-column: 2;
+  }
+
+  :where([data-kv-design-system]) [data-ui="field-error"] {
+    color: var(--kv-color-danger);
+    font-size: var(--kv-text-xs);
+    font-weight: 700;
+  }
+}

package/dist/primitives/field.d.ts

@@ -1,35 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['field', 'field-label', 'field-required', 'field-control', 'field-options', 'field-option', 'field-option-input', 'field-help', 'field-error'];
-export type FieldOption = {
-    value: string;
-    label: string;
-    name?: string;
-    checked?: boolean;
-    disabled?: boolean;
-};
-export type FieldProps = {
-    /** Nested fields for a collapsible group inside a larger record form. */
-    fields?: readonly FieldProps[];
-    open?: boolean;
-    id: string;
-    name: string;
-    label: string;
-    /** A trusted, progressively enhanced control such as a relation selector. */
-    control?: JSXChild;
-    type?: 'text' | 'email' | 'tel' | 'number' | 'decimal' | 'password' | 'time' | 'color' | 'date' | 'datetime-local' | 'month' | 'week' | 'select' | 'textarea' | 'checkbox' | 'checkbox-group' | 'radio';
-    value?: string | number | boolean | null;
-    placeholder?: string | null;
-    required?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    min?: string | number;
-    max?: string | number;
-    help?: string | null;
-    error?: string | null;
-    options?: readonly FieldOption[];
-    span?: 'half' | 'full';
-    step?: string | null;
-    autocomplete?: string | null;
-};
-export declare const Field: (props: FieldProps) => TemplateResult;
+export * from './field/index.tsx';
 //# sourceMappingURL=field.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGtE,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;AAsED,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cAgLzC,CAAA"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/field.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/dist/primitives/field.js

@@ -1,42 +1,2 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-import { Disclosure } from '../layouts/index.js';
-export const HOOKS = [
-    'field',
-    'field-label',
-    'field-required',
-    'field-control',
-    'field-options',
-    'field-option',
-    'field-option-input',
-    'field-help',
-    'field-error',
-];
-const Control = (props, describedBy) => {
-    if (props.control !== undefined)
-        return _jsx(_Fragment, { children: props.control });
-    if (props.type === 'textarea')
-        return (_jsx("textarea", { "data-ui": "field-control", id: props.id, name: props.name, placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: String(props.value ?? '') }));
-    if (props.type === 'select')
-        return (_jsx("select", { "data-ui": "field-control", id: props.id, name: props.name, required: props.required === true, disabled: props.disabled === true, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, children: each(props.options ?? [], (option) => option.value, (option) => (_jsx("option", { value: option.value, selected: String(props.value ?? '') === option.value, disabled: option.disabled === true, children: option.label }))) }));
-    return (_jsx("input", { "data-ui": "field-control", id: props.id, type: props.type === 'decimal' ? 'number' : (props.type ?? 'text'), name: props.name, value: props.type === 'checkbox' ? '1' : String(props.value ?? ''), checked: props.type === 'checkbox' && (props.value === true || props.value === '1'), placeholder: props.placeholder ?? null, required: props.required === true, disabled: props.disabled === true, readonly: props.readOnly === true, min: props.min, max: props.max, "aria-invalid": props.error ? 'true' : null, "aria-describedby": describedBy, autocomplete: props.autocomplete ?? 'off', step: props.type === 'decimal' ? (props.step ?? 'any') : (props.step ?? null) }));
-};
-const hasError = (props) => !!props.error || (props.fields?.some(hasError) ?? false);
-export const Field = (props) => {
-    const helpId = props.help ? `${props.id}-help` : null;
-    const errorId = props.error ? `${props.id}-error` : null;
-    const describedBy = [helpId, errorId].filter(Boolean).join(' ') || null;
-    const label = (_jsxs("span", { "data-ui": "field-label", children: [props.label, props.required && (_jsx("span", { "data-ui": "field-required", "aria-hidden": "true", children: ' *' }))] }));
-    if (props.fields)
-        return (_jsxs("div", { "data-ui": "field", "data-kind": "group", "data-span": "full", "data-invalid": String(!!props.error), children: [_jsx(Disclosure, { summary: props.label, open: props.open || hasError(props), body: _jsx("div", { "data-ui": "form-grid", children: each(props.fields.map((field) => ({
-                            ...field,
-                            disabled: props.disabled || field.disabled,
-                            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 }))] }));
-    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("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' && Control(props, describedBy), label, props.type !== 'checkbox' && Control(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 }))] }));
-};
+export * from './field/index.js';
 //# sourceMappingURL=field.js.map

package/dist/primitives/field.js.map

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

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

@@ -0,0 +1,36 @@
+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 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;
+    leading?: JSXChild;
+    count?: number;
+    active?: boolean;
+};
+export declare const NavItem: (props: NavItemProps) => TemplateResult;
+export declare const NavList: (props: {
+    label: string;
+    items: readonly NavItemProps[];
+}) => TemplateResult;
+export type TabItem = {
+    id: string;
+    label: string;
+    href: string;
+    count?: number;
+    active?: boolean;
+};
+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

@@ -0,0 +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"}

package/dist/primitives/navigation/index.js

@@ -0,0 +1,19 @@
+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',
+    'nav-item-label',
+    'nav-item-count',
+    'tabs',
+    '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) => (_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

@@ -0,0 +1 @@
+{"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.css → 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/primitives/navigation.d.ts

@@ -1,26 +1,2 @@
-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 type NavItemProps = {
-    label: string;
-    href: string;
-    leading?: JSXChild;
-    count?: number;
-    active?: boolean;
-};
-export declare const NavItem: (props: NavItemProps) => TemplateResult;
-export declare const NavList: (props: {
-    label: string;
-    items: readonly NavItemProps[];
-}) => TemplateResult;
-export type TabItem = {
-    id: string;
-    label: string;
-    href: string;
-    count?: number;
-    active?: boolean;
-};
-export declare const Tabs: (props: {
-    label: string;
-    items: readonly TabItem[];
-}) => TemplateResult;
+export * from './navigation/index.tsx';
 //# sourceMappingURL=navigation.d.ts.map

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

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

package/dist/primitives/navigation.js

@@ -1,16 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-export const HOOKS = [
-    'nav-list',
-    'nav-item',
-    'nav-item-leading',
-    'nav-item-label',
-    'nav-item-count',
-    'tabs',
-    'tab',
-    'tab-count',
-];
-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 * from './navigation/index.js';
 //# sourceMappingURL=navigation.js.map

package/dist/primitives/navigation.js.map

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