@eifi1/ui-kit 0.7.1 → 0.8.0

package/dist/components/ui.d.ts

@@ -3,17 +3,33 @@ import { ButtonHTMLAttributes, Ref, SelectHTMLAttributes, ReactNode, InputHTMLAt
 import { TooltipSide } from './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
+type ButtonSize = "sm" | "md";
+/** The second argument of {@link buttonClasses} in its options form. */
+interface ButtonClassesOptions {
+    /** See {@link ButtonProps.size}. */
+    size?: ButtonSize;
+    className?: string;
+}
 /**
  * Button classes for the rare case where the styling must land on a non-`<button>`
  * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix
  * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real
- * button works, prefer `<Button>`. Draws from the same base + variant maps as
+ * button works, prefer `<Button>`. Draws from the same base, size and variant maps as
  * `<Button>`, so the two stay in lockstep.
+ *
+ * The second argument is either the extra classes (the pre-0.8.0 form) or
+ * `{ size, className }` — `buttonClasses("secondary", { size: "sm" })` for keksdose's
+ * compact toolbar links.
  */
-declare function buttonClasses(variant?: ButtonVariant, className?: string): string;
+declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
+    /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
+     *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a
+     *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand
+     *  there). Every variant takes either size. */
+    size?: ButtonSize;
     /** In a flex row next to a taller labelled field, fill the field's height so the
      *  two line up. No effect outside a flex row. */
     stretch?: boolean;
@@ -22,23 +38,40 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  declared here only because `ButtonHTMLAttributes` does not carry it. */
     ref?: Ref<HTMLButtonElement>;
 }
-declare function Button({ variant, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
-type IconButtonSize = "md" | "sm" | "xs" | "2xs";
+declare function Button({ variant, size, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
+type IconButtonSize = "lg" | "md" | "sm" | "xs" | "2xs";
 declare const ICON_BUTTON_TONES: {
     readonly default: "";
     readonly muted: "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
     readonly danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]";
+    readonly warning: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]";
+    readonly info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]";
 };
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    /** Box size: md = 36px (matches the top bar), sm = 32px — both with a 20px icon;
+    /** Any {@link ButtonVariant}, or `overlay` — a round translucent disc for use over
+     *  an image (see `ICON_BUTTON_OVERLAY`). */
+    variant?: ButtonVariant | "overlay";
+    /** Box size: lg = 44px (a phone's touch target), md = 36px (matches the top bar),
+     *  sm = 32px — all three with a 20px icon;
      *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px
      *  icon (an action on a chip or a tab). */
     size?: IconButtonSize;
     /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on
      *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
-     *  remove/delete that repeats down a list. Default: the variant's own colours. */
+     *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
+     *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
+     *  (keksdose's reconcile). Default: the variant's own colours. */
     tone?: keyof typeof ICON_BUTTON_TONES;
+    /**
+     * Make it a toggle button. `true` sets `aria-pressed="true"` and draws the "on" look
+     * (brand glyph on the quiet brand fill); `false` sets `aria-pressed="false"` with the
+     * normal look, so a screen reader still hears a toggle that is off. Left out, it is
+     * an ordinary button with no `aria-pressed` — or whatever `aria-pressed` the caller
+     * passes. For keksdose's budget share toggle (budgets-page:291), which paints its own
+     * brand colour over a ghost button today. Keep the `aria-label` the same in both
+     * states ("Share budget"): the pressed state already says whether it is on.
+     */
+    pressed?: boolean;
     /** Keep the click (and the Enter/Space that produces it) from reaching an
      *  ancestor's handler — for an action inside a clickable table row or card.
      *
@@ -302,8 +335,18 @@ interface CardProps extends ComponentPropsWithoutRef<"div"> {
      * content cards on data pages; leave off for centered dialog/panel cards.
      */
     flush?: boolean;
+    /**
+     * `inset`: a panel INSIDE a card rather than a card on the page — the raised
+     * `--bg-surface-2`, a small radius, `p-3` of its own and no border or shadow, since
+     * it is already sitting on the card that has them. Lenkbank's results blocks and
+     * corner panels write this by hand (`rounded-md bg-surface-2 p-3`) under a Card of
+     * their own. Unlike the default card it carries its padding, because every one of
+     * those copies wanted the same one; a caller's `p-*` still wins. `flush` is ignored:
+     * an inset panel never runs edge to edge.
+     */
+    variant?: "default" | "inset";
 }
-declare function Card({ className, children, flush, ...rest }: CardProps): react.JSX.Element;
+declare function Card({ className, children, flush, variant, ...rest }: CardProps): react.JSX.Element;
 /** The sub-parts add nothing to a `<div>`'s props — they are the SAME element with a
  *  `data-slot` and a padding rhythm — so each name is an alias rather than an empty
  *  interface pretending to be more. They exist so a consumer's own wrapper can say
@@ -354,11 +397,22 @@ declare function Spinner({ className, label, ...rest }: SpinnerProps): react.JSX
 interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
      *  every empty state in three apps look like the same thing — so there is no
-     *  `children` slot to put arbitrary content in. */
+     *  `children` slot to put arbitrary content in. The two slots below are the only
+     *  other things an empty state has turned out to need, and each has a fixed place. */
     title: string;
     hint?: string;
+    /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
+     *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
+     *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
+     *  because the title already says what it shows. */
+    icon?: ReactNode;
+    /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its
+     *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they
+     *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
+     *  caller renders; the box only places them. */
+    action?: ReactNode;
 }
-declare function EmptyState({ title, hint, className, ...rest }: EmptyStateProps): react.JSX.Element;
+declare function EmptyState({ title, hint, icon, action, className, ...rest }: EmptyStateProps): react.JSX.Element;
 /** One tab of a {@link Tabs} strip. */
 interface TabItem<T extends string> {
     id: T;
@@ -520,7 +574,27 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
     /** An add or a remove is in flight: the × and the add button are disabled and
      *  Delete is ignored, so a double click cannot remove two tabs. Nothing moves. */
     busy?: boolean;
+    /**
+     * `"vertical"`: the same strip as a SIDE NAV — one item per row, the open one
+     * filled, ↑/↓ walking it (Home/End as before) and `aria-orientation="vertical"` on
+     * the tablist. For keksdose's admin page and settings page, which each hand-built
+     * the identical sidebar with none of this strip's keyboard, roving tab stop or
+     * routed-`href` handling. Everything else — `href` tabs, `badge`, `panelId`,
+     * `onRemove`, `onAdd` — means exactly what it means on the horizontal strip; the
+     * badge moves to the row's end.
+     *
+     * **On a phone ({@link PHONE_QUERY}) it becomes the horizontal strip**, `wrap` and
+     * all, rather than staying a column. A side nav only works beside its content; on
+     * a phone it has to go ABOVE it, and eight full-width rows there push the panel
+     * the user picked below the fold on every visit — the two keksdose pages both
+     * collapsed theirs into a scrolling row by hand for exactly that reason. The
+     * orientation is switched in JavaScript, not with `md:` classes, so the
+     * `aria-orientation` a screen reader hears and the arrow keys that work always
+     * match the layout on screen. The caller's own two-column layout has to stack at
+     * the same breakpoint (`md:grid-cols-[14rem_1fr]`).
+     */
+    orientation?: "horizontal" | "vertical";
 }
-declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, removeOn, onAdd, addLabel, labels, busy, orientation, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
 
-export { Button, type ButtonProps, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };
+export { Button, type ButtonClassesOptions, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, DEFAULT_PASSWORD_REVEAL_LABELS, DEFAULT_TABS_LABELS, EmptyState, type EmptyStateProps, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, type FieldChevronProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FloatingField, type FloatingFieldProps, IconButton, type IconButtonProps, type IconButtonSize, Input, type InputProps, Label, type LabelProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, type TabItem, Tabs, type TabsLabels, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };

package/dist/components/ui.js

@@ -7,24 +7,38 @@ import { horizontalStep } from "../lib/direction.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-const BUTTON_BASE = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+const BUTTON_SIZES = {
+  md: "gap-2 px-3 py-2 text-sm",
+  sm: "gap-1.5 px-2 py-1 text-xs"
+};
 const buttonVariantClasses = {
   primary: "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]",
   secondary: "border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
   ghost: "bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
   danger: "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border)]",
-  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]"
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]",
+  // A text link that is still a `<button>` — keksdose's six hand-rolled
+  // `<button className="text-brand underline">` sites ("Resend code", "Show all",
+  // "Undo" in a toast…), which act rather than navigate and so must not be anchors.
+  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but
+  // the base's `focus:ring-2` stays: those copies had `outline-none` and no ring, so
+  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that
+  // ring hugging the word instead of drawing a pill round it.
+  link: "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]"
 };
-function buttonClasses(variant = "primary", className) {
-  return cn(BUTTON_BASE, buttonVariantClasses[variant], className);
+function buttonClasses(variant = "primary", classNameOrOptions) {
+  const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
+  return cn(BUTTON_BASE, BUTTON_SIZES[size], buttonVariantClasses[variant], className);
 }
-function Button({ variant = "primary", stretch, className, ...rest }) {
+function Button({ variant = "primary", size = "md", stretch, className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...rest,
       className: cn(
         BUTTON_BASE,
+        BUTTON_SIZES[size],
         // In a flex row next to a taller labelled field, `stretch` makes the button
         // fill the field's height so the two line up (self-stretch overrides the row's
         // align-items). No effect outside a flex row / when it's already the tallest.
@@ -37,6 +51,9 @@ function Button({ variant = "primary", stretch, className, ...rest }) {
 }
 const ICON_BUTTON_BASE = "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const ICON_BUTTON_SIZES = {
+  // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's
+  // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.
+  lg: "size-11 [&_svg]:size-5",
   md: "size-9 [&_svg]:size-5",
   sm: "size-8 [&_svg]:size-5",
   xs: "size-7 rounded [&_svg]:size-4",
@@ -45,14 +62,39 @@ const ICON_BUTTON_SIZES = {
 const ICON_BUTTON_TONES = {
   default: "",
   muted: "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]",
-  danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]"
+  danger: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)]",
+  // Amber AT REST, unlike `danger`: a warning icon button is the one on the row that
+  // needs attention (keksdose's "needs review" flag on a transaction, the stale-rate
+  // marker), not an action repeated down a list — quiet grey would hide the very
+  // thing it is there to point out.
+  warning: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]",
+  // Sky at rest, for the same reason as `warning`: keksdose's reconcile action on an
+  // account row (accounts-page:867) is the one on the row to notice, and it is
+  // informational rather than a problem, so it takes the `--info` family.
+  info: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]"
+};
+const ICON_BUTTON_DISABLED_REST = {
+  primary: "disabled:hover:bg-[var(--bg-surface-2)]",
+  secondary: "disabled:hover:bg-transparent",
+  ghost: "disabled:hover:bg-transparent",
+  danger: "disabled:hover:bg-[var(--danger)]",
+  brand: "disabled:hover:bg-[var(--brand)]",
+  link: "disabled:hover:bg-transparent disabled:hover:no-underline",
+  overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]"
 };
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
+const ICON_BUTTON_TONES_DISABLED_REST = {
+  muted: "disabled:hover:text-[var(--text-placeholder)]",
+  danger: "disabled:hover:text-[var(--text-placeholder)]"
+};
+const ICON_BUTTON_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]";
+const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]";
+const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", pressed, stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
+      "aria-pressed": pressed ?? rest["aria-pressed"],
       onClick: (e) => {
         if (stopPropagation) e.stopPropagation();
         onClick?.(e);
@@ -64,8 +106,12 @@ const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "
       className: cn(
         ICON_BUTTON_BASE,
         ICON_BUTTON_SIZES[size],
-        buttonVariantClasses[variant],
+        // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
+        variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
+        ICON_BUTTON_DISABLED_REST[variant],
         ICON_BUTTON_TONES[tone],
+        ICON_BUTTON_TONES_DISABLED_REST[tone],
+        pressed && ICON_BUTTON_PRESSED,
         className
       )
     }
@@ -439,17 +485,19 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
   ) }) });
 });
 Textarea.displayName = "Textarea";
-function Card({ className, children, flush, ...rest }) {
+function Card({ className, children, flush, variant = "default", ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
       className: cn(
-        // Surface + border are theme tokens so the palette switcher (feedback
-        // #307) can re-skin every card; a caller's own bg-*/border-* override
-        // still wins via tailwind-merge.
-        "bg-[var(--bg-surface)]",
-        flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm",
+        variant === "inset" ? "rounded-md bg-[var(--bg-surface-2)] p-3" : cn(
+          // Surface + border are theme tokens so the palette switcher (feedback
+          // #307) can re-skin every card; a caller's own bg-*/border-* override
+          // still wins via tailwind-merge.
+          "bg-[var(--bg-surface)]",
+          flush ? "border-y border-[var(--border)] md:rounded-lg md:border md:shadow-sm" : "rounded-lg border border-[var(--border)] shadow-sm"
+        ),
         className
       ),
       children
@@ -528,7 +576,7 @@ function Spinner({ className, label, ...rest }) {
     " "
   ] }) });
 }
-function EmptyState({ title, hint, className, ...rest }) {
+function EmptyState({ title, hint, icon, action, className, ...rest }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -538,8 +586,10 @@ function EmptyState({ title, hint, className, ...rest }) {
         className
       ),
       children: [
+        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", children: icon }),
         /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--text-secondary)]", children: title }),
-        hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint })
+        hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
+        action != null && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: action })
       ]
     }
   );
@@ -549,6 +599,10 @@ const DEFAULT_TABS_LABELS = {
   remove: (tab) => `Remove ${tab}`
 };
 const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
+const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
+const TAB_VERTICAL_CLASSES = "flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+const TAB_VERTICAL_ACTIVE_CLASSES = "bg-[var(--bg-active)] text-[var(--text-primary)]";
+const TAB_VERTICAL_INACTIVE_CLASSES = "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";
 const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]";
 const TAB_CLASSES = "whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
 const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-[var(--text-primary)]";
@@ -574,10 +628,13 @@ function Tabs({
   addLabel,
   labels,
   busy = false,
+  orientation = "horizontal",
   "aria-label": ariaLabel,
   ...rest
 }) {
   const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
+  const phone = useMediaQuery(PHONE_QUERY, false);
+  const vertical = orientation === "vertical" && !phone;
   const stripRef = useRef(null);
   const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
   const deletesOnKey = (tab) => isRemovable(tab) && (removeOn === "every" || tab.id === active);
@@ -610,7 +667,7 @@ function Tabs({
       if (!busy) requestRemove(tab.id);
       return;
     }
-    const step = horizontalStep(e.key, e.currentTarget);
+    const step = vertical ? e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0 : horizontalStep(e.key, e.currentTarget);
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
     if (!strip) return;
@@ -628,8 +685,9 @@ function Tabs({
       ref: stripRef,
       role: "tablist",
       "aria-label": ariaLabel ?? label,
+      "aria-orientation": vertical ? "vertical" : void 0,
       className: cn(
-        wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
+        vertical ? TABLIST_VERTICAL_CLASSES : wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
         onAdd ? "min-w-0" : className
       ),
       children: tabs.map((tab) => {
@@ -656,21 +714,36 @@ function Tabs({
           id: isActive && panelId ? `${panelId}-tab` : void 0,
           "aria-keyshortcuts": deletesOnKey(tab) ? "Delete" : void 0,
           onKeyDown: (e) => onTabKeyDown(e, tab),
-          className: cn(
+          className: vertical ? cn(
+            TAB_VERTICAL_CLASSES,
+            isActive ? TAB_VERTICAL_ACTIVE_CLASSES : TAB_VERTICAL_INACTIVE_CLASSES,
+            removable && "pe-8"
+          ) : cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
             wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES,
             removable && TAB_REMOVABLE_CLASSES
           )
         };
-        const inner = /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1.5", tab.empty && TAB_EMPTY_CLASSES), children: [
-          tab.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 items-center gap-0.5", children: tab.icon }),
-          tab.detail != null ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start text-start", children: [
-            /* @__PURE__ */ jsx("span", { children: tab.label }),
-            " ",
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal leading-tight text-[var(--text-muted)]", children: tab.detail })
-          ] }) : tab.label,
-          tab.badge != null ? tab.badge : null
-        ] });
+        const inner = /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              // In a side nav the row is the full width, so the label takes it and a
+              // badge lands at the row's end, where a column of counts lines up.
+              vertical ? "flex min-w-0 flex-1 items-center gap-1.5" : "inline-flex items-center gap-1.5",
+              tab.empty && TAB_EMPTY_CLASSES
+            ),
+            children: [
+              tab.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 items-center gap-0.5", children: tab.icon }),
+              tab.detail != null ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start text-start", children: [
+                /* @__PURE__ */ jsx("span", { children: tab.label }),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal leading-tight text-[var(--text-muted)]", children: tab.detail })
+              ] }) : tab.label,
+              tab.badge != null ? vertical ? /* @__PURE__ */ jsx("span", { className: "ms-auto flex shrink-0 items-center", children: tab.badge }) : tab.badge : null
+            ]
+          }
+        );
         const element = tab.href ? /* @__PURE__ */ jsx(
           "a",
           {
@@ -697,7 +770,7 @@ function Tabs({
           // The × cannot go INSIDE the tab: a button in a button is invalid HTML, and
           // a tab's children are presentational, so a reader would flatten it into the
           // tab's name. It sits beside the tab, over the gutter the tab reserves.
-          /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("relative flex", !vertical && "shrink-0"), children: [
             element,
             isActive && /* @__PURE__ */ jsx(
               IconButton,
@@ -724,6 +797,15 @@ function Tabs({
     }
   );
   if (!onAdd) return tablist;
+  if (vertical) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), children: [
+      tablist,
+      /* @__PURE__ */ jsxs("button", { type: "button", onClick: onAdd, disabled: busy, className: TAB_ADD_CLASSES, children: [
+        /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+        addLabel ?? text.add
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {