twico-ui 1.46.0 → 1.48.0

package/dist/index.d.cts

@@ -1636,6 +1636,34 @@ interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -1696,6 +1724,34 @@ interface OptionGroup {
 interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange"> {
   label?: React.ReactNode;
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   error?: React.ReactNode;
   required?: boolean;
   size?: "sm" | "md" | "lg";
@@ -1825,6 +1881,34 @@ interface CurrencyProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   label?: React.ReactNode;
   /** Helper text below the field; linked to the input via aria-describedby. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error text below the field; sets aria-invalid and is linked via aria-describedby (takes precedence over hint). */
   error?: React.ReactNode;
   /** Intercepted to render the label asterisk, and forwarded to the native input as `required`. @default false */
@@ -1865,6 +1949,34 @@ interface CurrencyFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
   label?: React.ReactNode;
   /** Helper text below the field; linked to the input via aria-describedby. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error text below the field; sets aria-invalid and is linked via aria-describedby (takes precedence over hint). */
   error?: React.ReactNode;
   /** Intercepted to render the label asterisk, and forwarded to the native input as `required`. @default false */
@@ -2038,6 +2150,31 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    * `tr.twc-dt__row.my-row .twc-dt__td`. You are then choosing to cover the hover cue on those rows.
    */
   getRowClassName?: (row: T, index: number) => string | undefined;
+  /**
+   * Default vertical alignment for every body cell, as `data-valign`. Only visible once rows vary
+   * in height - a `wrapText` column, a multi-line `renderCell`, or a drag-resized row; with
+   * single-line rows every value looks the same.
+   *
+   * **Precedence, lowest first: this → {@link getRowVerticalAlign} → the column's
+   * `verticalAlign`.** It is resolved in one place and emitted as a single `data-valign` on the
+   * cell, rather than as three competing CSS rules, so the order is readable in the code and an
+   * unrelated stylesheet edit cannot reorder it.
+   *
+   * @default unset — cells keep the browser's `middle`, except `wrapText` cells, which sit `top`
+   */
+  verticalAlign?: "top" | "middle" | "bottom";
+  /**
+   * Vertical alignment for one row's cells, called `(row, index)` like {@link getRowStyle}. Return
+   * `undefined` to leave a row on the table default.
+   *
+   * Overrides {@link verticalAlign} but **not** a column's own `verticalAlign`: an explicit column
+   * value is a property of that column's content type and is almost always a deliberate exemption
+   * (the actions column stays centred while the rest of the row moves). If you need a row to move
+   * every cell, leave the columns' values unset.
+   *
+   * `index` is page-relative, the same as {@link getRowStyle}.
+   */
+  getRowVerticalAlign?: (row: T, index: number) => "top" | "middle" | "bottom" | undefined;
   /** Restrict the toolbar quick-search to these column `field`s (client mode); defaults to every
    *  visible column. Mirrors `runDatatableQuery`'s `options.searchFields`. */
   searchFields?: string[];
@@ -2557,6 +2694,20 @@ interface DatatableColumn<T = any> {
   align?: "left" | "center" | "right";
   /** Header-cell alignment, when it should differ from the body `align`. @default the column's `align` */
   headerAlign?: "left" | "center" | "right";
+  /**
+   * Vertical alignment of this column's body cells, as `data-valign`. The transpose of `align`:
+   * `align` decides where content sits across the column's width, this decides where it sits down
+   * the row's height. Only visible once rows vary in height - a `wrapText` column, a multi-line
+   * `renderCell`, or a drag-resized row.
+   *
+   * **Wins over the row and table values.** A per-column setting is a statement about this column's
+   * content type - an actions column or a status badge that should stay centred however tall the
+   * row gets - so it survives a row-level or table-wide sweep. To move a whole row including this
+   * column, leave the column's value unset.
+   *
+   * @default `"top"` for `wrapText` columns, otherwise the table's `verticalAlign`
+   */
+  verticalAlign?: "top" | "middle" | "bottom";
   /** Allow sorting this column. @default true */
   sortable?: boolean;
   /** Allow filtering this column. @default true */
@@ -3053,6 +3204,34 @@ interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3106,6 +3285,34 @@ interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3163,6 +3370,34 @@ interface TimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3218,6 +3453,34 @@ interface DateTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — recolors both controls and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk to the label). @default false */
@@ -3275,6 +3538,34 @@ declare function DateTimePicker(props: DateTimePickerProps): React.JSX.Element;
 interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange"> {
   label?: React.ReactNode;
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   error?: React.ReactNode;
   required?: boolean;
   /** Control height preset, matching Select/Combobox. @default "md" */
@@ -3540,6 +3831,34 @@ interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — replaces the hint and renders in the danger color. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk after the label). @default false */
@@ -3728,6 +4047,34 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk and forwards to the native input). */
@@ -4036,6 +4383,34 @@ interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
   label?: React.ReactNode;
   /** Helper text below the group. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error text below the group; sets `aria-invalid` and is announced once for the whole group. */
   error?: React.ReactNode;
   /** Lay the radios in a column or a wrapping row. @default "vertical" */
@@ -4098,6 +4473,34 @@ declare function Rating(props: RatingProps): React.JSX.Element;
 interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onChange" | "defaultValue"> {
   label?: React.ReactNode;
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   error?: React.ReactNode;
   required?: boolean;
   size?: "sm" | "md" | "lg";
@@ -4535,6 +4938,34 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   label?: React.ReactNode;
   /** Helper text shown below when there is no error. */
   hint?: React.ReactNode;
+  /**
+   * #494: always render the footer lane, empty when there is nothing to say, so this field is the
+   * same height as one that has a `hint`, an `error` or a counter.
+   *
+   * A row of fields aligned with `align="flex-end"` splits onto two lines the moment ONE of them
+   * has a hint: that field grows a footer, the others do not, and the caption ends up moving a
+   * *different* control. `align` cannot fix it - `flex-start` lines up the labels instead, so the
+   * controls part company as soon as one label wraps at a narrow width.
+   *
+   * Set it per field, or once on any ancestor for everything inside, which is the safer habit in a
+   * row - with a per-field prop alone, adding a field later and forgetting it brings the
+   * misalignment straight back:
+   *
+   * ```jsx
+   * <Stack direction="row" align="flex-end" data-reserve-footer>
+   *   <Select label="Filter" … />
+   *   <Select label="Comparison" hint="Matches the whole value." … />
+   *   <Input  label="Value" … />
+   * </Stack>
+   * ```
+   *
+   * The lane is held open by generated content, so it matches the real footer by construction -
+   * same font metrics, same flex gap - rather than by a height that drifts when a token changes.
+   * It adds no text to the accessibility tree.
+   *
+   * @default false
+   */
+  reserveFooter?: boolean;
   /** Error message — turns the field red and replaces the hint. */
   error?: React.ReactNode;
   /** Marks the field required (adds an asterisk and forwards to the native textarea). */
@@ -5251,4 +5682,5 @@ declare function useFilePicker(options?: UseFilePickerOptions): {
   getInputProps: () => React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement | null> };
 };
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridBatchAction, type CardGridBatchActionContext, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, Alert, Anchor, AppShell, Avatar, AvatarMenu, Badge, Box, Boxplot, Breadcrumb, BubbleChart, Button, Candlestick, Card, CardGrid, Carousel, Chart, Checkbox, Code, ColorPicker, ColorSchemeScript, Combobox, CommandPalette, Container, Currency, CurrencyField, Datatable, DatePicker, DateRangePicker, DateTimePicker, Dialog, DiffTable, Divider, DonutChart, Drawer, EmptyState, Field, FileUpload, FilterBar, Form, FunnelChart, Gauge, Grid, Heading, Heatmap, IconButton, Image, ImageViewer, Input, Kanban, Kbd, Label, List, Menu, MultiSelect, Navbar, Pagination, PieChart, PolarAreaChart, Popover, Portal, Pre, Progress, RadarChart, Radio, RadioGroup, RangeChart, Rating, ScatterChart, Select, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, Text, Textarea, ThemeProvider, TimePicker, Timeline, Toast, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, Treemap, TwicoProvider, VisuallyHidden, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export type { AccordionItem, AccordionProps, ActionTone, AlertProps, AnchorProps, AppShellProps, AvatarMenuProps, AvatarProps, BadgeProps, BarTone, BoxOwnProps, BoxProps, BoxplotDatum, BoxplotProps, BreadcrumbItem, BreadcrumbProps, BubbleChartProps, ButtonProps, CandlestickDatum, CandlestickProps, CardGridBatchAction, CardGridBatchActionContext, CardGridFilter, CardGridProps, CardGridQuery, CardGridSort, CardGridSortOption, CardProps, CarouselProps, ChartDatum, ChartProps, CheckboxProps, CodeProps, ColorPickerProps, ColorSchemeScriptOptions, ColorSchemeScriptProps, ComboboxGroup, ComboboxOption, ComboboxProps, Command, CommandPaletteProps, ContainerOwnProps, ContainerProps, CurrencyFieldProps, CurrencyOption, CurrencyProps, DatatableBatchAction, DatatableBatchActionContext, DatatableBatchUpdateDetail, DatatableColumn, DatatableFilter, DatatableFilterOp, DatatableNumberOp, DatatableProps, DatatableQuery, DatatableRowAction, DatatableState, DatatableStringOp, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerProps, DialogProps, DiffOp, DiffTableColumn, DiffTableProps, DividerProps, DonutChartDatum, DonutChartProps, DrawerProps, EmptyStateProps, FieldProps, FileUploadProps, FilterBarProps, FilterClause, FilterField, FilterFieldType, FilterValues, FormProps, FunnelChartProps, FunnelDatum, GaugeProps, GaugeSeries, GridOwnProps, GridProps, HeadingOwnProps, HeadingProps, HeadingSize, HeatmapDatum, HeatmapProps, IconButtonProps, ImageProps, ImageViewerControlsApi, ImageViewerProps, ImageViewerState, InputProps, KanbanCard, KanbanColumn, KanbanProps, KbdProps, LabelProps, ListItemData, ListProps, MenuItemDef, MenuProps, MultiSelectGroup, MultiSelectOption, MultiSelectProps, NavbarLink, NavbarProps, Option, OptionGroup, PaginationProps, PieChartDatum, PieChartProps, PolarAreaChartProps, PolarAreaDatum, PolymorphicAs, PolymorphicComponent, PolymorphicProps, PolymorphicPropsWithRef, PolymorphicRef, PopoverProps, PortalProps, PreProps, ProgressProps, RadarChartProps, RadarDatum, RadioGroupOption, RadioGroupProps, RadioProps, RangeChartProps, RangeDatum, RatingProps, ResponsiveColumns, ScatterChartProps, ScatterPoint, ScatterSeries, SelectGroup, SelectOption, SelectProps, SidebarItem, SidebarProps, SkeletonProps, SliderProps, SparklineDatum, SparklineProps, SpinnerProps, StackOwnProps, StackProps, StatProps, Step, StepperProps, SwitchProps, Sx, TabItem, TableColumn, TableProps, TabsProps, TagProps, TextOwnProps, TextProps, TextTone, TextareaProps, Theme, ThemeProviderProps, ThemeTokens, TimePickerProps, TimelineItem, TimelineProps, ToastApi, ToastOptions, ToastProps, ToastProviderProps, ToastTone, ToastViewportProps, ToggleGroupItem, ToggleGroupProps, Tone, TooltipProps, TreeNode, TreeViewProps, TreemapDatum, TreemapProps, TwicoProviderProps, UseColorSchemeOptions, UseFilePickerOptions, UseFocusTrapOptions, UseKeyPressOptions, UseLocalStorageOptions, UseMediaQueryOptions, UseWindowSizeOptions, VisuallyHiddenProps, WithSx };