twico-ui 1.45.1 → 1.47.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.47.0](https://github.com/EncryptionL/twico-ui/compare/v1.46.0...v1.47.0) (2026-10-23)
+
+
+### Features
+
+* **inputs:** reserveFooter — keep a field's footer lane open so rows stay aligned ([223ef88](https://github.com/EncryptionL/twico-ui/commit/223ef8841b41b8fc10e6224530c392ceda2b9a98)), closes [#471](https://github.com/EncryptionL/twico-ui/issues/471)
+
+# [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

@@ -5901,6 +5901,17 @@ var Checkbox = /* @__PURE__ */ React55__namespace.default.forwardRef(function Ch
 .twc-field__req { color: var(--color-danger); }
 .twc-check__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
   const autoId = React55__namespace.default.useId();
@@ -5955,6 +5966,17 @@ var Checkbox = /* @__PURE__ */ React55__namespace.default.forwardRef(function Ch
 });
 var FIELD_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -6066,6 +6088,7 @@ function ColorPicker({
   tone = "primary",
   onChange,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
@@ -6205,7 +6228,7 @@ function ColorPicker({
     e.preventDefault();
     commit({ ...hsv, a: Math.round(a * 100) / 100 });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-field__label", id: labelId, children: [
@@ -6368,6 +6391,17 @@ function ColorPicker({
 }
 var COMBO_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -6506,6 +6540,7 @@ var Combobox = /* @__PURE__ */ React55__namespace.default.forwardRef(function Co
   className = "",
   onFocus,
   onKeyDown,
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
@@ -6793,7 +6828,7 @@ var Combobox = /* @__PURE__ */ React55__namespace.default.forwardRef(function Co
       popEl = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop", ref: popRef, "data-placement": placement === "top" ? "top" : void 0, children: popInner });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -7113,6 +7148,17 @@ function clampPrecision(str, precision) {
 }
 var CUR_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -7182,6 +7228,7 @@ function Currency({
   id,
   placeholder = "0.00",
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-cur-styles", CUR_CSS);
@@ -7230,7 +7277,7 @@ function Currency({
     if (!controlled) setInternal(fixed);
     onValueChange?.(Number(fixed), fixed);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
@@ -7282,6 +7329,17 @@ function useFallbackName(ref, hasOwnName) {
 }
 var SELECT_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -7418,6 +7476,7 @@ var Select = /* @__PURE__ */ React55__namespace.default.forwardRef(function Sele
   renderOption,
   id,
   className = "",
+  reserveFooter = false,
   onClick,
   onKeyDown,
   ...rest
@@ -7763,7 +7822,7 @@ var Select = /* @__PURE__ */ React55__namespace.default.forwardRef(function Sele
       popEl = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop", ref: popRef, "data-state": popState, "data-placement": placement === "top" ? "top" : "bottom", children: popInner });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     name ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -7888,6 +7947,7 @@ function CurrencyField({
   id,
   placeholder = "0.00",
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
@@ -7950,7 +8010,7 @@ function CurrencyField({
     onValueChange?.(Number(fixed), fixed, cur);
   }
   const curLabel = typeof label === "string" && label ? `${label} currency` : "Currency";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
@@ -7997,6 +8057,17 @@ function CurrencyField({
 }
 var FIELD_CSS2 = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -8086,6 +8157,7 @@ var Input = /* @__PURE__ */ React55__namespace.default.forwardRef(function Input
   disabled = false,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
@@ -8155,7 +8227,7 @@ var Input = /* @__PURE__ */ React55__namespace.default.forwardRef(function Input
       ] })
     }
   ) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     __twcExtra,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -8200,6 +8272,17 @@ var Input = /* @__PURE__ */ React55__namespace.default.forwardRef(function Input
 });
 var MULTI_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -8345,6 +8428,7 @@ var MultiSelect = /* @__PURE__ */ React55__namespace.default.forwardRef(function
   className = "",
   onFocus,
   onKeyDown,
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
@@ -8618,7 +8702,7 @@ var MultiSelect = /* @__PURE__ */ React55__namespace.default.forwardRef(function
     }
   }
   const msFallbackName = useFallbackName(inputRef, Boolean(label || rest["aria-label"] || rest["aria-labelledby"])) ? placeholder : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     name ? selected.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: v }, i)) : null,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -9558,6 +9642,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 +10148,7 @@ function Datatable({
   onColumnVisibilityChange,
   batchActions = [],
   onRowSelectionChange,
+  selectionSummary,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12927,13 +13018,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 +13219,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 +14508,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 +14568,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 +14776,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,
@@ -14835,6 +14934,17 @@ function DiffTable({
 }
 var FIELD_CSS3 = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -14967,6 +15077,7 @@ function DatePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
@@ -15169,7 +15280,7 @@ function DatePicker({
     setFocusDate(next);
     if (next.getFullYear() !== y || next.getMonth() !== m) setView(new Date(next.getFullYear(), next.getMonth(), 1));
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
@@ -15393,6 +15504,17 @@ function DatePicker({
 }
 var FIELD_CSS4 = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -15528,6 +15650,7 @@ function DateRangePicker({
   parse,
   onChange,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
@@ -15772,7 +15895,7 @@ function DateRangePicker({
     return t > Math.min(s, e) && t < Math.max(s, e);
   };
   const text = range2.start ? format ? format(range2) : `${fmtD(range2.start, locale)} \u2013 ${range2.end ? fmtD(range2.end, locale) : "\u2026"}` : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-drp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-drp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-field__label", id: labelId, children: [
@@ -16000,6 +16123,17 @@ function DateRangePicker({
 }
 var FIELD_CSS5 = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -16098,6 +16232,7 @@ function TimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS5);
@@ -16312,7 +16447,7 @@ function TimePicker({
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7v5l3 2" })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-tp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-tp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
@@ -16469,6 +16604,17 @@ function TimePicker({
 }
 var FIELD_CSS6 = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -16507,6 +16653,7 @@ function DateTimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS6);
@@ -16531,7 +16678,7 @@ function DateTimePicker({
     commitVal(new Date(b ? b.getFullYear() : t.getFullYear(), b ? b.getMonth() : t.getMonth(), b ? b.getDate() : t.getDate(), t.getHours(), t.getMinutes(), t.getSeconds(), 0));
   };
   const childTone = error ? "danger" : tone;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dtp twc-field ${className}`, id: fieldId, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dtp twc-field ${className}`, id: fieldId, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
@@ -17109,6 +17256,17 @@ function EmptyState({
 }
 var FIELD_CSS7 = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -17123,6 +17281,7 @@ function Field({
   size = "md",
   id,
   className = "",
+  reserveFooter = false,
   children,
   ...rest
 }) {
@@ -17135,7 +17294,7 @@ function Field({
     "aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
     "aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
   }) : children;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor, children: [
       label,
@@ -18191,6 +18350,17 @@ var Radio = /* @__PURE__ */ React55__namespace.default.forwardRef(function Radio
 .twc-field__req { color: var(--color-danger); }
 .twc-radio__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
   const autoId = React55__namespace.default.useId();
@@ -18240,6 +18410,17 @@ var Radio = /* @__PURE__ */ React55__namespace.default.forwardRef(function Radio
 });
 var RADIO_GROUP_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -18264,6 +18445,7 @@ function RadioGroup({
   tone = "primary",
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
@@ -18311,6 +18493,7 @@ function RadioGroup({
     "div",
     {
       className: `twc-field ${className}`,
+      "data-reserve-footer": reserveFooter || void 0,
       role: "radiogroup",
       "aria-labelledby": label ? labelId : void 0,
       "aria-describedby": error || hint ? descId : void 0,
@@ -19335,6 +19518,17 @@ var Switch = /* @__PURE__ */ React55__namespace.default.forwardRef(function Swit
 .twc-field__req { color: var(--color-danger); }
 .twc-switch__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
   const autoId = React55__namespace.default.useId();
@@ -19774,6 +19968,17 @@ function Tag({
 var useIso = typeof document !== "undefined" ? React55__namespace.default.useLayoutEffect : React55__namespace.default.useEffect;
 var TEXTAREA_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
+/* #494: reserve the footer lane. A row of fields aligned with align="flex-end" splits in two the
+   moment ONE of them has a hint, because that field grows a footer and the others do not - and the
+   caption then moves a DIFFERENT control, which nothing in the JSX suggests. align= cannot fix it:
+   flex-start lines up the labels instead, so the controls part company as soon as one label wraps.
+   The lane is held open by generated content rather than a fixed height so it matches the real
+   footer by construction - same font metrics, same flex gap - instead of by a number that drifts.
+   Whitespace-only generated content is not announced, and :has() lets the CSS tell on its own
+   whether a footer is already there, so no component has to report it. */
+.twc-field[data-reserve-footer]:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after,
+[data-reserve-footer] .twc-field:not(:has(> .twc-field__footer, > .twc-field__hint, > .twc-field__error))::after {
+  content: "\\00a0"; font-size: var(--text-xs); user-select: none; }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@@ -19836,6 +20041,7 @@ var Textarea = /* @__PURE__ */ React55__namespace.default.forwardRef(function Te
   disabled = false,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
@@ -19893,7 +20099,7 @@ var Textarea = /* @__PURE__ */ React55__namespace.default.forwardRef(function Te
   const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,