twico-ui 1.47.0 → 1.49.0

package/dist/index.d.cts

@@ -258,7 +258,11 @@ declare function Accordion(props: AccordionProps): React.JSX.Element;
 /** The canonical six-value color/intent scale used by status & control components. */
 type Tone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 
-/** Action controls (Button, IconButton) — brand or destructive only. */
+/**
+ * The two intents most actions want. Button and IconButton accepted ONLY these until #504; they now
+ * take the full {@link Tone} scale, so this is a convenience alias for the common pair rather than a
+ * ceiling. Still exported, still accurate for anything that genuinely is brand-or-destructive.
+ */
 type ActionTone = "primary" | "danger";
 
 /** Text roles, the full color scale, and `"inherit"` (adopt the parent color) — Text. */
@@ -557,8 +561,20 @@ declare function Breadcrumb(props: BreadcrumbProps): React.JSX.Element;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Fill style. @default "solid" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant`. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant`. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`). A standalone
+   * affirmative action — a row-level confirm sitting beside a `danger` sibling, reading as
+   * "yes / no" — could not be green, so the colour carrying that distinction came out the same blue
+   * as every neutral action on the page. `ActionTone` is still exported and still describes the two
+   * intents most actions want; it is no longer the ceiling.
+   *
+   * `neutral` follows Badge's mapping rather than an accent ramp of its own: `--color-text` on
+   * `--color-surface` for `solid`, `--color-surface-sunken` for `soft`. Note `variant="ghost"` and
+   * `variant="outline"` already express a quiet action, so reach for those first.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Icon node rendered before the label. */
@@ -576,9 +592,10 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`). Omit for a plain (non-toggle) button. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning (e.g. success/warning/info/neutral) while `tone` stays `ActionTone` for the
-   *  unpressed action look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504 — before that `tone` was
+   *  `ActionTone` and this was the only way to reach the other four. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** Render as a different element (e.g. "a"). @default "button" */
   as?: "button" | "a";
@@ -2150,6 +2167,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[];
@@ -2669,6 +2711,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 */
@@ -3900,9 +3956,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   icon?: React.ReactNode;
   /** Fill style (same axes as Button). @default "ghost" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
-   *  `tone="danger"` with any variant. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
+   * `tone="danger"` with any variant. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`), so an
+   * affirmative icon action can be green beside a destructive one. `ActionTone` is still exported
+   * and still names the two intents most actions want; it is no longer the ceiling. `neutral`
+   * follows Badge's mapping rather than an accent ramp of its own.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Fully rounded (circular). @default false */
@@ -3914,8 +3977,9 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`), e.g. a pin/unpin or bold/italic icon toggle. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning while `tone` stays `ActionTone` for the unpressed look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** #342: render as a different element — use `"a"` for an icon **link** (GitHub icon, external nav, …) so
    *  navigation is a real link, not a button. @default "button" */
@@ -5643,4 +5707,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 };

package/dist/index.d.ts

@@ -258,7 +258,11 @@ declare function Accordion(props: AccordionProps): React.JSX.Element;
 /** The canonical six-value color/intent scale used by status & control components. */
 type Tone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 
-/** Action controls (Button, IconButton) — brand or destructive only. */
+/**
+ * The two intents most actions want. Button and IconButton accepted ONLY these until #504; they now
+ * take the full {@link Tone} scale, so this is a convenience alias for the common pair rather than a
+ * ceiling. Still exported, still accurate for anything that genuinely is brand-or-destructive.
+ */
 type ActionTone = "primary" | "danger";
 
 /** Text roles, the full color scale, and `"inherit"` (adopt the parent color) — Text. */
@@ -557,8 +561,20 @@ declare function Breadcrumb(props: BreadcrumbProps): React.JSX.Element;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Fill style. @default "solid" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant`. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant`. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`). A standalone
+   * affirmative action — a row-level confirm sitting beside a `danger` sibling, reading as
+   * "yes / no" — could not be green, so the colour carrying that distinction came out the same blue
+   * as every neutral action on the page. `ActionTone` is still exported and still describes the two
+   * intents most actions want; it is no longer the ceiling.
+   *
+   * `neutral` follows Badge's mapping rather than an accent ramp of its own: `--color-text` on
+   * `--color-surface` for `solid`, `--color-surface-sunken` for `soft`. Note `variant="ghost"` and
+   * `variant="outline"` already express a quiet action, so reach for those first.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Icon node rendered before the label. */
@@ -576,9 +592,10 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`). Omit for a plain (non-toggle) button. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning (e.g. success/warning/info/neutral) while `tone` stays `ActionTone` for the
-   *  unpressed action look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504 — before that `tone` was
+   *  `ActionTone` and this was the only way to reach the other four. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** Render as a different element (e.g. "a"). @default "button" */
   as?: "button" | "a";
@@ -2150,6 +2167,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[];
@@ -2669,6 +2711,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 */
@@ -3900,9 +3956,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   icon?: React.ReactNode;
   /** Fill style (same axes as Button). @default "ghost" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
-   *  `tone="danger"` with any variant. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
+   * `tone="danger"` with any variant. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`), so an
+   * affirmative icon action can be green beside a destructive one. `ActionTone` is still exported
+   * and still names the two intents most actions want; it is no longer the ceiling. `neutral`
+   * follows Badge's mapping rather than an accent ramp of its own.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Fully rounded (circular). @default false */
@@ -3914,8 +3977,9 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`), e.g. a pin/unpin or bold/italic icon toggle. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning while `tone` stays `ActionTone` for the unpressed look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** #342: render as a different element — use `"a"` for an icon **link** (GitHub icon, external nav, …) so
    *  navigation is a real link, not a button. @default "button" */
@@ -5643,4 +5707,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 };

package/dist/index.mjs

@@ -434,6 +434,22 @@ var ICONBTN_CSS = `
   --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); }
 .twc-iconbtn[data-tone="danger"] { --_accent: var(--color-danger); --_accent-hover: var(--color-danger-hover);
   --_accent-fg: var(--color-danger-fg); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg); }
+/* #504: the full Tone scale, not just primary|danger. A standalone affirmative action - a row-level
+   confirm sitting next to a danger sibling, reading as "yes / no" - could not be green, so the colour
+   that carried the distinction came out the same blue as every neutral action on the page.
+   success/warning/info now have real -hover/-active tokens (added in tokens/colors.css on the same
+   step rule as primary and danger: light goes darker, dark goes lighter), so hover always moves AWAY
+   from the ink and contrast only improves. neutral has no accent tokens anywhere and is mapped the way
+   Badge already maps it - --color-text on --color-surface solid, --color-surface-sunken soft - with its
+   hover mixed from currentColor, since there is no --color-text-hover to point at. */
+.twc-iconbtn[data-tone="success"] { --_accent: var(--color-success); --_accent-hover: var(--color-success-hover);
+  --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg); }
+.twc-iconbtn[data-tone="warning"] { --_accent: var(--color-warning); --_accent-hover: var(--color-warning-hover);
+  --_accent-fg: var(--color-warning-fg); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg); }
+.twc-iconbtn[data-tone="info"] { --_accent: var(--color-info); --_accent-hover: var(--color-info-hover);
+  --_accent-fg: var(--color-info-fg); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg); }
+.twc-iconbtn[data-tone="neutral"] { --_accent: var(--color-text); --_accent-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
+  --_accent-fg: var(--color-surface); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text-muted); }
 .twc-iconbtn[data-variant="solid"] { background: var(--_accent); color: var(--_accent-fg); }
 .twc-iconbtn[data-variant="solid"]:hover:not(:disabled) { background: var(--_accent-hover); box-shadow: var(--shadow-brand); }
 .twc-iconbtn[data-variant="solid"]:active:not(:disabled) { filter: brightness(0.92); }
@@ -1811,6 +1827,31 @@ var CSS2 = `
   --_accent: var(--color-danger); --_accent-hover: var(--color-danger-hover); --_accent-active: var(--color-danger-hover);
   --_accent-fg: var(--color-danger-fg); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg);
 }
+/* #504: the full Tone scale, not just primary|danger. A standalone affirmative action - a row-level
+   confirm sitting next to a danger sibling, reading as "yes / no" - could not be green, so the colour
+   that carried the distinction came out the same blue as every neutral action on the page.
+   success/warning/info now have real -hover/-active tokens (added in tokens/colors.css on the same
+   step rule as primary and danger: light goes darker, dark goes lighter), so hover always moves AWAY
+   from the ink and contrast only improves. neutral has no accent tokens anywhere and is mapped the way
+   Badge already maps it - --color-text on --color-surface solid, --color-surface-sunken soft - with its
+   hover mixed from currentColor, since there is no --color-text-hover to point at. */
+.twc-btn[data-tone="success"] {
+  --_accent: var(--color-success); --_accent-hover: var(--color-success-hover); --_accent-active: var(--color-success-active);
+  --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg);
+}
+.twc-btn[data-tone="warning"] {
+  --_accent: var(--color-warning); --_accent-hover: var(--color-warning-hover); --_accent-active: var(--color-warning-active);
+  --_accent-fg: var(--color-warning-fg); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg);
+}
+.twc-btn[data-tone="info"] {
+  --_accent: var(--color-info); --_accent-hover: var(--color-info-hover); --_accent-active: var(--color-info-active);
+  --_accent-fg: var(--color-info-fg); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg);
+}
+.twc-btn[data-tone="neutral"] {
+  --_accent: var(--color-text); --_accent-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
+  --_accent-active: color-mix(in srgb, var(--color-text) 78%, var(--color-surface));
+  --_accent-fg: var(--color-surface); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text-muted);
+}
 /* solid */
 .twc-btn[data-variant="solid"] { background: var(--_accent); color: var(--_accent-fg); }
 .twc-btn[data-variant="solid"]:hover:not(:disabled) { background: var(--_accent-hover); box-shadow: var(--shadow-brand); }
@@ -9357,9 +9398,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; }
@@ -10128,6 +10180,8 @@ function Datatable({
   batchActions = [],
   onRowSelectionChange,
   selectionSummary,
+  verticalAlign,
+  getRowVerticalAlign,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12707,6 +12761,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);
@@ -12817,6 +12872,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,