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

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
@@ -125,3 +158,146 @@ export const BUTTON_SIZE_CLASS = {
 } as const;
 
 export type ButtonSizeKey = keyof typeof BUTTON_SIZE_CLASS;
+
+const KIND_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus';
+const KIND_FOCUS_INSET =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus';
+
+/**
+ * The button KINDS that are not a plain push button: each owns its whole box and look, which no `size` changes, and
+ * is reused by every control of its kind. A kind's selected / open / invalid state is read from the element's own
+ * attributes, never from a class at the call site:
+ *
+ *  - `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-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): 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
+  // and states, the value on the left.
+  field: [
+    'flex w-full items-center gap-[var(--spacing-system-xsf)] border px-[var(--spacing-system-sf)] text-left',
+    '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',
+    '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. 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-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.
+  tab: [
+    'group relative flex shrink-0 items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
+    'bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200',
+    'hover:text-ods-text-primary data-[state=active]:text-ods-text-primary',
+    'data-[emphasis=fade]:data-[state=active]:bg-gradient-to-b data-[emphasis=fade]:data-[state=active]:from-transparent data-[emphasis=fade]:data-[state=active]:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]',
+    'data-[emphasis=fade]:hover:bg-gradient-to-b data-[emphasis=fade]:hover:from-transparent data-[emphasis=fade]:hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]',
+    'disabled:cursor-not-allowed disabled:text-ods-text-disabled',
+    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',
+  ].join(' '),
+  // A whole card or tile that is one click target (a card's hit area, a media tile, a summary that expands): the
+  // 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. 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-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(' '),
+} as const;
+
+export type ButtonKind = keyof typeof BUTTON_KIND_CLASS;

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

@@ -5,8 +5,11 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import React from 'react';
 import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
+import { loadingItemProps } from '../loading-scope';
 import {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS,
+  type ButtonKind,
   buttonSurfaceClasses,
   outlineBorderClasses,
   splitDividerColorClasses,
@@ -38,6 +41,17 @@ 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: '',
       },
       size: BUTTON_SIZE_CLASS,
       // Label typography axis (Figma 133-740). `bold` is the classic h3-bold
@@ -69,6 +83,23 @@ const buttonVariants = cva(
     compoundVariants: [
       // The trailing half as an icon button is the design's 40px chevron cell, at every breakpoint.
       { attach: 'end', size: 'icon', class: 'w-10 px-0 md:w-10' },
+      { attach: 'end', size: 'small', class: 'w-6 px-0 md:w-8' },
+      // The seam between two attached halves of a filled button: a 1px darker edge on the trailing half.
+      {
+        attach: 'end',
+        variant: 'accent',
+        class: cn('border-l', splitDividerColorClasses.accent, 'disabled:border-ods-disabled'),
+      },
+      {
+        attach: 'end',
+        variant: 'destructive',
+        class: cn('border-l', splitDividerColorClasses.destructive, 'disabled:border-ods-disabled'),
+      },
+      {
+        attach: 'end',
+        variant: 'warning',
+        class: cn('border-l', splitDividerColorClasses.warning, 'disabled:border-ods-disabled'),
+      },
       { size: 'small', class: '[&_svg]:h-4 [&_svg]:w-4' },
       // Comes after the size classes, so cn()'s tailwind-merge resolves the
       // ods-typography group in favour of text-h4.
@@ -264,10 +295,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
   ref,
 ) {
   const isDisabled = disabled || loading;
+  const kind = variant && variant in BUTTON_KIND_CLASS ? (variant as ButtonKind) : null;
 
   // splitIcon is only supported for default/small sizes. With other sizes
   // (icon, small-legacy) we silently fall back to the normal layout.
-  const useSplitLayout = !!splitIcon && (size === 'default' || size === 'small' || size === undefined);
+  const useSplitLayout = !kind && !!splitIcon && (size === 'default' || size === 'small' || size === undefined);
 
   if (useSplitLayout) {
     const safeSize = size ?? 'default';
@@ -321,6 +353,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
           // The click still reaches the caller (a download is what analytics counts).
           onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
           aria-label={props['aria-label']}
+          {...loadingItemProps(props)}
         >
           {splitContent}
         </Link>
@@ -355,6 +388,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
           tabIndex={isDisabled ? -1 : undefined}
           className={cn(shellClasses, isDisabled && 'pointer-events-none')}
           onClick={splitAnchor.onClick}
+          // A list's markers (`data-loading-item`) survive on an anchor too.
+          {...loadingItemProps(props)}
         >
           {splitContent}
         </Link>
@@ -368,7 +403,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
     );
   }
 
-  const classes = cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
+  const classes = kind
+    ? cn(BUTTON_KIND_CLASS[kind], loading && 'relative', fullWidth && 'w-full', className)
+    : cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
 
   // asChild: consumer fully controls the rendered element; we just stamp our classes.
   if (asChild) {

package/src/components/ui/button/index.ts

@@ -1,3 +1,3 @@
 export * from './button';
 export * from './split-button';
-export { BUTTON_SIZE_CLASS, type ButtonSizeKey } from './button-styles';
+export { BUTTON_KIND_CLASS, BUTTON_SIZE_CLASS, type ButtonKind, type ButtonSizeKey } from './button-styles';

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

@@ -1,89 +1,15 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
 import React from 'react';
-import Link from '../../../embed-shims/next-link';
 import { cn } from '../../../utils/cn';
-import { buttonSurfaceClasses, splitDividerColorClasses, splitGlyphSizeClasses } from './button-styles';
+import { Button } from './button';
 
-// Two independent interactive halves: each a `<button>` or `<a>`. The seam is
-// a 1px border on the left edge of the icon half, colored per variant. For a
-// single-target variant (decorative trailing icon), use `<Button splitIcon>`.
+// Two independent interactive halves, each the lib's `Button` (a `<button>`, or a link with `href`) attached to the
+// other (`attach="start"` / `"end"`): one surface with a seam. For a single-target variant (decorative trailing icon),
+// use `<Button splitIcon>`.
 
-const splitHalfBase = [
-  'relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]',
-  'whitespace-nowrap transition-colors duration-200',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10',
-  'disabled:pointer-events-none',
-  '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-];
-
-const splitHalfVariants = cva(splitHalfBase, {
-  variants: {
-    variant: {
-      accent: buttonSurfaceClasses.accent,
-      outline: buttonSurfaceClasses.outline, // Outline border lives in compoundVariants so we can omit the seam edge.
-      transparent: buttonSurfaceClasses.transparent,
-      destructive: buttonSurfaceClasses.destructive,
-      warning: buttonSurfaceClasses.warning,
-    },
-    size: {
-      default: `h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12 ${splitGlyphSizeClasses}`,
-      small: 'h-6 px-[var(--spacing-system-xs)] text-h5 md:h-8 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4',
-    },
-    side: { main: '', icon: '' },
-    soloOnMobile: { true: '', false: '' },
-  },
-  compoundVariants: [
-    // Rounded corners + per-variant seam. The icon-side's left border is the divider.
-    { variant: 'accent', side: 'main', class: 'rounded-l-md' },
-    {
-      variant: 'accent',
-      side: 'icon',
-      class: cn(
-        'rounded-r-md border-l',
-        splitDividerColorClasses.accent,
-        'disabled:border-ods-disabled aria-disabled:border-ods-disabled',
-      ),
-    },
-    { variant: 'destructive', side: 'main', class: 'rounded-l-md' },
-    {
-      variant: 'destructive',
-      side: 'icon',
-      class: cn(
-        'rounded-r-md border-l',
-        splitDividerColorClasses.destructive,
-        'disabled:border-ods-disabled aria-disabled:border-ods-disabled',
-      ),
-    },
-    { variant: 'warning', side: 'main', class: 'rounded-l-md' },
-    {
-      variant: 'warning',
-      side: 'icon',
-      class: cn(
-        'rounded-r-md border-l',
-        splitDividerColorClasses.warning,
-        'disabled:border-ods-disabled aria-disabled:border-ods-disabled',
-      ),
-    },
-    { variant: 'outline', side: 'main', class: 'rounded-l-md border-y border-l border-ods-border' },
-    { variant: 'outline', side: 'icon', class: 'rounded-r-md border border-ods-border' },
-    { variant: 'transparent', side: 'main', class: 'rounded-md' },
-    { variant: 'transparent', side: 'icon', class: cn('rounded-md', splitDividerColorClasses.transparent) },
-
-    // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
-    { side: 'icon', size: 'default', class: 'w-10 px-0' },
-    { side: 'icon', size: 'small', class: 'w-6 px-0 md:w-8' },
-
-    { side: 'icon', soloOnMobile: true, class: 'max-md:hidden' },
-    { side: 'main', soloOnMobile: true, class: 'max-md:rounded-r-md' },
-    { variant: 'outline', side: 'main', soloOnMobile: true, class: 'max-md:border-r' },
-  ],
-  defaultVariants: { variant: 'accent', size: 'default', side: 'main', soloOnMobile: false },
-});
-
-type SplitButtonVariant = NonNullable<VariantProps<typeof splitHalfVariants>['variant']>;
-type SplitButtonSize = NonNullable<VariantProps<typeof splitHalfVariants>['size']>;
+type SplitButtonVariant = 'accent' | 'outline' | 'transparent' | 'destructive' | 'warning';
+type SplitButtonSize = 'default' | 'small';
 
 interface SplitButtonIconAction {
   icon: React.ReactNode;
@@ -157,30 +83,23 @@ function Half({
   ariaLabel,
   children,
 }: HalfOptions) {
-  const classes = cn(splitHalfVariants({ variant, size, side, soloOnMobile }), grow && 'flex-1');
-
-  if (href) {
-    return (
-      <Link
-        href={href}
-        prefetch={prefetch}
-        target={openInNewTab ? '_blank' : undefined}
-        rel={openInNewTab ? 'noopener noreferrer' : undefined}
-        aria-disabled={disabled || undefined}
-        tabIndex={disabled ? -1 : undefined}
-        aria-label={ariaLabel}
-        className={cn(classes, disabled && 'pointer-events-none')}
-        onClick={onClick}
-      >
-        {children}
-      </Link>
-    );
-  }
-
   return (
-    <button type={type} className={classes} disabled={disabled} aria-label={ariaLabel} onClick={onClick}>
+    <Button
+      type={type}
+      variant={variant}
+      size={side === 'main' ? size : size === 'small' ? 'small' : 'icon'}
+      attach={side === 'main' ? 'start' : 'end'}
+      href={href}
+      openInNewTab={openInNewTab}
+      prefetch={prefetch}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      // Layout only: the main half fills the group's free space; a new-tab icon half is dropped below md.
+      className={cn(grow && 'flex-1', side === 'icon' && soloOnMobile && 'max-md:hidden')}
+    >
       {children}
-    </button>
+    </Button>
   );
 }