@flamingo-stack/openframe-frontend-core 0.0.731 → 0.0.733

package/src/components/ui/phone-glyphs/status-bar-glyphs.tsx

@@ -0,0 +1,45 @@
+// The status bar's signal, Wi-Fi and battery of the drawn phone's lock screen, as the design draws it. It belongs to `PhoneFrame` and
+// nothing else, so it is not part of the icon set. It takes the text colour around it.
+
+/** The status bar's right side: signal, Wi-Fi and battery, as one drawing. */
+export function StatusBarGlyphs({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 54.441 9.78982" fill="none" aria-hidden="true" className={className}>
+      <path
+        d="M6.89491 2.89491C6.89491 2.51412 7.20361 2.20542 7.5844 2.20542H8.27389C8.65469 2.20542 8.96338 2.51412 8.96338 2.89491V8.41084C8.96338 8.79164 8.65469 9.10033 8.27389 9.10033H7.5844C7.20361 9.10033 6.89491 8.79164 6.89491 8.41084V2.89491Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.3424 1.51593C10.3424 1.13513 10.6511 0.826438 11.0319 0.826438H11.7213C12.1021 0.826438 12.4108 1.13513 12.4108 1.51593V8.41084C12.4108 8.79164 12.1021 9.10033 11.7213 9.10033H11.0319C10.6511 9.10033 10.3424 8.79164 10.3424 8.41084V1.51593Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.44746 5.30813C3.44746 4.92733 3.75615 4.61864 4.13695 4.61864H4.82644C5.20723 4.61864 5.51593 4.92733 5.51593 5.30813V8.41084C5.51593 8.79164 5.20723 9.10033 4.82644 9.10033H4.13695C3.75615 9.10033 3.44746 8.79164 3.44746 8.41084V5.30813Z"
+        fill="currentColor"
+      />
+      <path
+        d="M0 7.03186C0 6.65106 0.308696 6.34237 0.689491 6.34237H1.37898C1.75978 6.34237 2.06847 6.65106 2.06847 7.03186V8.41084C2.06847 8.79164 1.75978 9.10033 1.37898 9.10033H0.689491C0.308696 9.10033 0 8.79164 0 8.41084V7.03186Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22.1436 6.97595C23.1225 6.13113 24.5563 6.13095 25.5352 6.97595C25.5844 7.02139 25.6129 7.08596 25.6143 7.15368C25.6156 7.22145 25.5894 7.28687 25.542 7.33435L24.0088 8.91345C23.9639 8.95973 23.9027 8.98571 23.8389 8.98571C23.775 8.98566 23.7138 8.9598 23.669 8.91345L22.1358 7.33435C22.0884 7.28683 22.0621 7.22144 22.0635 7.15368C22.0649 7.08593 22.0943 7.02136 22.1436 6.97595ZM20.0703 5.0863C22.1795 3.08361 25.4465 3.08362 27.5557 5.0863C27.6033 5.13326 27.6302 5.19841 27.6309 5.26599C27.6314 5.33341 27.6052 5.39784 27.5586 5.44567L26.6729 6.35974C26.5815 6.45307 26.4335 6.45548 26.3399 6.36462C25.6473 5.72459 24.7467 5.36952 23.8125 5.3695C22.8788 5.3699 21.9783 5.72488 21.2861 6.36462C21.1925 6.45548 21.0445 6.45307 20.9531 6.35974L20.0674 5.44567C20.0209 5.39792 19.9946 5.33335 19.9951 5.26599C19.9958 5.19843 20.0227 5.13325 20.0703 5.0863ZM18.001 3.19958C21.236 0.0354236 26.3393 0.0353572 29.5742 3.19958C29.6211 3.2466 29.6481 3.31125 29.6485 3.37829C29.6488 3.44529 29.6224 3.50946 29.5762 3.557L28.6895 4.47107C28.5981 4.56485 28.4493 4.56633 28.3565 4.474C27.124 3.27797 25.4887 2.61088 23.7881 2.61071C22.0873 2.61071 20.4515 3.27787 19.2188 4.474C19.126 4.56648 18.9771 4.565 18.8858 4.47107L17.9981 3.557C17.952 3.50946 17.9264 3.44515 17.9268 3.37829C17.9272 3.31125 17.9541 3.24656 18.001 3.19958Z"
+        fill="currentColor"
+      />
+      <path
+        opacity="0.35"
+        d="M37.9222 0.363281H50.0277C51.3498 0.363404 52.4211 1.43566 52.4212 2.75781V6.20508C52.4212 7.5273 51.3499 8.59949 50.0277 8.59961H37.9222C36.6 8.59953 35.5277 7.52732 35.5277 6.20508V2.75781C35.5278 1.43564 36.6 0.363363 37.9222 0.363281Z"
+        stroke="currentColor"
+        strokeWidth="0.727473"
+      />
+      <path
+        opacity="0.4"
+        d="M53.4749 3.44746V6.35735C54.0603 6.1109 54.441 5.53758 54.441 4.9024C54.441 4.26722 54.0603 3.69391 53.4749 3.44746Z"
+        fill="currentColor"
+      />
+      <path
+        d="M36.5434 2.75797C36.5434 1.99638 37.1608 1.37898 37.9224 1.37898H50.0274C50.789 1.37898 51.4064 1.99637 51.4064 2.75796V6.20542C51.4064 6.96701 50.789 7.5844 50.0274 7.5844H37.9224C37.1608 7.5844 36.5434 6.96701 36.5434 6.20542V2.75797Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/ui/searchable-select.tsx

@@ -1,20 +1,28 @@
 'use client';
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { type ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useId, useMemo, useState } from 'react';
 import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding';
 import { cn } from '../../utils/cn';
 import { CheckIcon, SearchIcon } from '../icons-v2-generated';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
+import { FieldWrapper } from './field-wrapper';
 import { Input } from './input';
 
 export interface SearchableSelectOption {
   value: string;
   label: string;
-  /** Optional leading visual for the option row (avatar, icon, badge). */
+  /** Optional leading visual for the option row (avatar, icon, badge). The
+   *  default trigger leads with the selected option's icon too. */
   icon?: ReactNode;
+  /** Extra terms the search matches besides `label` — e.g. the stored key of a
+   *  glyph (`chart-pie`) whose label reads "Pie chart". */
+  keywords?: string[];
 }
 
+/** How the dropdown lays its options out — see `SearchableSelectProps.layout`. */
+export type SearchableSelectLayout = 'list' | 'grid';
+
 export interface SearchableSelectProps {
   options: SearchableSelectOption[];
   /** Currently selected option value; null/undefined when nothing is selected. */
@@ -34,7 +42,27 @@ export interface SearchableSelectProps {
    * is rendered.
    */
   trigger?: ReactNode;
-  /** Custom option-row renderer; default is icon + label + selected check. */
+  /** `id` of the default trigger button, which `label` names through `htmlFor`; generated when omitted. */
+  id?: string;
+  /**
+   * Label above the default trigger — the same `FieldWrapper` treatment
+   * `SelectTrigger` gives its `label`, so a searchable field lines up with the
+   * plain selects beside it. A custom `trigger` owns its own label.
+   */
+  label?: string;
+  /** Label scale forwarded to FieldWrapper ('large' = text-h4 for designs with body-scale field titles). */
+  labelVariant?: 'default' | 'large';
+  /** Validation message under the default trigger; also paints its border red. */
+  error?: string;
+  /**
+   * `'list'` (default) stacks full-width rows. `'grid'` tiles the options —
+   * icon above a centered caption, `minmax(7rem, 1fr)` columns — the
+   * icon-picker pattern. The grid fills the popover, so size it through
+   * `contentClassName` (360px fits three tiles).
+   */
+  layout?: SearchableSelectLayout;
+  /** Custom option-row renderer; default is icon + label + selected check
+   *  (icon above the caption in the grid layout). */
   renderOption?: (option: SearchableSelectOption, isSelected: boolean) => ReactNode;
   align?: 'start' | 'center' | 'end';
   /** Classes for the default trigger button. */
@@ -50,22 +78,37 @@ export interface SearchableSelectProps {
  * custom `trigger` for icon-button use cases; the default trigger looks and
  * behaves like `SelectTrigger`.
  */
-export function SearchableSelect({
-  options,
-  value = null,
-  onValueChange,
-  placeholder = 'Select...',
-  searchPlaceholder = 'Search...',
-  emptyText = 'No results found',
-  loadingText = 'Loading…',
-  isLoading = false,
-  disabled = false,
-  trigger,
-  renderOption,
-  align = 'start',
-  className,
-  contentClassName,
-}: SearchableSelectProps) {
+export function SearchableSelect(allProps: SearchableSelectProps) {
+  const {
+    options,
+    value = null,
+    onValueChange,
+    placeholder = 'Select...',
+    searchPlaceholder = 'Search...',
+    emptyText = 'No results found',
+    loadingText = 'Loading…',
+    isLoading = false,
+    disabled = false,
+    trigger,
+    id,
+    label,
+    labelVariant,
+    error,
+    layout = 'list',
+    renderOption,
+    align = 'start',
+    className,
+    contentClassName,
+  } = allProps;
+  // Wired for a message even while `error` is undefined — see `FieldWrapper.errorSlot`.
+  const errorSlot = 'error' in allProps;
+  const isInvalid = !!error;
+  const isGrid = layout === 'grid';
+  // The label names the trigger through `htmlFor`: clicking it focuses the
+  // button and assistive tech reads the field by it. A caller's `id` wins.
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
+
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState('');
   const keyboardPadding = useKeyboardCollisionPadding();
@@ -79,7 +122,9 @@ export function SearchableSelect({
   const filtered = useMemo(() => {
     const q = search.trim().toLowerCase();
     if (!q) return options;
-    return options.filter(o => o.label.toLowerCase().includes(q));
+    return options.filter(
+      o => o.label.toLowerCase().includes(q) || (o.keywords ?? []).some(k => k.toLowerCase().includes(q)),
+    );
   }, [options, search]);
 
   const selectedOption = useMemo(
@@ -94,8 +139,10 @@ export function SearchableSelect({
 
   const defaultTrigger = (
     <button
+      id={triggerId}
       type="button"
       disabled={disabled}
+      data-invalid={isInvalid || undefined}
       className={cn(
         // Mirrors SelectTrigger so the closed state is indistinguishable from
         // the regular Select.
@@ -103,22 +150,45 @@ export function SearchableSelect({
         'border-ods-border bg-ods-card text-h4',
         selectedOption ? 'text-ods-text-primary' : 'text-ods-text-secondary',
         'enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active',
-        'data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent',
+        !isInvalid && 'data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent',
         'group cursor-pointer transition-colors duration-200 disabled:!cursor-not-allowed disabled:bg-ods-bg',
+        isInvalid &&
+          'border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error',
         className,
       )}
     >
-      <span className="line-clamp-1">{selectedOption ? selectedOption.label : placeholder}</span>
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        {selectedOption?.icon}
+        <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
+      </span>
       <Chevron02DownIcon
-        className="shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180 group-data-[state=open]:text-ods-accent"
+        className={cn(
+          'shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180',
+          isInvalid ? 'text-ods-error' : 'group-data-[state=open]:text-ods-accent',
+        )}
         size={24}
       />
     </button>
   );
 
+  const triggerElement = <PopoverPrimitive.Trigger asChild>{trigger ?? defaultTrigger}</PopoverPrimitive.Trigger>;
+
+  // A `role="listbox"` child that is a status line, not an option: in the grid
+  // it has to span the row or it would sit in one tile-sized cell.
+  const statusClass = cn(
+    'px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5',
+    isGrid && 'col-span-full',
+  );
+
   return (
     <PopoverPrimitive.Root open={isOpen} onOpenChange={disabled ? undefined : setIsOpen} modal={false}>
-      <PopoverPrimitive.Trigger asChild>{trigger ?? defaultTrigger}</PopoverPrimitive.Trigger>
+      {!trigger && (label !== undefined || errorSlot) ? (
+        <FieldWrapper label={label} htmlFor={triggerId} labelVariant={labelVariant} error={error} errorSlot={errorSlot}>
+          {triggerElement}
+        </FieldWrapper>
+      ) : (
+        triggerElement
+      )}
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
           align={align}
@@ -147,15 +217,22 @@ export function SearchableSelect({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-80 min-h-0 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div
+            className={cn(
+              'max-h-80 min-h-0 overflow-y-auto',
+              // Tiles grow from 7rem: the popover's own border and a classic
+              // always-on scrollbar both eat into the track, so 7.5rem (the
+              // Figma cell) dropped a 360px popover to two columns. The column
+              // count follows the popover width. Each tile draws its own
+              // bottom/right rule, so the grid needs no gap.
+              isGrid ? 'grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))]' : 'py-[var(--spacing-system-xs)]',
+            )}
+            role="listbox"
+          >
             {isLoading ? (
-              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5">
-                {loadingText}
-              </div>
+              <div className={statusClass}>{loadingText}</div>
             ) : filtered.length === 0 ? (
-              <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-ods-text-secondary text-h5">
-                {emptyText}
-              </div>
+              <div className={statusClass}>{emptyText}</div>
             ) : (
               filtered.map(opt => {
                 const isSelected = value === opt.value;
@@ -167,13 +244,28 @@ export function SearchableSelect({
                     aria-selected={isSelected}
                     onClick={() => handleSelect(opt.value)}
                     className={cn(
-                      'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
                       'transition-colors hover:bg-ods-bg-hover',
+                      isGrid
+                        ? 'flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]'
+                        : 'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
                       isSelected && 'bg-ods-bg-hover',
                     )}
                   >
                     {renderOption ? (
                       renderOption(opt, isSelected)
+                    ) : isGrid ? (
+                      <>
+                        {opt.icon}
+                        <span
+                          className={cn(
+                            'w-full truncate text-center text-h6',
+                            isSelected ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                          )}
+                          title={opt.label}
+                        >
+                          {opt.label}
+                        </span>
+                      </>
                     ) : (
                       <>
                         {opt.icon}

package/src/components/ui/snap-carousel.tsx

@@ -6,7 +6,6 @@ import { useInView } from '../../hooks/ui/use-in-view';
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
 import { Chevron02RightIcon } from '../icons-v2-generated/arrows/chevron-02-right-icon';
-import { PlaybackToggle } from './playback-toggle';
 
 /** The row under the track: the dots, the counter, the pause and the two arrows (the arrows set its height). */
 const SNAP_CAROUSEL_CONTROLS_CLASS = 'mt-3 flex items-center gap-2';
@@ -28,9 +27,6 @@ export interface SnapCarouselProps<T> {
   label: string;
   /** Move to the next slide after this long. `0` turns auto-advance off. Default 5000. */
   autoAdvanceMs?: number;
-  /** Names of the stop/start control. */
-  playLabel?: string;
-  pauseLabel?: string;
   /** Width of one slide. Default `basis-[300px]`. */
   slideClassName?: string;
   prevLabel?: string;
@@ -67,10 +63,10 @@ function DotFill({ durationMs }: { durationMs: number }) {
  *
  * WHEN IT ADVANCES is `useAutoplay`'s rule, the same one the looping demos
  * use: mostly on screen, tab visible, not paused, motion allowed. A swipe or
- * an arrow moves it and it carries on from there after a full interval; it
- * waits only while a finger or the mouse button is actually down on it. The
- * small pause control stops it for good, and starts it again. While it is
- * auto-playing the active dot fills over the interval, so the wait is visible.
+ * an arrow moves it and it carries on from there after a full interval. It
+ * waits while the visitor holds it (`useAutoplay`'s hold: a finger or the
+ * mouse button down on it, the keyboard inside it); there is no pause button. While it is auto-playing the active dot fills over the
+ * interval, so the wait is visible.
  */
 export function SnapCarousel<T>({
   items,
@@ -78,8 +74,6 @@ export function SnapCarousel<T>({
   getKey,
   label,
   autoAdvanceMs = 5000,
-  playLabel,
-  pauseLabel,
   slideClassName = 'basis-[300px]',
   prevLabel = 'Previous',
   nextLabel = 'Next',
@@ -88,8 +82,6 @@ export function SnapCarousel<T>({
 }: SnapCarouselProps<T>) {
   const trackRef = useRef<HTMLDivElement | null>(null);
   const [index, setIndex] = useState(0);
-  // Held only while a finger or the mouse button is down on it: the visitor is mid-swipe.
-  const [pressed, setPressed] = useState(false);
   const { ref: viewRef, inView } = useInView<HTMLDivElement>({ threshold: 0.5 });
   const auto = useAutoplay(inView);
   const count = items.length;
@@ -127,24 +119,8 @@ export function SnapCarousel<T>({
     setIndex(Math.min(count - 1, Math.round(track.scrollLeft / step)));
   }, [count, slideStep]);
 
-  // The release is listened for on the WINDOW: a press that ends outside the
-  // carousel (a drag that leaves it, a scroll the browser takes over) must
-  // still end, or the carousel would wait forever.
-  useEffect(() => {
-    if (!pressed) return undefined;
-    const release = () => setPressed(false);
-    window.addEventListener('pointerup', release);
-    window.addEventListener('pointercancel', release);
-    window.addEventListener('blur', release);
-    return () => {
-      window.removeEventListener('pointerup', release);
-      window.removeEventListener('pointercancel', release);
-      window.removeEventListener('blur', release);
-    };
-  }, [pressed]);
-
   const canAutoAdvance = autoAdvanceMs > 0 && count > 1;
-  const playing = auto.playing && canAutoAdvance && !pressed;
+  const playing = auto.playing && canAutoAdvance;
 
   // Restarts on every slide change, so a swipe or an arrow is followed by a full interval.
   useEffect(() => {
@@ -164,7 +140,7 @@ export function SnapCarousel<T>({
   if (count === 0) return null;
 
   return (
-    <div className={className} onPointerDown={() => setPressed(true)}>
+    <div className={className} {...auto.holdProps}>
       <div
         ref={setRefs}
         onScroll={onScroll}
@@ -212,14 +188,6 @@ export function SnapCarousel<T>({
         >
           {index + 1} / {count}
         </span>
-        {canAutoAdvance && !auto.reducedMotion && (
-          <PlaybackToggle
-            paused={auto.paused}
-            onChange={auto.setPaused}
-            playLabel={playLabel}
-            pauseLabel={pauseLabel}
-          />
-        )}
         <button
           type="button"
           aria-label={prevLabel}

package/src/components/ui/tab-navigation.tsx

@@ -58,10 +58,17 @@ export interface TabItem {
   /**
    * 0..1. Set on the ACTIVE tab, the underline stops being a selection marker
    * and becomes a progress line: its width is this fraction of the tab, and it
-   * moves there linearly over `progressTransitionMs`. A timed, auto-advancing
+   * moves there linearly over `progressTransitionMs`. Start it above 0 (the
+   * first step of N is 1/N): at 0 the open tab has no underline at all. A timed, auto-advancing
    * strip (a looping demo) uses it; `0` snaps back with no animation.
    */
   progress?: number;
+  /**
+   * The tab's own colour (a CSS colour, such as the hex an agent's identity
+   * stores): its underline and its icon take it while the tab is open. Omitted,
+   * they are the platform's accent.
+   */
+  accent?: string;
 }
 
 export interface TabNavigationUrlSyncOptions {
@@ -334,7 +341,34 @@ const TabBar = memo(function TabBarImpl({
   // A tab that reports `progress` turns the underline into a progress line.
   const activeProgress = tabs.find(tab => tab.id === activeTab)?.progress;
   const hasProgress = typeof activeProgress === 'number';
-  const progress = hasProgress ? Math.max(0, Math.min(1, activeProgress)) : 1;
+  // A progress line always GROWS from the start of its tab. A run that starts
+  // over (another tab opened, by the rotation or by choice, or the same tab
+  // chosen again: its progress fell back) is first drawn EMPTY, with no
+  // transition, and only then let run to its value. Without that the line
+  // either slid across from the last tab, shrank back, or appeared already
+  // part-way and sat still until the next step.
+  const target = hasProgress ? Math.max(0, Math.min(1, activeProgress)) : 1;
+  // It starts on no tab at all, so the FIRST paint is a run starting over too:
+  // a page load, the rotation and a click all begin the line the same way.
+  const [run, setRun] = useState<{ tab: string | null; progress: number }>({ tab: null, progress: 0 });
+  const startsOver = hasProgress && (run.tab !== activeTab || target < run.progress);
+  // The same run moving forward: follow it (state derived from props during render).
+  if (hasProgress && !startsOver && run.progress !== target) setRun({ tab: activeTab, progress: target });
+  useEffect(() => {
+    if (!startsOver) return undefined;
+    // Two frames: the empty line has to be painted before it is let run.
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setRun({ tab: activeTab, progress: target }));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [startsOver, activeTab, target]);
+  const progress = startsOver ? 0 : target;
+  // The open tab's own colour, when it has one; else the platform's accent.
+  const activeAccent = tabs.find(tab => tab.id === activeTab)?.accent;
   const indicatorStyle: React.CSSProperties = {
     width: `${indicator.width * progress}px`,
     transform: `translateX(${indicator.left}px)`,
@@ -362,7 +396,7 @@ const TabBar = memo(function TabBarImpl({
           `relative` makes this the offsetParent the underline is measured against. */}
       <div
         ref={scrollRef}
-        className="scrollbar-hide relative flex h-full items-center justify-start gap-[var(--spacing-system-xxs)] overflow-x-auto overflow-y-hidden"
+        className="scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden"
       >
         {tabs.map(tab => {
           const isActive = activeTab === tab.id;
@@ -375,28 +409,19 @@ const TabBar = memo(function TabBarImpl({
               onClick={() => onTabChange(tab.id)}
               aria-label={tab.badge ? `${tab.label} (${tab.badge})` : undefined}
               className={cn(
-                'relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
+                'group relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
                 tabAlign === 'start' ? 'justify-start text-left' : 'justify-center',
                 // Named rather than `transition-all`: the only thing that moves
-                // here is colour. `all` also made the browser re-check every
-                // property each frame, including the background GRADIENT — which
-                // never animated anyway, since the inactive state has no
-                // background-image to interpolate from.
+                // here is colour.
                 'border-none bg-transparent outline-none transition-colors duration-200',
                 // `outline-none` above drops the browser's own focus ring, so
                 // put one back or the strip is un-navigable by keyboard — you
                 // can tab through it with nothing to show where you are. Inset,
-                // so it stays within the button instead of overlapping the tab
-                // sitting 4px away.
+                // so it stays within the button: the tabs touch.
                 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
                 stretchTabs && 'flex-1',
                 tab.avatar && 'gap-[var(--spacing-system-xsf)]',
-                // Known limitation: ODS color vars hold hex values, so Tailwind
-                // alpha modifiers (to-ods-accent/10) silently produce no CSS.
-                // color-mix() accepts hex, so we derive the 10%-alpha stop from the token.
-                isActive
-                  ? 'bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'
-                  : 'hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]',
+                // The open tab is marked by the underline alone: no surface of its own.
               )}
             >
               {tab.avatar ? (
@@ -409,8 +434,11 @@ const TabBar = memo(function TabBarImpl({
                   <tab.icon
                     className={cn(
                       'h-4 w-4 transition-colors content-md:h-6 content-md:w-6',
-                      isActive ? 'text-ods-accent' : 'text-ods-text-secondary',
+                      isActive
+                        ? !tab.accent && 'text-ods-accent'
+                        : 'text-ods-text-secondary group-hover:text-ods-text-primary',
                     )}
+                    style={isActive && tab.accent ? { color: tab.accent } : undefined}
                   />
                   {tab.indicator && <StatusDot indicator={tab.indicator} className="absolute right-0 top-[-3px]" />}
                 </div>
@@ -425,7 +453,7 @@ const TabBar = memo(function TabBarImpl({
                   <span
                     className={cn(
                       'whitespace-nowrap transition-colors text-h4',
-                      isActive ? 'text-ods-text-primary' : 'text-ods-text-secondary',
+                      isActive ? 'text-ods-text-primary' : 'text-ods-text-secondary group-hover:text-ods-text-primary',
                     )}
                   >
                     {tab.label}
@@ -471,11 +499,11 @@ const TabBar = memo(function TabBarImpl({
           // tests) rather than incidental styling.
           data-testid="tab-navigation-underline"
           className={cn(
-            'pointer-events-none absolute bottom-0 left-0 bg-ods-accent motion-reduce:transition-none',
-            hasProgress ? 'h-0.5' : 'h-1',
+            'pointer-events-none absolute bottom-0 left-0 h-1 motion-reduce:transition-none',
+            !activeAccent && 'bg-ods-accent',
             !hasProgress && shouldAnimateIndicator && 'transition-[transform,width,opacity] duration-200 ease-out',
           )}
-          style={indicatorStyle}
+          style={activeAccent ? { ...indicatorStyle, backgroundColor: activeAccent } : indicatorStyle}
         />
       </div>