@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/primitives/actions/styles.css

@@ -0,0 +1,149 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="action"] {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--kv-control-height);
+    align-items: center;
+    justify-content: center;
+    gap: 0.4375rem;
+    padding-inline: var(--kv-space-3);
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-interactive-bg);
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+    font-weight: var(--kv-weight-medium);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background var(--kv-motion-fast),
+      border-color var(--kv-motion-fast),
+      transform var(--kv-motion-fast);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"]:hover:not(:disabled) {
+    border-color: var(--kv-border-strong);
+    background: var(--kv-interactive-hover);
+    color: var(--kv-text-main);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"]:active:not(:disabled) {
+    background: var(--kv-interactive-active);
+    transform: translateY(1px);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="primary"] {
+    border-color: var(--kv-action-primary-bg);
+    background: var(--kv-action-primary-bg);
+    color: var(--kv-action-primary-ink);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="primary"]:hover:not(:disabled) {
+    border-color: var(--kv-action-primary-hover);
+    background: var(--kv-action-primary-hover);
+    color: var(--kv-action-primary-ink);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="primary"]:active:not(:disabled) {
+    border-color: var(--kv-action-primary-active);
+    background: var(--kv-action-primary-active);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="tertiary"] {
+    border-color: transparent;
+    background: transparent;
+    color: var(--kv-text-secondary);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="tertiary"]:hover:not(:disabled) {
+    border-color: transparent;
+    background: color-mix(in srgb, var(--kv-text-main) 5%, transparent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="destructive"] {
+    border-color: var(--kv-danger-border);
+    background: transparent;
+    color: var(--kv-danger);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-variant="destructive"]:hover:not(:disabled) {
+    border-color: var(--kv-danger-border);
+    background: var(--kv-danger-bg);
+    color: var(--kv-danger-hover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-size="compact"] {
+    min-height: var(--kv-control-height-compact);
+    padding-inline: var(--kv-space-2);
+    font-size: var(--kv-text-xs);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-size="prominent"] {
+    min-height: var(--kv-control-height-prominent);
+    padding-inline: var(--kv-space-5);
+    font-size: var(--kv-text-base);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"] {
+    width: var(--kv-control-height);
+    height: var(--kv-control-height);
+    flex: none;
+    padding-inline: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"][data-size="compact"] {
+    width: var(--kv-control-height-compact);
+    height: var(--kv-control-height-compact);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"][data-icon-only="true"][data-size="prominent"] {
+    width: var(--kv-control-height-prominent);
+    height: var(--kv-control-height-prominent);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action"]: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]) [data-ui="action-leading"] {
+    display: inline-grid;
+    width: 1rem;
+    height: 1rem;
+    place-items: center;
+    font-family: var(--kv-font-mono);
+  }
+
+  :where([data-kv-design-system]) [data-ui="action-label"] {
+    min-width: 0;
+    overflow: hidden;
+    line-height: var(--kv-leading-normal);
+    text-overflow: ellipsis;
+  }
+
+  :where([data-kv-design-system]) [data-ui="action-spinner"] {
+    width: 0.8rem;
+    height: 0.8rem;
+    border: 2px solid currentcolor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: kv-spin 700ms linear infinite;
+  }
+
+  :where([data-kv-design-system]) [data-ui="action-group"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+  @keyframes kv-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/primitives/actions.d.ts

@@ -1,36 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['action', 'action-leading', 'action-label', 'action-spinner', 'action-group'];
-export type ActionVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive';
-export type ActionSize = 'compact' | 'default' | 'prominent';
-type ActionBase = {
-    label: string;
-    variant?: ActionVariant;
-    size?: ActionSize;
-    leading?: JSXChild;
-    disabled?: boolean;
-    loading?: boolean;
-    describedBy?: string | null;
-};
-export type ButtonProps = ActionBase & {
-    type?: 'button' | 'submit' | 'reset';
-    name?: string | null;
-    value?: string | null;
-    form?: string | null;
-};
-export type LinkButtonProps = ActionBase & {
-    href: string;
-};
-export type IconButtonProps = Omit<ButtonProps, 'leading'> & {
-    icon: JSXChild;
-    pressed?: boolean;
-};
-export declare const Button: (props: ButtonProps) => TemplateResult;
-/** An icon-only action with a visible tooltip and accessible name. */
-export declare const IconButton: (props: IconButtonProps) => TemplateResult;
-export declare const LinkButton: (props: LinkButtonProps) => TemplateResult;
-export declare const ActionGroup: (props: {
-    actions: readonly JSXChild[];
-    label?: string | null;
-}) => TemplateResult;
-export {};
+export * from './actions/index.tsx';
 //# sourceMappingURL=actions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAAI,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,CAAU,CAAA;AAE5G,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,CAAA;AAChF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AAE5D,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAC3D,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC3D,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAcD,eAAO,MAAM,MAAM,UAAW,WAAW,KAAG,cAe3C,CAAA;AAED,sEAAsE;AACtE,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAmBnD,CAAA;AAED,eAAO,MAAM,UAAU,UAAW,eAAe,KAAG,cAuBjD,CAAA;AAEH,eAAO,MAAM,WAAW,UAAW;IACjC,OAAO,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB,KAAG,cAUH,CAAA"}
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/actions.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/primitives/actions.js

@@ -1,10 +1,2 @@
-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 = ['action', 'action-leading', 'action-label', 'action-spinner', 'action-group'];
-const ActionContent = (props) => (_jsxs(_Fragment, { children: [props.loading === true && _jsx("span", { "data-ui": "action-spinner", "aria-hidden": "true" }), props.loading !== true && props.leading !== undefined && (_jsx("span", { "data-ui": "action-leading", "aria-hidden": "true", children: props.leading })), !props.iconOnly && _jsx("span", { "data-ui": "action-label", children: props.label })] }));
-export const Button = (props) => (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: props.type ?? 'button', name: props.name ?? null, value: props.value ?? null, form: props.form ?? null, disabled: props.disabled === true || props.loading === true, "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
-/** An icon-only action with a visible tooltip and accessible name. */
-export const IconButton = (props) => (_jsx("button", { "data-ui": "action", "data-icon-only": "true", "data-variant": props.variant ?? 'tertiary', "data-size": props.size ?? 'default', type: props.type ?? 'button', name: props.name ?? null, value: props.value ?? null, form: props.form ?? null, disabled: props.disabled === true || props.loading === true, "aria-label": props.label, "aria-pressed": props.pressed === undefined ? null : String(props.pressed), "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, title: props.label, children: _jsx(ActionContent, { ...props, leading: props.icon, iconOnly: true }) }));
-export const LinkButton = (props) => props.disabled || props.loading ? (_jsx("button", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', type: "button", disabled: true, "aria-busy": props.loading === true ? 'true' : null, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) })) : (_jsx("a", { "data-ui": "action", "data-variant": props.variant ?? 'secondary', "data-size": props.size ?? 'default', href: props.href, "aria-describedby": props.describedBy ?? null, children: _jsx(ActionContent, { ...props }) }));
-export const ActionGroup = (props) => (_jsx("div", { "data-ui": "action-group", role: "group", "aria-label": props.label ?? null, children: each(props.actions, (_, index) => index, (action) => (_jsx(_Fragment, { children: action }))) }));
+export * from './actions/index.js';
 //# sourceMappingURL=actions.js.map

package/dist/primitives/actions.js.map

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

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

@@ -0,0 +1,19 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['notice', 'notice-mark', 'notice-copy', 'notice-title', 'notice-message', 'notice-actions', 'empty', 'empty-mark', 'empty-title', 'empty-message', 'empty-actions', 'loading', 'loading-label'];
+export type NoticeTone = 'info' | 'positive' | 'warning' | 'danger';
+export declare const Notice: (props: {
+    title: string;
+    message: string;
+    tone?: NoticeTone;
+    actions?: JSXChild;
+}) => TemplateResult;
+export declare const EmptyState: (props: {
+    title: string;
+    message: string;
+    actions?: JSXChild;
+}) => TemplateResult;
+export declare const LoadingState: (props: {
+    label: string;
+    lines?: number;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/feedback/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,SAAS,EACT,eAAe,CACP,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnE,eAAO,MAAM,MAAM,UAAW;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,QAAQ,CAAA;CAAE,KAAG,cAS1F,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAavE,CAAA"}

package/dist/primitives/feedback/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'notice',
+    'notice-mark',
+    'notice-copy',
+    'notice-title',
+    'notice-message',
+    'notice-actions',
+    'empty',
+    'empty-mark',
+    'empty-title',
+    'empty-message',
+    'empty-actions',
+    'loading',
+    'loading-label',
+];
+export const Notice = (props) => (_jsxs("aside", { "data-ui": "notice", "data-tone": props.tone ?? 'info', role: props.tone === 'danger' ? 'alert' : 'status', children: [_jsx("span", { "data-ui": "notice-mark", "aria-hidden": "true" }), _jsxs("div", { "data-ui": "notice-copy", children: [_jsx("p", { "data-ui": "notice-title", children: props.title }), _jsx("p", { "data-ui": "notice-message", children: props.message })] }), props.actions !== undefined && _jsx("div", { "data-ui": "notice-actions", children: props.actions })] }));
+export const EmptyState = (props) => (_jsxs("div", { "data-ui": "empty", role: "status", children: [_jsx("span", { "data-ui": "empty-mark", "aria-hidden": "true", children: "\u25C7" }), _jsx("p", { "data-ui": "empty-title", children: props.title }), _jsx("p", { "data-ui": "empty-message", children: props.message }), props.actions !== undefined && _jsx("div", { "data-ui": "empty-actions", children: props.actions })] }));
+export const LoadingState = (props) => (_jsxs("div", { "data-ui": "loading", role: "status", "aria-live": "polite", children: [_jsx("span", { "data-ui": "loading-label", children: props.label }), _jsx("div", { "data-ui": "skeleton", "aria-hidden": "true", children: each(Array.from({ length: Math.max(1, props.lines ?? 3) }), (_, index) => index, (_, index) => (_jsx("span", { "data-ui": "skeleton-line", "data-line": String(index + 1) }))) })] }));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/primitives/feedback/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ;IACR,aAAa;IACb,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,OAAO;IACP,YAAY;IACZ,aAAa;IACb,eAAe;IACf,eAAe;IACf,SAAS;IACT,eAAe;CACP,CAAA;AAIV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAKtB,EAAkB,EAAE,CAAC,CACpB,4BACU,QAAQ,eACL,KAAK,CAAC,IAAI,IAAI,MAAM,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,aAElD,0BAAc,aAAa,iBAAa,MAAM,GAAG,EACjD,0BAAa,aAAa,aACxB,uBAAW,cAAc,YAAE,KAAK,CAAC,KAAK,GAAK,EAC3C,uBAAW,gBAAgB,YAAE,KAAK,CAAC,OAAO,GAAK,IAC3C,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,gBAAgB,YAAE,KAAK,CAAC,OAAO,GAAO,IAC7E,CACT,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CAC3G,0BAAa,OAAO,EAAC,IAAI,EAAC,QAAQ,aAChC,0BAAc,YAAY,iBAAa,MAAM,uBAEtC,EACP,uBAAW,aAAa,YAAE,KAAK,CAAC,KAAK,GAAK,EAC1C,uBAAW,eAAe,YAAE,KAAK,CAAC,OAAO,GAAK,EAC7C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,eAAe,YAAE,KAAK,CAAC,OAAO,GAAO,IAC9E,CACP,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwC,EAAkB,EAAE,CAAC,CACxF,0BAAa,SAAS,EAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,aACrD,0BAAc,eAAe,YAAE,KAAK,CAAC,KAAK,GAAQ,EAClD,yBAAa,UAAU,iBAAa,MAAM,YACvC,IAAI,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,EACrD,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACZ,0BAAc,eAAe,eAAY,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,GAAI,CAC/D,CACF,GACG,IACF,CACP,CAAA"}

package/dist/primitives/feedback/styles.css

@@ -0,0 +1,117 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="notice"] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: var(--kv-space-3);
+    align-items: start;
+    padding: var(--kv-space-3) var(--kv-space-4);
+    border: 1px solid var(--kv-color-line);
+    border-left: 3px solid var(--kv-color-info);
+    border-radius: var(--kv-radius-sm);
+    background: var(--kv-color-info-soft);
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice"][data-tone="positive"] {
+    border-left-color: var(--kv-color-positive);
+    background: var(--kv-color-positive-soft);
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice"][data-tone="warning"] {
+    border-left-color: var(--kv-color-warning);
+    background: var(--kv-color-warning-soft);
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice"][data-tone="danger"] {
+    border-left-color: var(--kv-color-danger);
+    background: var(--kv-color-danger-soft);
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice-mark"] {
+    width: 0.65rem;
+    height: 0.65rem;
+    margin-top: 0.35rem;
+    border-radius: 50%;
+    background: currentcolor;
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice-copy"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice-title"] {
+    margin-bottom: var(--kv-space-1);
+    font-weight: 800;
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice-message"] {
+    margin-bottom: 0;
+    color: var(--kv-color-ink-secondary);
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="notice-actions"] {
+    align-self: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="empty"] {
+    display: grid;
+    min-height: 11rem;
+    place-items: center;
+    align-content: center;
+    padding: var(--kv-space-8);
+    color: var(--kv-color-ink-secondary);
+    text-align: center;
+  }
+
+  :where([data-kv-design-system]) [data-ui="empty-mark"] {
+    display: grid;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: var(--kv-space-3);
+    place-items: center;
+    border: 1px solid var(--kv-color-line-strong);
+    border-radius: 50%;
+    color: var(--kv-color-accent);
+    font-size: var(--kv-text-lg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="empty-title"] {
+    margin-bottom: var(--kv-space-1);
+    color: var(--kv-color-ink);
+    font-weight: 800;
+  }
+
+  :where([data-kv-design-system]) [data-ui="empty-message"] {
+    max-width: 34rem;
+    margin-bottom: 0;
+    font-size: var(--kv-text-sm);
+  }
+
+  :where([data-kv-design-system]) [data-ui="empty-actions"] {
+    margin-top: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-ui="loading"] {
+    display: grid;
+    gap: var(--kv-space-3);
+    padding: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-ui="loading-label"] {
+    color: var(--kv-color-ink-muted);
+    font-size: var(--kv-text-xs);
+    font-weight: 750;
+    letter-spacing: 0;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="notice"] {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    :where([data-kv-design-system]) [data-ui="notice-actions"] {
+      grid-column: 1 / -1;
+    }
+  }
+}

package/dist/primitives/feedback.d.ts

@@ -1,19 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['notice', 'notice-mark', 'notice-copy', 'notice-title', 'notice-message', 'notice-actions', 'empty', 'empty-mark', 'empty-title', 'empty-message', 'empty-actions', 'loading', 'loading-label', 'skeleton', 'skeleton-line'];
-export type NoticeTone = 'info' | 'positive' | 'warning' | 'danger';
-export declare const Notice: (props: {
-    title: string;
-    message: string;
-    tone?: NoticeTone;
-    actions?: JSXChild;
-}) => TemplateResult;
-export declare const EmptyState: (props: {
-    title: string;
-    message: string;
-    actions?: JSXChild;
-}) => TemplateResult;
-export declare const LoadingState: (props: {
-    label: string;
-    lines?: number;
-}) => TemplateResult;
+export * from './feedback/index.tsx';
 //# sourceMappingURL=feedback.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/feedback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,SAAS,EACT,eAAe,EACf,UAAU,EACV,eAAe,CACP,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEnE,eAAO,MAAM,MAAM,UAAW;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAaH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,QAAQ,CAAA;CAAE,KAAG,cAS1F,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAavE,CAAA"}
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/primitives/feedback.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA"}

package/dist/primitives/feedback.js

@@ -1,23 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { each } from '@ketvietlab/ketjs-view';
-export const HOOKS = [
-    'notice',
-    'notice-mark',
-    'notice-copy',
-    'notice-title',
-    'notice-message',
-    'notice-actions',
-    'empty',
-    'empty-mark',
-    'empty-title',
-    'empty-message',
-    'empty-actions',
-    'loading',
-    'loading-label',
-    'skeleton',
-    'skeleton-line',
-];
-export const Notice = (props) => (_jsxs("aside", { "data-ui": "notice", "data-tone": props.tone ?? 'info', role: props.tone === 'danger' ? 'alert' : 'status', children: [_jsx("span", { "data-ui": "notice-mark", "aria-hidden": "true" }), _jsxs("div", { "data-ui": "notice-copy", children: [_jsx("p", { "data-ui": "notice-title", children: props.title }), _jsx("p", { "data-ui": "notice-message", children: props.message })] }), props.actions !== undefined && _jsx("div", { "data-ui": "notice-actions", children: props.actions })] }));
-export const EmptyState = (props) => (_jsxs("div", { "data-ui": "empty", role: "status", children: [_jsx("span", { "data-ui": "empty-mark", "aria-hidden": "true", children: "\u25C7" }), _jsx("p", { "data-ui": "empty-title", children: props.title }), _jsx("p", { "data-ui": "empty-message", children: props.message }), props.actions !== undefined && _jsx("div", { "data-ui": "empty-actions", children: props.actions })] }));
-export const LoadingState = (props) => (_jsxs("div", { "data-ui": "loading", role: "status", "aria-live": "polite", children: [_jsx("span", { "data-ui": "loading-label", children: props.label }), _jsx("div", { "data-ui": "skeleton", "aria-hidden": "true", children: each(Array.from({ length: Math.max(1, props.lines ?? 3) }), (_, index) => index, (_, index) => (_jsx("span", { "data-ui": "skeleton-line", "data-line": String(index + 1) }))) })] }));
+export * from './feedback/index.js';
 //# sourceMappingURL=feedback.js.map

package/dist/primitives/feedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/feedback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,QAAQ;IACR,aAAa;IACb,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,gBAAgB;IAChB,OAAO;IACP,YAAY;IACZ,aAAa;IACb,eAAe;IACf,eAAe;IACf,SAAS;IACT,eAAe;IACf,UAAU;IACV,eAAe;CACP,CAAA;AAIV,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAKtB,EAAkB,EAAE,CAAC,CACpB,4BACU,QAAQ,eACL,KAAK,CAAC,IAAI,IAAI,MAAM,EAC/B,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,aAElD,0BAAc,aAAa,iBAAa,MAAM,GAAG,EACjD,0BAAa,aAAa,aACxB,uBAAW,cAAc,YAAE,KAAK,CAAC,KAAK,GAAK,EAC3C,uBAAW,gBAAgB,YAAE,KAAK,CAAC,OAAO,GAAK,IAC3C,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,gBAAgB,YAAE,KAAK,CAAC,OAAO,GAAO,IAC7E,CACT,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA6D,EAAkB,EAAE,CAAC,CAC3G,0BAAa,OAAO,EAAC,IAAI,EAAC,QAAQ,aAChC,0BAAc,YAAY,iBAAa,MAAM,uBAEtC,EACP,uBAAW,aAAa,YAAE,KAAK,CAAC,KAAK,GAAK,EAC1C,uBAAW,eAAe,YAAE,KAAK,CAAC,OAAO,GAAK,EAC7C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,eAAe,YAAE,KAAK,CAAC,OAAO,GAAO,IAC9E,CACP,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwC,EAAkB,EAAE,CAAC,CACxF,0BAAa,SAAS,EAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,aACrD,0BAAc,eAAe,YAAE,KAAK,CAAC,KAAK,GAAQ,EAClD,yBAAa,UAAU,iBAAa,MAAM,YACvC,IAAI,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,EACrD,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACZ,0BAAc,eAAe,eAAY,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,GAAI,CAC/D,CACF,GACG,IACF,CACP,CAAA"}
+{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/feedback.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAsB,CAAA"}

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

@@ -0,0 +1,35 @@
+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;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/primitives/field/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { Disclosure } from '../../layouts/index.js';
+import { NativeFieldControl } from './native-control.js';
+export const HOOKS = [
+    'field',
+    'field-label',
+    'field-required',
+    'field-control',
+    'field-options',
+    'field-option',
+    'field-option-input',
+    'field-help',
+    'field-error',
+];
+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' && NativeFieldControl(props, describedBy), label, props.type !== 'checkbox' && NativeFieldControl(props, describedBy), !!props.help && (_jsx("small", { "data-ui": "field-help", id: helpId ?? undefined, children: props.help })), !!props.error && (_jsx("small", { "data-ui": "field-error", id: errorId ?? undefined, children: props.error }))] }));
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/primitives/field/native-control.d.ts

@@ -0,0 +1,4 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+import type { FieldProps } from './index.tsx';
+export declare const NativeFieldControl: (props: FieldProps, describedBy: string | null) => TemplateResult;
+//# sourceMappingURL=native-control.d.ts.map

package/dist/primitives/field/native-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-control.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/primitives/field/native-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,eAAO,MAAM,kBAAkB,UAAW,UAAU,eAAe,MAAM,GAAG,IAAI,KAAG,cAgElF,CAAA"}

package/dist/primitives/field/native-control.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const NativeFieldControl = (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) }));
+};
+//# sourceMappingURL=native-control.js.map

package/dist/primitives/field/native-control.js.map

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