@flamingo-stack/openframe-frontend-core 0.0.781 → 0.0.782

package/src/components/chat/mingo-welcome.tsx

@@ -304,7 +304,7 @@ export function MingoWelcome({
               </div>
               {/* Plain cross — no button chrome, just a clickable icon. */}
               <Button
-                variant="transparent"
+                variant="bare"
                 size="icon-sm"
                 type="button"
                 onClick={dismissPromo}

package/src/components/features/capability-explorer.tsx

@@ -325,7 +325,12 @@ function CapabilityExplorerSkeleton({
         <div className="flex min-h-0 flex-col gap-1 overflow-hidden">
           <LoadingItems count={count}>
             {i => (
-              <div data-loading-item data-state={i === 0 ? 'active' : undefined} className={JOB_TAB_CLASS}>
+              <div
+                data-loading-item
+                data-state={i === 0 ? 'active' : undefined}
+                data-tone="card"
+                className={JOB_TAB_CLASS}
+              >
                 <JobHeadSkeleton />
               </div>
             )}
@@ -514,6 +519,8 @@ export function CapabilityExplorer({
               aria-selected={selected}
               aria-controls={panelId}
               data-state={selected ? 'active' : undefined}
+              // The selected capability is a bordered card; the others keep a transparent border and a hover fill.
+              data-tone="card"
               tabIndex={selected ? 0 : -1}
               onClick={() => onActiveChange(item.id)}
               className={JOB_TAB_LAYOUT_CLASS}

package/src/components/features/command-box.tsx

@@ -185,7 +185,7 @@ export function CommandBox({
           <div className={COMMAND_BOX_COPY_ROW_CLASS}>
             {commandText}
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               onClick={onCopy}

package/src/components/features/devices/devices-grid-filters.tsx

@@ -54,7 +54,14 @@ export function DevicesGridFilters({
           <FiltersDropdown
             key={column.key}
             triggerElement={
-              <Button variant="link" size="compact" noPaddingX type="button" aria-label={`Filter by ${column.label}`}>
+              <Button
+                variant="link"
+                size="compact"
+                noPaddingX
+                type="button"
+                data-tone="neutral"
+                aria-label={`Filter by ${column.label}`}
+              >
                 <span className="select-none whitespace-nowrap uppercase text-h5">{column.label}</span>
                 <Filter02Icon className={cn(active && 'text-ods-accent')} />
               </Button>

package/src/components/features/filters-dropdown.tsx

@@ -395,9 +395,11 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
           ref={triggerRef as RefObject<HTMLButtonElement>}
           onClick={() => setIsOpen(!isOpen)}
           aria-expanded={isOpen}
+          // Filters applied: the trigger holds the accent. Otherwise the secondary text, the primary on hover.
+          data-state={getActiveFiltersCount() > 0 ? 'active' : undefined}
+          data-tone="neutral"
         >
           <span className="text-h5">{triggerLabel}</span>
-          {getActiveFiltersCount() > 0 && <span className="size-1.5 rounded-full bg-ods-accent" />}
         </Button>
       )}
 
@@ -435,6 +437,7 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
                           variant="link"
                           size="compact"
                           noPaddingX
+                          data-tone="neutral"
                           onClick={() => handleSelectAll(section.id, section)}
                         >
                           {allSelected ? 'Deselect All' : 'Select All'}
@@ -461,6 +464,8 @@ export const FiltersDropdown: FC<FiltersDropdownProps> = ({
                             key={`${section.id}-${option.id}-${index}`}
                             onClick={() => handleToggleOption(section.id, option.id, section.type)}
                             data-state={isSelected ? 'active' : undefined}
+                            // A checked option sits on the raised surface; the hover still shows over it.
+                            data-tone="surface"
                           >
                             <FilterCheckbox checked={isSelected} />
                             <span

package/src/components/features/model-token-rates.tsx

@@ -233,7 +233,7 @@ export function ModelTokenRatesPopover({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          variant="transparent"
+          variant="bare"
           size="icon-sm"
           type="button"
           aria-label={MODEL_TOKEN_RATES_COPY.trigger}

package/src/components/features/notifications/notification-drawer.tsx

@@ -75,6 +75,7 @@ export function NotificationDrawer({
               size="compact"
               noPaddingX
               type="button"
+              data-tone="neutral"
               disabled={unreadCount === 0}
               onClick={markAllRead}
               className="self-center"

package/src/components/features/notifications/notification-tile.tsx

@@ -255,7 +255,7 @@ function LoadedNotificationTile({
                   },
                 ].map(({ active, label, icon: actionIcon, onClick }) => (
                   <Button
-                    variant="transparent"
+                    variant="bare"
                     size="icon-inline"
                     key={label}
                     type="button"

package/src/components/features/paths-display.tsx

@@ -131,7 +131,7 @@ export function PathsDisplay({
             <span className="min-w-0 flex-1 truncate text-ods-text-primary text-h4">{path}</span>
             {showCopyButtons && onCopyPath && (
               <Button
-                variant="transparent"
+                variant="bare"
                 size="icon-sm"
                 type="button"
                 onClick={() => onCopyPath(path)}

package/src/components/features/remote-session/remote-session-events.tsx

@@ -35,6 +35,8 @@ export function RemoteSessionEventList({ events, activeEventId, onSelect, classN
               type="button"
               aria-current={event.id === activeEventId || undefined}
               data-state={event.id === activeEventId ? 'active' : undefined}
+              // The current event holds the border-grey fill under the cursor.
+              data-tone="muted"
               onClick={() => onSelect?.(event)}
               className="items-start"
             >

package/src/components/features/scripts/schedule-form/schedule-script-picker-card.tsx

@@ -132,7 +132,7 @@ export function ScheduleScriptPickerCard({
         >
           {dragAndDropEnabled && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon"
               type="button"
               {...dragHandleProps}

package/src/components/features/scripts/schedule-form/schedule-timing-fields.tsx

@@ -306,7 +306,7 @@ export function ScheduleTimingFields({
                   />
                   {field.value && !fieldsDisabled && (
                     <Button
-                      variant="transparent"
+                      variant="bare"
                       size="icon-sm"
                       type="button"
                       onClick={() => field.onChange(null)}

package/src/components/features/select-button.tsx

@@ -41,13 +41,13 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
   ) => {
     return (
       <Button
-        // A selectable option drawn as a field: its accent border marks the picked one.
+        // A selectable option drawn as a field: the picked one (`aria-selected`) takes the accent border on the
+        // accent's light fill.
         variant="field"
         ref={ref}
         type="button"
         role="option"
         aria-selected={selected}
-        data-state={selected ? 'open' : undefined}
         disabled={disabled}
         onClick={onClick}
         className={cn('content-md:h-16', className)}

package/src/components/features/tags-selector.tsx

@@ -123,7 +123,7 @@ export function TagsSelector({
               {tag.name}
               {!disabled && (
                 <Button
-                  variant="transparent"
+                  variant="bare"
                   size="icon-inline"
                   type="button"
                   onClick={e => {

package/src/components/loading/loading-region.tsx

@@ -49,10 +49,13 @@ export function LoadingRegion({
   const announce = announceGiven && !inScope;
   // One tree for both states: `children` keeps its slot whether or not the status is drawn, so an
   // `announce` that flips at runtime does not remount the content (and drop its state and focus).
+  // The status comes AFTER the content: it takes no space (visually hidden, absolutely positioned), but placed first
+  // in a `space-y-*` stack it made the content the second child, which takes the stack's top margin, so a region
+  // that announced stood a gap taller than the same region inside a loading scope (a jump at hydration).
   return (
     <Tag aria-busy={announce ? 'true' : undefined} className={className} {...props}>
-      {announce && status && <LoadingStatus label={label} />}
       {children}
+      {announce && status && <LoadingStatus label={label} />}
     </Tag>
   );
 }

package/src/components/navigation/mobile-burger-menu.tsx

@@ -83,6 +83,8 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
         onClick={() => handleItemClick(item)}
         disabled={disabled}
         data-state={isActive && !disabled ? 'active' : undefined}
+        // Every entry is a bordered card; the current page's takes the accent border.
+        data-tone="framed"
         className={isGridItem ? 'min-w-0' : undefined}
         aria-current={isActive ? 'page' : undefined}
         // The same name the sidebar row announces — "Scripts (Beta)" — rather than
@@ -239,7 +241,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
 
           {/* Logout Button */}
           {onLogout && (
-            <Button variant="row" onClick={onLogout} disabled={disabled}>
+            <Button variant="row" data-tone="framed" onClick={onLogout} disabled={disabled}>
               <Logout02Icon className="size-4 text-ods-error" />
               <span className="flex-1 text-left text-ods-text-primary text-h6">Log Out</span>
             </Button>

package/src/components/navigation/multi-level-navigation.tsx

@@ -270,6 +270,8 @@ function NavigationItem({
             <Button
               variant="row"
               data-state={isSelected ? 'active' : undefined}
+              // The open page holds its line's border-grey fill: no hover over it.
+              data-tone="muted"
               className={cn(NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.desktop)}
               onClick={() => onNodeClick(node)}
               aria-label={`${isSelected ? 'Selected' : 'Select'} ${node.name}`}
@@ -297,7 +299,7 @@ function NavigationItem({
 
             {hasChildren && (
               <Button
-                variant="transparent"
+                variant="bare"
                 size="icon-sm"
                 className="mr-[var(--spacing-system-xxs)] shrink-0"
                 onClick={e => {
@@ -399,6 +401,8 @@ function MobileNavigationItem({
             <Button
               variant="row"
               data-state={isSelected ? 'active' : undefined}
+              // The open page holds its line's border-grey fill: no hover over it.
+              data-tone="muted"
               className={cn(NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.mobile)}
               onClick={() => onNodeClick(node)}
             >
@@ -425,7 +429,7 @@ function MobileNavigationItem({
 
             {hasChildren && (
               <Button
-                variant="transparent"
+                variant="bare"
                 size="icon-sm"
                 className="mr-[var(--spacing-system-xxs)] shrink-0"
                 onClick={e => {

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -10,7 +10,7 @@ import { useLoadingScope } from '../ui/loading-scope';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
-/** A sidebar row's height: the loaded row (a `row` button or link) and its loading form are one box. */
+/** A sidebar row's height: the loaded row (a `rail` button or link) and its loading form are one box. */
 const NAV_SIDEBAR_ROW_LAYOUT_CLASS = 'h-14';
 
 interface IconProps {
@@ -118,7 +118,7 @@ function LoadedNavigationSidebarItemButton({
     // A row whose route is still committing: announced, never drawn as the current page.
     'aria-busy': isPending || undefined,
   };
-  // The current page's row: the row kind's selected surface.
+  // The current page's entry: the rail kind's accent fill, text and bar (`aria-busy` above holds its hover wash).
   const rowState = isActive && !disabled ? 'active' : undefined;
 
   // An entry with a custom onClick has no destination of its own, and a
@@ -126,7 +126,7 @@ function LoadedNavigationSidebarItemButton({
   if (disabled || !item.path || item.onClick) {
     return (
       <Button
-        variant="row"
+        variant="rail"
         type="button"
         onClick={event => onClick(item, event)}
         disabled={disabled}
@@ -140,7 +140,7 @@ function LoadedNavigationSidebarItemButton({
   }
 
   return (
-    <Button asChild variant="row" data-state={rowState} className={NAV_SIDEBAR_ROW_LAYOUT_CLASS}>
+    <Button asChild variant="rail" data-state={rowState} className={NAV_SIDEBAR_ROW_LAYOUT_CLASS}>
       <Link href={item.path} onClick={event => onClick(item, event)} {...shared}>
         {content}
       </Link>
@@ -160,7 +160,7 @@ function LoadedNavigationSidebarItemButton({
  */
 function NavigationSidebarItemSkeleton({ showLabel }: { showLabel: boolean }) {
   return (
-    <div className={cn(BUTTON_KIND_CLASS.row, NAV_SIDEBAR_ROW_LAYOUT_CLASS)} aria-hidden="true">
+    <div className={cn(BUTTON_KIND_CLASS.rail, NAV_SIDEBAR_ROW_LAYOUT_CLASS)} aria-hidden="true">
       <div className="relative flex flex-shrink-0 items-center justify-center">
         <UnifiedSkeleton className="h-6 w-6 rounded" />
       </div>

package/src/components/ui/allowed-domains-input.tsx

@@ -120,6 +120,7 @@ const AllowedDomainsInput = forwardRef<HTMLDivElement, AllowedDomainsInputProps>
           size="compact"
           noPaddingX
           type="button"
+          data-tone="primary"
           onClick={addDomain}
           disabled={disabled}
           leftIcon={<PlusCircle />}

package/src/components/ui/button/button-styles.ts

@@ -6,8 +6,9 @@
 export const buttonSurfaceClasses = {
   accent:
     'bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover active:bg-ods-accent-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled',
+  // `data-tone="accent"`: the accent fill on hover (a card's "view" action).
   outline:
-    'bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled',
+    'bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled data-[tone=accent]:hover:bg-ods-accent',
   transparent:
     'bg-transparent text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled',
   destructive:
@@ -31,7 +32,39 @@ export const buttonSurfaceClasses = {
   // hover, and no surface in any state. Promoted to a variant because the
   // disclosure toggle was a primitive <button> restating these classes. Pair
   // with size="compact" and noPaddingX so the label aligns with the text above.
-  link: 'bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled',
+  //
+  // States, from the element's attributes: `data-state="active"` holds the accent (a filter trigger with filters
+  // applied). `data-tone="neutral"` takes the primary text on hover instead of the accent (a secondary text action:
+  // "Select all", "Mark all read"); `data-tone="primary"` sits in the primary text and takes the accent on hover (a
+  // value that opens something: an info row's link, a breadcrumb).
+  link: [
+    'bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled',
+    'data-[tone=neutral]:hover:text-ods-text-primary',
+    'data-[tone=primary]:text-ods-text-primary data-[tone=primary]:hover:text-ods-accent',
+    'data-[state=active]:text-ods-accent data-[state=active]:hover:text-ods-accent data-[tone=neutral]:data-[state=active]:hover:text-ods-accent',
+  ].join(' '),
+  // A bare glyph control with no surface (a composer's send / add-context, a copy, a close, a field's clear): the
+  // secondary text, the primary on hover and keyboard focus, faded when disabled. Distinct from `transparent`, which
+  // is primary text on a hover fill. States, from the element's attributes:
+  //  - `aria-expanded="true"`: its popup is open, the glyph stays lit (primary);
+  //  - `data-state="active"`: the glyph is armed (the composer's send while the editor has focus), the accent;
+  //  - `data-tone="accent"`: a trigger that opens and presses in the accent (the composer's add-context);
+  //  - `data-tone="danger"`: a removal that takes the error colour on hover;
+  //  - `data-tone="error"` / `data-tone="success"`: a glyph drawn in that colour (an error's copy, a done state),
+  //    dimmed on hover;
+  //  - `data-tone="field"`: a field's adornment, lit in the accent while the field (the enclosing `group`) has focus
+  //    and in the error colour while it is invalid (`data-invalid` on the group).
+  bare: [
+    'bg-transparent text-ods-text-secondary outline-none hover:bg-transparent hover:text-ods-text-primary focus-visible:text-ods-text-primary active:bg-transparent',
+    'aria-expanded:text-ods-text-primary',
+    'data-[state=active]:text-ods-accent',
+    'data-[tone=accent]:aria-expanded:text-ods-accent data-[tone=accent]:active:text-ods-accent',
+    'data-[tone=danger]:hover:text-ods-error',
+    'data-[tone=error]:text-ods-error data-[tone=error]:hover:text-ods-error data-[tone=error]:hover:opacity-80',
+    'data-[tone=success]:text-ods-success data-[tone=success]:hover:text-ods-success data-[tone=success]:hover:opacity-80',
+    'data-[tone=field]:group-has-[textarea:focus]:text-ods-accent data-[tone=field]:focus-visible:text-ods-accent data-[tone=field]:group-data-[invalid]:text-ods-error',
+    'disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40 disabled:hover:text-ods-text-secondary aria-disabled:opacity-40',
+  ].join(' '),
   // Chrome that sits ON media (video cards, image lightboxes): a scrim disc so
   // the glyph stays legible over an arbitrary frame. Promoted to a variant
   // because the walkthrough card, its theater and the bite cards were each
@@ -138,9 +171,14 @@ const KIND_FOCUS_INSET =
  *  - `data-state="active"` (Radix's convention): the selected row, tab or chip;
  *  - `data-state="open"` / `aria-expanded="true"`: the field whose popup is open;
  *  - `data-invalid`: the field that failed validation (the marker every field exposes);
- *  - `aria-pressed="true"`: the pressed chip.
+ *  - `aria-pressed="true"`: the pressed chip;
+ *  - `aria-selected="true"`: the chosen field (a choice drawn as a field);
+ *  - `aria-busy="true"`: the rail entry whose route is committing.
+ *
+ * Where a kind has a second look for the same state (a selected row marked with the accent rather than the hover
+ * surface, the segmented control's accent segment), the control names it with `data-tone`, declared on the kind below.
  *
- * A call site's `className` on a kind is layout only (width, flex, position, margin).
+ * A call site's `className` on a kind is layout only (width, flex, position, margin): never a colour.
  */
 export const BUTTON_KIND_CLASS = {
   // A control drawn as a form field (a date picker's, a searchable select's, a popup's trigger): Input's box, border
@@ -150,22 +188,62 @@ export const BUTTON_KIND_CLASS = {
     'h-11 rounded-[6px] md:h-12',
     'border-ods-border bg-ods-card text-ods-text-primary text-h4 transition-colors duration-200',
     'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
+    // Open: the accent border, held under the cursor (a hover must not read as closing it).
     'data-[state=open]:border-ods-accent aria-expanded:border-ods-accent',
-    'data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error',
+    'enabled:data-[state=open]:hover:border-ods-accent enabled:aria-expanded:hover:border-ods-accent',
+    // Selected (a choice drawn as a field, `aria-selected="true"`): the accent border on the accent's light fill,
+    // whose hover and press are the fill's own steps.
+    'aria-selected:border-ods-accent aria-selected:bg-ods-open-yellow-light',
+    'enabled:aria-selected:hover:border-ods-accent enabled:aria-selected:hover:bg-ods-open-yellow-light-hover',
+    'enabled:aria-selected:active:border-ods-accent enabled:aria-selected:active:bg-ods-open-yellow-light-action',
+    // Invalid wins over open.
+    'data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error enabled:data-[invalid]:active:border-ods-error',
+    'data-[invalid]:data-[state=open]:border-ods-error data-[invalid]:aria-expanded:border-ods-error',
+    'enabled:data-[invalid]:data-[state=open]:hover:border-ods-error enabled:data-[invalid]:aria-expanded:hover:border-ods-error',
     'disabled:cursor-not-allowed disabled:bg-ods-bg disabled:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled',
     'outline-none focus-visible:border-ods-accent',
     '[&_svg]:shrink-0',
   ].join(' '),
   // A clickable row of a list, a menu or a navigation: full width, its content on the left, the hover and the
-  // selected surface of the list.
+  // selected surface of the list. The selected row (`data-state="active"`) takes the hover surface; a list that marks
+  // its selection differently names its look with `data-tone` (the attribute, on the row and on its skeleton):
+  //  - `accent`: the accent's secondary fill, no hover surface (a chat list's open conversation);
+  //  - `link`: the accent text, no surface at all (a chat rail's navigation entries);
+  //  - `surface`: the raised surface, the hover still showing over it (a filter dropdown's checked option);
+  //  - `muted`: the border-grey fill, held under the cursor (a timeline's current event, a docs tree's open page);
+  //  - `card`: a card with its border, no hover over it; idle rows keep a transparent border (a capability list);
+  //  - `framed`: every row a bordered card, the selected one with the accent border (the mobile menu's entries).
   row: [
     'flex w-full items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left',
     'bg-transparent text-ods-text-primary text-h4 transition-colors duration-150',
-    'hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-active',
+    'hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-hover',
+    'data-[tone=accent]:hover:bg-transparent data-[tone=accent]:active:bg-transparent',
+    'data-[tone=accent]:data-[state=active]:bg-ods-accent-secondary data-[tone=accent]:data-[state=active]:hover:bg-ods-accent-secondary data-[tone=accent]:data-[state=active]:active:bg-ods-accent-secondary',
+    'data-[tone=link]:hover:bg-transparent data-[tone=link]:active:bg-transparent data-[tone=link]:data-[state=active]:bg-transparent data-[tone=link]:data-[state=active]:text-ods-accent',
+    'data-[tone=surface]:data-[state=active]:bg-ods-bg-surface data-[tone=surface]:data-[state=active]:hover:bg-ods-bg-hover',
+    'data-[tone=muted]:data-[state=active]:bg-ods-border',
+    'data-[tone=card]:border data-[tone=card]:border-transparent data-[tone=card]:data-[state=active]:border-ods-border data-[tone=card]:data-[state=active]:bg-ods-card',
+    'data-[tone=framed]:border data-[tone=framed]:border-ods-border data-[tone=framed]:bg-ods-card data-[tone=framed]:data-[state=active]:border-ods-accent data-[tone=framed]:data-[state=active]:bg-ods-card data-[tone=framed]:data-[state=active]:hover:bg-ods-bg-hover',
     'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-transparent',
     KIND_FOCUS_INSET,
     '[&_svg]:shrink-0',
   ].join(' '),
+  // A navigation rail's entry (the app sidebar): the row's box with the rail's two layers. The hover is a wash on its
+  // own layer (`::after`), so it can fade while the current page switches in a single frame: the current page's entry
+  // (`data-state="active"`) takes the accent's light fill, the accent text and glyphs and the accent bar on its leading
+  // edge (`::before`). An entry whose route is still committing (`aria-busy="true"`) holds the hover wash and nothing
+  // else.
+  rail: [
+    'relative isolate flex w-full items-center justify-start gap-[var(--spacing-system-s)] px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left',
+    'bg-transparent text-ods-text-primary text-h4 [&_svg]:fill-ods-text-secondary',
+    "after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-ods-bg-hover after:opacity-0 after:transition-opacity after:duration-150 after:content-['']",
+    "before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1 before:content-['']",
+    'hover:after:opacity-100 aria-busy:after:opacity-100',
+    'data-[state=active]:bg-ods-open-yellow-light data-[state=active]:text-ods-accent data-[state=active]:[&_svg]:fill-ods-accent data-[state=active]:before:bg-ods-accent data-[state=active]:after:opacity-0',
+    'disabled:cursor-not-allowed disabled:text-ods-text-secondary disabled:opacity-50 disabled:after:opacity-0',
+    KIND_FOCUS_INSET,
+    '[&_svg]:shrink-0',
+  ].join(' '),
   // A tab of a tab strip or a tab list: secondary until it is the open one. A strip that marks its open and hovered
   // tab with the accent fade (the admin strip) says so on each tab with `data-emphasis="fade"`. ODS colour vars hold
   // hex values, so a Tailwind alpha modifier would produce no CSS; color-mix() derives the 10% stop from the token.
@@ -179,12 +257,29 @@ export const BUTTON_KIND_CLASS = {
     KIND_FOCUS_INSET,
     '[&_svg]:shrink-0',
   ].join(' '),
+  // A segment of a segmented control (`TabSelector`): the label on the strip, a hover fill, and the selected segment
+  // (`data-state="active"`) filled with the raised surface; `data-tone="accent"` fills it with the accent instead. A
+  // disabled selected segment keeps the raised surface with secondary text.
+  segment: [
+    'flex items-center justify-center gap-[var(--spacing-system-xs)] whitespace-nowrap rounded-xs p-[var(--spacing-system-xsf)]',
+    'bg-transparent text-ods-text-primary text-h4 transition-colors duration-200',
+    'hover:bg-ods-bg-hover',
+    'data-[state=active]:cursor-default data-[state=active]:bg-ods-bg-surface data-[state=active]:text-ods-text-primary data-[state=active]:hover:bg-ods-bg-surface',
+    'data-[tone=accent]:data-[state=active]:bg-ods-accent data-[tone=accent]:data-[state=active]:text-ods-text-on-accent data-[tone=accent]:data-[state=active]:hover:bg-ods-accent',
+    'disabled:cursor-not-allowed disabled:bg-transparent disabled:text-ods-text-secondary disabled:hover:bg-transparent',
+    'disabled:data-[state=active]:bg-ods-bg-surface disabled:data-[state=active]:text-ods-text-secondary disabled:data-[state=active]:hover:bg-ods-bg-surface',
+    'disabled:data-[tone=accent]:data-[state=active]:bg-ods-bg-surface disabled:data-[tone=accent]:data-[state=active]:text-ods-text-secondary disabled:data-[tone=accent]:data-[state=active]:hover:bg-ods-bg-surface',
+    KIND_FOCUS_INSET,
+    '[&_svg]:shrink-0',
+  ].join(' '),
   // A choice drawn as a pill (a filter, a quick question, an answer option): bordered, the accent when picked.
   chip: [
     'inline-flex h-8 items-center gap-[var(--spacing-system-xxs)] rounded-full border px-[var(--spacing-system-sf)]',
     'border-ods-border bg-ods-card text-ods-text-primary text-h6 transition-colors duration-200',
     'hover:border-ods-border-hover hover:bg-ods-bg-hover',
     'aria-pressed:border-ods-accent data-[state=active]:border-ods-accent',
+    // `data-tone="accent"`: a pill that links somewhere takes the accent border on hover (a vendor pill).
+    'data-[tone=accent]:hover:border-ods-accent',
     'disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-ods-card',
     KIND_FOCUS,
     '[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0',
@@ -193,11 +288,13 @@ export const BUTTON_KIND_CLASS = {
   // content is the look; the button gives it the click, the keyboard and the focus ring.
   card: ['relative block w-full rounded-md text-left text-ods-text-primary', KIND_FOCUS].join(' '),
   // A cell of a bar (a header's or a chat's top bar): the bar's full height, an icon or a short label, secondary
-  // until hovered or pressed.
+  // until hovered. The current cell (`data-state="active"`: the header's open section) takes the pressed surface and
+  // the primary text.
   cell: [
     'flex h-full shrink-0 items-center justify-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-m)]',
     'bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200',
-    'hover:bg-ods-bg-hover hover:text-ods-text-primary aria-pressed:text-ods-accent aria-expanded:text-ods-text-primary data-[state=active]:text-ods-accent',
+    'hover:bg-ods-bg-hover hover:text-ods-text-primary aria-expanded:text-ods-text-primary',
+    'data-[state=active]:bg-ods-bg-active data-[state=active]:text-ods-text-primary',
     KIND_FOCUS_INSET,
     '[&_svg]:h-6 [&_svg]:w-6 [&_svg]:shrink-0',
   ].join(' '),

package/src/components/ui/button/button.tsx

@@ -41,11 +41,14 @@ const buttonVariants = cva(
         glyph: buttonSurfaceClasses.glyph,
         overlay: buttonSurfaceClasses.overlay,
         link: buttonSurfaceClasses.link,
+        bare: buttonSurfaceClasses.bare,
         // The kinds that are not a plain push button own their whole box (`BUTTON_KIND_CLASS`); resolved
         // before this map is read, so `size` never reaches them. The entries only type the prop.
         field: '',
         row: '',
+        rail: '',
         tab: '',
+        segment: '',
         chip: '',
         card: '',
         cell: '',

package/src/components/ui/file-manager/file-manager-breadcrumb.tsx

@@ -17,6 +17,7 @@ export function FileManagerBreadcrumb({ items, onItemClick, className }: FileMan
             size="compact"
             noPaddingX
             type="button"
+            data-tone="primary"
             aria-current={index === items.length - 1 ? 'page' : undefined}
             onClick={() => onItemClick?.(item.path)}
             className="shrink-0"

package/src/components/ui/file-upload.tsx

@@ -417,7 +417,7 @@ export function FileUpload<T extends FileUploadCandidate = File>({
                     </div>
                     {onDownloadManagedFile && entry.status === 'uploaded' && (
                       <Button
-                        variant="transparent"
+                        variant="bare"
                         size="icon-sm"
                         type="button"
                         onClick={() => onDownloadManagedFile(entry.id)}
@@ -429,7 +429,8 @@ export function FileUpload<T extends FileUploadCandidate = File>({
                     )}
                     {!disabled && (
                       <Button
-                        variant="transparent"
+                        variant="bare"
+                        data-tone="error"
                         size="icon-sm"
                         type="button"
                         onClick={() => onRemoveManagedFile?.(entry.id)}
@@ -457,7 +458,8 @@ export function FileUpload<T extends FileUploadCandidate = File>({
                     </div>
                     {!disabled && (
                       <Button
-                        variant="transparent"
+                        variant="bare"
+                        data-tone="error"
                         size="icon-sm"
                         type="button"
                         onClick={() => handleRemoveFile(index)}

package/src/components/ui/hidden-tags-popup.tsx

@@ -51,7 +51,7 @@ export const HiddenTagsPopup = forwardRef(function HiddenTagsPopupImpl(
           </span>
           {!disabled && onRemove && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-sm"
               type="button"
               onClick={e => {

package/src/components/ui/hover-dropdown.tsx

@@ -211,7 +211,7 @@ export function HoverDropdown({
             const secondaryAction = item.secondaryAction;
             const secondary = secondaryAction ? (
               <Button
-                variant="transparent"
+                variant="bare"
                 size="icon-sm"
                 type="button"
                 onClick={e => {

package/src/components/ui/info-card.tsx

@@ -303,7 +303,7 @@ function InfoCardValueRow({
           {icon}
           {copyable && (
             <Button
-              variant="transparent"
+              variant="bare"
               size="icon-inline"
               type="button"
               onClick={() => copy(value)}

package/src/components/ui/info-section.tsx

@@ -87,6 +87,8 @@ function TextValue({ value }: { value: InfoSectionTextValue }) {
           size="compact"
           noPaddingX
           type="button"
+          // The value reads in the primary text and takes the accent on hover.
+          data-tone="primary"
           href={href}
           openInNewTab={openInNewTab}
           onClick={href ? undefined : onClick}

package/src/components/ui/loading-scope.tsx

@@ -121,12 +121,13 @@ export function AnnouncedLoadingScope({
   children: ReactNode;
 }) {
   const outer = useLoadingScope();
+  // The status follows the content, so in a `space-y-*` stack it never pushes the content down (see LoadingRegion).
   return (
     <>
-      {status && active && !outer && <LoadingStatus label={label} />}
       <LoadingScope active={active} as={as} className={className}>
         {children}
       </LoadingScope>
+      {status && active && !outer && <LoadingStatus label={label} />}
     </>
   );
 }

package/src/components/ui/modal-v2.tsx

@@ -376,7 +376,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(({ children, cl
       <div className="flex min-w-0 flex-1 flex-col">{children}</div>
       {onClose && (
         <Button
-          variant="transparent"
+          variant="bare"
           size="icon-sm"
           type="button"
           onClick={onClose}