@ai-matrx/design-system 0.86.350 → 0.86.352

package/dist/controls.css

@@ -1020,24 +1020,24 @@
     border-color: hsl(var(--chip-tone) / 0.3) !important;
     color: hsl(var(--chip-ink, var(--chip-tone))) !important;
   }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="primary"] { --chip-tone: var(--primary); --chip-ink: var(--primary-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="success"] { --chip-tone: var(--success); --chip-ink: var(--success-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="destructive"] { --chip-tone: var(--destructive); --chip-ink: var(--destructive-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="info"] { --chip-tone: var(--info); --chip-ink: var(--info-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="warning"] { --chip-tone: var(--matrx-chip-amber); --chip-ink: var(--matrx-chip-amber-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="sky"] { --chip-tone: var(--matrx-chip-sky); --chip-ink: var(--matrx-chip-sky-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="blue"] { --chip-tone: var(--matrx-chip-blue); --chip-ink: var(--matrx-chip-blue-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="indigo"] { --chip-tone: var(--matrx-chip-indigo); --chip-ink: var(--matrx-chip-indigo-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="violet"] { --chip-tone: var(--matrx-chip-violet); --chip-ink: var(--matrx-chip-violet-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="fuchsia"] { --chip-tone: var(--matrx-chip-fuchsia); --chip-ink: var(--matrx-chip-fuchsia-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="rose"] { --chip-tone: var(--matrx-chip-rose); --chip-ink: var(--matrx-chip-rose-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="orange"] { --chip-tone: var(--matrx-chip-orange); --chip-ink: var(--matrx-chip-orange-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="amber"] { --chip-tone: var(--matrx-chip-amber); --chip-ink: var(--matrx-chip-amber-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="lime"] { --chip-tone: var(--matrx-chip-lime); --chip-ink: var(--matrx-chip-lime-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="emerald"] { --chip-tone: var(--matrx-chip-emerald); --chip-ink: var(--matrx-chip-emerald-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="teal"] { --chip-tone: var(--matrx-chip-teal); --chip-ink: var(--matrx-chip-teal-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="cyan"] { --chip-tone: var(--matrx-chip-cyan); --chip-ink: var(--matrx-chip-cyan-ink); }
-  :is(.matrx-control-chip, .matrx-tile)[data-tone="slate"] { --chip-tone: var(--matrx-chip-slate); --chip-ink: var(--matrx-chip-slate-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="primary"] { --chip-tone: var(--primary); --chip-ink: var(--primary-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="success"] { --chip-tone: var(--success); --chip-ink: var(--success-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="destructive"] { --chip-tone: var(--destructive); --chip-ink: var(--destructive-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="info"] { --chip-tone: var(--info); --chip-ink: var(--info-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="warning"] { --chip-tone: var(--matrx-chip-amber); --chip-ink: var(--matrx-chip-amber-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="sky"] { --chip-tone: var(--matrx-chip-sky); --chip-ink: var(--matrx-chip-sky-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="blue"] { --chip-tone: var(--matrx-chip-blue); --chip-ink: var(--matrx-chip-blue-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="indigo"] { --chip-tone: var(--matrx-chip-indigo); --chip-ink: var(--matrx-chip-indigo-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="violet"] { --chip-tone: var(--matrx-chip-violet); --chip-ink: var(--matrx-chip-violet-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="fuchsia"] { --chip-tone: var(--matrx-chip-fuchsia); --chip-ink: var(--matrx-chip-fuchsia-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="rose"] { --chip-tone: var(--matrx-chip-rose); --chip-ink: var(--matrx-chip-rose-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="orange"] { --chip-tone: var(--matrx-chip-orange); --chip-ink: var(--matrx-chip-orange-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="amber"] { --chip-tone: var(--matrx-chip-amber); --chip-ink: var(--matrx-chip-amber-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="lime"] { --chip-tone: var(--matrx-chip-lime); --chip-ink: var(--matrx-chip-lime-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="emerald"] { --chip-tone: var(--matrx-chip-emerald); --chip-ink: var(--matrx-chip-emerald-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="teal"] { --chip-tone: var(--matrx-chip-teal); --chip-ink: var(--matrx-chip-teal-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="cyan"] { --chip-tone: var(--matrx-chip-cyan); --chip-ink: var(--matrx-chip-cyan-ink); }
+  :is(.matrx-control-chip, .matrx-tile, .matrx-tile-icon)[data-tone="slate"] { --chip-tone: var(--matrx-chip-slate); --chip-ink: var(--matrx-chip-slate-ink); }
   /* HUE CARDS tone table: the chip table above, restated for `.matrx-hue-card` (one source of hues). */
   .matrx-hue-card[data-tone="primary"] { --chip-tone: var(--primary); --chip-ink: var(--primary-ink); }
   .matrx-hue-card[data-tone="success"] { --chip-tone: var(--success); --chip-ink: var(--success-ink); }
@@ -1621,6 +1621,15 @@
     background-color: hsl(var(--chip-tone) / 0.14);
     color: hsl(var(--chip-ink, var(--chip-tone)));
   }
+  /* Tile iconTone: only the icon is tinted — a 28px colored square on a neutral card. */
+  .matrx-tile-icon[data-tone]:not([data-tone="neutral"]) {
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--matrx-control-radius);
+    background-color: hsl(var(--chip-tone) / 0.14);
+    color: hsl(var(--chip-ink, var(--chip-tone)));
+  }
   /* A chosen hero card fills its icon square: the choice reads at a glance. */
   .matrx-tile[data-hero][data-selected] .matrx-tile-icon {
     background-color: hsl(var(--primary));

package/dist/controls.d.cts

@@ -661,6 +661,9 @@ interface TileProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     hero?: boolean;
     /** Tint card, edge and icon square from one `ChipTone` (the `Chip` hue tokens). */
     tone?: ChipTone;
+    /** Tint ONLY the icon, as a 28px colored square, on a neutral card: a grid of actions where each
+     *  job keeps its own hue (quick actions) without every card turning into a colored card. */
+    iconTone?: ChipTone;
     /** A 28px navigation / filter row for sidebars and dense lists: `min-height` is the control size,
      *  padding 4px 8px, gap 8px, 13px title. The `line` is HIDDEN when dense (one line, always).
      *  `variant="quiet"` + `dense` is a clean nav row: transparent until hover / selected. */
@@ -871,6 +874,51 @@ interface StageStepsProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "
 declare function stageStates(count: number, current: number): StageState[];
 declare function StageSteps({ steps, current, labels, maxVisible, className, ...props }: StageStepsProps): React.JSX.Element;
 
+/**
+ * Checklist — conditions a person works through, each with a status mark, and a meter over them.
+ *
+ * `ChecklistItem` is one condition: a 16px mark (done = filled success disc with a check, open =
+ * a warning ring, unknown = a dashed muted ring), a 13px title, one 12px line (one line, full text
+ * in its tooltip) and an optional end slot for the ONE action that fixes it. Under 640px the end
+ * slot drops under the text, on the text's left edge. `ChecklistMeter` heads a group: its name,
+ * "N of M" and one segment per condition, met segments in success. A status word goes in `end`
+ * (a `Badge`). Neither draws a frame: they sit inside the caller's card.
+ *
+ * First caller: the brand page's research readiness (2026-10-23). Pinned by `checklist.test.tsx`.
+ */
+
+type ChecklistState = "done" | "open" | "unknown";
+declare function ChecklistMark({ state, className }: {
+    state: ChecklistState;
+    className?: string;
+}): React.JSX.Element;
+interface ChecklistProps extends React.HTMLAttributes<HTMLUListElement> {
+    "aria-label"?: string;
+}
+/** The list around `ChecklistItem`s: no frame, no gap of its own beyond the rows. */
+declare function Checklist({ className, children, ...props }: ChecklistProps): React.JSX.Element;
+interface ChecklistItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
+    state: ChecklistState;
+    /** The condition, in a few words. */
+    title: React.ReactNode;
+    /** One line under the title: what was measured, or what is missing. Its full text is the tooltip. */
+    line?: string | null;
+    /** The one action that fixes this condition (a `Button`). */
+    end?: React.ReactNode;
+}
+declare function ChecklistItem({ state, title, line, end, className, ...props }: ChecklistItemProps): React.JSX.Element;
+interface ChecklistMeterProps {
+    /** The group's name ("What others say"). */
+    label: React.ReactNode;
+    met: number;
+    total: number;
+    /** A status word after the count (a `Badge`). */
+    end?: React.ReactNode;
+    className?: string;
+}
+/** A group's head: name, "N of M" and one segment per condition. */
+declare function ChecklistMeter({ label, met, total, end, className }: ChecklistMeterProps): React.JSX.Element;
+
 type ClampedNumberInputProps = {
     id?: string;
     value: number;
@@ -1224,7 +1272,7 @@ interface CalloutBannerProps {
 declare function CalloutBanner({ tone, icon: Icon, title, description, actions, onDismiss, dismissing, className, }: CalloutBannerProps): React.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "outline" | "primary" | "success" | "destructive" | "default" | "secondary" | "ghost" | "subtle" | null | undefined;
+    variant?: "primary" | "outline" | "success" | "link" | "destructive" | "default" | "secondary" | "ghost" | "subtle" | null | undefined;
     size?: "icon" | "xs" | "sm" | "md" | "lg" | "xl" | "default" | "2xl" | "3xl" | "icon-sm" | "roundIcon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -2129,5 +2177,5 @@ interface TileCardGridProps {
 }
 declare function TileCardGrid({ title, description, cards, columns, className }: TileCardGridProps): React.JSX.Element;
 
-export { ActionFeedbackButton, AdvancedCollapsible, AnchoredToolbar, AspectRatioGlyph, AspectRatioSelect, Badge, Button, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, Chip, ChipSet, CitationChip, CitationPopoverBody, ClampedNumberInput, CollapsibleText, CollapsibleTextGroupControls, ColorSwatchRow, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, ControlRow, ControlScope, DangerZone, DateField, DateTimeField, DecisionControl, DeleteButton, DisclosureHeader, EmptyState, EmptyStateCard, Field, FieldHelp, GatedActionButton, HUE_TONE, HelpIcon, HueCard, HueGrid, HueList, HueRow, IconDropdownMenu, IconSelect, IndicatorStrip, InfoHint, Input, IosWidget, KpiGrid, KpiTile, LabeledField, LightSwitchToggle, MiddleTruncate, MissingTag, NumberStepper, OpacitySlider, OptionCombobox, PageRangeInput, PromoBanner, PropertyRow, RegionSkeleton, RowGroup, STATUS_TONES, SearchField, SearchInput, SegmentedControl, Select, SelectTrigger, SettingRow, Slider, SplitButton, StageSteps, StatusBadge, StatusToken, StructuredSectionCard, Switch, Tabs, TabsList, TabsTrigger, TextArrayInput, Textarea, Tile, TileCard, TileCardGrid, TimeField, ToolRail, WindowChromeButton, WindowLight, WindowLights, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };
-export type { ActionFeedbackButtonProps, AdvancedCollapsibleProps, AnchorRect, AnchoredToolbarProps, AspectRatioSelectProps, BadgeProps, BadgeTone, BlockingCheck, ButtonProps$1 as ButtonProps, CalloutTone, CardColor, CardSize, ChipHue, ChipProps, ChipSetProps, ChipTone, CitationChipProps, CitationPopoverBodyProps, ClampedNumberInputProps, ColorSwatch, ColorSwatchRowProps, ConfigurationColumn, ConfirmDeleteProps, ControlRowProps, ControlVariant, ControlWidth, DateFieldMode, DateFieldProps, DecisionAnswer, DecisionControlProps, DeleteButtonProps, DisclosureHeaderProps, DisclosureHeaderVariant, EmptyStateCardProps, EmptyStateProps, FieldProps, GatedActionButtonProps, GlyphTone, HelpIconProps, HueCardProps, HueGridProps, HueListProps, HueRowProps, IconDropdownMenuProps, IconDropdownOption, IconSelectItem, IconSelectProps, IndicatorItem, IndicatorStripProps, IndicatorTone, InfoHintProps, InputProps, IosWidgetProps, KpiTileProps, KpiTone, KpiTrend, LabeledFieldProps, LightSwitchToggleProps, NumberStepperProps, OpacitySliderProps, OptionComboboxGroup, OptionComboboxProps, PageRangeInputProps, PageRangeIssue, PageRangeIssueKind, ParsedPageRanges, ParsedRatio, PromoBannerProps, PromoTone, PropertyRowProps, RatioGroups, RegionSkeletonProps, RowGroupProps, SearchInputProps, SegmentOption, SegmentedControlProps, SelectOption, SelectProps, SelectTriggerProps, SettingRowProps, SliderProps, StageState, StageStep, StageStepsProps, StatusBadgeProps, StatusBadgeSize, StatusTone, StructuredSectionCardProps, StructuredSectionCardTitleTone, SwitchProps, TabsListProps, TabsProps, TabsVariant, TextArrayInputProps, TextareaProps, TileCardGridProps, TileCardProps, TileLayout, TileProps, ToolRailItem, ToolRailProps, WayOutItem, WindowChromeButtonProps, WindowLightKind, WindowLightProps, WindowLightsProps };
+export { ActionFeedbackButton, AdvancedCollapsible, AnchoredToolbar, AspectRatioGlyph, AspectRatioSelect, Badge, Button, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, Checklist, ChecklistItem, ChecklistMark, ChecklistMeter, Chip, ChipSet, CitationChip, CitationPopoverBody, ClampedNumberInput, CollapsibleText, CollapsibleTextGroupControls, ColorSwatchRow, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, ControlRow, ControlScope, DangerZone, DateField, DateTimeField, DecisionControl, DeleteButton, DisclosureHeader, EmptyState, EmptyStateCard, Field, FieldHelp, GatedActionButton, HUE_TONE, HelpIcon, HueCard, HueGrid, HueList, HueRow, IconDropdownMenu, IconSelect, IndicatorStrip, InfoHint, Input, IosWidget, KpiGrid, KpiTile, LabeledField, LightSwitchToggle, MiddleTruncate, MissingTag, NumberStepper, OpacitySlider, OptionCombobox, PageRangeInput, PromoBanner, PropertyRow, RegionSkeleton, RowGroup, STATUS_TONES, SearchField, SearchInput, SegmentedControl, Select, SelectTrigger, SettingRow, Slider, SplitButton, StageSteps, StatusBadge, StatusToken, StructuredSectionCard, Switch, Tabs, TabsList, TabsTrigger, TextArrayInput, Textarea, Tile, TileCard, TileCardGrid, TimeField, ToolRail, WindowChromeButton, WindowLight, WindowLights, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };
+export type { ActionFeedbackButtonProps, AdvancedCollapsibleProps, AnchorRect, AnchoredToolbarProps, AspectRatioSelectProps, BadgeProps, BadgeTone, BlockingCheck, ButtonProps$1 as ButtonProps, CalloutTone, CardColor, CardSize, ChecklistItemProps, ChecklistMeterProps, ChecklistProps, ChecklistState, ChipHue, ChipProps, ChipSetProps, ChipTone, CitationChipProps, CitationPopoverBodyProps, ClampedNumberInputProps, ColorSwatch, ColorSwatchRowProps, ConfigurationColumn, ConfirmDeleteProps, ControlRowProps, ControlVariant, ControlWidth, DateFieldMode, DateFieldProps, DecisionAnswer, DecisionControlProps, DeleteButtonProps, DisclosureHeaderProps, DisclosureHeaderVariant, EmptyStateCardProps, EmptyStateProps, FieldProps, GatedActionButtonProps, GlyphTone, HelpIconProps, HueCardProps, HueGridProps, HueListProps, HueRowProps, IconDropdownMenuProps, IconDropdownOption, IconSelectItem, IconSelectProps, IndicatorItem, IndicatorStripProps, IndicatorTone, InfoHintProps, InputProps, IosWidgetProps, KpiTileProps, KpiTone, KpiTrend, LabeledFieldProps, LightSwitchToggleProps, NumberStepperProps, OpacitySliderProps, OptionComboboxGroup, OptionComboboxProps, PageRangeInputProps, PageRangeIssue, PageRangeIssueKind, ParsedPageRanges, ParsedRatio, PromoBannerProps, PromoTone, PropertyRowProps, RatioGroups, RegionSkeletonProps, RowGroupProps, SearchInputProps, SegmentOption, SegmentedControlProps, SelectOption, SelectProps, SelectTriggerProps, SettingRowProps, SliderProps, StageState, StageStep, StageStepsProps, StatusBadgeProps, StatusBadgeSize, StatusTone, StructuredSectionCardProps, StructuredSectionCardTitleTone, SwitchProps, TabsListProps, TabsProps, TabsVariant, TextArrayInputProps, TextareaProps, TileCardGridProps, TileCardProps, TileLayout, TileProps, ToolRailItem, ToolRailProps, WayOutItem, WindowChromeButtonProps, WindowLightKind, WindowLightProps, WindowLightsProps };

package/dist/controls.d.ts

@@ -661,6 +661,9 @@ interface TileProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     hero?: boolean;
     /** Tint card, edge and icon square from one `ChipTone` (the `Chip` hue tokens). */
     tone?: ChipTone;
+    /** Tint ONLY the icon, as a 28px colored square, on a neutral card: a grid of actions where each
+     *  job keeps its own hue (quick actions) without every card turning into a colored card. */
+    iconTone?: ChipTone;
     /** A 28px navigation / filter row for sidebars and dense lists: `min-height` is the control size,
      *  padding 4px 8px, gap 8px, 13px title. The `line` is HIDDEN when dense (one line, always).
      *  `variant="quiet"` + `dense` is a clean nav row: transparent until hover / selected. */
@@ -871,6 +874,51 @@ interface StageStepsProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "
 declare function stageStates(count: number, current: number): StageState[];
 declare function StageSteps({ steps, current, labels, maxVisible, className, ...props }: StageStepsProps): React.JSX.Element;
 
+/**
+ * Checklist — conditions a person works through, each with a status mark, and a meter over them.
+ *
+ * `ChecklistItem` is one condition: a 16px mark (done = filled success disc with a check, open =
+ * a warning ring, unknown = a dashed muted ring), a 13px title, one 12px line (one line, full text
+ * in its tooltip) and an optional end slot for the ONE action that fixes it. Under 640px the end
+ * slot drops under the text, on the text's left edge. `ChecklistMeter` heads a group: its name,
+ * "N of M" and one segment per condition, met segments in success. A status word goes in `end`
+ * (a `Badge`). Neither draws a frame: they sit inside the caller's card.
+ *
+ * First caller: the brand page's research readiness (2026-10-23). Pinned by `checklist.test.tsx`.
+ */
+
+type ChecklistState = "done" | "open" | "unknown";
+declare function ChecklistMark({ state, className }: {
+    state: ChecklistState;
+    className?: string;
+}): React.JSX.Element;
+interface ChecklistProps extends React.HTMLAttributes<HTMLUListElement> {
+    "aria-label"?: string;
+}
+/** The list around `ChecklistItem`s: no frame, no gap of its own beyond the rows. */
+declare function Checklist({ className, children, ...props }: ChecklistProps): React.JSX.Element;
+interface ChecklistItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
+    state: ChecklistState;
+    /** The condition, in a few words. */
+    title: React.ReactNode;
+    /** One line under the title: what was measured, or what is missing. Its full text is the tooltip. */
+    line?: string | null;
+    /** The one action that fixes this condition (a `Button`). */
+    end?: React.ReactNode;
+}
+declare function ChecklistItem({ state, title, line, end, className, ...props }: ChecklistItemProps): React.JSX.Element;
+interface ChecklistMeterProps {
+    /** The group's name ("What others say"). */
+    label: React.ReactNode;
+    met: number;
+    total: number;
+    /** A status word after the count (a `Badge`). */
+    end?: React.ReactNode;
+    className?: string;
+}
+/** A group's head: name, "N of M" and one segment per condition. */
+declare function ChecklistMeter({ label, met, total, end, className }: ChecklistMeterProps): React.JSX.Element;
+
 type ClampedNumberInputProps = {
     id?: string;
     value: number;
@@ -1224,7 +1272,7 @@ interface CalloutBannerProps {
 declare function CalloutBanner({ tone, icon: Icon, title, description, actions, onDismiss, dismissing, className, }: CalloutBannerProps): React.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "outline" | "primary" | "success" | "destructive" | "default" | "secondary" | "ghost" | "subtle" | null | undefined;
+    variant?: "primary" | "outline" | "success" | "link" | "destructive" | "default" | "secondary" | "ghost" | "subtle" | null | undefined;
     size?: "icon" | "xs" | "sm" | "md" | "lg" | "xl" | "default" | "2xl" | "3xl" | "icon-sm" | "roundIcon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -2129,5 +2177,5 @@ interface TileCardGridProps {
 }
 declare function TileCardGrid({ title, description, cards, columns, className }: TileCardGridProps): React.JSX.Element;
 
-export { ActionFeedbackButton, AdvancedCollapsible, AnchoredToolbar, AspectRatioGlyph, AspectRatioSelect, Badge, Button, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, Chip, ChipSet, CitationChip, CitationPopoverBody, ClampedNumberInput, CollapsibleText, CollapsibleTextGroupControls, ColorSwatchRow, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, ControlRow, ControlScope, DangerZone, DateField, DateTimeField, DecisionControl, DeleteButton, DisclosureHeader, EmptyState, EmptyStateCard, Field, FieldHelp, GatedActionButton, HUE_TONE, HelpIcon, HueCard, HueGrid, HueList, HueRow, IconDropdownMenu, IconSelect, IndicatorStrip, InfoHint, Input, IosWidget, KpiGrid, KpiTile, LabeledField, LightSwitchToggle, MiddleTruncate, MissingTag, NumberStepper, OpacitySlider, OptionCombobox, PageRangeInput, PromoBanner, PropertyRow, RegionSkeleton, RowGroup, STATUS_TONES, SearchField, SearchInput, SegmentedControl, Select, SelectTrigger, SettingRow, Slider, SplitButton, StageSteps, StatusBadge, StatusToken, StructuredSectionCard, Switch, Tabs, TabsList, TabsTrigger, TextArrayInput, Textarea, Tile, TileCard, TileCardGrid, TimeField, ToolRail, WindowChromeButton, WindowLight, WindowLights, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };
-export type { ActionFeedbackButtonProps, AdvancedCollapsibleProps, AnchorRect, AnchoredToolbarProps, AspectRatioSelectProps, BadgeProps, BadgeTone, BlockingCheck, ButtonProps$1 as ButtonProps, CalloutTone, CardColor, CardSize, ChipHue, ChipProps, ChipSetProps, ChipTone, CitationChipProps, CitationPopoverBodyProps, ClampedNumberInputProps, ColorSwatch, ColorSwatchRowProps, ConfigurationColumn, ConfirmDeleteProps, ControlRowProps, ControlVariant, ControlWidth, DateFieldMode, DateFieldProps, DecisionAnswer, DecisionControlProps, DeleteButtonProps, DisclosureHeaderProps, DisclosureHeaderVariant, EmptyStateCardProps, EmptyStateProps, FieldProps, GatedActionButtonProps, GlyphTone, HelpIconProps, HueCardProps, HueGridProps, HueListProps, HueRowProps, IconDropdownMenuProps, IconDropdownOption, IconSelectItem, IconSelectProps, IndicatorItem, IndicatorStripProps, IndicatorTone, InfoHintProps, InputProps, IosWidgetProps, KpiTileProps, KpiTone, KpiTrend, LabeledFieldProps, LightSwitchToggleProps, NumberStepperProps, OpacitySliderProps, OptionComboboxGroup, OptionComboboxProps, PageRangeInputProps, PageRangeIssue, PageRangeIssueKind, ParsedPageRanges, ParsedRatio, PromoBannerProps, PromoTone, PropertyRowProps, RatioGroups, RegionSkeletonProps, RowGroupProps, SearchInputProps, SegmentOption, SegmentedControlProps, SelectOption, SelectProps, SelectTriggerProps, SettingRowProps, SliderProps, StageState, StageStep, StageStepsProps, StatusBadgeProps, StatusBadgeSize, StatusTone, StructuredSectionCardProps, StructuredSectionCardTitleTone, SwitchProps, TabsListProps, TabsProps, TabsVariant, TextArrayInputProps, TextareaProps, TileCardGridProps, TileCardProps, TileLayout, TileProps, ToolRailItem, ToolRailProps, WayOutItem, WindowChromeButtonProps, WindowLightKind, WindowLightProps, WindowLightsProps };
+export { ActionFeedbackButton, AdvancedCollapsible, AnchoredToolbar, AspectRatioGlyph, AspectRatioSelect, Badge, Button, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, Checklist, ChecklistItem, ChecklistMark, ChecklistMeter, Chip, ChipSet, CitationChip, CitationPopoverBody, ClampedNumberInput, CollapsibleText, CollapsibleTextGroupControls, ColorSwatchRow, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, ControlRow, ControlScope, DangerZone, DateField, DateTimeField, DecisionControl, DeleteButton, DisclosureHeader, EmptyState, EmptyStateCard, Field, FieldHelp, GatedActionButton, HUE_TONE, HelpIcon, HueCard, HueGrid, HueList, HueRow, IconDropdownMenu, IconSelect, IndicatorStrip, InfoHint, Input, IosWidget, KpiGrid, KpiTile, LabeledField, LightSwitchToggle, MiddleTruncate, MissingTag, NumberStepper, OpacitySlider, OptionCombobox, PageRangeInput, PromoBanner, PropertyRow, RegionSkeleton, RowGroup, STATUS_TONES, SearchField, SearchInput, SegmentedControl, Select, SelectTrigger, SettingRow, Slider, SplitButton, StageSteps, StatusBadge, StatusToken, StructuredSectionCard, Switch, Tabs, TabsList, TabsTrigger, TextArrayInput, Textarea, Tile, TileCard, TileCardGrid, TimeField, ToolRail, WindowChromeButton, WindowLight, WindowLights, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };
+export type { ActionFeedbackButtonProps, AdvancedCollapsibleProps, AnchorRect, AnchoredToolbarProps, AspectRatioSelectProps, BadgeProps, BadgeTone, BlockingCheck, ButtonProps$1 as ButtonProps, CalloutTone, CardColor, CardSize, ChecklistItemProps, ChecklistMeterProps, ChecklistProps, ChecklistState, ChipHue, ChipProps, ChipSetProps, ChipTone, CitationChipProps, CitationPopoverBodyProps, ClampedNumberInputProps, ColorSwatch, ColorSwatchRowProps, ConfigurationColumn, ConfirmDeleteProps, ControlRowProps, ControlVariant, ControlWidth, DateFieldMode, DateFieldProps, DecisionAnswer, DecisionControlProps, DeleteButtonProps, DisclosureHeaderProps, DisclosureHeaderVariant, EmptyStateCardProps, EmptyStateProps, FieldProps, GatedActionButtonProps, GlyphTone, HelpIconProps, HueCardProps, HueGridProps, HueListProps, HueRowProps, IconDropdownMenuProps, IconDropdownOption, IconSelectItem, IconSelectProps, IndicatorItem, IndicatorStripProps, IndicatorTone, InfoHintProps, InputProps, IosWidgetProps, KpiTileProps, KpiTone, KpiTrend, LabeledFieldProps, LightSwitchToggleProps, NumberStepperProps, OpacitySliderProps, OptionComboboxGroup, OptionComboboxProps, PageRangeInputProps, PageRangeIssue, PageRangeIssueKind, ParsedPageRanges, ParsedRatio, PromoBannerProps, PromoTone, PropertyRowProps, RatioGroups, RegionSkeletonProps, RowGroupProps, SearchInputProps, SegmentOption, SegmentedControlProps, SelectOption, SelectProps, SelectTriggerProps, SettingRowProps, SliderProps, StageState, StageStep, StageStepsProps, StatusBadgeProps, StatusBadgeSize, StatusTone, StructuredSectionCardProps, StructuredSectionCardTitleTone, SwitchProps, TabsListProps, TabsProps, TabsVariant, TextArrayInputProps, TextareaProps, TileCardGridProps, TileCardProps, TileLayout, TileProps, ToolRailItem, ToolRailProps, WayOutItem, WindowChromeButtonProps, WindowLightKind, WindowLightProps, WindowLightsProps };

package/dist/controls.js

@@ -6,6 +6,10 @@ import {
   AspectRatioGlyph,
   AspectRatioSelect,
   CalloutBanner,
+  Checklist,
+  ChecklistItem,
+  ChecklistMark,
+  ChecklistMeter,
   CitationChip,
   CitationPopoverBody,
   ClampedNumberInput,
@@ -69,7 +73,7 @@ import {
   spansOf,
   splitForMiddleTruncate,
   stageStates
-} from "./chunk-SC3XPADZ.js";
+} from "./chunk-UGQRAQTE.js";
 import "./chunk-6NOLVA4E.js";
 import {
   Input,
@@ -94,7 +98,7 @@ import {
   RowGroup,
   SettingRow,
   Tile
-} from "./chunk-UTADJKVR.js";
+} from "./chunk-GMNROZQJ.js";
 import "./chunk-K4XCB576.js";
 import "./chunk-HKLIRHT2.js";
 import "./chunk-DRSBLHOF.js";
@@ -167,6 +171,10 @@ export {
   CONTROLS_CONTAINER_CLASS,
   CONTROLS_CONTAINER_NAME,
   CalloutBanner,
+  Checklist,
+  ChecklistItem,
+  ChecklistMark,
+  ChecklistMeter,
   Chip,
   ChipSet,
   CitationChip,

package/dist/data-table/index.cjs

@@ -18494,12 +18494,12 @@ var import_react_slot4 = require("@radix-ui/react-slot");
 var React28 = __toESM(require("react"), 1);
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var Tile = React28.forwardRef(
-  ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
+  ({ layout = "row", variant = "outline", icon, title, wrapTitle, line, end, selected, selectedStyle, tooltip, level, fit, endInset, oneLine, dashed, hoverStyle, danger, dimmed, glyphTone, hero, tone, iconTone, dense, asChild = false, className, children, onClick, type, ...props }, ref) => {
     const Component = asChild ? import_react_slot4.Slot : "button";
     const ariaDisabled = props["aria-disabled"];
     const inert = ariaDisabled === true || ariaDisabled === "true";
     const body = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "matrx-tile-icon", children: icon }) : null,
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "matrx-tile-icon", "data-tone": iconTone && iconTone !== "neutral" ? iconTone : void 0, children: icon }) : null,
       /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "matrx-tile-text", children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "matrx-tile-title", children: title }),
         line ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "matrx-tile-line", children: line }) : null
@@ -26033,14 +26033,14 @@ function MatrxDataTableCore(coreProps) {
                       "div",
                       {
                         "data-matrx-table-bulk-bar": true,
-                        className: "mt-2 flex shrink-0 flex-wrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5",
+                        className: "mt-2 flex shrink-0 flex-nowrap items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-2 py-1.5",
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
                             "span",
                             {
                               "data-matrx-table-selection-count": true,
                               "data-matrx-table-selection-all-matching": allMatching ? "" : void 0,
-                              className: "text-xs font-medium text-foreground",
+                              className: "shrink-0 whitespace-nowrap text-xs font-medium text-foreground",
                               children: [
                                 allMatching ? "All " : "",
                                 (0, import_format14.formatCount)(selectionCount),
@@ -26075,40 +26075,47 @@ function MatrxDataTableCore(coreProps) {
                               children: "Clear"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-1 flex-wrap items-center justify-end gap-0", children: [
-                            effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                              CopyButtons,
-                              {
-                                size: "icon",
-                                "data-matrx-table-icon-action": true,
-                                sourceId: `${tableCopySourceNamespace}:selection`,
-                                disabled: selectedCopyRows.length === 0,
-                                ...effectiveCopy.references ? { references: effectiveCopy.references(selectedCopyRows, selectedCopyRows) } : {},
-                                ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
-                                label: selectedCopyRows.length === selectedIdSet.size ? `${selectedCopyRows.length} selected ${selectionNoun}${selectedCopyRows.length === 1 ? "" : "s"}` : `${selectedCopyRows.length} of ${selectedIdSet.size} selected ${selectionNoun}${selectedIdSet.size === 1 ? "" : "s"} available to copy`,
-                                ...copy === void 0 ? {} : {
-                                  human: () => buildViewHuman(effectiveCopy, selectedCopyRows, effectiveCopyColumns),
-                                  json: () => selectedCopyRows.map((row) => effectiveCopy.agentRow ? effectiveCopy.agentRow(row) : row)
-                                },
-                                agent: () => copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, selectedCopyRows, selectedCopyRows, declaredVisibleCopyColumns, { scope: "selected" }) : buildViewAgentInput(effectiveCopy, selectedCopyRows, selectedCopyRows, { scope: "selected" }),
-                                aiVariants: copySubsetVariantFor(
-                                  () => selectedCopyRows,
-                                  "selected"
-                                ),
-                                export: {
-                                  items: [],
-                                  sheetRows: () => selectedCopyRows.map(
-                                    (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
-                                  ),
-                                  sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
-                                    id: columnId(column),
-                                    label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
-                                  }))
-                                }
-                              }
-                            ) : null,
-                            selection.actions?.(selectedRows, [...selectedIdSet], selectionScope)
-                          ] })
+                          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+                            "div",
+                            {
+                              "data-matrx-table-bulk-actions": true,
+                              className: "flex min-w-0 flex-1 flex-nowrap items-center justify-start gap-0 overflow-x-auto sm:justify-end [&>*]:shrink-0",
+                              children: [
+                                effectiveCopy ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                                  CopyButtons,
+                                  {
+                                    size: "icon",
+                                    "data-matrx-table-icon-action": true,
+                                    sourceId: `${tableCopySourceNamespace}:selection`,
+                                    disabled: selectedCopyRows.length === 0,
+                                    ...effectiveCopy.references ? { references: effectiveCopy.references(selectedCopyRows, selectedCopyRows) } : {},
+                                    ...effectiveCopy.triggerVariant ? { triggerVariant: effectiveCopy.triggerVariant } : {},
+                                    label: selectedCopyRows.length === selectedIdSet.size ? `${selectedCopyRows.length} selected ${selectionNoun}${selectedCopyRows.length === 1 ? "" : "s"}` : `${selectedCopyRows.length} of ${selectedIdSet.size} selected ${selectionNoun}${selectedIdSet.size === 1 ? "" : "s"} available to copy`,
+                                    ...copy === void 0 ? {} : {
+                                      human: () => buildViewHuman(effectiveCopy, selectedCopyRows, effectiveCopyColumns),
+                                      json: () => selectedCopyRows.map((row) => effectiveCopy.agentRow ? effectiveCopy.agentRow(row) : row)
+                                    },
+                                    agent: () => copy === void 0 ? buildDefaultTableViewAgentInput(effectiveCopy, selectedCopyRows, selectedCopyRows, declaredVisibleCopyColumns, { scope: "selected" }) : buildViewAgentInput(effectiveCopy, selectedCopyRows, selectedCopyRows, { scope: "selected" }),
+                                    aiVariants: copySubsetVariantFor(
+                                      () => selectedCopyRows,
+                                      "selected"
+                                    ),
+                                    export: {
+                                      items: [],
+                                      sheetRows: () => selectedCopyRows.map(
+                                        (row) => projectDefaultTableCopyRow(row, declaredVisibleCopyColumns)
+                                      ),
+                                      sheetColumns: () => declaredVisibleCopyColumns.map((column) => ({
+                                        id: columnId(column),
+                                        label: column.label ?? (typeof column.header === "string" ? column.header : columnId(column))
+                                      }))
+                                    }
+                                  }
+                                ) : null,
+                                selection.actions?.(selectedRows, [...selectedIdSet], selectionScope)
+                              ]
+                            }
+                          )
                         ]
                       }
                     ) : null