@stll/ui 0.59.1 → 0.61.0

package/README.md

@@ -11,7 +11,7 @@ cannot reach into product code by accident. Lint enforces that boundary; the
 export map below is what "part of the design system" means.
 
 Peer dependencies: `react`, `react-dom`, `@base-ui/react`, `tailwindcss` (v4),
-and `@tanstack/react-virtual`.
+`@dnd-kit/core`, `@dnd-kit/sortable`, and `@tanstack/react-virtual`.
 
 Derived in part from [coss ui](https://github.com/cosscom/ui) (MIT); see
 `THIRD_PARTY_NOTICES`.
@@ -104,11 +104,101 @@ unavailable state.
 minor. They will be removed after that; the export guard checks that both
 spellings land on the same module for as long as they both exist.
 
-## Kanban boards
+## Sortable boards
 
 `@stll/ui/kanban` provides board matrices, subgroup swimlanes, bounded virtual
-cells, and column bands. The caller owns card rendering, permissions, and
-persisted mutations.
+cells, and input/accessibility primitives. The caller keeps domain identifiers,
+card rendering, permissions, and persisted mutations. Wrap sortable boards in
+`KanbanSortableBoard`, render items through `useKanbanSortable`, and attach the
+returned bindings to `KanbanDragHandle` or `KanbanCardDragSurface`. This public
+contract supports external consumers with keyboard navigation across virtual rows
+and matrix cells, touch scrolling and long-press dragging, and host-controlled
+collapsed-band peeking. It remains supported independently of which interaction
+implementation the application board uses.
+
+```tsx
+import {
+  KanbanDragHandle,
+  KanbanSortableBoard,
+  KanbanVirtualCell,
+  useKanbanSortable,
+} from "@stll/ui/kanban";
+
+const Card = ({ id }: { id: string }) => {
+  const { activator, setNodeRef, style } = useKanbanSortable({
+    activation: { type: "handle" },
+    id,
+  });
+  if (activator.type !== "handle") {
+    return null;
+  }
+  return (
+    <article ref={setNodeRef} style={style}>
+      <KanbanDragHandle bindings={activator.bindings} label="Move card" />
+    </article>
+  );
+};
+
+<KanbanSortableBoard onDragEnd={handleDragEnd}>
+  <KanbanVirtualCell
+    rows={cardIds}
+    getRowKey={(id) => id}
+    renderRow={(id) => <Card id={id} />}
+    pagination={{ type: "none" }}
+    sortable={{
+      dropTarget: { id: "column", position: { column: 0, lane: 0 } },
+      getRowId: (id) => id,
+    }}
+  />
+</KanbanSortableBoard>;
+```
+
+For collapsed subgroup bands, the host maps each registered drop target to its
+band and clears the drag state on both drop and cancellation. Populate
+`bandIdByDropTargetId` from the same cell/slot registrations that supply the
+sortable target IDs (including folded-band slots).
+
+```tsx
+const [dragState, setDragState] = useState<
+  { type: "idle" } | { type: "dragging"; bandId: string | null }
+>({ type: "idle" });
+
+<KanbanSortableBoard
+  onDragStart={() => setDragState({ type: "dragging", bandId: null })}
+  onDragOver={({ over }) => {
+    setDragState({
+      type: "dragging",
+      bandId:
+        over === null ? null : (bandIdByDropTargetId.get(over.id) ?? null),
+    });
+  }}
+  onDragEnd={(event) => {
+    setDragState({ type: "idle" });
+    handleDragEnd(event);
+  }}
+  onDragCancel={() => setDragState({ type: "idle" })}
+>
+  <KanbanSubgroupBoard
+    {...boardProps}
+    isDragging={dragState.type === "dragging"}
+    dragOverBandId={dragState.type === "dragging" ? dragState.bandId : null}
+  />
+</KanbanSortableBoard>;
+```
+
+The default sensors are mouse (8px movement), touch (150ms delay with 8px
+tolerance), and keyboard. Scroll containers retain `touch-action: auto`.
+`KanbanDragHandle` and `{ type: "item" }` activation disable touch panning on
+their activation surfaces. Use `{ type: "card" }` with
+`KanbanCardDragSurface` to preserve scrolling from the card while supporting
+long-press dragging. `KanbanSortableBoard` also accepts
+custom `sensors`, `accessibility`, collision detection, keyboard coordinates,
+auto-scroll options, and an `overlay` render function.
+
+`getKanbanHorizontalEdge` takes `input: "pointer"` with a current client-x and
+`direction: "ltr" | "rtl"` for mouse and touch input. Keyboard calls use
+`input: "keyboard"` and require source and target indices, so every move has a
+logical edge without relying on ambiguous geometry.
 
 For Group/Sub-group boards, build one canonical matrix and render it with the
 installable layout and virtual cell:
@@ -145,6 +235,32 @@ const matrix = buildKanbanBoardMatrix({
 />;
 ```
 
+When rows inside a virtual cell are sortable, give the cell a unique drop target
+and its ordered matrix position. The cell registers its actual scroll element,
+including when `rows` is empty, and owns the matching `SortableContext`.
+
+```tsx
+<KanbanVirtualCell
+  getRowKey={(row) => row.id}
+  pagination={{ type: "none" }}
+  renderRow={(row) => <Card row={row} />}
+  rows={cell.rows}
+  sortable={{
+    dropTarget: {
+      id: cellId,
+      position: { column: columnIndex, lane: laneIndex },
+    },
+    getRowId: (row) => row.id,
+  }}
+/>
+```
+
+The default keyboard coordinates move through items in their cell before
+crossing into adjacent columns or subgroup lanes; empty cells remain reachable.
+Pointer and touch drops outside registered board targets cancel. Choose an
+explicit `{ type: "handle" }` activation for the 44px handle, or `{ type:
+"item" }` when the whole item is the intended activation surface.
+
 ### Column bands
 
 Columns whose options carry a `band` (`KanbanColumnBand`, usually a status

package/dist/components/accordion.d.ts

@@ -2,11 +2,25 @@ import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.d.ts
 declare const Accordion: <Value = unknown>(props: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
 declare const AccordionItem: ({ className, ...props }: Accordion$1.Item.Props) => import("react").JSX.Element;
-declare const AccordionTrigger: ({ className, children, size, ...props }: Accordion$1.Trigger.Props & {
-  size?: "default" | "compact";
+/**
+ * - `default`: a section heading of a page or panel.
+ * - `sm`: body-size type at a 44px row, for a disclosure inside a dialog or
+ *   card ("Show all permissions", advanced options).
+ * - `compact`: small type in a dense list.
+ */
+type AccordionSize = "default" | "sm" | "compact";
+/**
+ * - `default`: the trigger reads as a heading.
+ * - `muted`: a quiet "show more" line in muted body weight that brightens on
+ *   hover, for a disclosure that is secondary to what is around it.
+ */
+type AccordionTriggerVariant = "default" | "muted";
+declare const AccordionTrigger: ({ className, children, size, variant, ...props }: Accordion$1.Trigger.Props & {
+  size?: AccordionSize;
+  variant?: AccordionTriggerVariant;
 }) => import("react").JSX.Element;
 declare const AccordionPanel: ({ className, children, size, ...props }: Accordion$1.Panel.Props & {
-  size?: "default" | "compact";
+  size?: AccordionSize;
 }) => import("react").JSX.Element;
 //#endregion
 export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -13,10 +13,24 @@ const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion
 	"data-slot": "accordion-item",
 	...props
 });
-const AccordionTrigger = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+const TRIGGER_SIZE_CLASS_NAME = {
+	compact: "py-2 text-xs",
+	default: "py-4 text-sm",
+	sm: "min-h-11 items-center py-2 text-sm"
+};
+const PANEL_SIZE_CLASS_NAME = {
+	compact: "pb-3",
+	default: "pb-4",
+	sm: "pb-2"
+};
+const TRIGGER_VARIANT_CLASS_NAME = {
+	default: "font-medium",
+	muted: "text-muted-foreground hover:text-foreground font-normal"
+};
+const AccordionTrigger = ({ className, children, size = "default", variant = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
-		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", size === "compact" ? "py-2 text-xs" : "py-4 text-sm", className),
+		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", TRIGGER_SIZE_CLASS_NAME[size], TRIGGER_VARIANT_CLASS_NAME[variant], className),
 		"data-slot": "accordion-trigger",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
@@ -30,7 +44,7 @@ const AccordionPanel = ({ className, children, size = "default", ...props }) =>
 	"data-slot": "accordion-panel",
 	...props,
 	children: /* @__PURE__ */ jsx("div", {
-		className: cn("pt-0", size === "compact" ? "pb-3" : "pb-4", className),
+		className: cn("pt-0", PANEL_SIZE_CLASS_NAME[size], className),
 		children
 	})
 });

package/dist/components/button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonContract } from "./button.shared.js";
+import { ButtonContract, ButtonSize, ButtonVariant } from "./button.shared.js";
 import { ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button.d.ts
@@ -12,10 +12,31 @@ import { useRender } from "@base-ui/react/use-render";
  * swaps the cursor so the control still reads as unavailable on hover.
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
+declare const BUTTON_LAYOUT_CLASS_NAMES: {
+  readonly wrap: "h-auto min-h-11 items-start justify-start py-2 text-start whitespace-normal sm:h-auto";
+};
 declare const buttonVariants: (props?: ({
-  size?: "chip" | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "chip" | "default" | "icon" | "icon-2xs" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "inline" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
+  layout?: "wrap" | null | undefined;
+  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "muted-destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The outline a plain button's focus ring follows, matching its content:
+ * `box` for a card, row or block of text (the container radius), `round` for
+ * an avatar, a dot or a pill.
+ */
+declare const BUTTON_PLAIN_SHAPE_CLASS: {
+  readonly box: "rounded-lg";
+  readonly round: "rounded-full";
+};
+type ButtonPlainShape = keyof typeof BUTTON_PLAIN_SHAPE_CLASS;
+/**
+ * Where the focus ring is drawn. `outside` (the default) rings the box with a
+ * gap; `inside` draws it within the box, for a target that fills a clipping
+ * container (an `overflow-hidden` card, a table cell, a thumbnail grid) where
+ * an outside ring would be cut off.
+ */
+type ButtonFocusRing = "outside" | "inside";
 /** What a button's box holds: a glyph alone, or a visible label. */
 declare const BUTTON_CONTENT: {
   readonly icon: "icon";
@@ -39,17 +60,47 @@ declare const BUTTON_SIZE_CONTENT: {
   readonly "icon-lg": "icon";
   readonly "icon-sm": "icon";
   readonly "icon-xl": "icon";
+  readonly "icon-2xs": "icon";
   readonly "icon-xs": "icon";
+  readonly inline: "text";
   readonly lg: "text";
   readonly row: "text";
   readonly sm: "text";
   readonly xl: "text";
   readonly xs: "text";
 };
+/**
+ * `selected` (./button.shared.ts) sets `data-pressed`, which every variant
+ * paints. The ARIA state (`aria-pressed`, `aria-checked`, `aria-current` or
+ * `aria-selected`) stays the caller's. For a set of mutually exclusive
+ * options prefer `ToggleGroup`, which owns that state.
+ */
 type ButtonProps = Omit<ButtonContract, "children" | "disabled"> & {
+  layout?: keyof typeof BUTTON_LAYOUT_CLASS_NAMES;
   tooltip?: ReactNode;
+  focusRing?: ButtonFocusRing | undefined;
+  /** `variant="plain"` only: the outline its focus ring follows. */
+  shape?: ButtonPlainShape | undefined;
   "data-accessible-disabled"?: "";
 } & useRender.ComponentProps<"button">;
-declare function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, "data-accessible-disabled": accessibleDisabled, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button({ className, variant: variantProp, size, render, layout, loading, icon, children, disabled, tooltip, selected, focusRing, shape, "data-accessible-disabled": accessibleDisabled, ...props }: ButtonProps): import("react").JSX.Element;
+/**
+ * A run with no box can anchor no tooltip or popup, and carries no variant,
+ * size or icon: its text is its look.
+ */
+type ButtonTextRunProps = Omit<ButtonProps, "children" | "className" | "focusRing" | "icon" | "loading" | "render" | "selected" | "shape" | "size" | "tooltip" | "variant"> & {
+  children: ReactNode;
+  className?: string | undefined;
+};
+/**
+ * A long run of prose that acts as one button: a citation or a
+ * cross-reference in reader text. A <button> is an atomic box even at
+ * `display: inline`, so its label cannot break across the paragraph's lines;
+ * here the text sits in a native <label>, an inline box that wraps and copies
+ * with the prose, and the label forwards a press anywhere on the run to the
+ * <button> it holds, which takes its accessible name from the label. Use
+ * `Button size="inline"` for a short action.
+ */
+declare const ButtonTextRun: ({ children, className, disabled, ...props }: ButtonTextRunProps) => import("react").JSX.Element;
 //#endregion
-export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, type ButtonFocusRing, type ButtonPlainShape, type ButtonProps, type ButtonSize, ButtonTextRun, type ButtonVariant, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition } from "../lib/button-disposition.js";
 import { MENU_ROW_CLASS_NAME } from "../lib/menu-row.js";
-import { BUTTON_VARIANT_TOKENS } from "./button.shared.js";
+import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
 import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -44,7 +44,9 @@ const BUTTON_SIZE_CLASS_NAMES = {
 	"icon-lg": "size-10 sm:size-9",
 	"icon-sm": "size-8 sm:size-7",
 	"icon-xl": "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+	"icon-2xs": "size-5 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-4 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3",
 	"icon-xs": "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+	inline: "inline h-auto rounded-sm border-0 p-0 text-start text-[length:inherit] leading-[inherit] font-normal whitespace-normal select-text before:rounded-[calc(var(--radius-sm)-1px)] sm:text-[length:inherit] [&_svg]:mx-0 [&_svg]:inline [&_svg]:align-[-0.125em] [&_svg:not(:last-child)]:me-1",
 	lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
 	row: `${MENU_ROW_CLASS_NAME} [&_svg]:mx-0`,
 	sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] text-sm sm:h-7 sm:text-xs",
@@ -52,26 +54,68 @@ const BUTTON_SIZE_CLASS_NAMES = {
 	xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
 };
 const BUTTON_VARIANT_CLASS_NAMES = {
-	default: `${tokens("default")} shadow-primary/24 [:hover,[data-pressed]]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none`,
-	destructive: `${tokens("destructive")} shadow-destructive/8 [:hover,[data-pressed]]:border-destructive/40 [:hover,[data-pressed]]:bg-destructive/14 [:active,[data-pressed]]:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none`,
-	"destructive-outline": `${tokens("destructive-outline")} dark:bg-input/32 [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
-	"destructive-ghost": `${tokens("destructive-ghost")} data-pressed:bg-destructive/10 [:hover,[data-pressed]]:bg-destructive/10`,
-	ghost: `${tokens("ghost")} data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent`,
-	link: `${tokens("link")} underline-offset-4 [:hover,[data-pressed]]:underline`,
-	muted: `${tokens("muted")} data-pressed:bg-accent data-pressed:text-foreground [:hover,[data-pressed]]:bg-accent [:hover,[data-pressed]]:text-foreground`,
-	outline: `${tokens("outline")} dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
-	secondary: `${tokens("secondary")} [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90`
+	default: `${tokens("default")} shadow-primary/24 data-pressed:bg-primary/80 [:hover:not([data-pressed])]:bg-primary/90 shadow-xs not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	destructive: `${tokens("destructive")} shadow-destructive/8 data-pressed:border-destructive/56 data-pressed:bg-destructive/20 [:hover:not([data-pressed])]:border-destructive/40 [:hover:not([data-pressed])]:bg-destructive/14 active:bg-destructive/18 shadow-xs not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	"destructive-outline": `${tokens("destructive-outline")} dark:bg-input/32 data-pressed:border-destructive/56 data-pressed:bg-destructive/8 [:hover:not([data-pressed])]:border-destructive/32 [:hover:not([data-pressed])]:bg-destructive/4 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	"destructive-ghost": `${tokens("destructive-ghost")} data-pressed:bg-destructive/14 data-pressed:inset-ring-destructive/32 [:hover:not([data-pressed])]:bg-destructive/10 data-pressed:inset-ring`,
+	ghost: `${tokens("ghost")} data-pressed:bg-accent data-pressed:inset-ring-input [:hover:not([data-pressed])]:bg-accent data-pressed:shadow-xs/5 data-pressed:inset-ring`,
+	link: `${tokens("link")} underline-offset-4 data-pressed:underline data-pressed:decoration-2 [:hover:not([data-pressed])]:underline`,
+	"muted-destructive": `${tokens("muted-destructive")} data-pressed:bg-destructive/14 data-pressed:text-destructive data-pressed:inset-ring-destructive/32 [:hover:not([data-pressed])]:bg-destructive/10 [:hover:not([data-pressed])]:text-destructive data-pressed:inset-ring`,
+	muted: `${tokens("muted")} data-pressed:bg-accent data-pressed:text-foreground data-pressed:inset-ring-input [:hover:not([data-pressed])]:bg-accent [:hover:not([data-pressed])]:text-foreground data-pressed:shadow-xs/5 data-pressed:inset-ring`,
+	outline: `${tokens("outline")} dark:bg-input/32 data-pressed:border-primary/48 data-pressed:bg-accent dark:data-pressed:bg-input/64 [:hover:not([data-pressed])]:bg-accent/50 dark:[:hover:not([data-pressed])]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
+	secondary: `${tokens("secondary")} data-pressed:bg-background data-pressed:inset-ring-input active:bg-secondary/80 [:hover:not([data-pressed])]:bg-secondary/90 data-pressed:shadow-xs/5 data-pressed:inset-ring`
 };
 const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+	compoundVariants: [{
+		className: "[:hover:not([data-pressed])]:bg-transparent",
+		size: "inline",
+		variant: [
+			"destructive-ghost",
+			"ghost",
+			"link",
+			"muted",
+			"muted-destructive"
+		]
+	}, {
+		className: "underline",
+		size: "inline",
+		variant: "link"
+	}],
 	defaultVariants: {
 		size: BUTTON_DEFAULT_SIZE,
 		variant: "default"
 	},
 	variants: {
 		size: BUTTON_SIZE_CLASS_NAMES,
+		layout: { wrap: "h-auto min-h-11 items-start justify-start py-2 text-start whitespace-normal sm:h-auto" },
 		variant: BUTTON_VARIANT_CLASS_NAMES
 	}
 });
+/**
+* `plain` (./button.shared.ts) on the web. It bypasses `buttonVariants` and
+* its box, border, type and press motion instead of undoing them class by
+* class, and keeps the disabled disposition, the tooltip and the focus ring.
+* It lays out like a native button (`inline-block`, content flowing from the
+* start), so a card's children stack as they would in a `div`; `className`
+* places it (`w-full`, `block`). `shape` gives it the outline its focus ring
+* follows. Like a native button it does not dim when disabled: the content
+* says it is unavailable.
+*
+* Selected, it draws the inset edge the other variants draw, as an outline
+* inside the box: an outline paints above the content, so a card's own
+* surface cannot cover it the way it would cover an inset shadow.
+*/
+const BUTTON_PLAIN_CLASS = "focus-visible:ring-ring focus-visible:ring-offset-background data-pressed:outline-primary/48 relative inline-block cursor-pointer text-start outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-default data-pressed:outline-2 data-pressed:-outline-offset-2 data-pressed:outline-solid";
+/**
+* The outline a plain button's focus ring follows, matching its content:
+* `box` for a card, row or block of text (the container radius), `round` for
+* an avatar, a dot or a pill.
+*/
+const BUTTON_PLAIN_SHAPE_CLASS = {
+	box: "rounded-lg",
+	round: "rounded-full"
+};
+const BUTTON_FOCUS_RING_INSIDE_CLASS = "focus-visible:ring-inset focus-visible:ring-offset-0";
 /** What a button's box holds: a glyph alone, or a visible label. */
 const BUTTON_CONTENT = {
 	icon: "icon",
@@ -95,7 +139,9 @@ const BUTTON_SIZE_CONTENT = {
 	"icon-lg": BUTTON_CONTENT.icon,
 	"icon-sm": BUTTON_CONTENT.icon,
 	"icon-xl": BUTTON_CONTENT.icon,
+	"icon-2xs": BUTTON_CONTENT.icon,
 	"icon-xs": BUTTON_CONTENT.icon,
+	inline: BUTTON_CONTENT.text,
 	lg: BUTTON_CONTENT.text,
 	row: BUTTON_CONTENT.text,
 	sm: BUTTON_CONTENT.text,
@@ -110,7 +156,8 @@ const implicitTooltip = (size, accessibleName) => {
 		default: return panic(`Unhandled button content: ${String(content)}`);
 	}
 };
-function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, "data-accessible-disabled": accessibleDisabled, ...props }) {
+function Button({ className, variant: variantProp, size, render, layout, loading, icon, children, disabled, tooltip, selected, focusRing = "outside", shape = "box", "data-accessible-disabled": accessibleDisabled, ...props }) {
+	const variant = variantProp ?? (size === "inline" ? "link" : void 0);
 	const typeValue = render ? void 0 : "button";
 	const tooltipContent = tooltip ?? implicitTooltip(size, props["aria-label"] ?? props.title);
 	const disposition = resolveButtonDisposition({
@@ -128,12 +175,14 @@ function Button({ className, variant, size, render, loading, icon, children, dis
 			size: "sm",
 			variant: "decorative"
 		}) : icon, children] }),
-		className: cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && variant !== "link" && buttonPressClass, buttonVariants({
+		className: cn(variant === "plain" ? cn(BUTTON_PLAIN_CLASS, BUTTON_PLAIN_SHAPE_CLASS[shape], className) : cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && size !== "inline" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,
-			variant
-		}), (isAccessibleDisabled || isActivationPreservingDisabled) && "cursor-not-allowed opacity-64"),
+			variant,
+			layout
+		})), focusRing === "inside" && BUTTON_FOCUS_RING_INSIDE_CLASS, (isAccessibleDisabled || isActivationPreservingDisabled) && "cursor-not-allowed opacity-64"),
 		"data-slot": "button",
+		"data-pressed": selected === true ? "" : void 0,
 		"aria-busy": loading || void 0,
 		...isAccessibleDisabled || isActivationPreservingDisabled ? {
 			"aria-disabled": true,
@@ -159,5 +208,38 @@ function Button({ className, variant, size, render, loading, icon, children, dis
 		trigger: button
 	});
 }
+/**
+* The run is the visible target: underlined like a link, ringed while its
+* button has keyboard focus (per line, so a wrapped run rings each line).
+*/
+const BUTTON_TEXT_RUN_CLASS = "has-focus-visible:ring-ring cursor-pointer rounded-xs underline underline-offset-2 box-decoration-clone select-text hover:decoration-2 has-focus-visible:ring-2 has-disabled:cursor-not-allowed has-disabled:opacity-64";
+const BUTTON_TEXT_RUN_TARGET_CLASS = "absolute size-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]";
+/**
+* A long run of prose that acts as one button: a citation or a
+* cross-reference in reader text. A <button> is an atomic box even at
+* `display: inline`, so its label cannot break across the paragraph's lines;
+* here the text sits in a native <label>, an inline box that wraps and copies
+* with the prose, and the label forwards a press anywhere on the run to the
+* <button> it holds, which takes its accessible name from the label. Use
+* `Button size="inline"` for a short action.
+*/
+const ButtonTextRun = ({ children, className, disabled, ...props }) => /* @__PURE__ */ jsxs("label", {
+	className: cn(BUTTON_TEXT_RUN_CLASS, className),
+	"data-slot": "button-text-run",
+	children: [/* @__PURE__ */ jsx(Button, {
+		...props,
+		className: BUTTON_TEXT_RUN_TARGET_CLASS,
+		disabled,
+		focusRing: "outside",
+		icon: void 0,
+		loading: false,
+		render: void 0,
+		selected: false,
+		shape: "box",
+		size: void 0,
+		tooltip: void 0,
+		variant: BUTTON_PLAIN_VARIANT
+	}), children]
+});
 //#endregion
-export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, ButtonTextRun, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.native-classes.d.ts

@@ -0,0 +1,17 @@
+import { ButtonSize, ButtonVariant } from "./button.shared.js";
+//#region src/components/button.native-classes.d.ts
+type NativeButtonClassNamesOptions = {
+  className?: string | undefined;
+  inactive: boolean;
+  selected: boolean;
+  size?: ButtonSize | null | undefined;
+  variant?: ButtonVariant | null | undefined;
+};
+/** The Pressable's and the label's classes, and the touch slop, for a button. */
+export declare const nativeButtonClassNames: ({ className, inactive, selected, size, variant }: NativeButtonClassNamesOptions) => {
+  label: string;
+  pressable: string;
+  slop: 0 | 6 | 8 | 12;
+};
+//#endregion
+export {};