twico-ui 1.46.0 → 1.48.0

package/dist/index.mjs

@@ -5880,6 +5880,17 @@ var Checkbox = /* @__PURE__ */ React55__default.forwardRef(function Checkbox2({
 .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__default.useId();
@@ -5934,6 +5945,17 @@ var Checkbox = /* @__PURE__ */ React55__default.forwardRef(function Checkbox2({
 });
 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); }
@@ -6045,6 +6067,7 @@ function ColorPicker({
   tone = "primary",
   onChange,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
@@ -6184,7 +6207,7 @@ function ColorPicker({
     e.preventDefault();
     commit({ ...hsv, a: Math.round(a * 100) / 100 });
   };
-  return /* @__PURE__ */ jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxs("span", { className: "twc-field__label", id: labelId, children: [
@@ -6347,6 +6370,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); }
@@ -6485,6 +6519,7 @@ var Combobox = /* @__PURE__ */ React55__default.forwardRef(function Combobox2({
   className = "",
   onFocus,
   onKeyDown,
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
@@ -6772,7 +6807,7 @@ var Combobox = /* @__PURE__ */ React55__default.forwardRef(function Combobox2({
       popEl = /* @__PURE__ */ jsx("div", { className: "twc-pop", ref: popRef, "data-placement": placement === "top" ? "top" : void 0, children: popInner });
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -7092,6 +7127,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); }
@@ -7161,6 +7207,7 @@ function Currency({
   id,
   placeholder = "0.00",
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-cur-styles", CUR_CSS);
@@ -7209,7 +7256,7 @@ function Currency({
     if (!controlled) setInternal(fixed);
     onValueChange?.(Number(fixed), fixed);
   }
-  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
@@ -7261,6 +7308,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); }
@@ -7397,6 +7455,7 @@ var Select = /* @__PURE__ */ React55__default.forwardRef(function Select2({
   renderOption,
   id,
   className = "",
+  reserveFooter = false,
   onClick,
   onKeyDown,
   ...rest
@@ -7742,7 +7801,7 @@ var Select = /* @__PURE__ */ React55__default.forwardRef(function Select2({
       popEl = /* @__PURE__ */ jsx("div", { className: "twc-pop", ref: popRef, "data-state": popState, "data-placement": placement === "top" ? "top" : "bottom", children: popInner });
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -7867,6 +7926,7 @@ function CurrencyField({
   id,
   placeholder = "0.00",
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
@@ -7929,7 +7989,7 @@ function CurrencyField({
     onValueChange?.(Number(fixed), fixed, cur);
   }
   const curLabel = typeof label === "string" && label ? `${label} currency` : "Currency";
-  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
@@ -7976,6 +8036,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); }
@@ -8065,6 +8136,7 @@ var Input = /* @__PURE__ */ React55__default.forwardRef(function Input2({
   disabled = false,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
@@ -8134,7 +8206,7 @@ var Input = /* @__PURE__ */ React55__default.forwardRef(function Input2({
       ] })
     }
   ) : null;
-  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     __twcExtra,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -8179,6 +8251,17 @@ var Input = /* @__PURE__ */ React55__default.forwardRef(function Input2({
 });
 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); }
@@ -8324,6 +8407,7 @@ var MultiSelect = /* @__PURE__ */ React55__default.forwardRef(function MultiSele
   className = "",
   onFocus,
   onKeyDown,
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
@@ -8597,7 +8681,7 @@ var MultiSelect = /* @__PURE__ */ React55__default.forwardRef(function MultiSele
     }
   }
   const msFallbackName = useFallbackName(inputRef, Boolean(label || rest["aria-label"] || rest["aria-labelledby"])) ? placeholder : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     name ? selected.map((v, i) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, i)) : null,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
@@ -9273,9 +9357,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; }
@@ -10044,6 +10139,8 @@ function Datatable({
   batchActions = [],
   onRowSelectionChange,
   selectionSummary,
+  verticalAlign,
+  getRowVerticalAlign,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12623,6 +12720,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);
@@ -12733,6 +12831,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,
@@ -14829,6 +14928,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); }
@@ -14961,6 +15071,7 @@ function DatePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
@@ -15163,7 +15274,7 @@ function DatePicker({
     setFocusDate(next);
     if (next.getFullYear() !== y || next.getMonth() !== m) setView(new Date(next.getFullYear(), next.getMonth(), 1));
   };
-  return /* @__PURE__ */ jsxs("div", { className: `twc-dp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-dp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
@@ -15387,6 +15498,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); }
@@ -15522,6 +15644,7 @@ function DateRangePicker({
   parse,
   onChange,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
@@ -15766,7 +15889,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__ */ jsxs("div", { className: `twc-drp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-drp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxs("span", { className: "twc-field__label", id: labelId, children: [
@@ -15994,6 +16117,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); }
@@ -16092,6 +16226,7 @@ function TimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS5);
@@ -16306,7 +16441,7 @@ function TimePicker({
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
     /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: `twc-tp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-tp twc-field ${className}`, ref: wrapRef, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
@@ -16463,6 +16598,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); }
@@ -16501,6 +16647,7 @@ function DateTimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS6);
@@ -16525,7 +16672,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__ */ jsxs("div", { className: `twc-dtp twc-field ${className}`, id: fieldId, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-dtp twc-field ${className}`, id: fieldId, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles0,
     __twcStyles1,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
@@ -17103,6 +17250,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); }
@@ -17117,6 +17275,7 @@ function Field({
   size = "md",
   id,
   className = "",
+  reserveFooter = false,
   children,
   ...rest
 }) {
@@ -17129,7 +17288,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__ */ jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor, children: [
       label,
@@ -18185,6 +18344,17 @@ var Radio = /* @__PURE__ */ React55__default.forwardRef(function Radio2({
 .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__default.useId();
@@ -18234,6 +18404,17 @@ var Radio = /* @__PURE__ */ React55__default.forwardRef(function Radio2({
 });
 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); }
@@ -18258,6 +18439,7 @@ function RadioGroup({
   tone = "primary",
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
@@ -18305,6 +18487,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,
@@ -19329,6 +19512,17 @@ var Switch = /* @__PURE__ */ React55__default.forwardRef(function Switch2({
 .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__default.useId();
@@ -19768,6 +19962,17 @@ function Tag({
 var useIso = typeof document !== "undefined" ? React55__default.useLayoutEffect : React55__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); }
@@ -19830,6 +20035,7 @@ var Textarea = /* @__PURE__ */ React55__default.forwardRef(function Textarea2({
   disabled = false,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
@@ -19887,7 +20093,7 @@ var Textarea = /* @__PURE__ */ React55__default.forwardRef(function Textarea2({
   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__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, "data-reserve-footer": reserveFooter || void 0, children: [
     __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,