twico-ui 1.45.1 → 1.46.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.46.0](https://github.com/EncryptionL/twico-ui/compare/v1.45.1...v1.46.0) (2026-10-21)
+
+
+### Features
+
+* **datatable,cardgrid:** selectionSummary slot, and move toolbarActions after the built-ins ([8ddbad9](https://github.com/EncryptionL/twico-ui/commit/8ddbad9c3d3321e585d895115ed4bb0b1a9c0c27)), closes [#492](https://github.com/EncryptionL/twico-ui/issues/492) [#478](https://github.com/EncryptionL/twico-ui/issues/478) [#286](https://github.com/EncryptionL/twico-ui/issues/286)
+
 ## [1.45.1](https://github.com/EncryptionL/twico-ui/compare/v1.45.0...v1.45.1) (2026-10-21)
 
 

package/dist/index.cjs

@@ -9558,6 +9558,12 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__batch-x:hover { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
 .twc-dt__batch-x svg { width: 16px; height: 16px; }
 .twc-dt__batch-count { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-primary-subtle-fg); white-space: nowrap; }
+/* #492: the host's running total, sitting with the count it qualifies. Same colour as the count,
+   differentiated by WEIGHT rather than by a lighter token: this bar is --color-primary-subtle, and
+   --color-text-subtle on that is 4.26:1, under the 4.5:1 needed for normal text. */
+.twc-dt__batch-summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
+  color: var(--color-primary-subtle-fg); white-space: nowrap; }
+.twc-dt__batch-summary::before { content: ""; width: var(--border-thin); height: 14px; background: currentColor; opacity: 0.35; }
 .twc-dt__batch-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .twc-dt__batch-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
@@ -10058,6 +10064,7 @@ function Datatable({
   onColumnVisibilityChange,
   batchActions = [],
   onRowSelectionChange,
+  selectionSummary,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12927,13 +12934,13 @@ function Datatable({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, "data-editing": editing ? "" : void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
-      toolbarActions != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__batch-count", children: [
           selected.size,
           " selected"
         ] }),
+        selectionSummary != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__batch-summary", children: typeof selectionSummary === "function" ? selectionSummary(selKeys, selectedRows) : selectionSummary }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch-actions", children: [
           hasBatchEditor ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }),
@@ -13128,6 +13135,7 @@ function Datatable({
           }
         )
       ] }) : null,
+      toolbarActions != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       searchable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.search }),
         /* @__PURE__ */ jsxRuntime.jsx("input", { ref: quickSearchRef, placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) }),
@@ -14416,6 +14424,11 @@ var CARDGRID_CSS = `
   padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-primary-border);
   background: var(--color-primary-subtle); border-radius: var(--radius-md); }
 .twc-cardgrid__batch-count { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary-subtle-fg); }
+/* #492: same slot, same contract as Datatable. Weight, not a lighter token - this bar is
+   --color-primary-subtle, where --color-text-subtle is 4.26:1 and fails normal-text contrast. */
+.twc-cardgrid__batch-summary { display: inline-flex; align-items: center; gap: var(--space-2);
+  font-size: var(--text-sm); color: var(--color-primary-subtle-fg); }
+.twc-cardgrid__batch-summary::before { content: ""; width: var(--border-thin); height: 14px; background: currentColor; opacity: 0.35; }
 .twc-cardgrid__batch-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
 .twc-cardgrid__batch-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm);
   padding-inline: var(--space-3); border: var(--border-thin) solid var(--color-border); background: var(--color-surface);
@@ -14471,6 +14484,7 @@ function CardGrid({
   // the whole point, and it was the only Datatable affordance CardGrid lacked.
   checkboxSelection = false,
   batchActions = [],
+  selectionSummary,
   onRowSelectionChange,
   selectionPlacement = "top-start",
   selectionLabel,
@@ -14678,6 +14692,7 @@ function CardGrid({
         selected.size,
         " selected"
       ] }),
+      selectionSummary != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-cardgrid__batch-summary", children: typeof selectionSummary === "function" ? selectionSummary(selKeys, selectedRows) : selectionSummary }) : null,
       showSelectAll && pageRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-cardgrid__selall", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,