@ketvietlab/design-system 0.1.6 → 0.1.8

package/dist/layouts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAI7C,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACT,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,YAAY;IACZ,oBAAoB;IACpB,iBAAiB;IACjB,SAAS;IACT,cAAc;IACd,iBAAiB;IACjB,eAAe;IACf,qBAAqB;IACrB,iBAAiB;IACjB,cAAc;IACd,cAAc;IACd,WAAW;IACX,YAAY;IACZ,cAAc;IACd,WAAW;IACX,WAAW;IACX,cAAc;IACd,QAAQ;IACR,aAAa;IACb,cAAc;IACd,cAAc;IACd,eAAe;CACP,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAa,CAAA;AAErF,MAAM,KAAK,GAAG,CAAC,KAAqC,EAAkB,EAAE,CAAC,CACvE,4BACG,IAAI,CACH,KAAK,CAAC,KAAK,EACX,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EACnB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,yBAAO,IAAI,GAAQ,CAAC,CAAC,CAAC,4BAAG,IAAI,GAAI,CAAC,CACrG,GACA,CACJ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAGrB,EAAkB,EAAE,CAAC,CACpB,yBAAa,OAAO,cAAW,KAAK,CAAC,GAAG,IAAI,SAAS,YACnD,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,GACzB,CACP,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAqC,EAAkB,EAAE,CAAC,CAC/E,yBAAa,QAAQ,YACnB,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,GACzB,CACP,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAA0D,EAAkB,EAAE,CAAC,CAClG,yBAAa,MAAM,kBAAe,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,YAC1D,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,GACzB,CACP,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAMvB,EAAkB,EAAE,CAAC,CACpB,0BACU,SAAS,eACN,KAAK,CAAC,IAAI,IAAI,SAAS,kBACpB,KAAK,CAAC,OAAO,IAAI,SAAS,sBACtB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,aAE5C,KAAK,CAAC,KAAK,IAAI,CACd,6BAAgB,cAAc,aAC5B,wBAAY,eAAe,YAAE,KAAK,CAAC,KAAK,GAAM,EAC7C,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,iBAAiB,YAAE,KAAK,CAAC,OAAO,GAAO,IAC7E,CACV,EACA,KAAK,CAAC,IAAI,IACP,CACP,CAAA;AAED,qFAAqF;AACrF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA0D,EAAkB,EAAE,CAAC,CACxG,8BAAiB,YAAY,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,aACxE,6BAAiB,oBAAoB,YAAE,KAAK,CAAC,OAAO,GAAW,EAC/D,yBAAa,iBAAiB,YAAE,KAAK,CAAC,IAAI,GAAO,IACzC,CACX,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAMvB,EAAkB,EAAE,CAAC,CACpB,8BAAiB,SAAS,aACxB,6BAAgB,cAAc,aAC5B,0BACG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,uBAAW,iBAAiB,YAAE,KAAK,CAAC,OAAO,GAAK,EACpE,wBAAY,eAAe,YAAE,KAAK,CAAC,KAAK,GAAM,EAC7C,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAW,qBAAqB,YAAE,KAAK,CAAC,WAAW,GAAK,IAC5E,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,iBAAiB,YAAE,KAAK,CAAC,OAAO,GAAO,IAC7E,EACT,yBAAa,cAAc,YAAE,KAAK,CAAC,IAAI,GAAO,IACtC,CACX,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAQ3B,EAAkB,EAAE,CAAC,CACpB,8BACU,cAAc,sBACJ,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,mBACvB,MAAM,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,aAE9C,6BAAgB,WAAW,aACzB,wBAAY,YAAY,YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAG,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,KAAK,GAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAM,EAChG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,uBAAW,cAAc,YAAE,KAAK,CAAC,OAAO,GAAK,IAC1D,EACR,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAa,WAAW,YAAE,KAAK,CAAC,IAAI,GAAO,EACvE,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAa,WAAW,YAAE,KAAK,CAAC,IAAI,GAAO,EACvE,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,cAAc,YAAE,KAAK,CAAC,OAAO,GAAO,IACzE,CACX,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAWtB,EAAkB,EAAE;IACnB,MAAM,UAAU,GAAG;QACjB,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,KAAK,CAAC,IAAI,IAAI,SAAS;QACpC,2EAA2E;QAC3E,2EAA2E;QAC3E,yEAAyE;QACzE,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC;KACzE,CAAA;IACD,MAAM,IAAI,GAAG,CACX,8BACG,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,CAC3B,0BAAc,aAAa,iBAAa,MAAM,YAC3C,KAAK,CAAC,IAAI,GACN,CACR,EACD,uBAAW,cAAc,YAAE,KAAK,CAAC,KAAK,GAAK,EAC3C,uBAAW,cAAc,YAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAK,EAClD,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,uBAAW,eAAe,YAAE,KAAK,CAAC,MAAM,GAAK,IAC/D,CACJ,CAAA;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAClB,eAAO,UAAU,sBAAmB,MAAM,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,YACxD,IAAI,GACH,CACL,CAAC,CAAC,CAAC,CACF,qBAAa,UAAU,sBAAmB,OAAO,YAC9C,IAAI,GACG,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/layouts/layouts.css

@@ -21,6 +21,7 @@
 
   :where([data-kv-design-system]) [data-ui="grid"] {
     display: grid;
+    align-items: start;
     grid-template-columns: repeat(var(--kv-grid-columns, 3), minmax(0, 1fr));
     gap: var(--kv-space-4);
   }
@@ -61,6 +62,43 @@
     padding: var(--kv-space-5);
   }
 
+  :where([data-kv-design-system]) [data-ui="surface"][data-has-heading="true"] {
+    overflow: clip;
+  }
+
+  :where([data-kv-design-system]) [data-ui="surface-head"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kv-space-3);
+    margin-bottom: var(--kv-space-5);
+  }
+
+  :where([data-kv-design-system]) [data-ui="surface"][data-padding="none"][data-has-heading="true"] {
+    padding: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system])
+    [data-ui="surface"][data-padding="none"][data-has-heading="true"]
+    > [data-ui="surface-head"] {
+    padding: 0;
+    margin-bottom: var(--kv-space-3);
+  }
+
+  :where([data-kv-design-system]) [data-ui="surface-title"] {
+    min-width: 0;
+    margin: 0;
+    font-size: var(--kv-text-xl);
+    font-weight: var(--kv-weight-semibold);
+    line-height: var(--kv-leading-tight);
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-kv-design-system]) [data-ui="surface-actions"] {
+    min-width: 0;
+  }
+
   :where([data-kv-design-system]) [data-ui="disclosure"] {
     min-width: 0;
     overflow: clip;
@@ -110,16 +148,16 @@
 
   :where([data-kv-design-system]) [data-ui="section"] {
     display: grid;
+    min-width: 0;
+    align-content: start;
     gap: var(--kv-space-3);
   }
 
   :where([data-kv-design-system]) [data-ui="section-head"] {
     display: flex;
-    align-items: end;
+    align-items: flex-start;
     justify-content: space-between;
     gap: var(--kv-space-4);
-    padding-bottom: var(--kv-space-3);
-    border-bottom: 1px solid var(--kv-color-line);
   }
 
   :where([data-kv-design-system]) [data-ui="section-eyebrow"] {
@@ -128,7 +166,7 @@
     font-family: var(--kv-font-mono);
     font-size: var(--kv-text-xs);
     font-weight: 800;
-    letter-spacing: 0.1em;
+    letter-spacing: 0;
     text-transform: uppercase;
   }
 
@@ -273,7 +311,7 @@
     color: var(--kv-text-secondary);
     font-size: var(--kv-text-xs);
     font-weight: var(--kv-weight-semibold);
-    letter-spacing: 0.05em;
+    letter-spacing: 0;
     text-transform: uppercase;
   }
 
@@ -310,7 +348,7 @@
     font-size: var(--kv-text-2xl);
     font-weight: var(--kv-weight-bold);
     font-variant-numeric: tabular-nums;
-    letter-spacing: -0.025em;
+    letter-spacing: 0;
   }
 
   :where([data-kv-design-system]) [data-ui="metric-detail"] {
@@ -325,7 +363,6 @@
     }
 
     :where([data-kv-design-system]) [data-ui="section-head"] {
-      align-items: start;
       flex-direction: column;
     }
   }

package/dist/layouts/shell.css

@@ -17,7 +17,7 @@
     top: 0;
     height: 100dvh;
     min-width: 0;
-    overflow: hidden;
+    overflow-y: auto;
     border-right: 1px solid var(--kv-sidebar-border);
     border-radius: var(--kv-radius-app-region);
     background: var(--kv-sidebar-bg);
@@ -74,7 +74,7 @@
     margin: 0;
     font-size: var(--kv-text-2xl);
     font-weight: var(--kv-weight-semibold);
-    letter-spacing: -0.025em;
+    letter-spacing: 0;
     line-height: var(--kv-leading-tight);
   }
 
@@ -118,6 +118,20 @@
     font-weight: var(--kv-weight-semibold);
   }
 
+  @media (min-width: 48.0625rem) and (max-width: 75rem) {
+    :where([data-kv-design-system]) [data-ui="app-shell"][data-has-right-rail="true"] {
+      grid-template-columns: var(--kv-sidebar-width) minmax(0, 1fr);
+    }
+
+    :where([data-kv-design-system]) [data-ui="app-right-rail"] {
+      position: static;
+      grid-column: 2;
+      height: auto;
+      border-left: 0;
+      border-top: 1px solid var(--kv-right-rail-border);
+    }
+  }
+
   @media (max-width: 48rem) {
     :where([data-kv-design-system]) [data-ui="app-shell"],
     :where([data-kv-design-system]) [data-ui="app-shell"][data-has-right-rail="true"] {

package/dist/layouts/shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,CACd,CAAA;AAEV,eAAO,MAAM,QAAQ,UAAW;IAC9B,OAAO,EAAE,QAAQ,CAAA;IACjB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAC/B,KAAG,cAUH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAQH,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAKH,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,KAAG,cAIxD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAKhF,CAAA"}
+{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEtE,eAAO,MAAM,KAAK,YAChB,WAAW,EACX,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,CACd,CAAA;AAEV,eAAO,MAAM,QAAQ,UAAW;IAC9B,OAAO,EAAE,QAAQ,CAAA;IACjB,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;CAC/B,KAAG,cAcH,CAAA;AAED,eAAO,MAAM,UAAU,UAAW;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAQH,CAAA;AAED,eAAO,MAAM,IAAI,UAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,QAAQ,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,QAAQ,CAAA;CACnB,KAAG,cAKH,CAAA;AAED,eAAO,MAAM,YAAY,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,KAAG,cAIxD,CAAA;AAED,eAAO,MAAM,aAAa,UAAW;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,KAAG,cAKhF,CAAA"}

package/dist/layouts/shell.js

@@ -16,7 +16,7 @@ export const HOOKS = [
     'record-section',
     'record-section-title',
 ];
-export const AppShell = (props) => (_jsxs("div", { "data-ui": "app-shell", "data-has-right-rail": String(props.rightRail !== undefined), "data-mode": props.mode ?? 'viewport', children: [_jsx("aside", { "data-ui": "app-sidebar", children: props.sidebar }), _jsx("main", { "data-ui": "app-main", children: props.main }), props.rightRail !== undefined && _jsx("aside", { "data-ui": "app-right-rail", children: props.rightRail })] }));
+export const AppShell = (props) => (_jsxs("div", { "data-ui": "app-shell", "data-has-right-rail": String(props.rightRail !== undefined), "data-mode": props.mode ?? 'viewport', children: [_jsx("aside", { "data-ui": "app-sidebar", children: props.sidebar }), props.mode === 'embedded' ? (_jsx("div", { "data-ui": "app-main", children: props.main })) : (_jsx("main", { "data-ui": "app-main", children: props.main })), props.rightRail !== undefined && _jsx("aside", { "data-ui": "app-right-rail", children: props.rightRail })] }));
 export const PageHeader = (props) => (_jsxs("header", { "data-ui": "page-header", children: [_jsxs("div", { "data-ui": "page-heading", children: [_jsx("h1", { "data-ui": "page-title", children: props.title }), !!props.description && _jsx("p", { "data-ui": "page-description", children: props.description })] }), props.actions !== undefined && _jsx("div", { "data-ui": "page-actions", children: props.actions })] }));
 export const Page = (props) => (_jsxs("section", { "data-ui": "page", children: [_jsx(PageHeader, { title: props.title, description: props.description, actions: props.actions }), _jsx("div", { "data-ui": "page-body", children: props.body })] }));
 export const RecordCanvas = (props) => (_jsx("div", { "data-ui": "record-canvas", children: _jsx("div", { "data-ui": "record-content", children: props.body }) }));

package/dist/layouts/shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,aAAa;IACb,UAAU;IACV,gBAAgB;IAChB,MAAM;IACN,aAAa;IACb,cAAc;IACd,YAAY;IACZ,kBAAkB;IAClB,cAAc;IACd,WAAW;IACX,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,sBAAsB;CACd,CAAA;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE,CAAC,CACpB,0BACU,WAAW,yBACE,MAAM,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,eAC/C,KAAK,CAAC,IAAI,IAAI,UAAU,aAEnC,2BAAe,aAAa,YAAE,KAAK,CAAC,OAAO,GAAS,EACpD,0BAAc,UAAU,YAAE,KAAK,CAAC,IAAI,GAAQ,EAC3C,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,2BAAe,gBAAgB,YAAE,KAAK,CAAC,SAAS,GAAS,IACvF,CACP,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAI1B,EAAkB,EAAE,CAAC,CACpB,6BAAgB,aAAa,aAC3B,0BAAa,cAAc,aACzB,wBAAY,YAAY,YAAE,KAAK,CAAC,KAAK,GAAM,EAC1C,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAW,kBAAkB,YAAE,KAAK,CAAC,WAAW,GAAK,IACzE,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,cAAc,YAAE,KAAK,CAAC,OAAO,GAAO,IAC1E,CACV,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAKpB,EAAkB,EAAE,CAAC,CACpB,8BAAiB,MAAM,aACrB,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,EAC1F,yBAAa,WAAW,YAAE,KAAK,CAAC,IAAI,GAAO,IACnC,CACX,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAkB,EAAE,CAAC,CACzE,yBAAa,eAAe,YAC1B,yBAAa,gBAAgB,YAAE,KAAK,CAAC,IAAI,GAAO,GAC5C,CACP,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAgD,EAAkB,EAAE,CAAC,CACjG,8BAAiB,gBAAgB,aAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,wBAAY,sBAAsB,YAAE,KAAK,CAAC,KAAK,GAAM,EACtE,KAAK,CAAC,IAAI,IACH,CACX,CAAA"}
+{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/layouts/shell.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,WAAW;IACX,aAAa;IACb,UAAU;IACV,gBAAgB;IAChB,MAAM;IACN,aAAa;IACb,cAAc;IACd,YAAY;IACZ,kBAAkB;IAClB,cAAc;IACd,WAAW;IACX,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,sBAAsB;CACd,CAAA;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAKxB,EAAkB,EAAE,CAAC,CACpB,0BACU,WAAW,yBACE,MAAM,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,eAC/C,KAAK,CAAC,IAAI,IAAI,UAAU,aAEnC,2BAAe,aAAa,YAAE,KAAK,CAAC,OAAO,GAAS,EACnD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3B,yBAAa,UAAU,YAAE,KAAK,CAAC,IAAI,GAAO,CAC3C,CAAC,CAAC,CAAC,CACF,0BAAc,UAAU,YAAE,KAAK,CAAC,IAAI,GAAQ,CAC7C,EACA,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,2BAAe,gBAAgB,YAAE,KAAK,CAAC,SAAS,GAAS,IACvF,CACP,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAI1B,EAAkB,EAAE,CAAC,CACpB,6BAAgB,aAAa,aAC3B,0BAAa,cAAc,aACzB,wBAAY,YAAY,YAAE,KAAK,CAAC,KAAK,GAAM,EAC1C,CAAC,CAAC,KAAK,CAAC,WAAW,IAAI,uBAAW,kBAAkB,YAAE,KAAK,CAAC,WAAW,GAAK,IACzE,EACL,KAAK,CAAC,OAAO,KAAK,SAAS,IAAI,yBAAa,cAAc,YAAE,KAAK,CAAC,OAAO,GAAO,IAC1E,CACV,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAKpB,EAAkB,EAAE,CAAC,CACpB,8BAAiB,MAAM,aACrB,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,EAC1F,yBAAa,WAAW,YAAE,KAAK,CAAC,IAAI,GAAO,IACnC,CACX,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAyB,EAAkB,EAAE,CAAC,CACzE,yBAAa,eAAe,YAC1B,yBAAa,gBAAgB,YAAE,KAAK,CAAC,IAAI,GAAO,GAC5C,CACP,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAgD,EAAkB,EAAE,CAAC,CACjG,8BAAiB,gBAAgB,aAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,wBAAY,sBAAsB,YAAE,KAAK,CAAC,KAAK,GAAM,EACtE,KAAK,CAAC,IAAI,IACH,CACX,CAAA"}

package/dist/patterns/data-table.d.ts

@@ -1,15 +1,56 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
 export type Cell = JSXChild;
+export type SortDirection = 'ascending' | 'descending';
+export type TablePager = {
+    label: string;
+    previousHref?: string | null;
+    nextHref?: string | null;
+};
 export type Column<Row> = {
     key: string;
     label: string;
     cell: (row: Row) => Cell;
     align?: 'start' | 'end';
-    kind?: 'text' | 'number' | 'currency' | 'date' | 'status' | 'identifier' | 'person';
+    kind?: 'text' | 'number' | 'currency' | 'date' | 'status' | 'identifier' | 'person' | 'media';
     priority?: 'primary' | 'secondary' | 'tertiary';
     width?: 'narrow' | 'medium' | 'wide';
+    hidden?: boolean;
+    optional?: boolean;
+    sort?: {
+        href: string;
+        direction?: SortDirection | null;
+        label?: string;
+    } | null;
+};
+export type TableSelection = {
+    /** Associates row checkboxes with an external bulk-action form. */
+    form?: string;
+    name?: string;
+    selectAllName?: string;
+    selectedIds?: readonly string[];
+    disabled?: boolean;
+};
+export type TableGroup<Row> = {
+    id: string;
+    label: JSXChild;
+    count?: number;
+    href?: string | null;
+    rows?: readonly Row[];
+    children?: readonly TableGroup<Row>[];
+    pager?: TablePager | null;
+};
+export type DataTableLabels<Row> = {
+    selectAll?: string;
+    selectRow?: (row: Row, id: string) => string;
+    sortedAscending?: string;
+    sortedDescending?: string;
+    previousPage?: string;
+    nextPage?: string;
 };
 export type DataTableProps<Row> = {
+    /** A shared surface contains the heading and an unframed table viewport. */
+    title?: string;
+    actions?: JSXChild;
     columns: readonly Column<Row>[];
     rows: readonly Row[];
     id: (row: Row) => string;
@@ -18,9 +59,16 @@ export type DataTableProps<Row> = {
     selected?: (row: Row) => boolean;
     emptyTitle?: string;
     emptyMessage?: string;
+    emptyActions?: JSXChild;
     /** Stack labelled cells on narrow screens, or retain horizontal scrolling. */
     responsive?: 'scroll' | 'stack';
+    /** Use a denser gutter for high-volume operational lists. */
+    gutter?: 'default' | 'compact';
+    selection?: TableSelection | null;
+    groups?: readonly TableGroup<Row>[];
+    shownColumns?: readonly string[];
+    labels?: DataTableLabels<Row>;
 };
-export declare const HOOKS: readonly ['table-scroll', 'table', 'table-caption', 'col', 'row', 'cell', 'row-link'];
+export declare const HOOKS: readonly ['table-scroll', 'table', 'table-caption', 'select-col', 'select-all', 'col', 'sort-link', 'sort-icon', 'row', 'group-row', 'group-cell', 'group-link', 'group-indent', 'group-count', 'group-pager', 'group-pager-actions', 'cell', 'select-cell', 'row-select', 'row-link'];
 export declare const DataTable: <Row>(props: DataTableProps<Row>) => TemplateResult;
 //# sourceMappingURL=data-table.d.ts.map

package/dist/patterns/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGtE,MAAM,MAAM,IAAI,GAAG,QAAQ,CAAA;AAC3B,MAAM,MAAM,MAAM,CAAC,GAAG,IAAI;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAA;IACnF,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IAC/C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,GAAG,IAAI;IAChC,OAAO,EAAE,SAAS,MAAM,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B,IAAI,EAAE,SAAS,GAAG,EAAE,CAAA;IACpB,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,KAAK,YAAI,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAU,CAAA;AAE1G,eAAO,MAAM,SAAS,GAAI,GAAG,SAAU,cAAc,CAAC,GAAG,CAAC,KAAG,cAgE1D,CAAA"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/data-table.js

@@ -1,6 +1,60 @@
-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';
 import { EmptyState } from '../primitives/feedback.js';
-export const HOOKS = ['table-scroll', 'table', 'table-caption', 'col', 'row', 'cell', 'row-link'];
-export const DataTable = (props) => props.rows.length === 0 ? (_jsx(EmptyState, { title: props.emptyTitle ?? 'No records', message: props.emptyMessage ?? 'There is nothing to show yet.' })) : (_jsx("div", { "data-ui": "table-scroll", "data-responsive": props.responsive ?? 'scroll', children: _jsxs("table", { "data-ui": "table", children: [!!props.caption && _jsx("caption", { "data-ui": "table-caption", children: props.caption }), _jsx("thead", { children: _jsx("tr", { children: each(props.columns, (column) => column.key, (column) => (_jsx("th", { "data-ui": "col", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-width": column.width ?? null, scope: "col", children: column.label }))) }) }), _jsx("tbody", { children: each(props.rows, props.id, (row) => (_jsx("tr", { "data-ui": "row", "data-row": props.id(row), "data-selected": props.selected?.(row) === true ? 'true' : null, children: each(props.columns, (column) => column.key, (column, index) => (_jsx("td", { "data-ui": "cell", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-label": props.responsive === 'stack' ? column.label : null, children: props.rowHref && index === 0 ? (_jsx("a", { "data-ui": "row-link", href: props.rowHref(row), children: column.cell(row) })) : (column.cell(row)) }))) }))) })] }) }));
+import { Surface } from '../layouts/index.js';
+export const HOOKS = [
+    'table-scroll',
+    'table',
+    'table-caption',
+    'select-col',
+    'select-all',
+    'col',
+    'sort-link',
+    'sort-icon',
+    'row',
+    'group-row',
+    'group-cell',
+    'group-link',
+    'group-indent',
+    'group-count',
+    'group-pager',
+    'group-pager-actions',
+    'cell',
+    'select-cell',
+    'row-select',
+    'row-link',
+];
+const selectedColumnKeys = (props) => props.shownColumns ?? props.columns.filter((column) => column.hidden !== true).map((column) => column.key);
+const visibleColumns = (props) => {
+    const selected = new Set(selectedColumnKeys(props));
+    return props.columns.filter((column) => selected.has(column.key));
+};
+const colSpan = (props, columns) => columns.length + (props.selection ? 1 : 0);
+const sortLabel = (column, labels) => {
+    if (!column.sort?.direction)
+        return null;
+    return column.sort.direction === 'ascending'
+        ? (labels?.sortedAscending ?? 'Sorted ascending')
+        : (labels?.sortedDescending ?? 'Sorted descending');
+};
+const columnHeader = (column, labels) => (_jsx("th", { "data-ui": "col", "data-col": column.key, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-width": column.width ?? null, "data-optional": column.optional === true ? 'true' : null, "data-sort": column.sort?.direction ?? null, "aria-sort": column.sort?.direction ?? null, scope: "col", children: column.sort ? (_jsxs("a", { "data-ui": "sort-link", href: column.sort.href, "aria-label": column.sort.label ?? column.label, children: [_jsx("span", { children: column.label }), !!column.sort.direction && (_jsx("span", { "data-ui": "sort-icon", "aria-hidden": "true", title: sortLabel(column, labels) ?? undefined, children: column.sort.direction === 'ascending' ? '↑' : '↓' }))] })) : (column.label) }));
+const selectionHeader = (props) => props.selection ? (_jsx("th", { "data-ui": "select-col", scope: "col", children: _jsx("input", { "data-ui": "select-all", type: "checkbox", name: props.selection.selectAllName ?? 'select-all', "aria-label": props.labels?.selectAll ?? 'Select all rows', disabled: props.selection.disabled === true }) })) : null;
+const isSelected = (props, row) => {
+    if (props.selected?.(row) === true)
+        return true;
+    return props.selection?.selectedIds?.includes(props.id(row)) === true;
+};
+const rowCells = (props, columns, row) => (_jsxs(_Fragment, { children: [props.selection && (_jsx("td", { "data-ui": "select-cell", children: _jsx("input", { "data-ui": "row-select", type: "checkbox", name: props.selection.name ?? 'ids', form: props.selection.form, value: props.id(row), checked: isSelected(props, row), "aria-label": props.labels?.selectRow?.(row, props.id(row)) ?? `Select row ${props.id(row)}`, disabled: props.selection.disabled === true }) })), each(columns, (column) => column.key, (column) => (_jsx("td", { "data-ui": "cell", "data-col": column.key, "data-linked": props.rowHref && column === columns[0] ? 'true' : null, "data-align": column.align ?? 'start', "data-kind": column.kind ?? 'text', "data-priority": column.priority ?? 'secondary', "data-label": props.responsive === 'stack' ? column.label : null, children: props.rowHref && column === columns[0] ? (_jsx("a", { "data-ui": "row-link", href: props.rowHref(row), children: column.cell(row) })) : (column.cell(row)) })))] }));
+const tableRow = (props, columns, row) => (_jsx("tr", { "data-ui": "row", "data-row": props.id(row), "data-selected": isSelected(props, row) ? 'true' : null, children: rowCells(props, columns, row) }));
+const groupPager = (props, columns, pager) => pager ? (_jsx("tr", { "data-ui": "group-pager", children: _jsxs("td", { colSpan: String(colSpan(props, columns)), children: [_jsx("span", { children: pager.label }), _jsxs("span", { "data-ui": "group-pager-actions", children: [pager.previousHref && (_jsx("a", { href: pager.previousHref, "aria-label": props.labels?.previousPage ?? 'Previous page', children: "\u2039" })), pager.nextHref && (_jsx("a", { href: pager.nextHref, "aria-label": props.labels?.nextPage ?? 'Next page', children: "\u203A" }))] })] }) })) : null;
+const groupRows = (props, columns, group, depth) => (_jsxs(_Fragment, { children: [_jsx("tr", { "data-ui": "group-row", "data-group": group.id, "data-depth": String(depth), children: _jsxs("th", { "data-ui": "group-cell", colSpan: String(colSpan(props, columns)), scope: "rowgroup", children: [_jsx("span", { "data-ui": "group-indent", style: `--kv-group-depth: ${depth}`, "aria-hidden": "true" }), group.href ? (_jsx("a", { "data-ui": "group-link", href: group.href, children: group.label })) : (_jsx("span", { "data-ui": "group-link", children: group.label })), group.count !== undefined && _jsx("span", { "data-ui": "group-count", children: String(group.count) })] }) }), each(group.rows ?? [], props.id, (row) => tableRow(props, columns, row)), each(group.children ?? [], (child) => child.id, (child) => groupRows(props, columns, child, depth + 1)), groupPager(props, columns, group.pager)] }));
+export const DataTable = (props) => {
+    const columns = visibleColumns(props);
+    const groups = props.groups ?? [];
+    const hasRows = props.rows.length > 0 || groups.length > 0;
+    const content = hasRows ? (_jsx("div", { "data-ui": "table-scroll", "data-framed": props.title ? 'false' : null, "data-responsive": props.responsive ?? 'scroll', "data-gutter": props.gutter === 'compact' ? 'compact' : null, children: _jsxs("table", { "data-ui": "table", "aria-label": props.caption ? null : (props.title ?? null), children: [!!props.caption && _jsx("caption", { "data-ui": "table-caption", children: props.caption }), _jsx("thead", { children: _jsxs("tr", { children: [selectionHeader(props), each(columns, (column) => column.key, (column) => columnHeader(column, props.labels))] }) }), _jsx("tbody", { children: groups.length > 0
+                        ? each(groups, (group) => group.id, (group) => groupRows(props, columns, group, 0))
+                        : each(props.rows, props.id, (row) => tableRow(props, columns, row)) })] }) })) : (_jsx(EmptyState, { title: props.emptyTitle ?? 'No records', message: props.emptyMessage ?? 'There is nothing to show yet.', actions: props.emptyActions }));
+    return props.title ? (_jsx(Surface, { title: props.title, actions: props.actions, padding: "none", body: content })) : (content);
+};
 //# sourceMappingURL=data-table.js.map

package/dist/patterns/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA4B,CAAA;AA0BvD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAU,CAAA;AAE1G,MAAM,CAAC,MAAM,SAAS,GAAG,CAAO,KAA0B,EAAkB,EAAE,CAC5E,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACxB,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,CAAC,UAAU,IAAI,YAAY,EACvC,OAAO,EAAE,KAAK,CAAC,YAAY,IAAI,+BAA+B,GAC9D,CACH,CAAC,CAAC,CAAC,CACF,yBAAa,cAAc,qBAAkB,KAAK,CAAC,UAAU,IAAI,QAAQ,YACvE,4BAAe,OAAO,aACnB,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,6BAAiB,eAAe,YAAE,KAAK,CAAC,OAAO,GAAW,EAC9E,0BACE,uBACG,IAAI,CACH,KAAK,CAAC,OAAO,EACb,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EACtB,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,wBACU,KAAK,cACH,MAAM,CAAC,GAAG,gBACR,MAAM,CAAC,KAAK,IAAI,OAAO,eACxB,MAAM,CAAC,IAAI,IAAI,MAAM,gBACpB,MAAM,CAAC,KAAK,IAAI,IAAI,EAChC,KAAK,EAAC,KAAK,YAEV,MAAM,CAAC,KAAK,GACV,CACN,CACF,GACE,GACC,EACR,0BACG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACnC,wBACU,KAAK,cACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,mBACR,KAAK,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,YAE5D,IAAI,CACH,KAAK,CAAC,OAAO,EACb,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EACtB,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACjB,wBACU,MAAM,cACJ,MAAM,CAAC,GAAG,gBACR,MAAM,CAAC,KAAK,IAAI,OAAO,eACxB,MAAM,CAAC,IAAI,IAAI,MAAM,mBACjB,MAAM,CAAC,QAAQ,IAAI,WAAW,gBACjC,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,YAE7D,KAAK,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAC9B,uBAAW,UAAU,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,YAC3C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,GACf,CACL,CAAC,CAAC,CAAC,CACF,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CACjB,GACE,CACN,CACF,GACE,CACN,CAAC,GACI,IACF,GACJ,CACP,CAAA"}
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../../../../packages/design-system/src/patterns/data-table.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,80 @@
+import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
+import type { ActionVariant } from '../primitives/actions.tsx';
+export type ListFacet = {
+    id: string;
+    label: string;
+    href: string;
+    active?: boolean;
+    count?: number;
+};
+export type ListSearch = {
+    id?: string;
+    action: string;
+    name?: string;
+    value?: string | null;
+    placeholder?: string | null;
+    label?: string;
+    submitLabel?: string;
+    hidden?: Readonly<Record<string, string>>;
+};
+export type ListSortChoice = {
+    value: string;
+    label: string;
+    selected?: boolean;
+};
+export type ListSort = {
+    id?: string;
+    action: string;
+    name?: string;
+    label?: string;
+    submitLabel?: string;
+    choices: readonly ListSortChoice[];
+    hidden?: Readonly<Record<string, string>>;
+};
+export type BulkAction = {
+    id: string;
+    label: string;
+    name?: string;
+    value?: string;
+    variant?: ActionVariant;
+    disabled?: boolean;
+};
+export type BulkActionsProps = {
+    form?: string | null;
+    selectedCount?: number;
+    summary?: JSXChild;
+    clearHref?: string | null;
+    clearLabel?: string;
+    actions: readonly BulkAction[];
+};
+export type PagerPage = {
+    label: string;
+    href: string;
+    active?: boolean;
+};
+export type PagerBarProps = {
+    summary?: JSXChild;
+    previousHref?: string | null;
+    nextHref?: string | null;
+    previousLabel?: string;
+    nextLabel?: string;
+    pages?: readonly PagerPage[];
+    label?: string;
+};
+export type ListChromeProps = {
+    filtersLabel?: string;
+    viewsLabel?: string;
+    search?: ListSearch;
+    facets?: readonly ListFacet[];
+    views?: readonly ListFacet[];
+    sort?: ListSort;
+    status?: JSXChild;
+    actions?: JSXChild;
+    bulk?: BulkActionsProps;
+    pager?: PagerBarProps;
+};
+export declare const HOOKS: readonly ['list-chrome', 'list-chrome-row', 'list-search', 'list-search-label', 'list-search-input', 'list-search-submit', 'list-facets', 'list-facet', 'list-facet-count', 'list-view-switch', 'list-view', 'list-sort', 'list-sort-label', 'list-sort-select', 'list-status', 'list-actions', 'bulk-actions', 'bulk-summary', 'bulk-action-list', 'pager-bar', 'pager-summary', 'pager-pages', 'pager-page', 'pager-actions', 'pager-link'];
+export declare const BulkActions: (props: BulkActionsProps) => TemplateResult;
+export declare const PagerBar: (props: PagerBarProps) => TemplateResult;
+export declare const ListChrome: (props: ListChromeProps) => TemplateResult;
+//# sourceMappingURL=list-chrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-chrome.d.ts","sourceRoot":"","sources":["../../../../../packages/design-system/src/patterns/list-chrome.tsx"],"names":[],"mappings":"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"}

package/dist/patterns/list-chrome.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { each } from '@ketvietlab/ketjs-view';
+import { Button, LinkButton } from '../primitives/actions.js';
+export const HOOKS = [
+    'list-chrome',
+    'list-chrome-row',
+    'list-search',
+    'list-search-label',
+    'list-search-input',
+    'list-search-submit',
+    'list-facets',
+    'list-facet',
+    'list-facet-count',
+    'list-view-switch',
+    'list-view',
+    'list-sort',
+    'list-sort-label',
+    'list-sort-select',
+    'list-status',
+    'list-actions',
+    'bulk-actions',
+    'bulk-summary',
+    'bulk-action-list',
+    'pager-bar',
+    'pager-summary',
+    'pager-pages',
+    'pager-page',
+    'pager-actions',
+    'pager-link',
+];
+const hiddenFields = (fields) => fields
+    ? each(Object.entries(fields), ([name]) => name, ([name, value]) => _jsx("input", { type: "hidden", name: name, value: value }))
+    : '';
+const SearchControl = (props) => (_jsxs("form", { "data-ui": "list-search", action: props.action, method: "get", role: "search", children: [hiddenFields(props.hidden), _jsx("label", { "data-ui": "list-search-label", for: props.id ?? `${props.name ?? 'q'}-search`, children: props.label ?? 'Search' }), _jsx("input", { "data-ui": "list-search-input", id: props.id ?? `${props.name ?? 'q'}-search`, type: "search", name: props.name ?? 'q', value: props.value ?? '', placeholder: props.placeholder ?? '', autocomplete: "off" }), _jsx("span", { "data-ui": "list-search-submit", children: _jsx(Button, { type: "submit", label: props.submitLabel ?? 'Search', variant: "tertiary", size: "compact" }) })] }));
+const FacetNav = (props) => (_jsx("nav", { "data-ui": props.ui, "aria-label": props.label, children: each(props.items, (item) => item.id, (item) => (_jsxs("a", { "data-ui": props.itemUi, "data-active": item.active === true ? 'true' : null, href: item.href, "aria-current": item.active === true ? 'page' : null, children: [_jsx("span", { children: item.label }), item.count !== undefined && _jsx("span", { "data-ui": "list-facet-count", children: String(item.count) })] }))) }));
+const SortControl = (props) => (_jsxs("form", { "data-ui": "list-sort", action: props.action, method: "get", children: [hiddenFields(props.hidden), _jsx("label", { "data-ui": "list-sort-label", for: props.id ?? `${props.name ?? 'sort'}-select`, children: props.label ?? 'Sort' }), _jsx("select", { "data-ui": "list-sort-select", id: props.id ?? `${props.name ?? 'sort'}-select`, name: props.name ?? 'sort', children: each(props.choices, (choice) => choice.value, (choice) => (_jsx("option", { value: choice.value, selected: choice.selected === true, children: choice.label }))) }), _jsx(Button, { type: "submit", label: props.submitLabel ?? 'Apply', variant: "tertiary", size: "compact" })] }));
+export const BulkActions = (props) => (_jsxs("div", { "data-ui": "bulk-actions", "data-has-selection": props.selectedCount && props.selectedCount > 0 ? 'true' : null, children: [_jsxs("div", { "data-ui": "bulk-summary", children: [props.summary ?? `${props.selectedCount ?? 0} selected`, props.clearHref && (_jsx(LinkButton, { href: props.clearHref, label: props.clearLabel ?? 'Clear', variant: "tertiary", size: "compact" }))] }), _jsx("div", { "data-ui": "bulk-action-list", children: each(props.actions, (action) => action.id, (action) => (_jsx(Button, { type: "submit", form: props.form ?? null, name: action.name, value: action.value, label: action.label, variant: action.variant ?? 'secondary', size: "compact", disabled: action.disabled === true || !(props.selectedCount && props.selectedCount > 0) }))) })] }));
+export const PagerBar = (props) => (_jsxs("nav", { "data-ui": "pager-bar", "aria-label": props.label ?? 'Pagination', children: [props.summary !== undefined && _jsx("span", { "data-ui": "pager-summary", children: props.summary }), props.pages && props.pages.length > 0 && (_jsx("span", { "data-ui": "pager-pages", children: each(props.pages, (page) => page.href, (page) => (_jsx("a", { "data-ui": "pager-page", "data-active": page.active === true ? 'true' : null, href: page.href, "aria-current": page.active === true ? 'page' : null, children: page.label }))) })), _jsxs("span", { "data-ui": "pager-actions", children: [props.previousHref ? (_jsx("a", { "data-ui": "pager-link", href: props.previousHref, rel: "prev", "aria-label": props.previousLabel ?? 'Previous page', children: "\u2039" })) : (_jsx("span", { "data-ui": "pager-link", "data-disabled": "true", "aria-hidden": "true", children: "\u2039" })), props.nextHref ? (_jsx("a", { "data-ui": "pager-link", href: props.nextHref, rel: "next", "aria-label": props.nextLabel ?? 'Next page', children: "\u203A" })) : (_jsx("span", { "data-ui": "pager-link", "data-disabled": "true", "aria-hidden": "true", children: "\u203A" }))] })] }));
+export const ListChrome = (props) => {
+    const filters = (props.facets?.length ?? 0) > 0 || (props.views?.length ?? 0) > 0 || props.sort ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "filters", children: [props.facets && props.facets.length > 0 && (_jsx(FacetNav, { label: props.filtersLabel ?? 'Filters', ui: "list-facets", itemUi: "list-facet", items: props.facets })), props.views && props.views.length > 0 && (_jsx(FacetNav, { label: props.viewsLabel ?? 'Views', ui: "list-view-switch", itemUi: "list-view", items: props.views })), props.sort && _jsx(SortControl, { ...props.sort })] })) : null;
+    const meta = props.status !== undefined || props.actions !== undefined || props.pager ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "meta", children: [props.status !== undefined && _jsx("div", { "data-ui": "list-status", children: props.status }), props.actions !== undefined && _jsx("div", { "data-ui": "list-actions", children: props.actions }), props.pager && _jsx(PagerBar, { ...props.pager })] })) : null;
+    const tail = filters || meta ? (_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "tail", children: [filters, meta] })) : null;
+    return (_jsxs("div", { "data-ui": "list-chrome", children: [_jsxs("div", { "data-ui": "list-chrome-row", "data-row": "query", children: [props.search && _jsx(SearchControl, { ...props.search }), tail] }), props.bulk && _jsx(BulkActions, { ...props.bulk })] }));
+};
+//# sourceMappingURL=list-chrome.js.map

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

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

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

@@ -1,11 +1,16 @@
 import type { JSXChild, TemplateResult } from '@ketvietlab/ketjs-view';
-export declare const HOOKS: readonly ['modal-backdrop', 'modal-sheet', 'modal-head', 'modal-title', 'modal-close', 'modal-body'];
+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=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,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,CACJ,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,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CAC9B,KAAG,cAwBH,CAAA"}
+{"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"}

package/dist/patterns/modal-sheet.js

@@ -1,11 +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) => (_jsx("div", { "data-ui": "modal-backdrop", "data-mode": props.mode ?? 'overlay', children: _jsxs("section", { "data-ui": "modal-sheet", role: "dialog", "aria-modal": props.mode === 'embedded' ? 'false' : 'true', "aria-labelledby": `${props.id}-title`, children: [_jsxs("header", { "data-ui": "modal-head", children: [_jsx("h2", { "data-ui": "modal-title", id: `${props.id}-title`, children: props.title }), _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 })] }) }));
+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=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,gBAAgB;IAChB,aAAa;IACb,YAAY;IACZ,aAAa;IACb,aAAa;IACb,YAAY;CACJ,CAAA;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAO1B,EAAkB,EAAE,CAAC,CACpB,yBAAa,gBAAgB,eAAY,KAAK,CAAC,IAAI,IAAI,SAAS,YAC9D,8BACU,aAAa,EACrB,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,qBACvC,GAAG,KAAK,CAAC,EAAE,QAAQ,aAEpC,6BAAgB,YAAY,aAC1B,wBAAY,aAAa,EAAC,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,QAAQ,YAC9C,KAAK,CAAC,KAAK,GACT,EACL,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,IACpC,GACN,CACP,CAAA"}
+{"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"}