@ketvietlab/design-system 0.1.16 → 0.1.18

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

@@ -1,12 +1,14 @@
 @layer ket.app {
-  :where([data-kv-design-system]) [data-ui="list-chrome"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] {
     display: grid;
     gap: var(--kv-space-2);
     width: 100%;
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -14,21 +16,29 @@
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"]:empty {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"]:empty {
     display: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="query"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="query"] {
     flex-wrap: nowrap;
     align-items: center;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="filters"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="filters"] {
     flex: 0 1 auto;
     min-width: 0;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="tail"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="tail"] {
     flex: 0 1 auto;
     flex-wrap: nowrap;
     align-items: center;
@@ -36,12 +46,16 @@
     max-width: 100%;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-chrome-row"][data-row="meta"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-chrome-row"][data-row="meta"] {
     flex: 0 0 auto;
     flex-wrap: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search"] {
     display: flex;
     flex: 1 1 16rem;
     align-items: stretch;
@@ -52,13 +66,19 @@
     background: var(--kv-input-bg);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search"]:focus-within {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search"]:focus-within {
     border-color: var(--kv-input-border-focus);
     box-shadow: var(--kv-input-ring);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-label"],
-  :where([data-kv-design-system]) [data-ui="list-sort-label"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-label"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-sort-label"] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -67,8 +87,12 @@
     white-space: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-input"],
-  :where([data-kv-design-system]) [data-ui="list-sort-select"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-input"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-sort-select"] {
     width: 100%;
     min-width: 0;
     min-height: var(--kv-control-height-compact);
@@ -79,7 +103,9 @@
     font: inherit;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-input"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-input"] {
     flex: 1 1 auto;
     width: 100%;
     min-width: 0;
@@ -91,19 +117,25 @@
     font: inherit;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-input"]:focus-visible {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-input"]:focus-visible {
     outline: none;
     box-shadow: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-search-submit"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-search-submit"] {
     display: inline-flex;
     align-items: center;
     padding-right: var(--kv-space-1);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facets"],
-  :where([data-kv-design-system]) [data-ui="list-view-switch"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-facets"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-view-switch"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -112,8 +144,8 @@
     max-width: 100%;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facet"],
-  :where([data-kv-design-system]) [data-ui="list-view"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-facet"],
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-view"] {
     display: inline-flex;
     align-items: center;
     gap: var(--kv-space-1);
@@ -127,14 +159,20 @@
     text-decoration: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facet"][data-active="true"],
-  :where([data-kv-design-system]) [data-ui="list-view"][data-active="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-facet"][data-active="true"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-view"][data-active="true"] {
     border-color: var(--kv-color-accent);
     background: var(--kv-color-accent-soft);
     color: var(--kv-color-accent);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-facet-count"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-facet-count"] {
     display: inline-grid;
     min-width: 1.375rem;
     padding: 0 var(--kv-space-1);
@@ -147,30 +185,38 @@
     text-align: center;
   }
 
-  :where([data-kv-design-system]) [data-ui="list-sort"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="list-sort"] {
     display: inline-grid;
     grid-template-columns: minmax(8rem, 12rem) auto;
     align-items: center;
     gap: var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-sort-select"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-sort-select"] {
     padding: 0 var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-status"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-status"] {
     color: var(--kv-text-muted);
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="list-actions"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="list-actions"] {
     display: inline-flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     gap: var(--kv-space-2);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-actions"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-actions"] {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -180,11 +226,13 @@
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-actions"]:not([data-has-selection="true"]) {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-actions"]:not([data-has-selection="true"]) {
     display: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-bar"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="pager-bar"] {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -195,12 +243,25 @@
     font-size: var(--kv-text-sm);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-actions"][data-has-selection="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-actions"][data-has-selection="true"] {
     color: var(--kv-text-secondary);
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-summary"],
-  :where([data-kv-design-system]) [data-ui="pager-summary"] {
+  /* The live selected-row figure the runtime rewrites as checkboxes change. */
+  :where([data-kv-design-system]) [data-ui="bulk-count"] {
+    color: var(--kv-color-ink);
+    font-weight: var(--kv-weight-semibold);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-summary"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-summary"] {
     display: inline-flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -209,17 +270,23 @@
     white-space: nowrap;
   }
 
-  :where([data-kv-design-system]) [data-ui="bulk-action-list"],
-  :where([data-kv-design-system]) [data-ui="pager-actions"],
-  :where([data-kv-design-system]) [data-ui="pager-pages"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="bulk-action-list"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-actions"],
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-pages"] {
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--kv-space-1);
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-link"],
-  :where([data-kv-design-system]) [data-ui="pager-page"] {
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="pager-link"],
+  :where([data-kv-design-system]) [data-ui="list-chrome"][data-pattern="list-chrome"] [data-ui="pager-page"] {
     display: inline-grid;
     place-items: center;
     min-width: 2rem;
@@ -233,13 +300,28 @@
     text-decoration: none;
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-page"][data-active="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-page"][data-active="true"] {
     border-color: var(--kv-color-accent);
     background: var(--kv-color-accent-soft);
     color: var(--kv-color-accent);
   }
 
-  :where([data-kv-design-system]) [data-ui="pager-link"][data-disabled="true"] {
+  :where([data-kv-design-system])
+    [data-ui="list-chrome"][data-pattern="list-chrome"]
+    [data-ui="pager-link"][data-disabled="true"] {
     opacity: 0.45;
   }
+
+  @media (max-width: 47.9375rem) {
+    :where([data-kv-design-system])
+      [data-ui="list-chrome"][data-pattern="list-chrome"]
+      [data-ui="list-sort"] {
+      flex: 1 1 8rem;
+      grid-template-columns: minmax(0, 1fr) auto;
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
 }

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

@@ -134,6 +134,8 @@
   :where([data-kv-design-system])
     [data-ui="list-page"][data-variant="operational"]
     [data-ui="list-page-header"] {
+    display: grid;
+    min-width: 0;
     padding: var(--kv-space-4) var(--kv-page-padding-x);
     border-bottom: 1px solid var(--kv-panel-divider);
     background: var(--kv-page-chrome-bg);
@@ -143,8 +145,10 @@
     [data-ui="list-page"][data-variant="operational"]
     [data-ui="list-page-title-row"] {
     display: grid;
+    min-width: 0;
     grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--kv-space-5);
+    align-items: center;
+    gap: var(--kv-space-4);
   }
 
   :where([data-kv-design-system])

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

@@ -4,13 +4,20 @@ export declare const ModalSheet: (props: {
     id: string;
     title: string;
     body: JSXChild;
-    closeHref: string;
+    /** Required for `overlay`: a route modal closes by navigating. Ignored in `client` mode. */
+    closeHref?: string;
     closeLabel: string;
     description?: string | null;
     actions?: JSXChild;
     presentation?: 'sheet' | 'dialog';
     size?: 'default' | 'large';
-    mode?: 'overlay' | 'embedded';
+    /**
+     * `overlay` is URL-owned: its close controls are links the route runtime
+     * follows. `client` belongs to a modal island that opens and closes it in the
+     * browser: close controls are buttons, and it carries no route-modal marker, so
+     * no navigation layer ever treats closing it as a page change.
+     */
+    mode?: 'overlay' | 'embedded' | 'client';
     unsavedPrompt?: string | null;
 }) => TemplateResult;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,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;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAA;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B,KAAG,cAmEH,CAAA"}

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

@@ -11,5 +11,9 @@ export const HOOKS = [
     '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 const ModalSheet = (props) => {
+    const client = props.mode === 'client';
+    const embedded = props.mode === 'embedded';
+    return (_jsxs("div", { "data-ui": "modal-layer", "data-mode": props.mode ?? 'overlay', "data-route-modal": embedded || client ? null : 'true', "data-client-modal": client ? 'true' : null, "data-presentation": props.presentation ?? 'sheet', "data-unsaved-prompt": props.unsavedPrompt ?? null, children: [client ? (_jsx("button", { "data-ui": "modal-backdrop", type: "button", "aria-label": props.closeLabel, tabindex: "-1", children: _jsx("span", { children: props.closeLabel }) })) : (_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": embedded ? 'false' : 'true', "aria-labelledby": `${props.id}-title`, "aria-describedby": props.description ? `${props.id}-description` : null, tabindex: 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 }))] }), client ? (_jsx("button", { "data-ui": "modal-close", type: "button", "aria-label": props.closeLabel, title: props.closeLabel, children: "\u00D7" })) : (_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

@@ -1 +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"}
+{"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,KAmB1B,EAAkB,EAAE;IACnB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAA;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,KAAK,UAAU,CAAA;IAC1C,OAAO,CACL,0BACU,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,sBAChB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,uBACjC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,uBACtB,KAAK,CAAC,YAAY,IAAI,OAAO,yBAC3B,KAAK,CAAC,aAAa,IAAI,IAAI,aAE/C,MAAM,CAAC,CAAC,CAAC,CACR,4BAAgB,gBAAgB,EAAC,IAAI,EAAC,QAAQ,gBAAa,KAAK,CAAC,UAAU,EAAE,QAAQ,EAAC,IAAI,YACxF,yBAAO,KAAK,CAAC,UAAU,GAAQ,GACxB,CACV,CAAC,CAAC,CAAC,CACF,uBAAW,gBAAgB,EAAC,IAAI,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG,gBAAc,KAAK,CAAC,UAAU,YACpF,yBAAO,KAAK,CAAC,UAAU,GAAQ,GAC7B,CACL,EACD,mBACE,EAAE,EAAE,KAAK,CAAC,EAAE,aACJ,aAAa,eACV,KAAK,CAAC,IAAI,IAAI,SAAS,EAClC,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,qBACtB,GAAG,KAAK,CAAC,EAAE,QAAQ,sBAClB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,EACtE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,aAEhC,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,EACL,MAAM,CAAC,CAAC,CAAC,CACR,4BACU,aAAa,EACrB,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,UAAU,uBAGhB,CACV,CAAC,CAAC,CAAC,CACF,uBACU,aAAa,EACrB,IAAI,EAAE,KAAK,CAAC,SAAS,IAAI,GAAG,gBAChB,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,UAAU,uBAGrB,CACL,IACM,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;AACH,CAAC,CAAA"}

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

@@ -87,7 +87,7 @@
     [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)));
+    height: auto;
   }
 
   :where([data-kv-design-system]) [data-ui="modal-layer"][data-mode="embedded"] [data-ui="modal-sheet"] {

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

@@ -1,24 +1,3 @@
-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 {};
+export { pageIdentity, pageIdentityContent } from '../../layouts/page-identity/index.tsx';
+export type { PageIdentityKind, PageIdentityProps } from '../../layouts/page-identity/index.tsx';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uCAAuC,CAAA;AACzF,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA"}

package/dist/patterns/page-shell/index.js

@@ -1,11 +1,2 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
-/**
- * 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 const pageIdentityContent = (kind, props) => (_jsxs(_Fragment, { children: [_jsxs("div", { "data-ui": `${kind}-heading`, children: [!!props.eyebrow && _jsx("p", { "data-ui": `${kind}-eyebrow`, children: props.eyebrow }), _jsxs("div", { "data-ui": `${kind}-title-row`, children: [_jsx("h1", { "data-ui": `${kind}-title`, children: props.title }), props.actions !== undefined && _jsx("div", { "data-ui": `${kind}-actions`, children: props.actions })] }), (props.groupDescription || props.status !== undefined) &&
-                    (!!props.description || props.status !== undefined) ? (_jsxs("div", { "data-ui": `${kind}-subline`, children: [!!props.description && _jsx("p", { "data-ui": `${kind}-description`, children: props.description }), props.status !== undefined && _jsx("span", { "data-ui": `${kind}-status`, children: props.status })] })) : (!!props.description && _jsx("p", { "data-ui": `${kind}-description`, children: props.description }))] }), props.meta !== undefined && _jsx("div", { "data-ui": `${kind}-meta`, children: props.meta })] }));
-export const pageIdentity = (kind, props) => (_jsxs(_Fragment, { children: [props.context !== undefined && _jsx("div", { "data-ui": `${kind}-context`, children: props.context }), _jsx("header", { "data-ui": `${kind}-header`, children: pageIdentityContent(kind, props) })] }));
+export { pageIdentity, pageIdentityContent } from '../../layouts/page-identity/index.js';
 //# sourceMappingURL=index.js.map

package/dist/patterns/page-shell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":";AAwBA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,IAAsB,EACtB,KAA+B,EACf,EAAE,CAAC,CACnB,8BACE,0BAAc,GAAG,IAAI,UAAU,aAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,uBAAY,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAK,EACtE,0BAAc,GAAG,IAAI,YAAY,aAC/B,wBAAa,GAAG,IAAI,QAAQ,YAAG,KAAK,CAAC,KAAK,GAAM,EAC/C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAO,IAClF,EACL,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC;oBACvD,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CACpD,0BAAc,GAAG,IAAI,UAAU,aAC5B,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAY,GAAG,IAAI,cAAc,YAAG,KAAK,CAAC,WAAW,GAAK,EACjF,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,0BAAe,GAAG,IAAI,SAAS,YAAG,KAAK,CAAC,MAAM,GAAQ,IACjF,CACP,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAY,GAAG,IAAI,cAAc,YAAG,KAAK,CAAC,WAAW,GAAK,CAClF,IACG,EACL,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,OAAO,YAAG,KAAK,CAAC,IAAI,GAAO,IAC5E,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAsB,EAAE,KAAwB,EAAkB,EAAE,CAAC,CAChG,8BACG,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAc,GAAG,IAAI,UAAU,YAAG,KAAK,CAAC,OAAO,GAAO,EACtF,4BAAiB,GAAG,IAAI,SAAS,YAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAU,IAC7E,CACJ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/design-system/src/patterns/page-shell/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAuC,CAAA"}

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

@@ -0,0 +1,131 @@
+@layer ket.app {
+  /* Every full-page recipe delegates its location and identity band to
+     `pageIdentity`. Keep the visual contract here, rather than allowing list,
+     record and workspace recipes to drift when their bodies evolve. */
+  :where([data-kv-design-system]) [data-kv-page-identity="header"] {
+    display: grid;
+    min-width: 0;
+    gap: 0;
+    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-kv-page-identity="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-kv-page-identity="heading"] {
+    display: grid;
+    min-width: 0;
+    gap: var(--kv-space-1);
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="title-row"] {
+    display: grid;
+    min-width: 0;
+    min-block-size: var(--kv-control-height);
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--kv-space-4);
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="title"] {
+    margin: 0;
+    overflow-wrap: anywhere;
+    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-kv-page-identity="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-kv-page-identity="eyebrow"] {
+    margin: 0;
+    color: var(--kv-accent);
+    font-size: var(--kv-text-2xs);
+    font-weight: var(--kv-weight-bold);
+    line-height: var(--kv-leading-tight);
+    text-transform: uppercase;
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="subline"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) :is([data-kv-page-identity="status"], [data-kv-page-identity="meta"]) {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kv-space-2);
+  }
+
+  :where([data-kv-design-system]) [data-kv-page-identity="actions"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kv-space-2);
+  }
+
+  /* An inline submit form is useful application semantics, but its normal form
+     chrome (a separator and 1rem top padding) is not page-header chrome. Make
+     it transparent only inside the shared action slot. */
+  :where([data-kv-design-system])
+    [data-kv-page-identity="actions"]
+    [data-ui="record-form"][data-layout="inline"][data-has-fields="false"] {
+    display: contents;
+  }
+
+  :where([data-kv-design-system])
+    [data-kv-page-identity="actions"]
+    [data-ui="record-form"][data-layout="inline"][data-has-fields="false"]
+    [data-ui="form-actions"] {
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  @media (max-width: 42rem) {
+    :where([data-kv-design-system]) [data-kv-page-identity="context"] {
+      padding-inline: var(--kv-space-4);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="header"] {
+      padding: var(--kv-space-4) var(--kv-space-4) var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="title-row"] {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+      gap: var(--kv-space-3);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="title"] {
+      font-size: var(--kv-text-lg);
+    }
+
+    :where([data-kv-design-system]) [data-kv-page-identity="actions"] {
+      justify-content: flex-start;
+    }
+  }
+}

package/dist/patterns/patterns.css

@@ -10,3 +10,4 @@
 @import "./form-page/styles.css";
 @import "./record-page/styles.css";
 @import "./workspace-page/styles.css";
+@import "./page-shell/styles.css";

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

@@ -1 +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"}
+{"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;AAiCnE,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,cA2BH,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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+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 = [
     'notice',
@@ -15,7 +15,14 @@ export const HOOKS = [
     '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 })] }));
+// Lucide (ISC) glyphs, vendored per tone: info, circle-check, triangle-alert, circle-alert.
+const NOTICE_ICONS = {
+    info: () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16v-4" }), _jsx("path", { d: "M12 8h.01" })] })),
+    positive: () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "m9 12 2 2 4-4" })] })),
+    warning: () => (_jsxs(_Fragment, { children: [_jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), _jsx("path", { d: "M12 9v4" }), _jsx("path", { d: "M12 17h.01" })] })),
+    danger: () => (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4" }), _jsx("path", { d: "M12 16h.01" })] })),
+};
+export const Notice = (props) => (_jsxs("aside", { "data-ui": "notice", "data-pattern": "notice", "data-tone": props.tone ?? 'info', role: props.tone === 'danger' ? 'alert' : 'status', children: [_jsx("span", { "data-ui": "notice-mark", "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false", children: NOTICE_ICONS[props.tone ?? 'info']() }) }), _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