@eifi1/ui-kit 0.5.0 → 0.6.0

package/dist/components/ui.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, SelectHTMLAttributes, ReactNode, InputHTMLAttributes, ComponentPropsWithoutRef, TextareaHTMLAttributes } from 'react';
 
 type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand";
 /**
@@ -17,10 +17,47 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     stretch?: boolean;
 }
 declare function Button({ variant, stretch, className, ...rest }: ButtonProps): react.JSX.Element;
+type IconButtonSize = "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)]";
+};
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
-    /** Box size: md = 36px (matches the top bar), sm = 32px. The icon stays 20px. */
-    size?: "sm" | "md";
+    /** Box size: md = 36px (matches the top bar), sm = 32px — both 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. */
+    tone?: keyof typeof ICON_BUTTON_TONES;
+    /** 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.
+     *
+     *  **Not a licence to put this inside another `<button>`.** HTML forbids any
+     *  interactive content, and any element with a `tabindex`, inside a button — so
+     *  the `<span role="button" tabIndex={0}>` workaround is invalid too — and ARIA
+     *  makes a button's children presentational, so a screen reader flattens the
+     *  inner one into the outer one's name and it cannot be reached at all. Make the
+     *  row's main action a button that fills the row and put this one BESIDE it, on
+     *  top:
+     *
+     *  ```tsx
+     *  <div className="relative">
+     *    <button className="w-full pe-16 …" onClick={open}>…row…</button>
+     *    <div className="absolute inset-y-0 end-2 flex items-center gap-0.5">
+     *      <IconButton size="xs" tone="danger" aria-label="Delete" onClick={remove}>
+     *        <Trash2 />
+     *      </IconButton>
+     *    </div>
+     *  </div>
+     *  ```
+     *
+     *  The pair look exactly like the nested version, click exactly like it, and
+     *  are two tab stops a screen reader can tell apart. */
+    stopPropagation?: boolean;
 }
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 declare const FIELD_BASE: string;
@@ -138,6 +175,33 @@ interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
     children: ReactNode;
 }
 declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
+interface LabelProps extends ComponentPropsWithoutRef<"label"> {
+    /** Draw the required mark after the text. The mark is `aria-hidden`: what a
+     *  screen reader hears is the control's own `required` / `aria-required`, which
+     *  the caller still sets — a "star" read out as the last word of every name is
+     *  noise, and a control that is not marked required is not required however its
+     *  label looks. */
+    required?: boolean;
+    /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */
+    size?: "sm" | "md";
+    /** Dim the label with its control. A label ABOVE its field is not the field's
+     *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */
+    disabled?: boolean;
+}
+/**
+ * The label ABOVE a field, for the places a floating label does not fit: a control
+ * the kit did not render (a third-party picker, a range slider, a group of radios),
+ * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels
+ * above its fields throughout.
+ *
+ * A new component rather than a mode of {@link FieldLabel}, because the two share
+ * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a
+ * trigger's `relative` box and has to stay exactly that for every dropdown that
+ * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,
+ * that a click focuses the control through. Spacing below it belongs to the caller's
+ * layout (`space-y-1.5` on the pair, typically), as it would for any block.
+ */
+declare function Label({ required, size, disabled, className, children, ...rest }: LabelProps): react.JSX.Element;
 /** The two names the password reveal toggle can wear. See {@link Input}. */
 interface PasswordRevealLabels {
     /** While the value is hidden — activating the toggle will show it. */
@@ -185,7 +249,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     passwordLabels?: Partial<PasswordRevealLabels>;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
-interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
     label?: ReactNode;
     /** See {@link Input}'s `invalid`. */
     invalid?: boolean;
@@ -193,6 +257,20 @@ interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     error?: ReactNode;
     /** A {@link FieldHint} for the label line — see {@link FloatingField}. */
     hint?: ReactNode;
+    /**
+     * `"sm"`: a 28px, 12px-type select for a toolbar or a table header, where the
+     * 36px field stands a head taller than the buttons beside it. `"md"` (default)
+     * is the field every form uses. Unlabelled selects only — a floating label needs
+     * the tall box to float in, so a labelled Select ignores `"sm"`.
+     *
+     * A NUMBER is still the native attribute (the rows of a list box) and is passed
+     * straight through, so the one HTML meaning of `size` keeps working.
+     */
+    size?: "sm" | "md" | number;
+    /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box
+     *  the chevron is positioned against — so it could set a width and nothing
+     *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */
+    selectClassName?: string;
 }
 declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -232,9 +310,17 @@ declare function CardFooter({ className, ...props }: CardFooterProps): react.JSX
 /** A `<span>`'s props plus the words a reader hears — see {@link CardHeaderProps}.
  *  The ring is drawn with a border, so there is nothing inside it to put children in. */
 interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
-    /** What the spinner means, for a screen reader. Default: `common.loading` from the
-     *  {@link UiKitProvider}, else "Loading…". */
-    label?: string;
+    /**
+     * What the spinner means, for a screen reader. Default: `common.loading` from the
+     * {@link UiKitProvider}, else "Loading…".
+     *
+     * `null` makes it DECORATIVE — no role, no text, hidden from assistive tech. Use it
+     * whenever words are already there: beside visible "Loading…" text (otherwise it is
+     * announced twice), inside a labelled button (otherwise its text joins the button's
+     * name), or inside a live region of the app's own (otherwise that region and this
+     * one both announce).
+     */
+    label?: string | null;
 }
 /**
  * A spinning ring that also SAYS it is loading.
@@ -247,9 +333,9 @@ interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"
  * ignore a name on one.
  *
  * `relative` so the `sr-only` text has a local containing block (see
- * sr-only-containment.test). The role goes BEFORE the spread: a caller showing the
- * spinner next to text that already says "Loading" can pass `aria-hidden` or its own
- * `role` and have it win.
+ * sr-only-containment.test). Where the words are already on screen, pass
+ * `label={null}`: announcing is right for a spinner standing alone and wrong for one
+ * beside text, inside a button, or inside the app's own live region.
  */
 declare function Spinner({ className, label, ...rest }: SpinnerProps): react.JSX.Element;
 interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
@@ -260,6 +346,43 @@ interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "childre
     hint?: string;
 }
 declare function EmptyState({ title, hint, className, ...rest }: EmptyStateProps): react.JSX.Element;
+/** One tab of a {@link Tabs} strip. */
+interface TabItem<T extends string> {
+    id: T;
+    /** A ReactNode so a tab can pair an icon with text. */
+    label: ReactNode;
+    /** Optional trailing node (e.g. a count pill). */
+    badge?: ReactNode;
+    /** Marks a tab that IS a route — see {@link TabsProps}. */
+    href?: string;
+    /** Leading decoration: an icon, or the colour swatches of the lines this tab
+     *  draws in a chart above the strip. Hidden from assistive tech — it repeats
+     *  what the label says, or it says something the label must say instead. */
+    icon?: ReactNode;
+    /** A second, smaller line under the label — the one fact that tells two tabs
+     *  with similar labels apart ("80 km/h", "Level 3"). Part of the tab's name. */
+    detail?: ReactNode;
+    /** A tab that exists as a slot with nothing in it yet, drawn with a dashed
+     *  outline so a gap in a sequence looks like a gap. Visual only: say "empty" in
+     *  the label or `detail` if a screen reader needs to know. */
+    empty?: boolean;
+    /** `false` keeps this one tab when the strip has `onRemove` — the one sheet a
+     *  workbook cannot be without. Default: removable. */
+    removable?: boolean;
+    /** Plain-text name for the labels the strip composes about this tab ("Remove
+     *  …"), for when `label` is not a string. Default: `label` if it is a string,
+     *  else the id. */
+    name?: string;
+}
+/** The strings the strip renders on its own behalf — only when it can add or
+ *  remove tabs. */
+interface TabsLabels {
+    /** The "add" button's visible text when the caller gives no `addLabel`. */
+    add: string;
+    /** Accessible name of a tab's × — "Remove <tab>". */
+    remove: (tab: string) => string;
+}
+declare const DEFAULT_TABS_LABELS: TabsLabels;
 /**
  * The strip's own props sit on a `<div>`: the tablist IS the root element, so anything
  * a caller hangs on it — a `data-tour` anchor for the kit's guided tour, a test id, an
@@ -275,12 +398,7 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
      *  feedback #451), while a plain click still goes through `onChange` and stays
      *  client-side. Tabs that only flip local state leave it unset — a link to a URL
      *  that does not select the tab would be worse than no link. */
-    tabs: {
-        id: T;
-        label: ReactNode;
-        badge?: ReactNode;
-        href?: string;
-    }[];
+    tabs: TabItem<T>[];
     active: T;
     onChange: (id: T) => void;
     className?: string;
@@ -346,7 +464,35 @@ interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div
      * describes a tab as opening something that is not there.
      */
     panelId?: string;
+    /**
+     * Makes the tabs removable: an × on the OPEN tab, and Delete on a focused tab.
+     *
+     * The × is on the open tab only — a row of tabs each carrying one is a row of
+     * things to hit by accident, and the tab you can remove should be the one you
+     * are looking at — but its room is reserved on every removable tab, so opening a
+     * tab never widens it and never pushes the rest of the strip along (lenkbank
+     * feedback #72). It is named "Remove <tab>" and is not a tab stop of its own: the
+     * strip stays one stop, and the keyboard path is Delete (announced through
+     * `aria-keyshortcuts`), which removes whichever tab has focus.
+     *
+     * The strip only ASKS: it calls this, and the tab goes when the caller drops it
+     * from `tabs` — after a confirmation, a request, whatever it needs. When it does,
+     * focus that was on the removed tab (or its ×) moves to the open tab if the
+     * removed one was open, else to its neighbour, instead of falling to the page.
+     */
+    onRemove?: (id: T) => void;
+    /** Renders an "add" button after the last tab, outside the tablist — it is an
+     *  action, not a tab, and a tablist may own only tabs. */
+    onAdd?: () => void;
+    /** The add button's text. Say what is added — "Add loop", "Add report" says
+     *  more than "Add". Default: `tabs.add` from the {@link UiKitProvider}. */
+    addLabel?: string;
+    /** Overrides for this strip's strings. See {@link TabsLabels}. */
+    labels?: Partial<TabsLabels>;
+    /** 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;
 }
-declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, "aria-label": ariaLabel, ...rest }: TabsProps<T>): react.JSX.Element;
+declare function Tabs<T extends string>({ tabs, active, onChange, className, wrap, label, panelId, onRemove, onAdd, addLabel, labels, busy, "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, 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, Input, type InputProps, PHONE_QUERY, type PasswordRevealLabels, Select, type SelectProps, Spinner, type SpinnerProps, Tabs, type TabsProps, Textarea, type TextareaProps, buttonClasses, resolvePasswordRevealLabels };
+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 };

package/dist/components/ui.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useState } from "react";
-import { ChevronDown, Eye, EyeOff, HelpCircle } from "lucide-react";
+import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
@@ -34,17 +34,37 @@ 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 [&_svg]:size-5";
-const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", className, ...rest }, ref) {
+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 = {
+  md: "size-9 [&_svg]:size-5",
+  sm: "size-8 [&_svg]:size-5",
+  xs: "size-7 rounded [&_svg]:size-4",
+  "2xs": "size-6 rounded [&_svg]:size-3.5"
+};
+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)]"
+};
+const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "md", tone = "default", stopPropagation, className, onClick, onKeyDown, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
       ...rest,
+      onClick: (e) => {
+        if (stopPropagation) e.stopPropagation();
+        onClick?.(e);
+      },
+      onKeyDown: (e) => {
+        if (stopPropagation && (e.key === "Enter" || e.key === " ")) e.stopPropagation();
+        onKeyDown?.(e);
+      },
       className: cn(
         ICON_BUTTON_BASE,
-        size === "sm" ? "size-8" : "size-9",
+        ICON_BUTTON_SIZES[size],
         buttonVariantClasses[variant],
+        ICON_BUTTON_TONES[tone],
         className
       )
     }
@@ -167,13 +187,31 @@ function FieldHint({
 function FieldLabel({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
 }
+function Label({ required, size = "md", disabled, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...rest,
+      className: cn(
+        "inline-flex items-center gap-0.5 font-medium leading-none text-[var(--text-primary)]",
+        size === "sm" ? "text-xs" : "text-sm",
+        disabled && "cursor-default opacity-50",
+        className
+      ),
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--danger)]", children: "*" })
+      ]
+    }
+  );
+}
 const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
-function useFieldError(error, invalid, describedBy) {
+function useFieldError(error, invalid, describedBy, ariaInvalid) {
   const errorId = useId();
   const hasError = error !== void 0 && error !== null && error !== false && error !== "";
   return {
     /** A field carrying a message that says what is wrong with it IS wrong. */
-    isInvalid: Boolean(invalid) || hasError,
+    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === "true",
     describedBy: hasError ? describedBy ? `${describedBy} ${errorId}` : errorId : describedBy,
     errorEl: hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
   };
@@ -212,7 +250,8 @@ const Input = forwardRef(function Input2({
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"]
+    rest["aria-describedby"],
+    rest["aria-invalid"]
   );
   const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
   const isPassword = type === "password";
@@ -296,15 +335,19 @@ const Input = forwardRef(function Input2({
   ] }) });
 });
 Input.displayName = "Input";
-const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, ...rest }, ref) {
+const SELECT_SM = "h-7 py-0 pl-2 pr-7 text-xs";
+const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, size, selectClassName, ...rest }, ref) {
   const generated = useId();
+  const nativeSize = typeof size === "number" ? size : void 0;
+  const small = size === "sm" && label === void 0;
   const fieldId = id ?? generated;
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"]
+    rest["aria-describedby"],
+    rest["aria-invalid"]
   );
-  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, {});
+  const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "right-1.5 size-3.5" : void 0 });
   if (label === void 0) {
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
@@ -312,10 +355,17 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
         {
           ref,
           id,
+          size: nativeSize,
           ...rest,
           "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
           "aria-describedby": describedBy,
-          className: cn(FIELD_BASE, "appearance-none pr-9", isInvalid && FIELD_INVALID),
+          className: cn(
+            FIELD_BASE,
+            "appearance-none pr-9",
+            small && SELECT_SM,
+            selectClassName,
+            isInvalid && FIELD_INVALID
+          ),
           children
         }
       ),
@@ -328,6 +378,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
       {
         ref,
         id: fieldId,
+        size: nativeSize,
         ...rest,
         "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
         "aria-describedby": describedBy,
@@ -335,6 +386,7 @@ const Select = forwardRef(function Select2({ className, label, id, children, inv
           FIELD_BASE,
           FIELD_FLOATING_PAD,
           "peer appearance-none pr-9",
+          selectClassName,
           isInvalid && FIELD_INVALID
         ),
         children
@@ -350,7 +402,8 @@ const Textarea = forwardRef(function Textarea2({ className, label, id, placehold
   const { isInvalid, describedBy, errorEl } = useFieldError(
     error,
     invalid,
-    rest["aria-describedby"]
+    rest["aria-describedby"],
+    rest["aria-invalid"]
   );
   if (label === void 0) {
     return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(
@@ -456,19 +509,18 @@ function CardFooter({ className, ...props }) {
   );
 }
 function Spinner({ className, label, ...rest }) {
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { loading: label });
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      role: "status",
-      ...rest,
-      className: cn(
-        "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]",
-        className
-      ),
-      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: common.loading })
-    }
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, {
+    loading: label ?? void 0
+  });
+  const ring = cn(
+    "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]",
+    className
   );
+  if (label === null) return /* @__PURE__ */ jsx("span", { "aria-hidden": true, ...rest, className: ring });
+  return /* @__PURE__ */ jsx("span", { role: "status", ...rest, className: ring, children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+    common.loading,
+    " "
+  ] }) });
 }
 function EmptyState({ title, hint, className, ...rest }) {
   return /* @__PURE__ */ jsxs(
@@ -486,6 +538,10 @@ function EmptyState({ title, hint, className, ...rest }) {
     }
   );
 }
+const DEFAULT_TABS_LABELS = {
+  add: "Add tab",
+  remove: (tab) => `Remove ${tab}`
+};
 const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
 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)]";
@@ -494,6 +550,10 @@ const TAB_INACTIVE_CLASSES = "border-transparent text-[var(--text-muted)] hover:
 const TAB_WRAP_CLASSES = "whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
 const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]";
 const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]";
+const TAB_REMOVABLE_CLASSES = "pe-8 md:pe-8";
+const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-[var(--border-strong)] px-1.5";
+const TAB_ADD_CLASSES = "inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
+const TAB_ADD_WRAP_CLASSES = "px-2.5 text-xs md:px-3 md:text-sm";
 function Tabs({
   tabs,
   active,
@@ -502,10 +562,46 @@ function Tabs({
   wrap = false,
   label,
   panelId,
+  onRemove,
+  onAdd,
+  addLabel,
+  labels,
+  busy = false,
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const onTabKeyDown = (e) => {
+  const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
+  const stripRef = useRef(null);
+  const isRemovable = (tab) => onRemove !== void 0 && tab.removable !== false;
+  const nameOf = (tab) => tab.name ?? (typeof tab.label === "string" ? tab.label : tab.id);
+  const pendingFocus = useRef(null);
+  const requestRemove = (id) => {
+    const index = tabs.findIndex((t) => t.id === id);
+    pendingFocus.current = {
+      removed: id,
+      wasActive: id === active,
+      neighbour: (tabs[index + 1] ?? tabs[index - 1])?.id
+    };
+    onRemove?.(id);
+  };
+  useLayoutEffect(() => {
+    const pending = pendingFocus.current;
+    if (!pending || tabs.some((t) => t.id === pending.removed)) return;
+    pendingFocus.current = null;
+    const strip = stripRef.current;
+    if (!strip) return;
+    const focused = document.activeElement;
+    if (focused && focused !== document.body && !strip.contains(focused)) return;
+    const target = !pending.wasActive && tabs.some((t) => t.id === pending.neighbour) ? pending.neighbour : active;
+    const index = tabs.findIndex((t) => t.id === target);
+    strip.querySelectorAll('[role="tab"]')[index]?.focus();
+  }, [tabs, active]);
+  const onTabKeyDown = (e, tab) => {
+    if (e.key === "Delete" && isRemovable(tab)) {
+      e.preventDefault();
+      if (!busy) requestRemove(tab.id);
+      return;
+    }
     const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
     const strip = e.currentTarget.closest('[role="tablist"]');
@@ -517,15 +613,20 @@ function Tabs({
     const to = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (from + step + items.length) % items.length;
     items[to]?.focus();
   };
-  return /* @__PURE__ */ jsx(
+  const tablist = /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
+      ref: stripRef,
       role: "tablist",
       "aria-label": ariaLabel ?? label,
-      className: cn(wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES, className),
+      className: cn(
+        wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES,
+        onAdd ? "min-w-0" : className
+      ),
       children: tabs.map((tab) => {
         const isActive = tab.id === active;
+        const removable = isRemovable(tab);
         const shared = {
           role: "tab",
           "aria-selected": isActive,
@@ -545,17 +646,24 @@ function Tabs({
           // Only the open tab: see `panelId`.
           "aria-controls": isActive ? panelId : void 0,
           id: isActive && panelId ? `${panelId}-tab` : void 0,
-          onKeyDown: onTabKeyDown,
+          "aria-keyshortcuts": removable ? "Delete" : void 0,
+          onKeyDown: (e) => onTabKeyDown(e, tab),
           className: cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
-            wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_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: "inline-flex items-center gap-1.5", children: [
-          tab.label,
+        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
         ] });
-        return tab.href ? /* @__PURE__ */ jsx(
+        const element = tab.href ? /* @__PURE__ */ jsx(
           "a",
           {
             ...shared,
@@ -567,7 +675,7 @@ function Tabs({
               onChange(tab.id);
             },
             onKeyDown: (e) => {
-              onTabKeyDown(e);
+              onTabKeyDown(e, tab);
               if (e.defaultPrevented || e.key !== " ") return;
               e.preventDefault();
               onChange(tab.id);
@@ -576,9 +684,72 @@ function Tabs({
           },
           tab.id
         ) : /* @__PURE__ */ jsx("button", { ...shared, onClick: () => onChange(tab.id), children: inner }, tab.id);
+        if (!removable) return element;
+        return (
+          // 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: [
+            element,
+            isActive && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "2xs",
+                tone: "danger",
+                tabIndex: -1,
+                type: "button",
+                "aria-label": text.remove(nameOf(tab)),
+                disabled: busy,
+                onClick: () => requestRemove(tab.id),
+                className: cn(
+                  "absolute inset-y-0 end-1 my-auto",
+                  // On a wrapped strip's filled chip the quiet grey would vanish into
+                  // the brand fill below `md`.
+                  wrap && "text-[var(--brand-contrast)] md:text-[var(--text-placeholder)]"
+                ),
+                children: /* @__PURE__ */ jsx(X, {})
+              }
+            )
+          ] }, tab.id)
+        );
       })
     }
   );
+  if (!onAdd) return tablist;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        wrap ? "flex flex-wrap items-end gap-1.5 md:flex-nowrap md:gap-0" : "flex items-end",
+        className
+      ),
+      children: [
+        tablist,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-1 items-center",
+              wrap ? "md:self-stretch md:border-b md:border-[var(--border)]" : "self-stretch border-b border-[var(--border)]"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onAdd,
+                disabled: busy,
+                className: cn(TAB_ADD_CLASSES, wrap && TAB_ADD_WRAP_CLASSES),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+                  addLabel ?? text.add
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   Button,
@@ -590,6 +761,7 @@ export {
   CardHeader,
   CardTitle,
   DEFAULT_PASSWORD_REVEAL_LABELS,
+  DEFAULT_TABS_LABELS,
   EmptyState,
   FIELD_BASE,
   FIELD_DISPLAY,
@@ -606,6 +778,7 @@ export {
   FloatingField,
   IconButton,
   Input,
+  Label,
   PHONE_QUERY,
   Select,
   Spinner,