@ketvietlab/design-system 0.1.9 → 0.1.13

package/dist/patterns/list-page/styles.css

@@ -0,0 +1,228 @@
+@layer ket.app {
+  :where([data-kv-design-system])
+    :is(
+      [data-ui="list-page"],
+      [data-ui="record-page"],
+      [data-ui="form-page"],
+      [data-ui="dashboard-page"],
+      [data-ui="board-page"]
+    ) {
+    --kv-page-title-size: 1.5rem;
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-3);
+    padding: var(--kv-space-6) var(--kv-page-padding-x) var(--kv-space-10);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-header"] {
+    min-width: 0;
+    padding-bottom: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-title-row"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-eyebrow"] {
+    margin: 0;
+    color: var(--kv-accent);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-bold);
+    letter-spacing: 0;
+    line-height: var(--kv-leading-tight);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-title"] {
+    margin: 0;
+    color: var(--kv-text-main);
+    font-size: var(--kv-page-title-size);
+    font-weight: var(--kv-weight-semibold);
+    letter-spacing: 0;
+    line-height: var(--kv-leading-tight);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-description"] {
+    max-width: 48rem;
+    margin: 0;
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-sm);
+    line-height: var(--kv-leading-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-actions"] {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-toolbar"] {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+    padding: var(--kv-space-2);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg-subtle);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-controls"] {
+    min-width: min(100%, 24rem);
+    flex: 1 1 40rem;
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-status"] {
+    min-width: max-content;
+    flex: 0 0 auto;
+    padding-inline: var(--kv-space-2);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-body"] {
+    min-width: 0;
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page-footer"] {
+    min-width: 0;
+    padding-top: var(--kv-space-3);
+    border-top: 1px solid var(--kv-panel-divider);
+    color: var(--kv-text-muted);
+    font-size: var(--kv-text-xs);
+  }
+
+  /* Application collections opt into the full operational workspace. This keeps
+     context, identity, command bar and results in distinct horizontal bands so
+     dense records remain the visual focus. */
+  :where([data-kv-design-system]) [data-ui="list-page"][data-variant="operational"] {
+    gap: 0;
+    padding: 0 0 var(--kv-space-10);
+    background: var(--kv-page-content-bg);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-context"] {
+    display: flex;
+    min-width: 0;
+    min-height: var(--kv-table-header-height);
+    align-items: center;
+    padding-inline: var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-header"] {
+    padding: var(--kv-space-4) var(--kv-page-padding-x);
+    border-bottom: 1px solid var(--kv-panel-divider);
+    background: var(--kv-page-chrome-bg);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-title-row"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: var(--kv-space-5);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-actions"] {
+    justify-content: flex-end;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-toolbar"] {
+    padding: var(--kv-space-3) var(--kv-page-padding-x) var(--kv-space-2-5);
+    border: 0;
+    border-radius: 0;
+    background: var(--kv-page-bg);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-controls"] {
+    min-width: 0;
+    flex-basis: 100%;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-body"] {
+    padding-top: var(--kv-space-2);
+    padding-inline: var(--kv-page-padding-x);
+    background: var(--kv-page-content-bg);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-footer"] {
+    margin: var(--kv-space-3) var(--kv-page-padding-x) 0;
+    padding: var(--kv-space-2-5) var(--kv-space-3);
+    border: 1px solid var(--kv-panel-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-panel-bg);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-body"]:has(+ [data-ui="list-page-footer"])
+    > [data-ui="table-scroll"] {
+    border-radius: var(--kv-radius-md) var(--kv-radius-md) 0 0;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-page"][data-variant="operational"]
+    [data-ui="list-page-body"]:has(> [data-ui="table-scroll"])
+    + [data-ui="list-page-footer"] {
+    margin-top: -1px;
+    border-radius: 0 0 var(--kv-radius-md) var(--kv-radius-md);
+  }
+
+  /* Lists are page regions, not cards. More capable application tables may add
+     selection, grouping or configurable columns while retaining this surface. */
+  :where([data-kv-design-system]) [data-ui="list-page"] [data-ui="table-scroll"] {
+    margin: 0;
+    border-color: var(--kv-table-border);
+    border-radius: var(--kv-radius-md);
+    background: var(--kv-table-bg);
+    box-shadow: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page"] [data-ui="table"] th {
+    background: var(--kv-table-header-bg);
+    color: var(--kv-table-header-text);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page"] [data-ui="row"] td {
+    background: var(--kv-table-row-bg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="list-page"] [data-ui="row"]:hover td {
+    background: var(--kv-table-row-hover);
+  }
+}

package/dist/patterns/list-page.d.ts

@@ -1,31 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['list-page', 'list-page-context', 'list-page-header', 'list-page-heading', 'list-page-title-row', 'list-page-eyebrow', 'list-page-title', 'list-page-description', 'list-page-actions', 'list-page-toolbar', 'list-page-controls', 'list-page-status', 'list-page-body', 'list-page-footer'];
-export type ListPageProps = {
-    title: string;
-    body: JSXChild;
-    /**
-     * A narrow application context strip above the page identity. The application
-     * owns its breadcrumbs and organisation switcher; the pattern owns the slot.
-     */
-    context?: JSXChild;
-    /**
-     * `operational` is the full workspace composition used by application collection
-     * screens. The unadorned variant remains available for embedded specimens.
-     */
-    variant?: 'operational';
-    eyebrow?: string | null;
-    description?: string | null;
-    actions?: JSXChild;
-    controls?: JSXChild;
-    status?: JSXChild;
-    footer?: JSXChild;
-};
-/**
- * The baseline for an operational collection screen.
- *
- * Applications own the translated copy, URL-driven controls and records. This
- * pattern owns their order and rhythm: identity and primary action first, query
- * controls second, then the result status and the collection itself.
- */
-export declare const ListPage: (props: ListPageProps) => TemplateResult;
+export * from './list-page/index.tsx';
 //# sourceMappingURL=list-page.d.ts.map

package/dist/patterns/list-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/list-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGtE,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,CACV,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,MAAM,CAAC,EAAE,QAAQ,CAAA;CAClB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,UAAW,aAAa,KAAG,cA2B/C,CAAA"}
+{"version":3,"file":"list-page.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/list-page.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist/patterns/list-page.js

@@ -1,41 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-import { pageIdentity } from './page-shell.js';
-export const HOOKS = [
-    'list-page',
-    'list-page-context',
-    'list-page-header',
-    'list-page-heading',
-    'list-page-title-row',
-    'list-page-eyebrow',
-    'list-page-title',
-    'list-page-description',
-    'list-page-actions',
-    'list-page-toolbar',
-    'list-page-controls',
-    'list-page-status',
-    'list-page-body',
-    'list-page-footer',
-];
-/**
- * The baseline for an operational collection screen.
- *
- * Applications own the translated copy, URL-driven controls and records. This
- * pattern owns their order and rhythm: identity and primary action first, query
- * controls second, then the result status and the collection itself.
- */
-export const ListPage = (props) => {
-    const operational = props.variant === 'operational';
-    // Result summaries close the collection in an operational workspace. Keeping
-    // the legacy `status` prop as the input lets existing screens migrate without
-    // duplicating their translated count as a separate footer value.
-    const toolbarStatus = operational ? undefined : props.status;
-    const footer = props.footer ?? (operational ? props.status : undefined);
-    return (_jsxs("section", { "data-ui": "list-page", "data-variant": props.variant ?? null, "data-pattern": "list", children: [pageIdentity('list-page', {
-                context: props.context,
-                eyebrow: props.eyebrow,
-                title: props.title,
-                description: props.description,
-                actions: props.actions,
-            }), (props.controls !== undefined || toolbarStatus !== undefined) && (_jsxs("div", { "data-ui": "list-page-toolbar", children: [toolbarStatus !== undefined && _jsx("div", { "data-ui": "list-page-status", children: toolbarStatus }), props.controls !== undefined && _jsx("div", { "data-ui": "list-page-controls", children: props.controls })] })), _jsx("div", { "data-ui": "list-page-body", children: props.body }), footer !== undefined && _jsx("footer", { "data-ui": "list-page-footer", children: footer })] }));
-};
+export * from './list-page/index.js';
 //# sourceMappingURL=list-page.js.map

package/dist/patterns/list-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/list-page.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAkB,CAAA;AAE/C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,qBAAqB;IACrB,mBAAmB;IACnB,iBAAiB;IACjB,uBAAuB;IACvB,mBAAmB;IACnB,mBAAmB;IACnB,oBAAoB;IACpB,kBAAkB;IAClB,gBAAgB;IAChB,kBAAkB;CACV,CAAA;AAuBV;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAkB,EAAE;IAC/D,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,KAAK,aAAa,CAAA;IACnD,6EAA6E;IAC7E,8EAA8E;IAC9E,iEAAiE;IACjE,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAA;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAEvE,OAAO,CACL,8BAAiB,WAAW,kBAAe,KAAK,CAAC,OAAO,IAAI,IAAI,kBAAe,MAAM,aAClF,YAAY,CAAC,WAAW,EAAE;gBACzB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,WAAW,EAAE,KAAK,CAAC,WAAW;gBAC9B,OAAO,EAAE,KAAK,CAAC,OAAO;aACvB,CAAC,EACD,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,aAAa,KAAK,SAAS,CAAC,IAAI,CAChE,0BAAa,mBAAmB,aAC7B,aAAa,KAAK,SAAS,IAAI,yBAAa,kBAAkB,YAAE,aAAa,GAAO,EACpF,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,yBAAa,oBAAoB,YAAE,KAAK,CAAC,QAAQ,GAAO,IACrF,CACP,EACD,yBAAa,gBAAgB,YAAE,KAAK,CAAC,IAAI,GAAO,EAC/C,MAAM,KAAK,SAAS,IAAI,4BAAgB,kBAAkB,YAAE,MAAM,GAAU,IACrE,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"list-page.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/list-page.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAuB,CAAA"}

package/dist/patterns/modal-sheet/index.d.ts

@@ -0,0 +1,16 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export declare const HOOKS: readonly ['modal-layer', 'modal-backdrop', 'modal-sheet', 'modal-head', 'modal-heading', 'modal-title', 'modal-description', 'modal-close', 'modal-body', 'modal-actions'];
+export declare const ModalSheet: (props: {
+    id: string;
+    title: string;
+    body: JSXChild;
+    closeHref: string;
+    closeLabel: string;
+    description?: string | null;
+    actions?: JSXChild;
+    presentation?: 'sheet' | 'dialog';
+    size?: 'default' | 'large';
+    mode?: 'overlay' | 'embedded';
+    unsavedPrompt?: string | null;
+}) => TemplateResult;
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/modal-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/modal-sheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,CACP,CAAA;AAEV,eAAO,MAAM,UAAU,UAAW;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,KAAG,cA6CH,CAAA"}

package/dist/patterns/modal-sheet/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+export const HOOKS = [
+    'modal-layer',
+    'modal-backdrop',
+    'modal-sheet',
+    'modal-head',
+    'modal-heading',
+    'modal-title',
+    'modal-description',
+    'modal-close',
+    'modal-body',
+    'modal-actions',
+];
+export const ModalSheet = (props) => (_jsxs("div", { "data-ui": "modal-layer", "data-mode": props.mode ?? 'overlay', "data-route-modal": props.mode === 'embedded' ? null : 'true', "data-presentation": props.presentation ?? 'sheet', "data-unsaved-prompt": props.unsavedPrompt ?? null, children: [_jsx("a", { "data-ui": "modal-backdrop", href: props.closeHref, "aria-label": props.closeLabel, children: _jsx("span", { children: props.closeLabel }) }), _jsxs("section", { id: props.id, "data-ui": "modal-sheet", "data-size": props.size ?? 'default', role: "dialog", "aria-modal": props.mode === 'embedded' ? 'false' : 'true', "aria-labelledby": `${props.id}-title`, "aria-describedby": props.description ? `${props.id}-description` : null, tabindex: props.mode === 'embedded' ? null : '-1', children: [_jsxs("header", { "data-ui": "modal-head", children: [_jsxs("div", { "data-ui": "modal-heading", children: [_jsx("h2", { "data-ui": "modal-title", id: `${props.id}-title`, children: props.title }), !!props.description && (_jsx("p", { "data-ui": "modal-description", id: `${props.id}-description`, children: props.description }))] }), _jsx("a", { "data-ui": "modal-close", href: props.closeHref, "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" })] }), _jsx("div", { "data-ui": "modal-body", children: props.body }), props.actions !== undefined && _jsx("footer", { "data-ui": "modal-actions", children: props.actions })] })] }));
+//# sourceMappingURL=index.js.map

package/dist/patterns/modal-sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/modal-sheet/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,YAAY;IACZ,eAAe;IACf,aAAa;IACb,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,eAAe;CACP,CAAA;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAY1B,EAAkB,EAAE,CAAC,CACpB,0BACU,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,sBAChB,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,uBACxC,KAAK,CAAC,YAAY,IAAI,OAAO,yBAC3B,KAAK,CAAC,aAAa,IAAI,IAAI,aAEhD,uBAAW,gBAAgB,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,gBAAc,KAAK,CAAC,UAAU,YAC7E,yBAAO,KAAK,CAAC,UAAU,GAAQ,GAC7B,EACJ,mBACE,EAAE,EAAE,KAAK,CAAC,EAAE,aACJ,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,qBACvC,GAAG,KAAK,CAAC,EAAE,QAAQ,sBAClB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,EACtE,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,aAEjD,6BAAgB,YAAY,aAC1B,0BAAa,eAAe,aAC1B,wBAAY,aAAa,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,QAAQ,YAC9C,KAAK,CAAC,KAAK,GACT,EACJ,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,CACtB,uBAAW,mBAAmB,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,cAAc,YACzD,KAAK,CAAC,WAAW,GAChB,CACL,IACG,EACN,uBACU,aAAa,EACrB,IAAI,EAAE,KAAK,CAAC,SAAS,gBACT,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,UAAU,uBAGrB,IACG,EACT,yBAAa,YAAY,YAAE,KAAK,CAAC,IAAI,GAAO,EAC3C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,4BAAgB,eAAe,YAAE,KAAK,CAAC,OAAO,GAAU,IAChF,IACN,CACP,CAAA"}

package/dist/patterns/modal-sheet/styles.css

@@ -0,0 +1,219 @@
+@layer ket.app {
+  :where([data-kv-design-system]) [data-ui="modal-layer"] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--kv-z-modal);
+    display: grid;
+    min-width: 0;
+    justify-items: end;
+    overflow: hidden;
+  }
+
+  body:has([data-kv-design-system] [data-ui="modal-layer"][data-route-modal="true"]) {
+    overflow: hidden;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-layer"][data-presentation="dialog"] {
+    place-items: center;
+    padding: var(--kv-space-6);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-layer"][data-mode="embedded"] {
+    position: relative;
+    min-height: 20rem;
+    inset: auto;
+    padding: var(--kv-space-4);
+    place-items: center;
+    border-radius: var(--kv-radius-md);
+    background:
+      linear-gradient(135deg, color-mix(in srgb, var(--kv-color-accent-soft) 60%, transparent), transparent),
+      var(--kv-color-canvas);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-backdrop"] {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    display: block;
+    background: rgb(12 14 16 / 52%);
+    backdrop-filter: blur(3px);
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-backdrop"] > span {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-layer"][data-mode="embedded"] [data-ui="modal-backdrop"] {
+    background: transparent;
+    backdrop-filter: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-sheet"] {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    width: min(34rem, 100vw);
+    max-width: 100%;
+    height: 100dvh;
+    min-width: 0;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    border-left: 1px solid var(--kv-color-line-strong);
+    background: var(--kv-color-surface);
+    box-shadow: var(--kv-shadow-popover);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-sheet"][data-size="large"] {
+    width: min(56rem, 100vw);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="modal-layer"][data-presentation="dialog"]
+    [data-ui="modal-sheet"] {
+    width: min(56rem, 100%);
+    height: auto;
+    max-height: calc(100dvh - var(--kv-space-12));
+    overflow: hidden;
+    border: 1px solid var(--kv-color-line-strong);
+    border-radius: var(--kv-radius-lg);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="modal-layer"][data-presentation="dialog"]
+    [data-ui="modal-sheet"][data-size="large"] {
+    width: min(75rem, 100%);
+    height: min(62.5rem, calc(100dvh - var(--kv-space-12)));
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-layer"][data-mode="embedded"] [data-ui="modal-sheet"] {
+    width: min(34rem, 100%);
+    height: auto;
+    max-height: calc(100dvh - 2rem);
+    overflow: hidden;
+    border: 1px solid var(--kv-color-line-strong);
+    border-radius: var(--kv-radius-lg);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-head"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kv-space-4);
+    padding: var(--kv-space-4) var(--kv-space-5);
+    border-bottom: 1px solid var(--kv-color-line);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-title"] {
+    min-width: 0;
+    margin: 0;
+    overflow: hidden;
+    color: var(--kv-color-ink);
+    font-family: var(--kv-font-display);
+    font-size: var(--kv-text-lg);
+    font-weight: 650;
+    line-height: var(--kv-leading-tight);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-description"] {
+    margin: 0;
+    color: var(--kv-color-ink-secondary);
+    font-size: var(--kv-text-sm);
+    line-height: var(--kv-leading-normal);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-close"] {
+    display: grid;
+    flex: none;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border-radius: 50%;
+    color: var(--kv-color-ink-muted);
+    font-size: 1.4rem;
+    line-height: 1;
+    text-decoration: none;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-close"]:hover {
+    background: var(--kv-color-surface-hover);
+    color: var(--kv-color-ink);
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-body"] {
+    min-width: 0;
+    overflow: auto;
+    padding: var(--kv-space-5);
+    overscroll-behavior: contain;
+  }
+
+  :where([data-kv-design-system]) [data-ui="modal-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--kv-space-2);
+    padding: var(--kv-space-4) var(--kv-space-5);
+    border-top: 1px solid var(--kv-color-line);
+    background: var(--kv-color-surface);
+  }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system]) [data-ui="modal-layer"],
+    :where([data-kv-design-system]) [data-ui="modal-layer"][data-presentation="dialog"] {
+      padding: 0;
+      place-items: stretch;
+      justify-items: stretch;
+    }
+
+    :where([data-kv-design-system])
+      [data-ui="modal-layer"]:not([data-mode="embedded"])
+      [data-ui="modal-sheet"],
+    :where([data-kv-design-system])
+      [data-ui="modal-layer"]:not([data-mode="embedded"])
+      [data-ui="modal-sheet"][data-size],
+    :where([data-kv-design-system])
+      [data-ui="modal-layer"][data-presentation="dialog"]:not([data-mode="embedded"])
+      [data-ui="modal-sheet"][data-size] {
+      width: 100%;
+      height: 100dvh;
+      max-height: 100dvh;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    :where([data-kv-design-system]) [data-ui="modal-head"] {
+      padding: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-ui="modal-title"] {
+      white-space: normal;
+    }
+
+    :where([data-kv-design-system]) [data-ui="modal-body"] {
+      padding: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-ui="modal-actions"] {
+      justify-content: stretch;
+      padding: var(--kv-space-3) var(--kv-space-4) max(var(--kv-space-4), env(safe-area-inset-bottom));
+    }
+
+    :where([data-kv-design-system]) [data-ui="modal-actions"] > [data-ui="action"] {
+      flex: 1 1 auto;
+    }
+  }
+}

package/dist/patterns/modal-sheet.d.ts

@@ -1,16 +1,2 @@
-import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['modal-layer', 'modal-backdrop', 'modal-sheet', 'modal-head', 'modal-heading', 'modal-title', 'modal-description', 'modal-close', 'modal-body', 'modal-actions'];
-export declare const ModalSheet: (props: {
-    id: string;
-    title: string;
-    body: JSXChild;
-    closeHref: string;
-    closeLabel: string;
-    description?: string | null;
-    actions?: JSXChild;
-    presentation?: 'sheet' | 'dialog';
-    size?: 'default' | 'large';
-    mode?: 'overlay' | 'embedded';
-    unsavedPrompt?: string | null;
-}) => TemplateResult;
+export * from './modal-sheet/index.tsx';
 //# sourceMappingURL=modal-sheet.d.ts.map

package/dist/patterns/modal-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-sheet.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/modal-sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,aAAa,EACb,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,CACP,CAAA;AAEV,eAAO,MAAM,UAAU,UAAW;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC1B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,KAAG,cA6CH,CAAA"}
+{"version":3,"file":"modal-sheet.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/modal-sheet.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA"}

package/dist/patterns/modal-sheet.js

@@ -1,15 +1,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-export const HOOKS = [
-    'modal-layer',
-    'modal-backdrop',
-    'modal-sheet',
-    'modal-head',
-    'modal-heading',
-    'modal-title',
-    'modal-description',
-    'modal-close',
-    'modal-body',
-    'modal-actions',
-];
-export const ModalSheet = (props) => (_jsxs("div", { "data-ui": "modal-layer", "data-mode": props.mode ?? 'overlay', "data-route-modal": props.mode === 'embedded' ? null : 'true', "data-presentation": props.presentation ?? 'sheet', "data-unsaved-prompt": props.unsavedPrompt ?? null, children: [_jsx("a", { "data-ui": "modal-backdrop", href: props.closeHref, "aria-label": props.closeLabel, children: _jsx("span", { children: props.closeLabel }) }), _jsxs("section", { id: props.id, "data-ui": "modal-sheet", "data-size": props.size ?? 'default', role: "dialog", "aria-modal": props.mode === 'embedded' ? 'false' : 'true', "aria-labelledby": `${props.id}-title`, "aria-describedby": props.description ? `${props.id}-description` : null, tabindex: props.mode === 'embedded' ? null : '-1', children: [_jsxs("header", { "data-ui": "modal-head", children: [_jsxs("div", { "data-ui": "modal-heading", children: [_jsx("h2", { "data-ui": "modal-title", id: `${props.id}-title`, children: props.title }), !!props.description && (_jsx("p", { "data-ui": "modal-description", id: `${props.id}-description`, children: props.description }))] }), _jsx("a", { "data-ui": "modal-close", href: props.closeHref, "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" })] }), _jsx("div", { "data-ui": "modal-body", children: props.body }), props.actions !== undefined && _jsx("footer", { "data-ui": "modal-actions", children: props.actions })] })] }));
+export * from './modal-sheet/index.js';
 //# sourceMappingURL=modal-sheet.js.map

package/dist/patterns/modal-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-sheet.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/modal-sheet.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,aAAa;IACb,gBAAgB;IAChB,aAAa;IACb,YAAY;IACZ,eAAe;IACf,aAAa;IACb,mBAAmB;IACnB,aAAa;IACb,YAAY;IACZ,eAAe;CACP,CAAA;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAY1B,EAAkB,EAAE,CAAC,CACpB,0BACU,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,sBAChB,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,uBACxC,KAAK,CAAC,YAAY,IAAI,OAAO,yBAC3B,KAAK,CAAC,aAAa,IAAI,IAAI,aAEhD,uBAAW,gBAAgB,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,gBAAc,KAAK,CAAC,UAAU,YAC7E,yBAAO,KAAK,CAAC,UAAU,GAAQ,GAC7B,EACJ,mBACE,EAAE,EAAE,KAAK,CAAC,EAAE,aACJ,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,qBACvC,GAAG,KAAK,CAAC,EAAE,QAAQ,sBAClB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,EACtE,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,aAEjD,6BAAgB,YAAY,aAC1B,0BAAa,eAAe,aAC1B,wBAAY,aAAa,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,QAAQ,YAC9C,KAAK,CAAC,KAAK,GACT,EACJ,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,CACtB,uBAAW,mBAAmB,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,cAAc,YACzD,KAAK,CAAC,WAAW,GAChB,CACL,IACG,EACN,uBACU,aAAa,EACrB,IAAI,EAAE,KAAK,CAAC,SAAS,gBACT,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,UAAU,uBAGrB,IACG,EACT,yBAAa,YAAY,YAAE,KAAK,CAAC,IAAI,GAAO,EAC3C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,4BAAgB,eAAe,YAAE,KAAK,CAAC,OAAO,GAAU,IAChF,IACN,CACP,CAAA"}
+{"version":3,"file":"modal-sheet.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/modal-sheet.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAyB,CAAA"}

package/dist/patterns/page-shell/index.d.ts

@@ -0,0 +1,24 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+export type PageIdentityKind = 'list-page' | 'record-page' | 'form-page' | 'workspace-page' | 'dashboard-page' | 'board-page';
+export type PageIdentityProps = {
+    context?: JSXChild;
+    eyebrow?: string | null;
+    title: string;
+    description?: string | null;
+    status?: JSXChild;
+    actions?: JSXChild;
+    meta?: JSXChild;
+};
+type PageIdentityContentProps = PageIdentityProps & {
+    groupDescription?: boolean;
+};
+/**
+ * The single identity band shared by every full-page pattern.
+ *
+ * The pattern name remains in each hook so consumers can style the content
+ * contract without reimplementing breadcrumbs, title hierarchy or actions.
+ */
+export declare const pageIdentityContent: (kind: PageIdentityKind, props: PageIdentityContentProps) => TemplateResult;
+export declare const pageIdentity: (kind: PageIdentityKind, props: PageIdentityProps) => TemplateResult;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/page-shell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,aAAa,GACb,WAAW,GACX,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED,KAAK,wBAAwB,GAAG,iBAAiB,GAAG;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,SACxB,gBAAgB,SACf,wBAAwB,KAC9B,cAoBF,CAAA;AAED,eAAO,MAAM,YAAY,SAAU,gBAAgB,SAAS,iBAAiB,KAAG,cAK/E,CAAA"}