twico-ui 1.46.0 → 1.47.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: [
@@ -14829,6 +14913,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 +15056,7 @@ function DatePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
@@ -15163,7 +15259,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 +15483,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 +15629,7 @@ function DateRangePicker({
   parse,
   onChange,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
@@ -15766,7 +15874,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 +16102,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 +16211,7 @@ function TimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS5);
@@ -16306,7 +16426,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 +16583,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 +16632,7 @@ function DateTimePicker({
   onChange,
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS6);
@@ -16525,7 +16657,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 +17235,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 +17260,7 @@ function Field({
   size = "md",
   id,
   className = "",
+  reserveFooter = false,
   children,
   ...rest
 }) {
@@ -17129,7 +17273,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 +18329,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 +18389,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 +18424,7 @@ function RadioGroup({
   tone = "primary",
   id,
   className = "",
+  reserveFooter = false,
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
@@ -18305,6 +18472,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 +19497,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 +19947,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 +20020,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 +20078,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,