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

package/dist/components/ui/button/button-styles.js

@@ -1,7 +1,8 @@
 "use client";
 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",
-  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",
+  // `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 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: "bg-ods-error text-ods-text-on-accent hover:bg-ods-error-hover active:bg-ods-error-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
   warning: "bg-ods-warning text-ods-text-on-accent hover:bg-ods-warning-hover active:bg-ods-warning-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
@@ -20,7 +21,39 @@ 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
@@ -81,7 +114,129 @@ const BUTTON_SIZE_CLASS = {
   // hosts stop re-implementing a <button> to escape the 20px svg cap.
   "icon-glyph": "h-14 w-14 p-0 [&_svg]:h-14 [&_svg]:w-14"
 };
+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";
+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(" ")
+};
 export {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS,
   buttonSurfaceClasses,
   outlineBorderClasses,

package/dist/components/ui/button/button.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 /** The `icon-sm` button's size (its `h-8 w-8`), for a layout that must leave room for one. */
 export declare const BUTTON_ICON_SM_SIZE = "2rem";
 declare const buttonVariants: (props?: ({
-    variant?: "accent" | "link" | "outline" | "transparent" | "destructive" | "warning" | "inverted" | "glyph" | "overlay" | null | undefined;
+    variant?: "accent" | "link" | "cell" | "row" | "tab" | "bare" | "outline" | "transparent" | "destructive" | "warning" | "inverted" | "glyph" | "overlay" | "field" | "rail" | "segment" | "chip" | "card" | null | undefined;
     size?: "wrap" | "small" | "default" | "icon" | "small-legacy" | "compact" | "icon-sm" | "icon-inline" | "icon-glyph" | null | undefined;
     font?: "bold" | "regular" | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/ui/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc;;;;;;;8EAkEnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAmNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,8FAA8F;AAC9F,eAAO,MAAM,mBAAmB,SAAS,CAAC;AAE1C,QAAA,MAAM,cAAc;;;;;;;8EA8FnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAyNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/ui/button/button.js

@@ -5,7 +5,9 @@ import { cva } from "class-variance-authority";
 import React from "react";
 import Link from "../../../embed-shims/next-link.js";
 import { cn } from "../../../utils/cn.js";
+import { loadingItemProps } from "../loading-scope.js";
 import {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS,
   buttonSurfaceClasses,
   outlineBorderClasses,
@@ -33,7 +35,18 @@ const buttonVariants = cva(
         inverted: buttonSurfaceClasses.inverted,
         glyph: buttonSurfaceClasses.glyph,
         overlay: buttonSurfaceClasses.overlay,
-        link: buttonSurfaceClasses.link
+        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
@@ -65,6 +78,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.
@@ -205,7 +235,8 @@ const Button = React.forwardRef(function ButtonImpl({
   ...props
 }, ref) {
   const isDisabled = disabled || loading;
-  const useSplitLayout = !!splitIcon && (size === "default" || size === "small" || size === void 0);
+  const kind = variant && variant in BUTTON_KIND_CLASS ? variant : null;
+  const useSplitLayout = !kind && !!splitIcon && (size === "default" || size === "small" || size === void 0);
   if (useSplitLayout) {
     const safeSize = size ?? "default";
     const safeVariant = variant ?? "accent";
@@ -247,6 +278,7 @@ const Button = React.forwardRef(function ButtonImpl({
           className: cn(shellClasses, isDisabled && "pointer-events-none"),
           onClick,
           "aria-label": props["aria-label"],
+          ...loadingItemProps(props),
           children: splitContent
         }
       );
@@ -270,13 +302,14 @@ const Button = React.forwardRef(function ButtonImpl({
           tabIndex: isDisabled ? -1 : void 0,
           className: cn(shellClasses, isDisabled && "pointer-events-none"),
           onClick: splitAnchor.onClick,
+          ...loadingItemProps(props),
           children: splitContent
         }
       );
     }
     return /* @__PURE__ */ jsx("button", { ref, className: shellClasses, disabled: isDisabled, onClick, ...props, children: splitContent });
   }
-  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);
   if (asChild) {
     return /* @__PURE__ */ jsx(Slot, { ref, className: classes, ...props, children });
   }

package/dist/components/ui/button/index.d.ts

@@ -1,4 +1,4 @@
 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/ui/button/index.js

@@ -1,6 +1,7 @@
 export * from "./button.js";
 export * from "./split-button.js";
-import { BUTTON_SIZE_CLASS } from "./button-styles.js";
+import { BUTTON_KIND_CLASS, BUTTON_SIZE_CLASS } from "./button-styles.js";
 export {
+  BUTTON_KIND_CLASS,
   BUTTON_SIZE_CLASS
 };

package/dist/components/ui/button/split-button.d.ts

@@ -1,13 +1,6 @@
-import { type VariantProps } from 'class-variance-authority';
 import React from 'react';
-declare const splitHalfVariants: (props?: ({
-    variant?: "accent" | "outline" | "transparent" | "destructive" | "warning" | null | undefined;
-    size?: "small" | "default" | null | undefined;
-    side?: "main" | "icon" | null | undefined;
-    soloOnMobile?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-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;
     /** The icon half is interactive but has no visible text — needs an accessible name. */

package/dist/components/ui/button/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,QAAA,MAAM,iBAAiB;;;;;8EA8DrB,CAAC;AAEH,KAAK,kBAAkB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AACzF,KAAK,eAAe,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEnF,UAAU,qBAAqB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,EAAE,qBAAqB,CAAC;CACnC;AA6DD,QAAA,MAAM,WAAW,yFAiEf,CAAC;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,kBAAkB,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,aAAa,GAAG,SAAS,CAAC;AAC3F,KAAK,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3C,UAAU,qBAAqB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAsDD,QAAA,MAAM,WAAW,yFAiEf,CAAC;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,CAAC"}

package/dist/components/ui/button/split-button.js

@@ -1,79 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 import React from "react";
-import Link from "../../../embed-shims/next-link.js";
 import { cn } from "../../../utils/cn.js";
-import { buttonSurfaceClasses, splitDividerColorClasses, splitGlyphSizeClasses } from "./button-styles.js";
-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 }
-});
+import { Button } from "./button.js";
 function Half({
   variant,
   size,
@@ -89,25 +18,23 @@ function Half({
   ariaLabel,
   children
 }) {
-  const classes = cn(splitHalfVariants({ variant, size, side, soloOnMobile }), grow && "flex-1");
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      Link,
-      {
-        href,
-        prefetch,
-        target: openInNewTab ? "_blank" : void 0,
-        rel: openInNewTab ? "noopener noreferrer" : void 0,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : void 0,
-        "aria-label": ariaLabel,
-        className: cn(classes, disabled && "pointer-events-none"),
-        onClick,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("button", { type, className: classes, disabled, "aria-label": ariaLabel, onClick, children });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      variant,
+      size: side === "main" ? size : size === "small" ? "small" : "icon",
+      attach: side === "main" ? "start" : "end",
+      href,
+      openInNewTab,
+      prefetch,
+      disabled,
+      "aria-label": ariaLabel,
+      onClick,
+      className: cn(grow && "flex-1", side === "icon" && soloOnMobile && "max-md:hidden"),
+      children
+    }
+  );
 }
 const SplitButton = React.forwardRef(function SplitButtonImpl({
   variant = "accent",

package/dist/components/ui/checkbox-block.d.ts

@@ -4,7 +4,8 @@ interface CheckboxBlockProps {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    /** Primary label (supports rich text / ReactNode for inline links) */
+    /** Primary label (supports rich text / ReactNode for inline links). `null` is a label still being read: while the
+     *  block loads it draws an `h4` bar in the label's own line. */
     label: ReactNode;
     /** Optional secondary description below the label (supports rich text / ReactNode) */
     description?: ReactNode;
@@ -22,7 +23,14 @@ interface CheckboxBlockProps {
     required?: boolean;
     /** Error message displayed below the block (also triggers red border) */
     error?: string;
+    /**
+     * Whether the box is checked is still being read: the label and description are drawn for real and the box is a
+     * skeleton of the box's own size. A loading scope does the same.
+     */
+    loading?: boolean;
     className?: string;
+    /** `data-*` markers (`data-loading-item` on a read list's block), on the block's root in both forms. */
+    [key: `data-${string}`]: unknown;
 }
 declare const CheckboxBlock: import("react").ForwardRefExoticComponent<CheckboxBlockProps & import("react").RefAttributes<HTMLButtonElement>>;
 export { CheckboxBlock };

package/dist/components/ui/checkbox-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-block.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox-block.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAMtE,UAAU,kBAAkB;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qFACiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,kHA8GlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"checkbox-block.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox-block.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAQtE,UAAU,kBAAkB;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;oEACgE;IAChE,KAAK,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+EAA+E;IAC/E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;qFACiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AASD,QAAA,MAAM,aAAa,kHA2HlB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,CAAC"}