twico-ui 1.46.0 → 1.48.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.48.0](https://github.com/EncryptionL/twico-ui/compare/v1.47.0...v1.48.0) (2026-10-23)
+
+
+### Features
+
+* **datatable:** vertical alignment at three levels — table, row, column ([221978b](https://github.com/EncryptionL/twico-ui/commit/221978b1db3527d97b93335a9b36b9274d2c8b10))
+
+# [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)
 
 

package/dist/icons.d.cts

@@ -56,4 +56,5 @@ declare const brandIcons: BrandIconMeta[];
 /** Just the exported component names of every brand icon. */
 declare const brandIconNames: string[];
 
-export { AppleBrandIcon, BlueskyIcon, type BrandIcon, type BrandIconMeta, type BrandIconProps, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export { AppleBrandIcon, BlueskyIcon, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export type { BrandIcon, BrandIconMeta, BrandIconProps };

package/dist/icons.d.ts

@@ -56,4 +56,5 @@ declare const brandIcons: BrandIconMeta[];
 /** Just the exported component names of every brand icon. */
 declare const brandIconNames: string[];
 
-export { AppleBrandIcon, BlueskyIcon, type BrandIcon, type BrandIconMeta, type BrandIconProps, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export { AppleBrandIcon, BlueskyIcon, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export type { BrandIcon, BrandIconMeta, BrandIconProps };

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: [
@@ -9294,9 +9378,20 @@ var DT_CSS = `
   font-size: var(--text-sm); color: var(--color-text); background: var(--twc-dt-row-bg, var(--color-surface));
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
 /* Wrap-text columns: content flows onto multiple lines (the row grows down) instead of
-   clipping to one line. height stays a per-row minimum, so single-line cells are unchanged. */
+   clipping to one line. height stays a per-row minimum, so single-line cells are unchanged.
+   The top alignment here is only a DEFAULT for wrapped cells - an explicit verticalAlign at any
+   level resolves to data-valign below, which is more specific and wins. Before that existed, a row
+   mixing a wrapped column with normal ones was silently inconsistent: the wrapped cell sat top and
+   its neighbours sat middle, with no way to say otherwise. */
 .twc-dt__td[data-wrap="true"] { white-space: normal; overflow: hidden; text-overflow: clip;
   word-break: break-word; overflow-wrap: anywhere; vertical-align: top; padding-block: 10px; line-height: 1.45; }
+/* Vertical alignment. One attribute, already resolved: column > row > table default, computed in
+   renderLeaf rather than left to three competing selectors, so the precedence is readable in the
+   code and cannot be reordered by an unrelated CSS edit. Matters whenever rows vary in height -
+   wrapText, a multi-line renderCell, or a drag-resized row. */
+.twc-dt__td[data-valign="top"] { vertical-align: top; }
+.twc-dt__td[data-valign="middle"] { vertical-align: middle; }
+.twc-dt__td[data-valign="bottom"] { vertical-align: bottom; }
 /* #338: "combined" column cell \u2014 one column showing several source columns' values. */
 .twc-dt__combine--stack { display: flex; flex-direction: column; gap: 1px; }
 .twc-dt__combine-sep { color: var(--color-text-subtle); padding-inline: 3px; }
@@ -10065,6 +10160,8 @@ function Datatable({
   batchActions = [],
   onRowSelectionChange,
   selectionSummary,
+  verticalAlign,
+  getRowVerticalAlign,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12644,6 +12741,7 @@ function Datatable({
     const h = rowHeights[k];
     const userRowStyle = getRowStyle ? getRowStyle(row, ri) : void 0;
     const userRowClass = getRowClassName ? getRowClassName(row, ri) : void 0;
+    const rowValign = getRowVerticalAlign ? getRowVerticalAlign(row, ri) : void 0;
     const { background: _rowBgShorthand, backgroundColor: _rowBgColor, ...restRowStyle } = userRowStyle || {};
     const usable = (v) => typeof v === "string" && v.trim() !== "" ? v : void 0;
     const rowBg = usable(_rowBgShorthand) ?? usable(_rowBgColor);
@@ -12754,6 +12852,7 @@ function Datatable({
                   "data-num": c.type === "number" || void 0,
                   "data-actions": isActions || void 0,
                   "data-align": c.align !== dtNaturalAlign(c) ? c.align : void 0,
+                  "data-valign": c.verticalAlign ?? rowValign ?? verticalAlign,
                   "data-editable": editable && !isEditing || void 0,
                   "data-editing": isEditing || void 0,
                   "data-cell-active": cellActive || void 0,
@@ -14850,6 +14949,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); }
@@ -14982,6 +15092,7 @@ function DatePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
@@ -15184,7 +15295,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: [
@@ -15408,6 +15519,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); }
@@ -15543,6 +15665,7 @@ function DateRangePicker({
   parse,
   onChange,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
@@ -15787,7 +15910,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: [
@@ -16015,6 +16138,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); }
@@ -16113,6 +16247,7 @@ function TimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS5);
@@ -16327,7 +16462,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: [
@@ -16484,6 +16619,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); }
@@ -16522,6 +16668,7 @@ function DateTimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS6);
@@ -16546,7 +16693,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: [
@@ -17124,6 +17271,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); }
@@ -17138,6 +17296,7 @@ function Field({
   size = "md",
   id,
   className = "",
+  reserveFooter = false,
   children,
   ...rest
 }) {
@@ -17150,7 +17309,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,
@@ -18206,6 +18365,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();
@@ -18255,6 +18425,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); }
@@ -18279,6 +18460,7 @@ function RadioGroup({
   tone = "primary",
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
@@ -18326,6 +18508,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,
@@ -19350,6 +19533,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();
@@ -19789,6 +19983,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); }
@@ -19851,6 +20056,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);
@@ -19908,7 +20114,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,