@cueplusplus/ui 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @cueplusplus/ui
 
+## 0.7.0
+
+### Minor Changes
+
+- 1217d75: `Table.GroupRow` takes `headingLevel` (`2`–`6`), which makes the divider's label
+  slot a real heading element instead of a `<span>` — so a grouped table joins the
+  page's heading outline without nesting an `<h2>` inside a `<span>`, which is what
+  passing a heading as `label` had to do. It defaults to no heading, so every
+  existing divider is unchanged.
+
+  The row-activation reading is now public: `activateRowFromClick` and
+  `activateRowFromKeyDown` are exported from `@cueplusplus/ui`, so a `Table.Row` —
+  which owns its own activation — or any other element a console makes into a row
+  runs the same decision `DataRow.Root` runs, instead of a second copy of it.
+
+### Patch Changes
+
+- @cueplusplus/tokens@0.7.0
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -66,6 +66,7 @@ import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
 import "./brand/index.js";
 import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
 import "./icons/index.js";
+import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
 import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
 import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
 import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
@@ -124,4 +125,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
 import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };

package/dist/index.js

@@ -67,6 +67,7 @@ import { Textarea } from "./forms/textarea.js";
 import { ToggleGroup } from "./forms/toggle-group.js";
 import { Toggle } from "./forms/toggle.js";
 import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
+import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
 import { AppWindowFrame } from "./instruments/app-window-frame.js";
 import { CopyButton } from "./instruments/copy-button.js";
 import { DataRow } from "./instruments/data-row.js";
@@ -111,4 +112,4 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };

package/dist/instruments/_data-row.d.ts

@@ -0,0 +1,68 @@
+import "../lib/cva.js";
+import * as React from "react";
+//#region src/instruments/_data-row.d.ts
+/**
+ * Whether a click on a row means "open this row", and act on it if it does.
+ *
+ * Exported because more surfaces need this reading than ship a `DataRow.Root`:
+ * `Table.Row` documents activation as the caller's job, and a console that draws
+ * its list as a `<tr>` in one view and a `DataRow.Root` in another would
+ * otherwise run two implementations of one decision — which is how the table
+ * view quietly loses modifier-click on the row's link while the ledger view
+ * keeps it. `DataRow.Root` calls this exact function; so should you.
+ *
+ * Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
+ * the row is not simply a `<button>`:
+ *
+ * - **A control inside the row.** The action cluster, a menu trigger, a
+ *   checkbox — pressing one is not the same gesture as picking the row. Anything
+ *   under a `[data-stop]` ancestor is left entirely alone, which is why
+ *   `DataRow.Actions` stamps that attribute on itself.
+ * - **A link inside the row.** A plain click on it should open the row's own
+ *   surface (the drawer, the detail pane), so the anchor's navigation is
+ *   suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
+ *   whole value of having shipped a real `<a href>` in the first place.
+ * - **A secondary button.** Only the primary button activates; the middle
+ *   button belongs to the browser.
+ * - **An already-handled event.** A caller's own `onClick` that called
+ *   `preventDefault()` has said no.
+ *
+ * @param event The row's own click event.
+ * @param activate What "open this row" means to the surface.
+ * @example
+ * onClick={(event) => activateRowFromClick(event, () => open(row))}
+ * @example
+ * // The same decision on a table row, which owns its activation itself.
+ * <Table.Row
+ *   interactive
+ *   tabIndex={0}
+ *   onClick={(event) => activateRowFromClick(event, () => open(device))}
+ *   onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}
+ * >
+ */
+declare function activateRowFromClick(event: React.MouseEvent<HTMLElement>, activate: () => void): void;
+/**
+ * Whether a key press on a row means "open this row", and act on it if it does.
+ *
+ * The other half of {@link activateRowFromClick}, and not optional: a row that
+ * opens on click and not on Enter is reachable by pointer only. It fires only
+ * when the row itself has focus, so the element it is attached to needs a
+ * `tabIndex` — a `<div>` and a `<tr>` are both unfocusable by default, and this
+ * handler on an unfocusable row is dead code.
+ *
+ * Guarded on `event.target === event.currentTarget` so a control inside the row
+ * keeps its own keys: without it a rename field on a row could never contain a
+ * space, and every action button's Enter would also open the row behind it.
+ *
+ * Space is prevented rather than merely handled, because the browser's default
+ * for Space on a focused non-control is to scroll the page — a row that opened
+ * a drawer *and* jumped the list a screenful would read as a bug.
+ *
+ * @param event The row's own keydown event.
+ * @param activate What "open this row" means to the surface.
+ * @example
+ * onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
+ */
+declare function activateRowFromKeyDown(event: React.KeyboardEvent<HTMLElement>, activate: () => void): void;
+//#endregion
+export { activateRowFromClick, activateRowFromKeyDown };

package/dist/instruments/_data-row.js

@@ -59,6 +59,13 @@ const dataRowVariants = cva([
 /**
 * Whether a click on a row means "open this row", and act on it if it does.
 *
+* Exported because more surfaces need this reading than ship a `DataRow.Root`:
+* `Table.Row` documents activation as the caller's job, and a console that draws
+* its list as a `<tr>` in one view and a `DataRow.Root` in another would
+* otherwise run two implementations of one decision — which is how the table
+* view quietly loses modifier-click on the row's link while the ledger view
+* keeps it. `DataRow.Root` calls this exact function; so should you.
+*
 * Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
 * the row is not simply a `<button>`:
 *
@@ -79,6 +86,14 @@ const dataRowVariants = cva([
 * @param activate What "open this row" means to the surface.
 * @example
 * onClick={(event) => activateRowFromClick(event, () => open(row))}
+* @example
+* // The same decision on a table row, which owns its activation itself.
+* <Table.Row
+*   interactive
+*   tabIndex={0}
+*   onClick={(event) => activateRowFromClick(event, () => open(device))}
+*   onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}
+* >
 */
 function activateRowFromClick(event, activate) {
 	if (event.defaultPrevented || event.button !== 0) return;
@@ -94,6 +109,12 @@ function activateRowFromClick(event, activate) {
 /**
 * Whether a key press on a row means "open this row", and act on it if it does.
 *
+* The other half of {@link activateRowFromClick}, and not optional: a row that
+* opens on click and not on Enter is reachable by pointer only. It fires only
+* when the row itself has focus, so the element it is attached to needs a
+* `tabIndex` — a `<div>` and a `<tr>` are both unfocusable by default, and this
+* handler on an unfocusable row is dead code.
+*
 * Guarded on `event.target === event.currentTarget` so a control inside the row
 * keeps its own keys: without it a rename field on a row could never contain a
 * space, and every action button's Enter would also open the row behind it.

package/dist/instruments/index.d.ts

@@ -1,3 +1,4 @@
+import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
 import { AppWindowFrame, AppWindowFrameProps } from "./app-window-frame.js";
 import { CopyButton, CopyButtonProps } from "./copy-button.js";
 import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./data-row.js";
@@ -13,4 +14,4 @@ import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHead
 import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./terminal-frame.js";
 import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./two-step-button.js";
 import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./usage-chart.js";
-export { AppWindowFrame, type AppWindowFrameProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone };
+export { AppWindowFrame, type AppWindowFrameProps, CopyButton, type CopyButtonProps, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Meter, type MeterProps, type MeterProvenance, type MeterTone, Progress, type ProgressProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, Sparkline, type SparklineProps, Stat, type StatProps, type StatTone, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown };

package/dist/instruments/index.js

@@ -1,3 +1,4 @@
+import { activateRowFromClick, activateRowFromKeyDown } from "./_data-row.js";
 import { AppWindowFrame } from "./app-window-frame.js";
 import { CopyButton } from "./copy-button.js";
 import { DataRow } from "./data-row.js";
@@ -13,4 +14,4 @@ import { Table, TableScrollRegion } from "./table.js";
 import { TerminalFrame } from "./terminal-frame.js";
 import { TwoStepButton } from "./two-step-button.js";
 import { UsageChart } from "./usage-chart.js";
-export { AppWindowFrame, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart };
+export { AppWindowFrame, CopyButton, DataRow, DataTree, GroupBar, Ledger, Meter, Progress, SeamCell, SeamGrid, Sparkline, Stat, Table, TableScrollRegion, TerminalFrame, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown };

package/dist/instruments/table.d.ts

@@ -16,13 +16,26 @@ interface TableRootProps extends React.ComponentPropsWithoutRef<"table"> {}
 interface TableSectionProps extends React.ComponentPropsWithoutRef<"tbody"> {}
 interface TableRowProps extends React.ComponentPropsWithoutRef<"tr"> {
   /**
-   * The row responds to a pointer: the row-hover wash and a pointer cursor
-   * across the whole row. Defaults to `false`.
+   * The row responds to a pointer and to focus: the row-hover wash, a pointer
+   * cursor across the whole row, and an inset focus ring. Defaults to `false`.
    *
    * Opt-in rather than automatic, because a table of figures nobody can click
    * that lit up under the pointer would be promising an interaction it does not
    * have. Wiring the row up to actually do something — a click handler, a
    * keyboard path to the same thing — stays the caller's job; this is the paint.
+   *
+   * **The focus ring ships with it, because the caller's half is what makes the
+   * row focusable.** A `<tr>` cannot take focus on its own, so the moment a
+   * caller gives one a `tabIndex` to run
+   * {@link activateRowFromKeyDown} against, a keyboard user can reach and
+   * activate a row that shows nothing — a WCAG 2.4.7 failure the pointer user
+   * never sees. The ring is *inset* (`-outline-offset-2`), the same ruling as
+   * `Row` and `DataRow.Root`: these tables live in clipped panes and scroll
+   * regions, where an outset ring on the first or last row is cut off by the
+   * pane's own rim. `outline-solid` rides along with every `outline-<n>` here
+   * because Tailwind v4 leaves `--tw-outline-style` unset otherwise and the
+   * ring never paints — `test/focus-ring.test.ts` is what keeps the pair
+   * together.
    */
   interactive?: boolean;
   /**
@@ -47,6 +60,8 @@ interface TableHeadProps extends React.ComponentPropsWithoutRef<"th"> {
    */
   sticky?: boolean;
 }
+/** The heading elements a group divider's label may be asked to be. */
+type TableGroupHeadingLevel = 2 | 3 | 4 | 5 | 6;
 interface TableGroupRowProps extends Omit<React.ComponentPropsWithoutRef<"tr">, "children"> {
   /**
    * How many columns the divider spans. Required: it must equal the table's
@@ -56,6 +71,29 @@ interface TableGroupRowProps extends Omit<React.ComponentPropsWithoutRef<"tr">,
   span: number;
   /** What the group is called. */
   label: React.ReactNode;
+  /**
+   * Make the label slot a real heading element. Defaults to `undefined` — no
+   * heading, and the label stays the `<span>` it has always been.
+   *
+   * **Set this rather than passing a heading as `label`.** The label slot wraps
+   * whatever it is given, so an `<h2>` handed in as `label` lands *inside* a
+   * `<span>` — which renders, and exposes the heading, and does not validate: a
+   * `<span>` is phrasing content and may not contain a heading. With this prop
+   * the wrapper *is* the heading (`<h2 data-slot="table-group-label">`), so
+   * there is nothing to nest.
+   *
+   * A heading inside a `<th>` is valid — `<th>` takes flow content — and it is
+   * useful: a screen-reader user navigates a long grouped table by heading, and
+   * without one the group names are reachable only by walking the rows. The
+   * `scope="rowgroup"` association is untouched either way; this adds the
+   * divider to the document outline, it does not change what the cell heads.
+   *
+   * Levels run `2`–`6` because the outline has to describe the real nesting of
+   * the page the table sits in, not the table's own idea of itself — the same
+   * ruling as {@link LedgerTierProps.headingLevel}. There is no `1`: a group
+   * divider is never the title of the document.
+   */
+  headingLevel?: TableGroupHeadingLevel;
   /** How many rows the group holds, printed beside its name. */
   count?: number;
   /**

package/dist/instruments/table.js

@@ -79,6 +79,11 @@ const TableBody = React.forwardRef(function TableBody({ className, ...elementPro
 * table whose only per-row controls live in a hidden track wants either a
 * focusable cell beside it or an always-visible cluster.
 *
+* A caller who instead makes the *row* focusable — a `tabIndex` plus
+* {@link activateRowFromClick} and {@link activateRowFromKeyDown}, which is the
+* shape a row that opens a drawer takes — gets the focus ring from
+* {@link TableRowProps.interactive} and needs to draw nothing of its own.
+*
 * The selected tint is the row's, not the cell's: a `background` on the `<tr>`
 * shows through every cell in it, so the fill cannot end up ragged where one
 * cell sets a ground of its own.
@@ -88,7 +93,7 @@ const TableRow = React.forwardRef(function TableRow({ className, interactive = f
 		ref,
 		"data-slot": "table-row",
 		"data-selected": selected ? "" : void 0,
-		className: cn("group/data-row border-b border-border last:border-b-0 data-[selected]:bg-accent-soft", interactive ? "cursor-pointer hover:bg-(--cue-row-hover)" : null, className),
+		className: cn("group/data-row border-b border-border last:border-b-0 data-[selected]:bg-accent-soft", interactive ? "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent" : null, className),
 		...elementProps
 	});
 });
@@ -121,6 +126,31 @@ const TableHead = React.forwardRef(function TableHead({ className, numeric = fal
 		...elementProps
 	});
 });
+/** `headingLevel` as a tag name, so the outline is real elements, not roles. */
+const headingTag = (level) => `h${level}`;
+/**
+* The label slot's own treatment, worn by the `<span>` and by every heading
+* level alike — which is the point: the two forms have to be indistinguishable.
+*
+* Everything here is a no-op on a `<span>` and a correction on a heading, and
+* each of the four exists because a UA stylesheet sets it on `<h2>`–`<h6>`:
+*
+* - `inline` — headings are `display: block`, and a block label would push the
+*   count onto a second line. This is the one that breaks the layout outright.
+* - `text-[length:inherit]` — `<h2>` is `1.5em` and `<h6>` is `0.67em`, so
+*   without this the divider's type would change with the level it was given,
+*   which is a heading level leaking into the visual design.
+* - `font-normal` — headings come bold, and a bold micro-label in a dense list
+*   reads as a second kind of emphasis (the same ruling as `Ledger`'s heading).
+* - `m-0` — headings carry a block margin that would thicken the divider row.
+*
+* Preflight already does the middle two for consumers who import it, but the
+* library does not assume the consumer's reset: the divider has to look the
+* same either way. Tracking, case and colour are *not* restated — no UA rule
+* touches them, so they inherit from the `<th>` that owns the recipe, and a
+* second copy of a treatment is exactly how two surfaces drift apart.
+*/
+const TABLE_GROUP_LABEL = "m-0 inline text-[length:inherit] font-normal";
 /**
 * The canonical console table: hairlines, mono figures, no zebra striping.
 *
@@ -161,7 +191,8 @@ const Table = {
 	Header: TableHeader,
 	Body: TableBody,
 	Row: TableRow,
-	GroupRow: React.forwardRef(function TableGroupRow({ className, span, label, count, sticky = false, ...elementProps }, ref) {
+	GroupRow: React.forwardRef(function TableGroupRow({ className, span, label, count, headingLevel, sticky = false, ...elementProps }, ref) {
+		const Label = headingLevel === void 0 ? "span" : headingTag(headingLevel);
 		return /* @__PURE__ */ jsx("tr", {
 			ref,
 			"data-slot": "table-group-row",
@@ -171,8 +202,9 @@ const Table = {
 				scope: "rowgroup",
 				"data-slot": "table-group-cell",
 				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
-				children: [/* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx(Label, {
 					"data-slot": "table-group-label",
+					className: TABLE_GROUP_LABEL,
 					children: label
 				}), count === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					"data-slot": "table-group-count",

package/manifest/components/data-row.json

@@ -157,6 +157,11 @@
       "code": "@container patch (max-width: 46rem) {\n  .patch [data-slot=\"data-row\"] {\n    --cue-data-row-cols: 1.5rem minmax(8rem, 1fr) auto;\n  }\n  .patch [data-slot=\"data-row-description\"] {\n    display: none;\n  }\n}",
       "language": "css"
     },
+    {
+      "title": "The same decision, on a table row",
+      "code": "import { activateRowFromClick, activateRowFromKeyDown } from \"@cueplusplus/ui\";\n\n<Table.Row\n  interactive\n  tabIndex={0}\n  onClick={(event) => activateRowFromClick(event, () => open(device))}\n  onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}\n>",
+      "language": "tsx"
+    },
     {
       "title": "A density island for the list, not for the app",
       "code": "<div className=\"[--cue-chip-h:1rem] [--cue-control-sm:1.25rem]\">\n  <Ledger.Root>…</Ledger.Root>\n</div>",

package/manifest/components/table.json

@@ -49,14 +49,14 @@
     {
       "name": "Row",
       "usage": "Table.Row",
-      "description": "One row, separated by a hairline underneath — dropped on the last row so the\ntable never draws a rule against the panel rim it sits in. In a `<thead>` the\n\"last row\" is the header row itself, so the header's own bottom border (on\nthe cells) is the only rule there and the two can never stack into 2px.\n\nEvery row carries the `group/data-row` name unconditionally. It paints\nnothing by itself, and it is what lets a `DataRow.Actions` cluster inside a\n`Table.Cell` reveal on hover, on focus and on selection with no second\nimplementation of that idiom for the table — the whole point of the three\nidioms sharing one row anatomy.\n\n**The focus half of that reveal is the caller's to supply here.** A `<tr>` is\nnot focusable and this component does not make it one — a tab stop on every\nrow of a long table is a tab stop a keyboard user has to walk past hundreds\nof times, which is the reason `Ledger` rows opt in individually. So the\nreveal-on-focus only happens if the row *contains* something focusable\noutside the hidden track: a link on the row's name, a checkbox in the leading\ncell, any real control. Without one, `:focus-within` can never fire — content\ninside a `visibility: hidden` subtree cannot be focused, so the track cannot\nbootstrap its own reveal — and a hidden action cluster is then reachable by\npointer only, which is a WCAG 2.1.1 failure the screen gives no sign of. A\ntable whose only per-row controls live in a hidden track wants either a\nfocusable cell beside it or an always-visible cluster.\n\nThe selected tint is the row's, not the cell's: a `background` on the `<tr>`\nshows through every cell in it, so the fill cannot end up ragged where one\ncell sets a ground of its own.",
+      "description": "One row, separated by a hairline underneath — dropped on the last row so the\ntable never draws a rule against the panel rim it sits in. In a `<thead>` the\n\"last row\" is the header row itself, so the header's own bottom border (on\nthe cells) is the only rule there and the two can never stack into 2px.\n\nEvery row carries the `group/data-row` name unconditionally. It paints\nnothing by itself, and it is what lets a `DataRow.Actions` cluster inside a\n`Table.Cell` reveal on hover, on focus and on selection with no second\nimplementation of that idiom for the table — the whole point of the three\nidioms sharing one row anatomy.\n\n**The focus half of that reveal is the caller's to supply here.** A `<tr>` is\nnot focusable and this component does not make it one — a tab stop on every\nrow of a long table is a tab stop a keyboard user has to walk past hundreds\nof times, which is the reason `Ledger` rows opt in individually. So the\nreveal-on-focus only happens if the row *contains* something focusable\noutside the hidden track: a link on the row's name, a checkbox in the leading\ncell, any real control. Without one, `:focus-within` can never fire — content\ninside a `visibility: hidden` subtree cannot be focused, so the track cannot\nbootstrap its own reveal — and a hidden action cluster is then reachable by\npointer only, which is a WCAG 2.1.1 failure the screen gives no sign of. A\ntable whose only per-row controls live in a hidden track wants either a\nfocusable cell beside it or an always-visible cluster.\n\nA caller who instead makes the *row* focusable — a `tabIndex` plus\n{@link activateRowFromClick } and {@link activateRowFromKeyDown }, which is the\nshape a row that opens a drawer takes — gets the focus ring from\n{@link TableRowProps.interactive} and needs to draw nothing of its own.\n\nThe selected tint is the row's, not the cell's: a `background` on the `<tr>`\nshows through every cell in it, so the fill cannot end up ragged where one\ncell sets a ground of its own.",
       "props": [
         {
           "name": "interactive",
           "type": "boolean",
           "required": false,
           "defaultValue": "false",
-          "description": "The row responds to a pointer: the row-hover wash and a pointer cursor\nacross the whole row. Defaults to `false`.\n\nOpt-in rather than automatic, because a table of figures nobody can click\nthat lit up under the pointer would be promising an interaction it does not\nhave. Wiring the row up to actually do something — a click handler, a\nkeyboard path to the same thing — stays the caller's job; this is the paint."
+          "description": "The row responds to a pointer and to focus: the row-hover wash, a pointer\ncursor across the whole row, and an inset focus ring. Defaults to `false`.\n\nOpt-in rather than automatic, because a table of figures nobody can click\nthat lit up under the pointer would be promising an interaction it does not\nhave. Wiring the row up to actually do something — a click handler, a\nkeyboard path to the same thing — stays the caller's job; this is the paint.\n\n**The focus ring ships with it, because the caller's half is what makes the\nrow focusable.** A `<tr>` cannot take focus on its own, so the moment a\ncaller gives one a `tabIndex` to run\n{@link activateRowFromKeyDown } against, a keyboard user can reach and\nactivate a row that shows nothing — a WCAG 2.4.7 failure the pointer user\nnever sees. The ring is *inset* (`-outline-offset-2`), the same ruling as\n`Row` and `DataRow.Root`: these tables live in clipped panes and scroll\nregions, where an outset ring on the first or last row is cut off by the\npane's own rim. `outline-solid` rides along with every `outline-<n>` here\nbecause Tailwind v4 leaves `--tw-outline-style` unset otherwise and the\nring never paints — `test/focus-ring.test.ts` is what keeps the pair\ntogether."
         },
         {
           "name": "selected",
@@ -73,7 +73,7 @@
     {
       "name": "GroupRow",
       "usage": "Table.GroupRow",
-      "description": "A group divider inside one continuous table.\n\nThe whole point is that it is *inside*: a grouped list drawn as one table per\ngroup names its columns once per group, so a reader scanning a column\ntop-to-bottom crosses a fresh header band at every boundary and a screen\nreader announces four tables where there is one dataset. So the table stays\none `<table>` with one `<thead>`, and each group is its own `<tbody>` — which\nis valid HTML, keeps the group's rows together, and gives the divider a row\ngroup to be the header of.\n\nThat last part is why the cell is a `<th scope=\"rowgroup\">` rather than a\nstyled `<td>`: `rowgroup` scope is exactly the statement \"this heading names\nthe rows of this `<tbody>`\", and it leaves the column headers' associations\nuntouched. A `<td colSpan>` divider is invisible to assistive technology as a\nheading, and a `<th scope=\"col\">` one would quietly re-scope the columns.\n\nNo `aria-expanded` here, and no toggle: groups in a table divide, they do not\nfold. A hierarchy that folds is `DataTree`, whose treeitem rows own their own\nexpansion — and if a table genuinely needs to fold rows, the pattern is a real\n`<button aria-expanded aria-controls>` inside this cell, never the row itself.",
+      "description": "A group divider inside one continuous table.\n\nThe whole point is that it is *inside*: a grouped list drawn as one table per\ngroup names its columns once per group, so a reader scanning a column\ntop-to-bottom crosses a fresh header band at every boundary and a screen\nreader announces four tables where there is one dataset. So the table stays\none `<table>` with one `<thead>`, and each group is its own `<tbody>` — which\nis valid HTML, keeps the group's rows together, and gives the divider a row\ngroup to be the header of.\n\nThat last part is why the cell is a `<th scope=\"rowgroup\">` rather than a\nstyled `<td>`: `rowgroup` scope is exactly the statement \"this heading names\nthe rows of this `<tbody>`\", and it leaves the column headers' associations\nuntouched. A `<td colSpan>` divider is invisible to assistive technology as a\nheading, and a `<th scope=\"col\">` one would quietly re-scope the columns.\n\nNo `aria-expanded` here, and no toggle: groups in a table divide, they do not\nfold. A hierarchy that folds is `DataTree`, whose treeitem rows own their own\nexpansion — and if a table genuinely needs to fold rows, the pattern is a real\n`<button aria-expanded aria-controls>` inside this cell, never the row itself.\n\nThe divider can also be a real heading — see {@link * TableGroupRowProps.headingLevel}, which is how a page whose heading outline\nhas to survive a switch between the ledger, table and tree idioms keeps the\nsame `h2`/`h3` structure in all three.",
       "props": [
         {
           "name": "span",
@@ -89,6 +89,13 @@
           "defaultValue": null,
           "description": "What the group is called."
         },
+        {
+          "name": "headingLevel",
+          "type": "4 | 2 | 3 | 5 | 6",
+          "required": false,
+          "defaultValue": null,
+          "description": "Make the label slot a real heading element. Defaults to `undefined` — no\nheading, and the label stays the `<span>` it has always been.\n\n**Set this rather than passing a heading as `label`.** The label slot wraps\nwhatever it is given, so an `<h2>` handed in as `label` lands *inside* a\n`<span>` — which renders, and exposes the heading, and does not validate: a\n`<span>` is phrasing content and may not contain a heading. With this prop\nthe wrapper *is* the heading (`<h2 data-slot=\"table-group-label\">`), so\nthere is nothing to nest.\n\nA heading inside a `<th>` is valid — `<th>` takes flow content — and it is\nuseful: a screen-reader user navigates a long grouped table by heading, and\nwithout one the group names are reachable only by walking the rows. The\n`scope=\"rowgroup\"` association is untouched either way; this adds the\ndivider to the document outline, it does not change what the cell heads.\n\nLevels run `2`–`6` because the outline has to describe the real nesting of\nthe page the table sits in, not the table's own idea of itself — the same\nruling as {@link LedgerTierProps.headingLevel }. There is no `1`: a group\ndivider is never the title of the document."
+        },
         {
           "name": "count",
           "type": "number",
@@ -189,6 +196,11 @@
   ],
   "summary": "The semantic table: mono uppercase headers, hairline rows, tabular numerals.",
   "examples": [
+    {
+      "title": "A grouped table whose groups are h3s",
+      "code": "{groups.map((group) => (\n  <Table.Body key={group.id}>\n    <Table.GroupRow span={2} headingLevel={3} label={group.label} count={group.rows.length} />\n    {group.rows.map((device) => (\n      <Table.Row key={device.id}>\n        <Table.Cell>{device.name}</Table.Cell>\n        <Table.Cell numeric>{device.latency}</Table.Cell>\n      </Table.Row>\n    ))}\n  </Table.Body>\n))}",
+      "language": "tsx"
+    },
     {
       "title": "Usage",
       "code": "<Table.Root>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Fixture</Table.Head>\n      <Table.Head numeric>Address</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Par 64</Table.Cell>\n      <Table.Cell numeric>001</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>",
@@ -211,7 +223,9 @@
   ],
   "commonMistakes": [
     "Leaving out `Table.Caption`, which is what names the table for a screen reader.",
-    "Wrapping cells in a `Row`. The table has its own row part."
+    "Wrapping cells in a `Row`. The table has its own row part.",
+    "Giving a row a `tabIndex` to make it activatable and then drawing no focus indicator. `Table.Row interactive` ships the inset focus ring along with the hover wash, so mark the row `interactive` rather than hand-rolling `focus-visible` classes on it.",
+    "Passing an `<h2>` as `Table.GroupRow`'s `label` to get a heading. The label slot wraps what it is given, so the heading lands inside a `<span>` — which renders, and does not validate. Set `headingLevel` and the wrapper becomes the heading."
   ],
   "specimens": [
     {
@@ -234,6 +248,16 @@
       "code": "<Panel className=\"w-full\">\n  <div className=\"max-h-[18rem] overflow-y-auto [--cue-table-group-top:1.75rem]\">\n    <Table.Root>\n      <Table.Caption>Patch, one table, two row groups.</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.Head sticky>Device</Table.Head>\n          <Table.Head sticky>Detail</Table.Head>\n          <Table.Head sticky numeric>\n            Latency\n          </Table.Head>\n          <Table.Head sticky className=\"sr-only\">\n            Actions\n          </Table.Head>\n        </Table.Row>\n      </Table.Header>\n      {PATCH_GROUPS.map((group) => (\n        <Table.Body key={group.id}>\n          <Table.GroupRow\n            span={4}\n            label={group.label}\n            count={group.rows.length}\n            sticky\n          />\n          {group.rows.map((device) => (\n            <Table.Row key={device.id} interactive>\n              {/* The name is a link, and that is load-bearing rather\n                  than decorative. A `<tr>` is not focusable, so\n                  without a real control somewhere outside the hidden\n                  action track nothing in the row can take focus,\n                  `:focus-within` never fires, and the Copy and\n                  Actions buttons are reachable by pointer only —\n                  visible to a mouse user, invisible to Tab. The\n                  ledger and the tree get this for free because their\n                  rows are focusable themselves; the table has to be\n                  given it. */}\n              <Table.Cell>\n                <Link href={`#patch-${device.id}`}>{device.name}</Link>\n              </Table.Cell>\n              <Table.Cell className=\"text-fg-muted\">{device.detail}</Table.Cell>\n              <Table.Cell numeric>{device.latency}</Table.Cell>\n              {/* The action column's width is a sum of the tokens it\n                  holds — two small controls, the gap between them and\n                  the cell's own padding on each side — so it stays\n                  right whatever the density does to any of them. */}\n              <Table.Cell className=\"w-[calc(2_*_var(--cue-control-sm)_+_var(--cue-space-1)_+_2_*_var(--cue-pad-row-x))]\">\n                <DataRow.Actions>\n                  <CopyButton\n                    value={device.id}\n                    size=\"sm\"\n                    className=\"w-control-sm px-0\"\n                  />\n                  <IconButton\n                    icon={MoreVertical}\n                    size=\"sm\"\n                    aria-label={`Actions for ${device.name}`}\n                  />\n                </DataRow.Actions>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      ))}\n    </Table.Root>\n  </div>\n</Panel>",
       "note": "The same rows as one continuous table: `Table.Head sticky` docks the column names, and one `Table.Body` per group opens with a `Table.GroupRow` divider — a `th` with `scope='rowgroup'`, so the columns are named once and scan straight through every boundary.",
       "interaction": "rows marked `interactive` take the row-hover wash across the whole row; `selected` tints it and reveals the action track. Tab reaches each row through its name link, which is what lets `:focus-within` reveal the track at all — a `tr` cannot take focus, so a table row whose only controls are in the hidden cluster would be pointer-only."
+    },
+    {
+      "title": "Table — group dividers as headings",
+      "group": "instruments",
+      "components": [
+        "Table"
+      ],
+      "code": "<Panel className=\"w-full\">\n  <Table.Root>\n    <Table.Caption>Patch, grouped into the page's outline.</Table.Caption>\n    <Table.Header>\n      <Table.Row>\n        <Table.Head>Device</Table.Head>\n        <Table.Head numeric>Latency</Table.Head>\n      </Table.Row>\n    </Table.Header>\n    {PATCH_GROUPS.map((group) => (\n      <Table.Body key={group.id}>\n        <Table.GroupRow\n          span={2}\n          headingLevel={3}\n          label={group.label}\n          count={group.rows.length}\n        />\n        {group.rows.map((device) => (\n          <Table.Row key={device.id}>\n            <Table.Cell>{device.name}</Table.Cell>\n            <Table.Cell numeric>{device.latency}</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    ))}\n  </Table.Root>\n</Panel>",
+      "note": "`headingLevel` makes the divider's label slot a real `h3` instead of a `span`, so a grouped table joins the page's heading outline and a screen-reader user can jump between groups by heading. It is the prop to reach for rather than passing an `<h3>` as `label`: the label slot wraps what it is given, so a heading handed in that way lands inside a `<span>`, which may not contain one. The heading sits in the same `<th scope='rowgroup'>` as before — valid, because a `<th>` takes flow content — and wears the same type as the span form, so the level is in the outline and never in the design.",
+      "interaction": "none. Navigate by heading in a screen reader to hear the group names as an outline."
     }
   ]
 }

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "library": "@cueplusplus/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "cue",
@@ -29,7 +29,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "ee37d52427d7da166c441686519f77621e1397fe6fa42ddfe4343a5f5cd10965"
+    "sha256": "6672f3007cb48503b465985501b881b7d5144816bc716d4350e7d9bd7b7c566e"
   },
   "systemApis": [
     {
@@ -3462,7 +3462,7 @@
       "mdUrl": "/docs/components/data-row.md",
       "jsonUrl": "/r/components/data-row.json",
       "path": "./components/data-row.json",
-      "sha256": "9e2e483bafb74e65051e5f8c00b108da5245499e870427258d386df72ce73502"
+      "sha256": "2d9d18bea0dfbd9ae65527639e1a2238a5de80aa82fe69ae4f3ff18f1c296c65"
     },
     {
       "name": "DataTablePagination",
@@ -3631,7 +3631,7 @@
       "mdUrl": "/docs/components/table.md",
       "jsonUrl": "/r/components/table.json",
       "path": "./components/table.json",
-      "sha256": "56a6df96c2b040570356c0b1fc0049e754139dccf2faf0ccc20a8d4afab7297d"
+      "sha256": "b4e6132a0cae4618117d374b3f9e0d5496d1b92128a1295d70337637261ad30d"
     },
     {
       "name": "TableScrollRegion",

package/manifest/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "library": "@cueplusplus/tokens",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "themes": [
     "cue",
     "terminal",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueplusplus/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
   "license": "MIT",
   "type": "module",
@@ -140,7 +140,7 @@
     "clsx": "^2.1.1",
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
-    "@cueplusplus/tokens": "0.6.0"
+    "@cueplusplus/tokens": "0.7.0"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.16",
@@ -253,8 +253,8 @@
     "tsdown": "0.22.14",
     "typescript": "^5.7.0",
     "vitest": "^4.1.10",
-    "@repo/docgen": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/docgen": "0.0.0"
   },
   "scripts": {
     "build": "pnpm run check:manifest && tsdown",