@vvedantb/ui 0.6.0 → 0.7.0

package/README.md

@@ -215,7 +215,7 @@ import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui"
 - `SlideOverPanel`: a right-side panel, absolutely positioned inside its nearest positioned parent. It is not a portal or dialog. It slides in with a spring and is hidden below `md`. Only the close button closes it (no Escape, no outside click). `width` is `"w-96"` (default) or `"w-80"`. `closeLabel` defaults to `"Close panel"`. `className` merges last.
 - `ToolbarSearchInput`: a compact `h-8` search field for toolbars, with a search icon and a clear button. The clear button stays mounted and is hidden while the value is blank. Clearing calls `onChange("")` and does not move focus. Defaults: `placeholder="Search..."`, `label="Search"` (the `aria-label`), `clearLabel="Clear search"`. The ref goes to the `<input>`.
 - `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it. `"md"` (0.5.2) is dismissible like `"sm"`, with the title in a header (`pb-4`), the description in its own section (`py-6`) and a footer (`pt-4`) with default-size buttons. It has the same Cancel and confirm behaviour as `"sm"`.
-- Legacy (still supported): the `ConfirmDialog` `size`, `variant`, `cancelLabel` and `confirmLabel` props. For anything they do not cover, compose the parts (see [Composable parts](#composable-parts-060)).
+- Legacy (still supported): the `ConfirmDialog` `size`, `variant`, `cancelLabel` and `confirmLabel` props. For anything they do not cover, compose the parts (see [Composable parts](#composable-parts-060-options-061)).
 
 ## Buttons, menus and fields (0.4.4)
 
@@ -381,28 +381,28 @@ function PanelWidth() {
 </Tabs>
 ```
 
-## Composable parts (0.6.0)
+## Composable parts (0.6.0, options 0.6.1)
 
 Shadcn-style building blocks. The prop-driven components above are thin compositions of them and render the same DOM.
 
-Convention: compound parts are static members of a namespace object, `<Namespace>.<Part>`. There are three namespaces: `ConfirmDialog.*`, `AppShell.*` and `Sidebar.*`. `ConfirmDialog` and `AppShell` stay callable with their legacy props. `Sidebar` is a plain object. Prop types are exported flat, for example `ConfirmDialogRootProps`, `AppShellMainProps` and `SidebarRailItemProps`. Every part that renders an element merges `className` last and forwards native props.
+Convention: compound parts are static members of a namespace object, `<Namespace>.<Part>`. There are four namespaces: `ConfirmDialog.*`, `AppShell.*`, `Sidebar.*` and (0.7.0) `EmptyState.*` (see [Spinner, empty state, tabs, badge and kbd](#spinner-empty-state-tabs-badge-and-kbd-070)). `ConfirmDialog` and `AppShell` stay callable with their legacy props. `Sidebar` is a plain object. Prop types are exported flat, for example `ConfirmDialogRootProps`, `AppShellMainProps` and `SidebarRailItemProps`. Every part that renders an element merges `className` last and forwards native props.
 
 ### `ConfirmDialog.*`
 
 | Part | Purpose |
 | --- | --- |
-| `Root` | Radix dialog root. `size` (`"default"`, `"sm"`, `"md"`: layout slot for the other parts), `alert` (blocking alert dialog; default `size === "default"`), `pending` (swallows close requests, disables Cancel, Action shows its pending state), `confirmPhrase` (type-to-confirm; the typed text resets each time the dialog opens). |
+| `Root` | Radix dialog root. `size` (`"default"`, `"sm"`, `"md"`: layout slot for the other parts), `alert` (blocking alert dialog; default `size === "default"`), `pending` (swallows close requests, disables Cancel, Action shows its pending state), `confirmPhrase` (type-to-confirm; the typed text resets each time the dialog opens). 0.6.1: `dismissibleWhilePending` (Escape, outside click and the close button still close while `pending`; Cancel stays disabled), `focusCancel` (with `alert={false}`, Cancel gets `data-alert-cancel` so a `role="alertdialog"` Content focuses it on open). |
 | `Content` | `AlertDialogContent` with `alert`, else `DialogContent`. `sm` and `md` add `sm:max-w-96`. Takes every `DialogContent` prop (`role`, `hideCloseButton`, ...). |
 | `Header` | `DialogHeader`; `md` adds `pb-4`. |
 | `Title` | `DialogTitle`; `sm` adds `mb-2 text-sm font-medium`. |
 | `Description` | `DialogDescription`; `sm` and `md` add their spacing. |
 | `Body` | Plain `<div>` for extra content. No default classes. |
-| `Footer` | `DialogFooter` (`md` adds `pt-4`); `sm` renders a `flex justify-end gap-2` row. |
-| `Cancel` | Alert: the outline `AlertDialogCancel` (closes through Radix). Otherwise a ghost `Button` that runs `onClick`, then (unless it called `preventDefault()`) the Root `onOpenChange(false)`. Disabled while pending. Default text `"Cancel"`. |
-| `Action` | Confirm button. Never closes the dialog. Disabled while `disabled`, pending, or until `confirmPhrase` matches. `pendingLabel` replaces the children with a spinner (`spinnerSize`, default 14) and the label while pending. |
+| `Footer` | `DialogFooter` (`md` adds `pt-4`); `sm` renders a `flex justify-end gap-2` row. 0.6.1: `row` keeps a right-aligned row at every width, compact sheet included (`justify-end flex-row!`); no-op for `sm`. |
+| `Cancel` | Alert: the outline `AlertDialogCancel` (closes through Radix). Otherwise a ghost `Button` that runs `onClick`, then (unless it called `preventDefault()`) the Root `onOpenChange(false)`. In both modes `preventDefault()` in `onClick` skips the close, and `variant` overrides the default. Disabled while pending. Default text `"Cancel"`. |
+| `Action` | Confirm button. Never closes the dialog. Disabled while `disabled`, pending, or until `confirmPhrase` matches. `pendingLabel` replaces the children with a spinner (`spinnerSize`, default 14) and the label while pending. `pending` on Action alone shows the pending state without blocking close. 0.6.1: `spinnerClassName` merges after `animate-spin` (for example `"mr-2"`). |
 | `Field` | Type-to-confirm input bound to `confirmPhrase` (trimmed, case-insensitive). `label` replaces the label content, `onEnter` runs on Enter while the phrase matches, `inputProps` go to the `Input`. |
 
-`useConfirmDialog()` returns `{ size, alert, pending, phraseMatches, typed, setTyped, requestClose }` for custom parts.
+`useConfirmDialog()` returns `{ size, alert, pending, focusCancel, phraseMatches, typed, setTyped, requestClose }` for custom parts.
 
 ### `AppShell.*`
 
@@ -483,6 +483,27 @@ A dismissible rename dialog:
 </ConfirmDialog.Root>
 ```
 
+A dismissible alert (0.6.1 options) that focuses Cancel, keeps a button row on mobile, and can still be closed while busy:
+
+```tsx
+<ConfirmDialog.Root open={open} onOpenChange={setOpen} alert={false} focusCancel pending={busy} dismissibleWhilePending>
+  <ConfirmDialog.Content role="alertdialog">
+    <ConfirmDialog.Header>
+      <ConfirmDialog.Title>Delete item?</ConfirmDialog.Title>
+      <ConfirmDialog.Description>This cannot be undone.</ConfirmDialog.Description>
+    </ConfirmDialog.Header>
+    <ConfirmDialog.Footer row>
+      <ConfirmDialog.Cancel variant="outline" />
+      <ConfirmDialog.Action variant="destructive" pendingLabel="Delete" spinnerSize={16} spinnerClassName="mr-2" onClick={remove}>
+        Delete
+      </ConfirmDialog.Action>
+    </ConfirmDialog.Footer>
+  </ConfirmDialog.Content>
+</ConfirmDialog.Root>
+```
+
+Parts read the nearest Root through context, so `Footer`, `Cancel` and `Action` work inside a child component or a `<form>` rendered in `Content`. To show another step, render a different footer (and Content `role`) conditionally inside the same Root and Content.
+
 A full shell:
 
 ```tsx
@@ -538,6 +559,65 @@ A full shell:
 </AppShell.Root>
 ```
 
+## Spinner, empty state, tabs, badge and kbd (0.7.0)
+
+All of these are opt-in. Without the new props, components render as in 0.6.1.
+
+```tsx
+import {
+  Badge, Button, EmptyState, Kbd, Spinner, Tabs, TabsList, TabsTrigger,
+} from "@vvedantb/ui";
+
+<Button disabled={saving}>
+  {saving ? <Spinner size={14} tone="inherit" decorative className="mr-1.5" /> : null}
+  Save
+</Button>
+
+<EmptyState.Root className="h-full">
+  <EmptyState.Icon icon={IconFolder} />
+  <EmptyState.Description>No files yet.</EmptyState.Description>
+</EmptyState.Root>
+
+<EmptyState.Root variant="panel">
+  <EmptyState.Icon icon={IconLink} />
+  <EmptyState.Title>No linked items</EmptyState.Title>
+  <EmptyState.Description>Link one to see it here.</EmptyState.Description>
+  <EmptyState.Actions><Button size="sm">Link</Button></EmptyState.Actions>
+</EmptyState.Root>
+
+<Tabs value={active}>
+  <TabsList>
+    <TabsTrigger value="keys" asChild>
+      <Link to="/settings/keys">Keys</Link>
+    </TabsTrigger>
+  </TabsList>
+</Tabs>
+
+<Tabs value={feature} onValueChange={setFeature}>
+  <TabsList variant="soft" aria-label="Features">
+    <TabsTrigger value="notes"><IconNotes size={15} />Notes</TabsTrigger>
+  </TabsList>
+</Tabs>
+
+<Badge variant="destructive-soft">Revoked</Badge>
+<Kbd variant="subtle">Esc</Kbd>
+```
+
+- `Spinner` `size`: `"sm"`, `"md"` (default) and `"lg"` add a `size-*` class; a number is passed to the icon as its pixel size and adds no size class. `stroke` sets the stroke width. `tone`: `"muted"` (default) adds `text-muted-foreground`; `"inherit"` adds no colour class, so the spinner takes the current text colour. A colour class in `className` also replaces the muted default. `decorative` renders `aria-hidden="true"` with no `role="status"` or `aria-label`; use it where the parent already has a label, such as a busy button. Without it, `aria-label` in props replaces `"Loading"`.
+- `EmptyState.*`: composable "nothing here yet" block. Parts read the Root `variant`.
+
+| Part | Purpose |
+| --- | --- |
+| `Root` | `<div>`, centred column. `variant`: `"default"` (`px-4 py-20`, open) or `"panel"` (`rounded-lg bg-surface-secondary px-4 py-10`). |
+| `Icon` | `icon` component (for example a Tabler icon). `default`: the bare icon, `size` 40, `mb-3 text-muted-foreground`. `panel`: the icon (`size` 22, `stroke` 1.5, `text-muted-foreground`) in an `h-11 w-11 rounded-lg bg-surface-tertiary` tile. `size` and `stroke` override; `className` goes on the outer element (icon or tile). |
+| `Title` | `<p>`, `text-sm font-medium text-foreground`; `default` adds `mb-1`. `asChild` renders your element (for example an `h3`) instead. |
+| `Description` | `<p>`, `text-sm text-muted-foreground`; `panel` adds `mt-1 max-w-[240px]`. |
+| `Actions` | `<div>`, `mt-4`. |
+
+- `TabsList` `variant="soft"`: borderless pills that wrap and centre (`flex flex-wrap items-center justify-center gap-1.5`). Triggers inside it are `rounded-full px-4 py-2 text-sm`, muted until active, filled with `bg-surface-secondary` when active or hovered, and `relative overflow-hidden` so a child such as a progress bar can sit on the bottom edge. It uses no `t-tabs` CSS and has no focus ring of its own. `pills` and `segmented` are unchanged. Link tabs work with any variant: `TabsTrigger asChild` around the router link (Radix sets `role="tab"`, `data-state` and roving focus on it). The package does not depend on a router.
+- `Badge` `variant="destructive-soft"`: neutral border with a faint danger tint (`border-border bg-danger/10 text-danger`). Resolves to the same classes as a default badge with `className="bg-danger/10 text-danger"`. `variant="success"` already resolves to the same classes as a default badge with `className="border-success/25 bg-success/12 text-success"`.
+- `Kbd` `variant="subtle"`: a plain filled key for inline hints, `rounded bg-surface-secondary px-1.5 py-0.5 text-foreground`. No fixed height, font or size, so it follows the surrounding text.
+
 ## Toaster
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/index.ts

@@ -21,6 +21,7 @@ export * from "./ui/dialog";
 export * from "./ui/alert-dialog";
 export * from "./ui/confirm-dialog";
 export * from "./ui/dropdown-menu";
+export * from "./ui/empty-state";
 export * from "./ui/hover-card";
 export * from "./ui/input";
 export * from "./ui/label";

package/src/ui/badge.tsx

@@ -9,6 +9,8 @@ const badgeVariants = cva(
         default: "border-border bg-default text-foreground",
         secondary: "border-separator bg-default text-default-foreground",
         destructive: "border-danger/25 bg-danger/12 text-danger",
+        // Neutral border with a faint danger tint, e.g. a revoked or expired status.
+        "destructive-soft": "border-border bg-danger/10 text-danger",
         outline: "border-separator bg-transparent text-muted-foreground",
         success: "border-success/25 bg-success/12 text-success",
         warning: "border-warning/25 bg-warning/12 text-warning",

package/src/ui/confirm-dialog-parts.tsx

@@ -24,11 +24,12 @@ type ConfirmDialogContextValue = {
   size: ConfirmDialogSize;
   alert: boolean;
   pending: boolean;
+  focusCancel: boolean;
   confirmPhrase: string | undefined;
   typed: string;
   setTyped: (value: string) => void;
   phraseMatches: boolean;
-  /** Calls the Root's `onOpenChange(false)` unless `pending`. */
+  /** Calls the Root's `onOpenChange(false)` unless `pending` (and not `dismissibleWhilePending`). */
   requestClose: () => void;
 };
 
@@ -36,6 +37,7 @@ const ConfirmDialogContext = React.createContext<ConfirmDialogContextValue>({
   size: "default",
   alert: true,
   pending: false,
+  focusCancel: false,
   confirmPhrase: undefined,
   typed: "",
   setTyped: () => {},
@@ -59,6 +61,18 @@ export type ConfirmDialogRootProps = React.ComponentProps<typeof Dialog> & {
    * Needs a controlled `open`.
    */
   pending?: boolean;
+  /**
+   * While `pending`, Escape, outside click and the close button still close
+   * (Root `onOpenChange(false)` runs). Cancel stays disabled and Action stays
+   * pending. Default `false`.
+   */
+  dismissibleWhilePending?: boolean;
+  /**
+   * Non-alert only: Cancel renders `data-alert-cancel=""`, so a Content with
+   * `role="alertdialog"` focuses it on open. An explicit `data-alert-cancel`
+   * on Cancel wins. No-op with `alert` (its Cancel already has it). Default `false`.
+   */
+  focusCancel?: boolean;
   /** Type-to-confirm phrase for `ConfirmDialog.Field`. Action stays disabled until it matches (trimmed, case-insensitive). */
   confirmPhrase?: string;
 };
@@ -67,6 +81,8 @@ function Root({
   size = "default",
   alert = size === "default",
   pending = false,
+  dismissibleWhilePending = false,
+  focusCancel = false,
   confirmPhrase,
   open,
   onOpenChange,
@@ -81,7 +97,7 @@ function Root({
   }
 
   const handleOpenChange = (next: boolean) => {
-    if (!next && pending) return;
+    if (!next && pending && !dismissibleWhilePending) return;
     if (next) setTyped("");
     onOpenChange?.(next);
   };
@@ -96,6 +112,7 @@ function Root({
         size,
         alert,
         pending,
+        focusCancel,
         confirmPhrase,
         typed,
         setTyped,
@@ -163,12 +180,27 @@ function Body(props: ConfirmDialogBodyProps) {
 }
 Body.displayName = "ConfirmDialog.Body";
 
-export type ConfirmDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type ConfirmDialogFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Right-aligned row of buttons at every width, laid out like a
+   * `flex justify-end gap-2` div inside the footer. Adds `justify-end flex-row!`:
+   * the `!important` beats both the footer's own `flex-col-reverse` below `sm`
+   * and the compact sheet's descendant `flex-col-reverse` rule, which has higher
+   * specificity than a plain class. Keeps `data-slot` and every other footer
+   * class. No-op for `size="sm"` (already a row). Default `false`.
+   */
+  row?: boolean;
+};
 
-function Footer({ className, ...props }: ConfirmDialogFooterProps) {
+function Footer({ row = false, className, ...props }: ConfirmDialogFooterProps) {
   const { size } = useConfirmDialog();
   if (size === "sm") return <div {...props} className={cn("flex justify-end gap-2", className)} />;
-  return <DialogFooter {...props} className={cn(size === "md" && "pt-4", className)} />;
+  return (
+    <DialogFooter
+      {...props}
+      className={cn(size === "md" && "pt-4", row && "justify-end flex-row!", className)}
+    />
+  );
 }
 Footer.displayName = "ConfirmDialog.Footer";
 
@@ -177,7 +209,8 @@ export type ConfirmDialogCancelProps = ButtonProps;
 /**
  * Alert: a `DialogClose` outline button. Otherwise a ghost button that runs
  * `onClick` and then, unless it called `preventDefault()`, the Root's
- * `onOpenChange(false)`. Disabled while pending.
+ * `onOpenChange(false)`. Disabled while pending. With Root `focusCancel`
+ * it also gets `data-alert-cancel`.
  */
 function Cancel({ children = "Cancel", variant, size, disabled, onClick, ...props }: ConfirmDialogCancelProps) {
   const dialog = useConfirmDialog();
@@ -198,6 +231,7 @@ function Cancel({ children = "Cancel", variant, size, disabled, onClick, ...prop
     <Button
       variant={variant ?? "ghost"}
       size={size ?? (dialog.size === "sm" ? "sm" : undefined)}
+      data-alert-cancel={dialog.focusCancel ? "" : undefined}
       {...props}
       onClick={(event) => {
         onClick?.(event);
@@ -218,6 +252,8 @@ export type ConfirmDialogActionProps = ButtonProps & {
   pendingLabel?: React.ReactNode;
   /** Spinner size in px. Default `14`. */
   spinnerSize?: number;
+  /** Merged into the spinner className after `animate-spin`, e.g. `"mr-2"`. */
+  spinnerClassName?: string;
 };
 
 /** Confirm button. Does not close the dialog. Disabled while pending or until the confirm phrase matches. */
@@ -225,6 +261,7 @@ function Action({
   pending: pendingProp,
   pendingLabel,
   spinnerSize = 14,
+  spinnerClassName,
   size,
   disabled,
   children,
@@ -235,7 +272,7 @@ function Action({
   const content =
     pending && pendingLabel !== undefined ? (
       <>
-        <IconLoader2 size={spinnerSize} className="animate-spin" />
+        <IconLoader2 size={spinnerSize} className={cn("animate-spin", spinnerClassName)} />
         {pendingLabel}
       </>
     ) : (

package/src/ui/empty-state.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../utils/cn";
+
+// `default`: open centred block, large bare icon, one muted line (a page or list body).
+// `panel`: filled rounded block with the icon in a tile (a detail panel or modal section).
+export type EmptyStateVariant = "default" | "panel";
+
+const EmptyStateContext = React.createContext<EmptyStateVariant>("default");
+
+export type EmptyStateRootProps = React.ComponentProps<"div"> & {
+  /** Layout for the other parts. Default `"default"`. */
+  variant?: EmptyStateVariant;
+};
+
+function Root({ variant = "default", className, ...props }: EmptyStateRootProps) {
+  return (
+    <EmptyStateContext value={variant}>
+      <div
+        {...props}
+        className={cn(
+          "flex flex-col items-center justify-center text-center",
+          variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
+          className,
+        )}
+      />
+    </EmptyStateContext>
+  );
+}
+Root.displayName = "EmptyState.Root";
+
+export type EmptyStateIconProps = {
+  /** Icon component, e.g. a Tabler icon. */
+  icon: React.ComponentType<{ size?: number | string; stroke?: number | string; className?: string }>;
+  /** Pixel size. Default 40 (`default`) or 22 (`panel`). */
+  size?: number;
+  /** Stroke width. Default the icon's own (`default`) or 1.5 (`panel`). */
+  stroke?: number;
+  /** Classes for the outer element: the icon (`default`) or its tile (`panel`). */
+  className?: string;
+};
+
+function Icon({ icon: IconComponent, size, stroke, className }: EmptyStateIconProps) {
+  if (React.use(EmptyStateContext) === "panel") {
+    return (
+      <div
+        className={cn(
+          "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
+          className,
+        )}
+      >
+        <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />
+      </div>
+    );
+  }
+  return (
+    <IconComponent
+      size={size ?? 40}
+      stroke={stroke}
+      className={cn("mb-3 text-muted-foreground", className)}
+    />
+  );
+}
+Icon.displayName = "EmptyState.Icon";
+
+export type EmptyStateTitleProps = React.ComponentProps<"p"> & {
+  /** Render the child element (e.g. an `h3`) with the title classes. */
+  asChild?: boolean;
+};
+
+function Title({ asChild = false, className, ...props }: EmptyStateTitleProps) {
+  const Comp = asChild ? Slot : "p";
+  return (
+    <Comp
+      {...props}
+      className={cn(
+        "text-sm font-medium text-foreground",
+        React.use(EmptyStateContext) === "default" && "mb-1",
+        className,
+      )}
+    />
+  );
+}
+Title.displayName = "EmptyState.Title";
+
+export type EmptyStateDescriptionProps = React.ComponentProps<"p">;
+
+function Description({ className, ...props }: EmptyStateDescriptionProps) {
+  return (
+    <p
+      {...props}
+      className={cn(
+        React.use(EmptyStateContext) === "panel" && "mt-1 max-w-[240px]",
+        "text-sm text-muted-foreground",
+        className,
+      )}
+    />
+  );
+}
+Description.displayName = "EmptyState.Description";
+
+export type EmptyStateActionsProps = React.ComponentProps<"div">;
+
+function Actions({ className, ...props }: EmptyStateActionsProps) {
+  return <div {...props} className={cn("mt-4", className)} />;
+}
+Actions.displayName = "EmptyState.Actions";
+
+/**
+ * Composable "nothing here yet" block: `EmptyState.Root` sets the variant, the
+ * other parts read it. Render only the parts you need.
+ */
+export const EmptyState = {
+  Root,
+  Icon,
+  Title,
+  Description,
+  Actions,
+};

package/src/ui/kbd.tsx

@@ -1,14 +1,24 @@
 import * as React from "react";
 import { cn } from "../utils/cn";
 
-const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
-  ({ className, ...props }, ref) => (
+// `subtle`: plain filled key for inline hints; size and font come from the
+// surrounding text.
+const kbdVariantClasses = {
+  default:
+    "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+  subtle: "rounded bg-surface-secondary px-1.5 py-0.5 text-foreground",
+};
+
+export type KbdProps = React.HTMLAttributes<HTMLElement> & {
+  /** Default `"default"`. */
+  variant?: keyof typeof kbdVariantClasses;
+};
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, variant = "default", ...props }, ref) => (
     <kbd
       ref={ref}
-      className={cn(
-        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
-        className,
-      )}
+      className={cn(kbdVariantClasses[variant], className)}
       {...props}
     />
   ),

package/src/ui/spinner.tsx

@@ -7,18 +7,34 @@ const sizeClasses = {
   lg: "size-8",
 };
 
+export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<"svg">, "size" | "stroke"> & {
+  /** Named size (a `size-*` class) or a pixel size passed to the icon (no size class). Default `"md"`. */
+  size?: "sm" | "md" | "lg" | number;
+  /** Icon stroke width. Default the icon's own (2). */
+  stroke?: number | string;
+  /** `"muted"` adds `text-muted-foreground`; `"inherit"` adds no colour class, so the icon uses `currentColor`. Default `"muted"`. */
+  tone?: "muted" | "inherit";
+  /** Hide from assistive tech (`aria-hidden`, no `role="status"` or label), e.g. inside a labelled button. Default `false`. */
+  decorative?: boolean;
+};
+
 function Spinner({
   size = "md",
+  tone = "muted",
+  decorative = false,
   className,
   ...props
-}: Omit<React.ComponentPropsWithoutRef<"svg">, "size" | "stroke"> & {
-  size?: "sm" | "md" | "lg";
-}) {
+}: SpinnerProps) {
   return (
     <IconLoader2
-      role="status"
-      aria-label="Loading"
-      className={cn("animate-spin text-muted-foreground", sizeClasses[size], className)}
+      {...(decorative ? { "aria-hidden": true } : { role: "status", "aria-label": "Loading" })}
+      size={typeof size === "number" ? size : undefined}
+      className={cn(
+        "animate-spin",
+        tone === "muted" && "text-muted-foreground",
+        typeof size === "number" ? undefined : sizeClasses[size],
+        className,
+      )}
       {...props}
     />
   );

package/src/ui/tabs.tsx

@@ -8,7 +8,11 @@ const Tabs = TabsPrimitive.Root;
 
 // `pills` (default): isolated rounded pills with a gap, no shared track.
 // `segmented`: connected bar with a sliding pill, kept for marketing surfaces.
-type TabsListVariant = "pills" | "segmented";
+// `soft`: borderless wrapping pills, the active one filled. Uses no `t-tabs`
+// CSS, so triggers can hold an absolutely placed child (e.g. a progress bar).
+type TabsListVariant = "pills" | "segmented" | "soft";
+
+const TabsListVariantContext = React.createContext<TabsListVariant>("pills");
 
 const TabsList = React.forwardRef<
   React.ComponentRef<typeof TabsPrimitive.List>,
@@ -82,21 +86,26 @@ const TabsList = React.forwardRef<
   }, [variant]);
 
   return (
-    <TabsPrimitive.List
-      ref={mergedRef}
-      className={cn(
-        "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
-        variant === "segmented" ? "t-tabs--segmented" : "t-tabs--pills",
-        className,
-      )}
-      data-variant={variant}
-      {...props}
-    >
-      {variant === "segmented" ? (
-        <span ref={pillRef} className="t-tabs-pill" aria-hidden="true" />
-      ) : null}
-      {children}
-    </TabsPrimitive.List>
+    <TabsListVariantContext value={variant}>
+      <TabsPrimitive.List
+        ref={mergedRef}
+        className={cn(
+          variant === "soft"
+            ? "flex flex-wrap items-center justify-center gap-1.5"
+            : "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
+          variant === "segmented" && "t-tabs--segmented",
+          variant === "pills" && "t-tabs--pills",
+          className,
+        )}
+        data-variant={variant}
+        {...props}
+      >
+        {variant === "segmented" ? (
+          <span ref={pillRef} className="t-tabs-pill" aria-hidden="true" />
+        ) : null}
+        {children}
+      </TabsPrimitive.List>
+    </TabsListVariantContext>
   );
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
@@ -108,7 +117,9 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      React.use(TabsListVariantContext) === "soft"
+        ? "relative flex items-center gap-2 overflow-hidden rounded-full px-4 py-2 text-sm text-muted-foreground transition-[transform,background-color] hover:bg-surface-secondary active:scale-[0.97] data-[state=active]:bg-surface-secondary data-[state=active]:text-foreground"
+        : "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
       className,
     )}
     {...props}