@ketvietlab/design-system 0.1.8 → 0.1.12

package/dist/interactions/menu/styles.css

@@ -0,0 +1,82 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="menu"] {
+    position: relative;
+    display: inline-block;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-trigger"] {
+    min-height: var(--kv-control-height);
+    padding: 0 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);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-trigger"]::-webkit-details-marker {
+    display: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-panel"] {
+    position: absolute;
+    z-index: var(--kv-layer-menu);
+    top: calc(100% + var(--kv-space-1));
+    left: 0;
+    display: grid;
+    min-width: 13rem;
+    padding: var(--kv-space-1);
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
+    box-shadow: var(--kv-shadow-popover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu"][data-align="end"] [data-ui="menu-panel"] {
+    right: 0;
+    left: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-item"] {
+    display: flex;
+    width: 100%;
+    min-height: var(--kv-control-height);
+    align-items: center;
+    gap: var(--kv-space-2);
+    padding: var(--kv-space-2) var(--kv-space-3);
+    border: 0;
+    border-radius: var(--kv-radius-sm);
+    background: transparent;
+    color: var(--kv-text-main);
+    font: inherit;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-item"]:hover {
+    background: var(--kv-interactive-hover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-item"][aria-disabled="true"] {
+    color: var(--kv-text-disabled);
+    cursor: not-allowed;
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-item"][data-destructive="true"] {
+    color: var(--kv-danger);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-item-copy"] {
+    display: grid;
+    gap: var(--kv-space-0-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="menu-item-copy"] small {
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+  }
+}

package/dist/interactions/popover/index.d.ts

@@ -0,0 +1,15 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['popover', 'popover-trigger', 'popover-panel', 'popover-close'];
+export type PopoverProps = {
+    id: string;
+    label: string;
+    trigger: JSXChild;
+    body: JSXChild;
+    open: boolean;
+    openHref: string;
+    closeHref: string;
+    closeLabel: string;
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+};
+export declare const Popover: (props: PopoverProps) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAAI,SAAS,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,CAAU,CAAA;AAE9F,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,QAAQ,CAAA;IACjB,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;CACpE,CAAA;AAED,eAAO,MAAM,OAAO,UAAW,YAAY,KAAG,cA0B7C,CAAA"}

package/dist/interactions/popover/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = ['popover', 'popover-trigger', 'popover-panel', 'popover-close'];
+export const Popover = (props) => (_jsxs("span", { "data-ui": "popover", "data-open": String(props.open), "data-placement": props.placement ?? 'bottom-start', children: [_jsx("a", { "data-ui": "popover-trigger", href: props.open ? props.closeHref : props.openHref, "aria-haspopup": "dialog", "aria-expanded": String(props.open), "aria-controls": `${props.id}-panel`, children: props.trigger }), props.open && (_jsxs("aside", { "data-ui": "popover-panel", id: `${props.id}-panel`, role: "dialog", "aria-label": props.label, tabindex: "-1", children: [_jsx("a", { "data-ui": "popover-close", href: props.closeHref, "aria-label": props.closeLabel, children: "\u00D7" }), props.body] }))] }));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/popover/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,iBAAiB,EAAE,eAAe,EAAE,eAAe,CAAU,CAAA;AAc9F,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAkB,EAAE,CAAC,CAC9D,2BAAc,SAAS,eAAY,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,oBAAkB,KAAK,CAAC,SAAS,IAAI,cAAc,aACtG,uBACU,iBAAiB,EACzB,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,mBACrC,QAAQ,mBACP,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,mBAClB,GAAG,KAAK,CAAC,EAAE,QAAQ,YAEjC,KAAK,CAAC,OAAO,GACZ,EACH,KAAK,CAAC,IAAI,IAAI,CACb,4BACU,eAAe,EACvB,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,QAAQ,EACvB,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAC,IAAI,aAEb,uBAAW,eAAe,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,gBAAc,KAAK,CAAC,UAAU,uBAE1E,EACH,KAAK,CAAC,IAAI,IACL,CACT,IACI,CACR,CAAA"}

package/dist/interactions/popover/styles.css

@@ -0,0 +1,47 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="popover"] {
+    position: relative;
+    display: inline-flex;
+  }
+
+  :where([data-kv-design-system]) [data-ui="popover-trigger"] {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="popover-panel"] {
+    position: absolute;
+    z-index: var(--kv-layer-popover);
+    top: calc(100% + var(--kv-space-2));
+    left: 0;
+    width: min(20rem, calc(100vw - var(--kv-space-8)));
+    padding: var(--kv-space-4);
+    border: 1px solid var(--kv-border-default);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
+    box-shadow: var(--kv-shadow-popover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="popover-panel"][data-runtime-positioned="true"] {
+    position: fixed;
+  }
+
+  :where([data-kv-design-system]) [data-ui="popover"][data-placement$="end"] [data-ui="popover-panel"] {
+    right: 0;
+    left: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="popover"][data-placement^="top"] [data-ui="popover-panel"] {
+    top: auto;
+    bottom: calc(100% + var(--kv-space-2));
+  }
+
+  :where([data-kv-design-system]) [data-ui="popover-close"] {
+    position: absolute;
+    top: var(--kv-space-2);
+    right: var(--kv-space-2);
+    color: var(--kv-text-muted);
+    text-decoration: none;
+  }
+}

package/dist/interactions/skeleton/index.d.ts

@@ -0,0 +1,7 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['skeleton', 'skeleton-line'];
+export declare const Skeleton: (props: {
+    label: string;
+    lines?: number;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/skeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,UAAU,EAAE,eAAe,CAAU,CAAA;AAE3D,eAAO,MAAM,QAAQ,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,cAUnE,CAAA"}

package/dist/interactions/skeleton/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = ['skeleton', 'skeleton-line'];
+export const Skeleton = (props) => (_jsx("div", { "data-ui": "skeleton", role: "status", "aria-label": props.label, 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/interactions/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/skeleton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,eAAe,CAAU,CAAA;AAE3D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAwC,EAAkB,EAAE,CAAC,CACpF,yBAAa,UAAU,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,KAAK,YAC1D,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,CACP,CAAA"}

package/dist/interactions/skeleton/styles.css

@@ -0,0 +1,32 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="skeleton"] {
+    display: grid;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="skeleton-line"] {
+    height: 0.7rem;
+    border-radius: var(--kv-radius-xs);
+    background: linear-gradient(
+      90deg,
+      var(--kv-color-surface-subtle),
+      var(--kv-color-line),
+      var(--kv-color-surface-subtle)
+    );
+    background-size: 200% 100%;
+    animation: kv-skeleton-shimmer 1.5s var(--kv-ease-default) infinite;
+  }
+
+  :where([data-kv-design-system]) [data-ui="skeleton-line"][data-line="2"] {
+    width: 82%;
+  }
+  :where([data-kv-design-system]) [data-ui="skeleton-line"][data-line="3"] {
+    width: 58%;
+  }
+
+  @keyframes kv-skeleton-shimmer {
+    to {
+      background-position: -200% 0;
+    }
+  }
+}

package/dist/interactions/spinner/index.d.ts

@@ -0,0 +1,7 @@
+import type { TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['spinner', 'visually-hidden'];
+export declare const Spinner: (props: {
+    label: string;
+    size?: 'small' | 'default' | 'large';
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/spinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,eAAO,MAAM,KAAK,YAAI,SAAS,EAAE,iBAAiB,CAAU,CAAA;AAE5D,eAAO,MAAM,OAAO,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;CAAE,KAAG,cAIxF,CAAA"}

package/dist/interactions/spinner/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = ['spinner', 'visually-hidden'];
+export const Spinner = (props) => (_jsx("span", { "data-ui": "spinner", "data-size": props.size ?? 'default', role: "status", children: _jsx("span", { "data-ui": "visually-hidden", children: props.label }) }));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/spinner/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,iBAAiB,CAAU,CAAA;AAE5D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAA8D,EAAkB,EAAE,CAAC,CACzG,0BAAc,SAAS,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,EAAE,IAAI,EAAC,QAAQ,YACvE,0BAAc,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAQ,GAC/C,CACR,CAAA"}

package/dist/interactions/spinner/styles.css

@@ -0,0 +1,38 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="spinner"] {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid currentcolor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: kv-spinner-spin var(--kv-duration-slow) linear infinite;
+  }
+
+  :where([data-kv-design-system]) [data-ui="spinner"][data-size="small"] {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  :where([data-kv-design-system]) [data-ui="spinner"][data-size="large"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-width: 3px;
+  }
+
+  :where([data-kv-design-system]) [data-ui="visually-hidden"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @keyframes kv-spinner-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/interactions/toast/index.d.ts

@@ -0,0 +1,16 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { Tone } from '../../primitives/status/index.tsx';
+export declare const HOOKS: readonly ['toast-region', 'toast', 'toast-copy', 'toast-title', 'toast-message', 'toast-actions'];
+export type ToastProps = {
+    id: string;
+    title: string;
+    message?: string;
+    tone?: Tone;
+    actions?: JSXChild;
+};
+export declare const Toast: (props: ToastProps) => TemplateResult;
+export declare const ToastRegion: (props: {
+    label: string;
+    toasts: readonly ToastProps[];
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/toast/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAA;AAE7D,eAAO,MAAM,KAAK,YAChB,cAAc,EACd,OAAO,EACP,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,CACP,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,KAAK,UAAW,UAAU,KAAG,cAYzC,CAAA;AAED,eAAO,MAAM,WAAW,UAAW;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAAA;CAAE,KAAG,cAUrF,CAAA"}

package/dist/interactions/toast/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'toast-region',
+    'toast',
+    'toast-copy',
+    'toast-title',
+    'toast-message',
+    'toast-actions',
+];
+export const Toast = (props) => (_jsxs("article", { "data-ui": "toast", "data-tone": props.tone ?? 'neutral', role: props.tone === 'danger' ? 'alert' : 'status', children: [_jsxs("div", { "data-ui": "toast-copy", children: [_jsx("strong", { "data-ui": "toast-title", children: props.title }), props.message && _jsx("p", { "data-ui": "toast-message", children: props.message })] }), props.actions !== undefined && _jsx("div", { "data-ui": "toast-actions", children: props.actions })] }));
+export const ToastRegion = (props) => (_jsx("section", { "data-ui": "toast-region", "aria-label": props.label, "aria-live": "polite", "aria-relevant": "additions text", children: each(props.toasts, (toast) => toast.id, (toast) => (_jsx(Toast, { ...toast }))) }));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/toast/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc;IACd,OAAO;IACP,YAAY;IACZ,aAAa;IACb,eAAe;IACf,eAAe;CACP,CAAA;AAUV,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAkB,EAAE,CAAC,CAC1D,8BACU,OAAO,eACJ,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,aAElD,0BAAa,YAAY,aACvB,4BAAgB,aAAa,YAAE,KAAK,CAAC,KAAK,GAAU,EACnD,KAAK,CAAC,OAAO,IAAI,uBAAW,eAAe,YAAE,KAAK,CAAC,OAAO,GAAK,IAC5D,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,eAAe,YAAE,KAAK,CAAC,OAAO,GAAO,IAC1E,CACX,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuD,EAAkB,EAAE,CAAC,CACtG,6BAAiB,cAAc,gBAAa,KAAK,CAAC,KAAK,eAAY,QAAQ,mBAAe,gBAAgB,YACvG,IAAI,CACH,KAAK,CAAC,MAAM,EACZ,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,EACnB,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,KAAC,KAAK,OAAK,KAAK,GAAI,CACrB,CACF,GACO,CACX,CAAA"}

package/dist/interactions/toast/styles.css

@@ -0,0 +1,64 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="toast-region"] {
+    position: fixed;
+    z-index: var(--kv-layer-toast);
+    right: var(--kv-space-5);
+    bottom: var(--kv-space-5);
+    display: grid;
+    width: min(24rem, calc(100vw - var(--kv-space-8)));
+    gap: var(--kv-space-2);
+    pointer-events: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="toast"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    gap: var(--kv-space-3);
+    padding: var(--kv-space-3) var(--kv-space-4);
+    border: 1px solid var(--kv-border-default);
+    border-left: 3px solid var(--kv-text-muted);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
+    box-shadow: var(--kv-shadow-popover);
+    pointer-events: auto;
+  }
+
+  :where([data-kv-design-system]) [data-ui="toast"][data-tone="positive"] {
+    border-left-color: var(--kv-positive);
+  }
+  :where([data-kv-design-system]) [data-ui="toast"][data-tone="warning"] {
+    border-left-color: var(--kv-warning);
+  }
+  :where([data-kv-design-system]) [data-ui="toast"][data-tone="danger"] {
+    border-left-color: var(--kv-danger);
+  }
+  :where([data-kv-design-system]) [data-ui="toast"][data-tone="info"] {
+    border-left-color: var(--kv-info);
+  }
+
+  :where([data-kv-design-system]) [data-ui="toast-copy"] {
+    display: grid;
+    gap: var(--kv-space-1);
+  }
+  :where([data-kv-design-system]) [data-ui="toast-title"] {
+    font-size: var(--kv-text-sm);
+  }
+  :where([data-kv-design-system]) [data-ui="toast-message"] {
+    margin: 0;
+    color: var(--kv-text-secondary);
+    font-size: var(--kv-text-sm);
+  }
+  :where([data-kv-design-system]) [data-ui="toast-actions"] {
+    min-width: 0;
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-ui="toast-region"] {
+      right: var(--kv-space-4);
+      bottom: max(var(--kv-space-4), env(safe-area-inset-bottom));
+      left: var(--kv-space-4);
+      width: auto;
+    }
+  }
+}

package/dist/interactions/tooltip/index.d.ts

@@ -0,0 +1,9 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['tooltip', 'tooltip-trigger', 'tooltip-content'];
+export declare const Tooltip: (props: {
+    id: string;
+    text: string;
+    trigger: JSXChild;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/interactions/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/interactions/tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAAI,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,CAAU,CAAA;AAE/E,eAAO,MAAM,OAAO,UAAW;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,QAAQ,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;CAChD,KAAG,cASH,CAAA"}

package/dist/interactions/tooltip/index.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = ['tooltip', 'tooltip-trigger', 'tooltip-content'];
+export const Tooltip = (props) => (_jsxs("span", { "data-ui": "tooltip", "data-placement": props.placement ?? 'top', children: [_jsx("span", { "data-ui": "tooltip-trigger", "aria-describedby": props.id, children: props.trigger }), _jsx("span", { "data-ui": "tooltip-content", id: props.id, role: "tooltip", children: props.text })] }));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/interactions/tooltip/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,CAAU,CAAA;AAE/E,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAKvB,EAAkB,EAAE,CAAC,CACpB,2BAAc,SAAS,oBAAiB,KAAK,CAAC,SAAS,IAAI,KAAK,aAC9D,0BAAc,iBAAiB,sBAAmB,KAAK,CAAC,EAAE,YACvD,KAAK,CAAC,OAAO,GACT,EACP,0BAAc,iBAAiB,EAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,IAAI,EAAC,SAAS,YACzD,KAAK,CAAC,IAAI,GACN,IACF,CACR,CAAA"}

package/dist/interactions/tooltip/styles.css

@@ -0,0 +1,65 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="tooltip"] {
+    position: relative;
+    display: inline-flex;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tooltip-trigger"] {
+    display: inline-flex;
+  }
+
+  :where([data-kv-design-system]) [data-ui="tooltip-content"] {
+    position: absolute;
+    z-index: var(--kv-layer-popover);
+    bottom: calc(100% + var(--kv-space-2));
+    left: 50%;
+    width: max-content;
+    max-width: 16rem;
+    padding: var(--kv-space-1-5) var(--kv-space-2);
+    border-radius: var(--kv-radius-sm);
+    opacity: 0;
+    background: var(--kv-text-main);
+    color: var(--kv-panel-bg);
+    font-size: var(--kv-text-xs);
+    pointer-events: none;
+    transform: translate(-50%, var(--kv-space-1));
+    transition:
+      opacity var(--kv-motion-fast),
+      transform var(--kv-motion-fast);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tooltip"][data-placement="bottom"] [data-ui="tooltip-content"] {
+    top: calc(100% + var(--kv-space-2));
+    bottom: auto;
+    transform: translate(-50%, calc(-1 * var(--kv-space-1)));
+  }
+
+  :where([data-kv-design-system]) [data-ui="tooltip"][data-placement="left"] [data-ui="tooltip-content"] {
+    top: 50%;
+    right: calc(100% + var(--kv-space-2));
+    bottom: auto;
+    left: auto;
+    transform: translate(var(--kv-space-1), -50%);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tooltip"][data-placement="right"] [data-ui="tooltip-content"] {
+    top: 50%;
+    bottom: auto;
+    left: calc(100% + var(--kv-space-2));
+    transform: translate(calc(-1 * var(--kv-space-1)), -50%);
+  }
+
+  :where([data-kv-design-system]) [data-ui="tooltip"]:is(:hover, :focus-within) [data-ui="tooltip-content"] {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="tooltip"][data-placement="left"]:is(:hover, :focus-within)
+    [data-ui="tooltip-content"],
+  :where([data-kv-design-system])
+    [data-ui="tooltip"][data-placement="right"]:is(:hover, :focus-within)
+    [data-ui="tooltip-content"] {
+    transform: translate(0, -50%);
+  }
+}

package/dist/layouts/flat/styles.css

@@ -0,0 +1,74 @@
+/* Opt-in white, unframed workspace. Sidebar appearance is independent. */
+@layer ket.app {
+  [data-kv-design-system][data-presentation="flat"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
+    color-scheme: light;
+    --kv-page-bg: var(--kv-ref-white);
+    --kv-page-chrome-bg: var(--kv-ref-white);
+    --kv-page-content-bg: var(--kv-ref-white);
+    --kv-panel-bg: var(--kv-ref-white);
+    --kv-panel-bg-subtle: var(--kv-ref-white);
+    --kv-table-bg: var(--kv-ref-white);
+    --kv-table-header-bg: var(--kv-ref-white);
+    --kv-table-row-bg: var(--kv-ref-white);
+    color: var(--kv-text-main);
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="app-main"] {
+    background: var(--kv-ref-white);
+  }
+
+  [data-kv-design-system][data-presentation="flat"]
+    :is([data-ui="app-main"], [data-ui="modal-layer"])
+    :is(
+      [data-ui="surface"],
+      [data-ui="metric"],
+      [data-ui="content-card"],
+      [data-ui="table-scroll"],
+      [data-ui="disclosure"],
+      [data-ui="notice"],
+      [data-ui="list-page-footer"]
+    ) {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  [data-kv-design-system][data-presentation="flat"]
+    :is([data-ui="app-main"], [data-ui="modal-layer"])
+    :is([data-ui="surface"], [data-ui="metric"], [data-ui="content-card"], [data-ui="notice"]) {
+    padding: 0;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] {
+    overflow: visible;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] > [data-ui="surface-head"] {
+    padding: 0;
+    margin-bottom: var(--kv-space-5);
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="metric"] {
+    min-height: 0;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="content-card"] {
+    padding-block: var(--kv-space-3);
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="card-title"] a:hover {
+    text-decoration: underline;
+  }
+
+  [data-kv-design-system][data-presentation="flat"]
+    :is([data-ui="disclosure-summary"], [data-ui="disclosure-body"]) {
+    padding-inline: 0;
+  }
+
+  [data-kv-design-system][data-presentation="flat"] [data-ui="modal-sheet"] {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

package/dist/layouts/flat.css

@@ -1,74 +1 @@
-/* Opt-in white, unframed workspace. Sidebar appearance is independent. */
-@layer ket.app {
-  [data-kv-design-system][data-presentation="flat"] :is([data-ui="app-main"], [data-ui="modal-layer"]) {
-    color-scheme: light;
-    --kv-page-bg: var(--kv-ref-white);
-    --kv-page-chrome-bg: var(--kv-ref-white);
-    --kv-page-content-bg: var(--kv-ref-white);
-    --kv-panel-bg: var(--kv-ref-white);
-    --kv-panel-bg-subtle: var(--kv-ref-white);
-    --kv-table-bg: var(--kv-ref-white);
-    --kv-table-header-bg: var(--kv-ref-white);
-    --kv-table-row-bg: var(--kv-ref-white);
-    color: var(--kv-text-main);
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="app-main"] {
-    background: var(--kv-ref-white);
-  }
-
-  [data-kv-design-system][data-presentation="flat"]
-    :is([data-ui="app-main"], [data-ui="modal-layer"])
-    :is(
-      [data-ui="surface"],
-      [data-ui="metric"],
-      [data-ui="content-card"],
-      [data-ui="table-scroll"],
-      [data-ui="disclosure"],
-      [data-ui="notice"],
-      [data-ui="list-page-footer"]
-    ) {
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  [data-kv-design-system][data-presentation="flat"]
-    :is([data-ui="app-main"], [data-ui="modal-layer"])
-    :is([data-ui="surface"], [data-ui="metric"], [data-ui="content-card"], [data-ui="notice"]) {
-    padding: 0;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] {
-    overflow: visible;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="surface"] > [data-ui="surface-head"] {
-    padding: 0;
-    margin-bottom: var(--kv-space-5);
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="metric"] {
-    min-height: 0;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="content-card"] {
-    padding-block: var(--kv-space-3);
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="card-title"] a:hover {
-    text-decoration: underline;
-  }
-
-  [data-kv-design-system][data-presentation="flat"]
-    :is([data-ui="disclosure-summary"], [data-ui="disclosure-body"]) {
-    padding-inline: 0;
-  }
-
-  [data-kv-design-system][data-presentation="flat"] [data-ui="modal-sheet"] {
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-}
+@import "./flat/styles.css";