@eifi1/ui-kit 0.7.0 → 0.8.0

package/dist/wizard/wizard-summary.d.ts

@@ -8,10 +8,18 @@ import { SummarySection, WizardLabels } from './types.js';
  * Sections are data, not children, because "jump back to step N" is the whole
  * point of the component and a caller assembling its own cards invariably drops
  * it. Labels and values are `ReactNode`, so a value can be a badge or a link.
+ *
+ * A section with no `stepIndex` (file-level counts, a total) is a card without an
+ * edit button. `disabled` greys every edit button at once — while the commit runs,
+ * when jumping back would show a step whose edits can no longer reach the request.
  */
-declare function WizardSummary({ sections, onEditStep, labels, }: {
+declare function WizardSummary({ sections, onEditStep, disabled, labels, }: {
     sections: SummarySection[];
-    onEditStep: (stepIndex: number) => void;
+    /** Called with the section's `stepIndex`. Optional only for a summary whose
+     *  sections name no step at all. */
+    onEditStep?: (stepIndex: number) => void;
+    /** Disable every edit button (e.g. `wizard.isSubmitting`). */
+    disabled?: boolean;
     labels?: Partial<WizardLabels>;
 }): react.JSX.Element;
 

package/dist/wizard/wizard-summary.js

@@ -7,6 +7,7 @@ import { useKitLabels } from "../i18n/kit-labels.js";
 function WizardSummary({
   sections,
   onEditStep,
+  disabled = false,
   labels
 }) {
   const l = useKitLabels("wizard", DEFAULT_WIZARD_LABELS, labels);
@@ -15,13 +16,14 @@ function WizardSummary({
     sections.map((section, sIdx) => /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
         /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: section.label }),
-        /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(
+        section.stepIndex !== void 0 && onEditStep && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(
           IconButton,
           {
             size: "sm",
             variant: "ghost",
             "aria-label": l.edit,
             title: l.edit,
+            disabled,
             onClick: () => onEditStep(section.stepIndex),
             children: /* @__PURE__ */ jsx(Pencil, {})
           }

package/dist/wizard/wizard-summary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  labels,\n}: {\n  sections: SummarySection[];\n  onEditStep: (stepIndex: number) => void;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. */}\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            <CardAction>\n              <IconButton\n                size=\"sm\"\n                variant=\"ghost\"\n                aria-label={l.edit}\n                title={l.edit}\n                onClick={() => onEditStep(section.stepIndex)}\n              >\n                <Pencil />\n              </IconButton>\n            </CardAction>\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AA2BM,cAMI,YANJ;AA3BN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AAEjF,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAUtB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAIC;AAAA,2BAAC,cAAW,WAAU,QACpB;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAChD,oBAAC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd,OAAO,EAAE;AAAA,YACT,SAAS,MAAM,WAAW,QAAQ,SAAS;AAAA,YAE3C,8BAAC,UAAO;AAAA;AAAA,QACV,GACF;AAAA,SACF;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SAlCS,IAmCX,CACD;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. */}\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                <IconButton\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  aria-label={l.edit}\n                  title={l.edit}\n                  disabled={disabled}\n                  onClick={() => onEditStep(section.stepIndex as number)}\n                >\n                  <Pencil />\n                </IconButton>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAoCM,cAMI,YANJ;AApCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AAEjF,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AActB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAIC;AAAA,2BAAC,cAAW,WAAU,QACpB;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd,OAAO,EAAE;AAAA,YACT;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SArCS,IAsCX,CACD;AAAA,KACH;AAEJ;","names":[]}

package/dist/wizard.d.ts

@@ -1,4 +1,4 @@
-export { DEFAULT_WIZARD_LABELS, FieldErrors, StepStatus, SummaryItem, SummarySection, UseWizardOptions, UseWizardReturn, ValidateResult, WizardLabels, WizardStepConfig, resolveWizardLabels } from './wizard/types.js';
+export { DEFAULT_WIZARD_LABELS, FieldErrors, StepStatus, SummaryItem, SummarySection, UseWizardOptions, UseWizardReturn, ValidateResult, WizardLabels, WizardStepConfig, WizardUrlSync, resolveWizardLabels } from './wizard/types.js';
 export { useWizard } from './wizard/use-wizard.js';
 export { WizardContextProvider, WizardContextValue, useWizardContext } from './wizard/wizard-context.js';
 export { RequiredFieldSpec, requiredFieldsValidator } from './wizard/validation.js';
@@ -6,3 +6,6 @@ export { WizardStep } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
+import './components/ui.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';

package/dist/wizard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/wizard.ts"],"sourcesContent":["// `@eifi1/ui-kit/wizard` — the multi-step engine, its chrome and its review step.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: useWizard syncs the active step to `?step=` via useSearchParams.\n//\n// NOT the same thing as `WizardStepper` in components/wizard-stepper, which is a bare\n// two-step indicator with no engine and stays on the main barrel.\nexport * from \"./wizard/types\";\nexport * from \"./wizard/use-wizard\";\nexport * from \"./wizard/wizard-context\";\nexport * from \"./wizard/validation\";\nexport * from \"./wizard/wizard-step\";\nexport * from \"./wizard/wizard-summary\";\nexport * from \"./wizard/stepper-nav\";\n"],"mappings":";AAOA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/wizard.ts"],"sourcesContent":["// `@eifi1/ui-kit/wizard` — the multi-step engine, its chrome and its review step.\n//\n// A re-slicing of the main barrel, not a new API. By default useWizard syncs the\n// active step to `?step=` via react-router's useSearchParams, so it needs a router;\n// `urlSync: false` keeps the step in memory and needs none.\n//\n// NOT the same thing as `WizardStepper` in components/wizard-stepper, which is a bare\n// two-step indicator with no engine and stays on the main barrel.\nexport * from \"./wizard/types\";\nexport * from \"./wizard/use-wizard\";\nexport * from \"./wizard/wizard-context\";\nexport * from \"./wizard/validation\";\nexport * from \"./wizard/wizard-step\";\nexport * from \"./wizard/wizard-summary\";\nexport * from \"./wizard/stepper-nav\";\n"],"mappings":";AAQA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/alert-banner.tsx

@@ -1,8 +1,12 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { AlertTriangle } from "lucide-react";
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { AlertTriangle, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
 
-export type AlertTone = "danger" | "warning" | "neutral";
+/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
+ *  preview and beta-performance banners, which borrowed `warning` for want of it and
+ *  so told every user of the preview build that something was wrong. */
+export type AlertTone = "danger" | "warning" | "info" | "neutral";
 
 /** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns
  * its own box (a Card, say) can take the tone alone. Single source for both
@@ -20,6 +24,7 @@ export type AlertTone = "danger" | "warning" | "neutral";
 const TONE_FRAME: Record<AlertTone, string> = {
   danger: "border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]",
   warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
+  info: "border-2 border-[var(--info-border)] bg-[var(--info-bg)]",
   neutral: "border border-[var(--border)]",
 };
 
@@ -38,38 +43,224 @@ export function alertFrameClass(tone: AlertTone): string {
   return `${box} ${TONE_FRAME[tone]}`;
 }
 
-const TONE_TEXT: Record<Exclude<AlertTone, "neutral">, string> = {
+const TONE_TEXT: Record<AlertTone, string> = {
   danger: "text-[var(--danger)]",
   warning: "text-[var(--warning)]",
+  info: "text-[var(--info)]",
+  neutral: "text-[var(--text-secondary)]",
 };
 
-const TONE_ICON: Record<Exclude<AlertTone, "neutral">, string> = {
+const TONE_ICON: Record<AlertTone, string> = {
   danger: "text-[var(--danger)]",
   warning: "text-[var(--warning)]",
+  info: "text-[var(--info)]",
+  neutral: "text-[var(--text-muted)]",
 };
 
-export interface AlertBannerProps extends ComponentPropsWithoutRef<"div"> {
-  /** `neutral` is deliberately not offered: a callout with a warning triangle in it
-   *  and no colour is a warning that looks like a note, which is the one thing this
-   *  box must never be. The neutral frame is still available on its own through
-   *  {@link toneFrameClass}. */
-  tone?: Exclude<AlertTone, "neutral">;
+/** Which glyph a tone draws when the caller names none. The triangle belongs to the
+ *  two tones that mean "something is wrong"; `info` and `neutral` get the ⓘ. That is
+ *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a
+ *  triangle with no colour is a warning that looks like a note — and a neutral note
+ *  that draws no triangle is simply a note (lenkbank's "values are rounded"). */
+const TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {
+  danger: AlertTriangle,
+  warning: AlertTriangle,
+  info: Info,
+  neutral: Info,
+};
+
+interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "onClick"> {
+  /** Default `danger`. `info` for news, `neutral` for a plain note — see
+   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */
+  tone?: AlertTone;
+  /**
+   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role
+   * and NOTHING else — no border, no surface, no padding — so it fits inside a
+   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar
+   * shows "Radius below the minimum" and "Solving…" there; a box would have doubled
+   * the row's height every time either appeared.
+   *
+   * The inline variant is also a LIVE REGION by default — `role="alert"` for
+   * `danger`, `role="status"` for the rest — because a message that appears in a
+   * toolbar in answer to what the user just did is exactly the kind a screen reader
+   * otherwise never hears. The box stays role-less as it always was: it is usually
+   * page furniture present at load, and an alert that fires on every navigation is
+   * noise. Either way a `role` you pass wins.
+   */
+  variant?: "box" | "inline";
+  /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
+   *  `null` draws none. Always decorative; the text carries the message. */
+  icon?: ReactNode;
+  /** Renders an × at the end that calls this. The banner does not hide itself — the
+   *  caller removes it (and remembers that it did), as with every other kit control
+   *  whose state is app state. */
+  onDismiss?: () => void;
+  /** Accessible name of the ×. Default: `common.dismiss` from the
+   *  {@link UiKitProvider}, else "Dismiss". */
+  dismissLabel?: string;
   children: ReactNode;
 }
 
-/** Static warning/danger callout box with the shared frame and an icon. */
-export function AlertBanner({ tone = "danger", className, children, ...rest }: AlertBannerProps) {
+/**
+ * The whole-row modes. keksdose's budget-summary card is a banner you tap to open
+ * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a
+ * banner with a link inside it was a small target inside a big one that looked like
+ * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one
+ * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.
+ *
+ * With `onDismiss` as well, the × cannot go inside the button (interactive content
+ * may not nest), so the frame becomes a wrapper holding two siblings: the row's
+ * button, stretched over the whole frame, and the × on top of it. It still looks and
+ * clicks like one banner with an × in its corner, and the two are separate tab stops.
+ */
+export type AlertBannerProps = AlertBannerBaseProps &
+  (
+    | {
+        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */
+        href?: string;
+        onClick?: never;
+      }
+    | {
+        href?: never;
+        /** Makes the whole banner one button. Mutually exclusive with `href`. The
+         *  event's element is the `<button>`, not a `<div>`. */
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+      }
+  );
+
+/** Warning/danger/info callout box with the shared frame and an icon — or, with
+ *  `variant="inline"`, the same message as a frameless line of toned text. */
+export function AlertBanner({
+  tone = "danger",
+  variant = "box",
+  icon,
+  onDismiss,
+  dismissLabel,
+  href,
+  onClick,
+  className,
+  children,
+  role,
+  ...rest
+}: AlertBannerProps) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });
+  const inline = variant === "inline";
+  const interactive = href !== undefined || onClick !== undefined;
+  const resolvedRole = role ?? (inline ? (tone === "danger" ? "alert" : "status") : undefined);
+
+  const Glyph = TONE_GLYPH[tone];
+  const glyph =
+    icon === null ? null : icon !== undefined ? (
+      <span aria-hidden className={cn("flex shrink-0 [&_svg]:size-4", !inline && "mt-0.5", TONE_ICON[tone])}>
+        {icon}
+      </span>
+    ) : (
+      <Glyph aria-hidden className={cn("size-4 shrink-0", !inline && "mt-0.5", TONE_ICON[tone])} />
+    );
+
+  // The row layout, shared by every shape below.
+  const row = inline ? "inline-flex items-center gap-1.5 text-sm" : "flex items-start gap-2 text-sm";
+  const frame = inline ? "" : alertFrameClass(tone);
+  const focusRing =
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
+
+  const content = (
+    <>
+      {glyph}
+      <span className={cn(!inline && "flex-1", "min-w-0 text-start")}>{children}</span>
+      {interactive && (
+        <ChevronRight
+          aria-hidden
+          className={cn("size-4 shrink-0 opacity-70 rtl:-scale-x-100", !inline && "mt-0.5")}
+        />
+      )}
+    </>
+  );
+
+  const dismiss = onDismiss ? (
+    <button
+      type="button"
+      aria-label={common.dismiss}
+      onClick={(e) => {
+        // A dismiss inside a whole-row banner must not also follow the row.
+        e.preventDefault();
+        e.stopPropagation();
+        onDismiss();
+      }}
+      className={cn(
+        // Negative margins so the × does not make the box taller than its text; the
+        // hover wash takes the tone's own hue, so it works on every tone.
+        "relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10",
+        focusRing,
+      )}
+    >
+      <X aria-hidden className="size-4" />
+    </button>
+  ) : null;
+
+  if (!interactive) {
+    return (
+      <div
+        // Arbitrary attributes first — a `data-tour` anchor, a test id, an
+        // `aria-describedby` — then the layout and tone classes, which are merged
+        // through `cn` rather than spread so a caller's `className` refines the box
+        // instead of replacing it.
+        {...rest}
+        role={resolvedRole}
+        className={cn(row, frame, TONE_TEXT[tone], className)}
+      >
+        {content}
+        {dismiss}
+      </div>
+    );
+  }
+
+  const hover = "cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110";
+  // With a dismiss the frame is a wrapper and the row element is stretched over it;
+  // without one the row element IS the frame.
+  const split = dismiss !== null;
+  const actionClass = split
+    ? cn(
+        "flex min-w-0 flex-1 gap-2 text-start",
+        inline ? "items-center" : "items-start",
+        "outline-none after:absolute after:inset-0 after:rounded-md after:content-['']",
+        "focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]",
+      )
+    : cn(row, !inline && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
+  // The div's attributes are the row element's: an `id`, a test id or an
+  // `aria-describedby` belongs on the thing that takes focus. The live-region role is
+  // NOT carried over — a button or a link that is also a `status` is neither.
+  const actionRest = split ? {} : rest;
+
+  const action =
+    href !== undefined ? (
+      <a
+        {...(actionRest as ComponentPropsWithoutRef<"a">)}
+        href={href}
+        className={actionClass}
+      >
+        {content}
+      </a>
+    ) : (
+      <button
+        {...(actionRest as ComponentPropsWithoutRef<"button">)}
+        type="button"
+        onClick={onClick}
+        className={actionClass}
+      >
+        {content}
+      </button>
+    );
+
+  if (!split) return action;
   return (
     <div
-      // Arbitrary attributes first — a `data-tour` anchor, a test id, an
-      // `aria-describedby` — then the layout and tone classes, which are merged
-      // through `cn` rather than spread so a caller's `className` refines the box
-      // instead of replacing it.
       {...rest}
-      className={cn("flex items-start gap-2 text-sm", alertFrameClass(tone), TONE_TEXT[tone], className)}
+      role={resolvedRole}
+      className={cn("relative", row, frame, TONE_TEXT[tone], hover, className)}
     >
-      <AlertTriangle className={cn("mt-0.5 size-4 shrink-0", TONE_ICON[tone])} />
-      <span className="flex-1">{children}</span>
+      {action}
+      {dismiss}
     </div>
   );
 }

package/src/components/button-group.tsx

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../lib/cn";
+
+// Every class below is spelled out in full rather than assembled from parts: the
+// consumer's Tailwind build finds classes by scanning this package's source as text,
+// and a class that exists only after a template literal runs is never generated.
+//
+// Each rule is written twice, once for a direct child and once for a `<button>` one
+// level down. The second is for a Tooltip-wrapped IconButton — the map zoom's + and −
+// both carry a tooltip — where the direct child is the tooltip's wrapper span and the
+// button that draws the border and the corners sits inside it.
+const JOINED_COMMON = cn(
+  "inline-flex rounded-md border border-[var(--border)]",
+  // The group draws the frame; each member gives up its own border, radius and shadow.
+  "[&>*]:rounded-none [&>*]:border-0 [&>*]:shadow-none",
+  "[&>*>button]:rounded-none [&>*>button]:border-0 [&>*>button]:shadow-none",
+  "[&>*]:border-[var(--border)]",
+  // A focused member rises above its neighbours so its ring is not painted over by
+  // the next one's background.
+  "[&>*]:relative [&>*:focus-within]:z-10",
+);
+
+const JOINED: Record<"horizontal" | "vertical", string> = {
+  // Logical edges and corners throughout (`border-s`, `rounded-s-*`), so in RTL the
+  // first member sits on the right with the right-hand corners rounded — the physical
+  // pair would round the outside of the last button and square off the first.
+  horizontal: cn(
+    JOINED_COMMON,
+    "flex-row items-stretch",
+    "[&>*:not(:first-child)]:border-s",
+    "[&>:first-child]:rounded-s-md [&>:last-child]:rounded-e-md",
+    "[&>:first-child>button]:rounded-s-md [&>:last-child>button]:rounded-e-md",
+  ),
+  // The block axis is top-to-bottom in both reading directions, so top/bottom are
+  // already the logical edges here.
+  vertical: cn(
+    JOINED_COMMON,
+    "flex-col items-stretch",
+    "[&>*:not(:first-child)]:border-t",
+    "[&>:first-child]:rounded-t-md [&>:last-child]:rounded-b-md",
+    "[&>:first-child>button]:rounded-t-md [&>:last-child>button]:rounded-b-md",
+  ),
+};
+
+export interface ButtonGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+  /** `horizontal` (default): side by side, in reading order. `vertical`: stacked —
+   *  the map's zoom + over −. */
+  orientation?: "horizontal" | "vertical";
+}
+
+/**
+ * Adjacent `Button`s or `IconButton`s drawn as one joined control: a single frame,
+ * hairline dividers between the members, rounded only at the outer corners.
+ *
+ * keksdose asked for it twice — "collapse all / expand all" above its category
+ * tree, and the + and − of its map zoom — both hand-built with negative margins and
+ * physical `rounded-l` / `rounded-r`, which came out inside-out under `dir="rtl"`.
+ *
+ * `role="group"` with a name: a reader then introduces the pair as "Zoom, group"
+ * before reading "Zoom in", which is what tells a listener that the next button
+ * belongs with this one. Pass `aria-label` (or `aria-labelledby`); a group with no
+ * name is one more unlabelled wrapper. It is NOT a toolbar — it adds no arrow-key
+ * roving, and every member keeps its own tab stop, as plain adjacent buttons do.
+ * For one-of-many selection use `ToggleGroup`, which has the radio semantics.
+ */
+export function ButtonGroup({ orientation = "horizontal", className, ...rest }: ButtonGroupProps) {
+  return (
+    <div
+      {...rest}
+      role="group"
+      data-orientation={orientation}
+      className={cn(JOINED[orientation], className)}
+    />
+  );
+}