@eifi1/ui-kit 0.8.1 → 0.10.0

package/README.md

@@ -347,8 +347,12 @@ is the only automated check that the documented Tailwind `@source` step works.
 npm test          # vitest run
 npm run test:watch
 npm run typecheck
+npm run check     # everything CI runs; the pre-push hook runs it and blocks on failure
 ```
 
+Local first: `npm run check` is the full gate, on your machine, before anything is pushed;
+CI calls the same script and only confirms. See CONTRIBUTING.md → "The gates".
+
 Vitest + jsdom, configured as a copy of the lead consumer's setup rather than a new
 dialect — so a test can move between this package and an app unchanged. The suite pins
 `TZ=Europe/Berlin`, which is load-bearing for `lib/dates.ts`: those helpers answer with
@@ -373,21 +377,21 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**705 names from 120 modules** — 368 values and 337 types. _Italic_ is a type-only export.
+**788 names from 130 modules** — 393 values and 395 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 705 |
+| `@eifi1/ui-kit` | 788 |
 | `@eifi1/ui-kit/chart` | 93 |
 | `@eifi1/ui-kit/shell` | 18 |
 | `@eifi1/ui-kit/data-table` | 32 |
 | `@eifi1/ui-kit/wizard` | 21 |
 | `@eifi1/ui-kit/tour` | 7 |
 | `@eifi1/ui-kit/feedback` | 29 |
-| `@eifi1/ui-kit/search` | 5 |
+| `@eifi1/ui-kit/search` | 22 |
 | `@eifi1/ui-kit/dates` | 20 |
 | `@eifi1/ui-kit/table-text` | 8 |
 | `@eifi1/ui-kit/rhf` | 13 |
@@ -437,7 +441,7 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonClassesOptions`_, _`ButtonProps`_, _`ButtonSize`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleProps`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
+| `components/ui` | `Button`, `buttonClasses`, `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `DEFAULT_PASSWORD_REVEAL_LABELS`, `DEFAULT_TABS_LABELS`, `EmptyState`, `FIELD_BASE`, `FIELD_DISPLAY`, `FIELD_FLOATING_PAD`, `FIELD_INVALID`, `FIELD_TRIGGER`, `FIELD_WRITABLE_LOOK`, `FieldChevron`, `FieldHint`, `FieldLabel`, `FLOATING_INPUT_CLASS`, `FLOATING_LABEL_CLASS`, `FLOATING_LABEL_STATIC`, `FloatingField`, `IconButton`, `Input`, `Label`, `PHONE_QUERY`, `resolvePasswordRevealLabels`, `Select`, `Spinner`, `Tabs`, `Textarea`, _`ButtonClassesOptions`_, _`ButtonProps`_, _`ButtonSize`_, _`ButtonTone`_, _`ButtonVariant`_, _`CardActionProps`_, _`CardContentProps`_, _`CardDescriptionProps`_, _`CardFooterProps`_, _`CardHeaderProps`_, _`CardProps`_, _`CardTitleProps`_, _`EmptyStateProps`_, _`FieldChevronProps`_, _`FieldHintProps`_, _`FieldLabelProps`_, _`FloatingFieldProps`_, _`IconButtonProps`_, _`IconButtonSize`_, _`IconButtonTone`_, _`InputProps`_, _`LabelProps`_, _`PasswordRevealLabels`_, _`SelectProps`_, _`SpinnerProps`_, _`TabItem`_, _`TabsLabels`_, _`TabsProps`_, _`TextareaProps`_ |
 | `components/search-field` | `SearchField`, _`SearchFieldProps`_ |
 | `components/dropdown` | `DropdownPanel`, `DropdownSearchHeader`, `useDropdown`, `useDropdownSearch`, _`DropdownPanelProps`_, _`DropdownSearchHeaderProps`_ |
 | `components/popover` | `DEFAULT_POPOVER_LABELS`, `Popover`, _`PopoverLabels`_, _`PopoverProps`_ |
@@ -472,6 +476,7 @@ re-slicing of it, never a second API.
 | `components/danger-confirm` | `DangerConfirm`, `DEFAULT_DANGER_CONFIRM_LABELS`, _`DangerConfirmLabels`_, _`DangerConfirmProps`_ |
 | `components/confirm-dialog` | `ConfirmProvider`, `DEFAULT_CONFIRM_DIALOG_LABELS`, `useConfirm`, _`ConfirmDialogLabels`_, _`ConfirmFn`_, _`ConfirmOptions`_, _`ConfirmProviderProps`_, _`ConfirmTone`_ |
 | `components/floating-panel` | `DEFAULT_FLOATING_PANEL_LABELS`, `FloatingActionButton`, `FloatingPanel`, _`FloatingActionButtonProps`_, _`FloatingCorner`_, _`FloatingPanelLabels`_, _`FloatingPanelProps`_ |
+| `components/bulk-action-bar` | `BulkActionBar`, `DEFAULT_BULK_ACTION_BAR_LABELS`, _`BulkActionBarLabels`_, _`BulkActionBarProps`_, _`BulkActionBarVariant`_ |
 | `components/swatch-picker` | `DEFAULT_SWATCH_PICKER_LABELS`, `SwatchPicker`, _`SwatchOption`_, _`SwatchPickerLabels`_, _`SwatchPickerProps`_ |
 | `components/icon-picker` | `DEFAULT_ICON_PICKER_LABELS`, `IconPicker`, _`IconOption`_, _`IconPickerLabels`_, _`IconPickerProps`_ |
 | `components/choice-card` | `ChoiceCard`, `ChoiceCardGroup`, _`ChoiceCardGroupProps`_, _`ChoiceCardMultipleProps`_, _`ChoiceCardOption`_, _`ChoiceCardProps`_, _`ChoiceCardSingleProps`_, _`ChoiceCardType`_ |
@@ -485,9 +490,9 @@ re-slicing of it, never a second API.
 | `components/facing-pair` | `FACING_SIDES`, `facingAxes`, `facingBand`, `facingHeadingPad`, _`FacingSide`_ |
 | `components/series-chart-labels` | `DEFAULT_SERIES_CHART_LABELS`, _`SeriesChartLabels`_ |
 | `components/account-settings` | `PasswordSetting`, `ProfileSetting`, `TwoFactorSetting`, _`PasswordSettingLabels`_, _`ProfileSettingLabels`_, _`TwoFactorSettingLabels`_ |
-| `components/alert-banner` | `AlertBanner`, `alertFrameClass`, `toneFrameClass`, _`AlertBannerProps`_, _`AlertTone`_ |
+| `components/alert-banner` | `AlertBanner`, `alertFrameClass`, `toneFrameClass`, _`AlertBannerProps`_, _`AlertSize`_, _`AlertTone`_ |
 | `components/toggle-group` | `ToggleGroup`, _`ToggleGroupBaseProps`_, _`ToggleGroupClearableProps`_, _`ToggleGroupProps`_, _`ToggleGroupRequiredProps`_, _`ToggleOption`_ |
-| `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `resolveChipInputLabels`, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipLinkProps`_, _`ChipProps`_, _`ChipShape`_, _`ChipSize`_, _`ChipTone`_, _`ChipVariant`_ |
+| `components/chip` | `Chip`, `ChipInput`, `DEFAULT_CHIP_INPUT_LABELS`, `resolveChipInputLabels`, _`ChipHue`_, _`ChipInputLabels`_, _`ChipInputProps`_, _`ChipLinkProps`_, _`ChipProps`_, _`ChipShape`_, _`ChipSize`_, _`ChipTone`_, _`ChipVariant`_ |
 | `components/wizard-stepper` | `WizardStepper` |
 | `components/hover-menu` | `HoverMenu`, _`HoverMenuProps`_ |
 | `components/modal` | `Modal`, `ModalCloseContext`, `useBackdropClose`, _`ModalProps`_ |
@@ -495,21 +500,28 @@ re-slicing of it, never a second API.
 | `components/grouped-picker` | `GroupedPicker`, _`GroupedPickerProps`_, _`PickerGroup`_ |
 | `components/file-dropzone` | `FileDropzone`, _`FileDropzoneProps`_, _`FileDropzoneRejectionFeedback`_, _`FileDropzoneState`_ |
 | `components/mini-calendar` | `DEFAULT_MINI_CALENDAR_LABELS`, `MiniCalendar`, _`MiniCalendarLabels`_, _`MiniCalendarProps`_, _`WeekDay`_ |
-| `components/date-picker` | `DatePicker`, `DateRangePicker`, _`DatePickerProps`_, _`DateRangeCommit`_, _`DateRangePickerPreset`_, _`DateRangePickerProps`_ |
+| `components/date-picker` | `DatePicker`, `DateRangePicker`, _`DatePickerProps`_, _`DateRangeCommit`_, _`DateRangeDraftSummary`_, _`DateRangePickerPreset`_, _`DateRangePickerProps`_, _`DateRangeTriggerRenderProps`_, _`DateTriggerAttributes`_ |
 | `components/tree-view` | `TreeRow`, `TreeView`, _`TreeItemState`_, _`TreeNode`_, _`TreeRowProps`_, _`TreeViewProps`_ |
 | `components/chart` | `ChartContainer`, `ChartLegend`, `ChartLegendContent`, `ChartTooltip`, `ChartTooltipContent`, `useChart`, _`ChartConfig`_, _`ChartSeriesConfig`_ |
-| `components/description-list` | `DescriptionItem`, `DescriptionList`, _`DescriptionItemProps`_, _`DescriptionListDensity`_, _`DescriptionListLayout`_, _`DescriptionListProps`_ |
+| `components/description-list` | `DescriptionItem`, `DescriptionList`, _`DescriptionItemProps`_, _`DescriptionListColumns`_, _`DescriptionListDensity`_, _`DescriptionListLayout`_, _`DescriptionListProps`_ |
 | `components/progress-bar` | `ProgressBar`, _`ProgressBarProps`_, _`ProgressBarSize`_, _`ProgressBarTone`_ |
 | `components/skeleton` | `Skeleton`, _`SkeletonProps`_, _`SkeletonShape`_ |
 | `components/copy-button` | `CopyButton`, `DEFAULT_COPY_BUTTON_LABELS`, _`CopyButtonLabels`_, _`CopyButtonProps`_ |
 | `components/button-group` | `ButtonGroup`, _`ButtonGroupProps`_ |
-| `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeadProps`_, _`TableProps`_, _`TableRowProps`_ |
+| `components/table` | `NUMERIC_CELL_CLASS`, `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFoot`, `TableHead`, `TableHeaderCell`, `TableRow`, _`TableAlign`_, _`TableBodyProps`_, _`TableCaptionProps`_, _`TableCellProps`_, _`TableDensity`_, _`TableEmptyProps`_, _`TableFootProps`_, _`TableHeaderCellProps`_, _`TableHeadProps`_, _`TableLayout`_, _`TableProps`_, _`TableRowProps`_ |
 | `components/separator` | `Separator`, _`SeparatorProps`_ |
 | `components/scroll-area` | `ScrollArea`, _`ScrollAreaProps`_ |
+| `components/list` | `DEFAULT_LIST_LABELS`, `List`, `ListItem`, _`ListDensity`_, _`ListItemLinkProps`_, _`ListItemProps`_, _`ListLabels`_, _`ListProps`_, _`ListSeparator`_ |
+| `components/menu-item` | `MenuItem`, _`MenuItemLinkProps`_, _`MenuItemProps`_, _`MenuItemTone`_ |
+| `components/text` | `Caption`, `CAPTION_CLASS`, `SECTION_LABEL_CLASS`, `SectionLabel`, _`CaptionProps`_, _`SectionLabelProps`_, _`SectionLabelSize`_ |
+| `components/status-dot` | `StatusDot`, _`StatusDotProps`_, _`StatusDotSize`_, _`StatusDotTone`_ |
+| `components/page-header` | `PageHeader`, _`PageHeaderProps`_, _`PageHeaderSize`_ |
+| `components/breadcrumbs` | `Breadcrumbs`, `DEFAULT_BREADCRUMBS_LABELS`, _`BreadcrumbItem`_, _`BreadcrumbLinkProps`_, _`BreadcrumbsLabels`_, _`BreadcrumbsProps`_ |
+| `components/toast` | `DEFAULT_TOAST_LABELS`, `toast`, `TOAST_ACTION_DURATION`, `Toaster`, _`ToastAction`_, _`ToasterOffset`_, _`ToasterProps`_, _`ToastId`_, _`ToastLabels`_, _`ToastOptions`_, _`ToastPosition`_, _`ToastPromiseOptions`_, _`ToastRedoOptions`_, _`ToastSwipeDirection`_, _`ToastUndoOptions`_ |
 | `components/data-table-labels` | `DEFAULT_DATA_TABLE_LABELS`, `missingDataTableLabels`, `resolveDataTableLabels`, _`DataTableLabels`_ |
 | `components/data-table-sort` | `decodeSorts`, `encodeSorts`, `nextSorts`, `normalizeSorts`, _`SortCycle`_, _`SortDir`_, _`SortState`_, _`SortStepOptions`_ |
 | `components/data-table-filters` | `decodeFilterValue`, `decodeFilterValueOfType`, `defaultFilterState`, `encodeFilterValue`, `isFilterActive`, `resolveFilter`, `rowMatches`, _`ColumnFilter`_, _`FilterValue`_ |
-| `components/data-table` | `DataTable`, _`DataTableChrome`_, _`DataTableColumn`_, _`DataTableDensity`_, _`DataTableProps`_, _`FilterState`_, _`MobileSwipeActions`_, _`ServerPagination`_ |
+| `components/data-table` | `DataTable`, _`DataTableCellProps`_, _`DataTableChrome`_, _`DataTableColumn`_, _`DataTableDensity`_, _`DataTableHeadProps`_, _`DataTableProps`_, _`FilterState`_, _`MobileSwipeActions`_, _`ServerPagination`_ |
 | `components/data-table-pagination` | `PAGE_SIZE_OPTIONS`, `Pagination` |
 | `components/data-table-filter-popover` | `FilterPopover` |
 | `components/combobox-core` | _`ComboClearValue`_, _`ComboOption`_ |
@@ -556,7 +568,9 @@ re-slicing of it, never a second API.
 
 | Module | Exports |
 |---|---|
-| `search/command-palette` | `CommandPalette`, `DEFAULT_COMMAND_PALETTE_LABELS`, `useCommandKey`, _`CommandItem`_, _`CommandPaletteLabels`_ |
+| `search/command-palette` | `CommandPalette`, `DEFAULT_COMMAND_PALETTE_LABELS`, `useCommandKey`, _`CommandItem`_, _`CommandPaletteDensity`_, _`CommandPaletteLabels`_ |
+| `search/search-index` | `createSearchIndex`, `matchEntries`, `normalizeSearchText`, `SEARCH_TIER_POINTS`, _`SearchEntry`_, _`SearchHit`_, _`SearchIndex`_, _`SearchIndexOptions`_, _`SearchMatchField`_ |
+| `search/global-search` | `DEFAULT_GLOBAL_SEARCH_LABELS`, `GlobalSearch`, _`GlobalSearchLabels`_, _`GlobalSearchProps`_, _`GlobalSearchSource`_, _`GlobalSearchSuggestion`_, _`GlobalSearchTriggerProps`_ |
 
 ### i18n
 

package/dist/components/alert-banner.d.ts

@@ -4,7 +4,12 @@ import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
 /** `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. */
-type AlertTone = "danger" | "warning" | "info" | "neutral";
+type AlertTone = "danger" | "warning" | "info" | "success" | "neutral";
+/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total
+ *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand
+ *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two
+ *  key states, goal-form). At body size those read as a second heading. */
+type AlertSize = "sm" | "md";
 /** The tone's border + surface on their own — for a caller that already has a box
  * with its own radius and padding (e.g. a Card). Remember to shave 1px off that
  * padding for the colored tones, whose border is 2px wide. */
@@ -12,7 +17,7 @@ declare function toneFrameClass(tone: AlertTone): string;
 /** Single source for the warning-callout frame (feedback #277): the tone's border
  * and surface plus this component's own radius and padding, the latter
  * compensating the 2px colored border so toggling tones never shifts layout. */
-declare function alertFrameClass(tone: AlertTone): string;
+declare function alertFrameClass(tone: AlertTone, size?: AlertSize): string;
 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. */
@@ -30,8 +35,30 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
      * 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.
+     *
+     * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no
+     * radius, only a bottom border, content centred on one line, and usually an
+     * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours
+     * tour-banner each built this by hand in amber or red Tailwind classes, with a
+     * separate dark: spelling apiece. Role-less like the box: it is page furniture.
+     */
+    variant?: "box" | "inline" | "strip";
+    /** See {@link AlertSize}. Default `md`. */
+    size?: AlertSize;
+    /**
+     * An opaque, raised surface (a shadow, and no translucency in dark mode) for a
+     * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`
+     * only; an inline message has no surface to raise.
+     */
+    elevated?: boolean;
+    /**
+     * A trailing control — the "Update payment method" button on kastlan's trial and
+     * past-due strips, the "Exit" on its tour strip. Sits at the end of the row,
+     * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)
+     * it is rendered BESIDE the row's own link or button, as the × is, because
+     * interactive content may not nest.
      */
-    variant?: "box" | "inline";
+    action?: ReactNode;
     /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
      *  `null` draws none. Always decorative; the text carries the message. */
     icon?: ReactNode;
@@ -68,6 +95,6 @@ type AlertBannerProps = AlertBannerBaseProps & ({
 });
 /** 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. */
-declare function AlertBanner({ tone, variant, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
+declare function AlertBanner({ tone, variant, size, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
 
-export { AlertBanner, type AlertBannerProps, type AlertTone, alertFrameClass, toneFrameClass };
+export { AlertBanner, type AlertBannerProps, type AlertSize, type AlertTone, alertFrameClass, toneFrameClass };

package/dist/components/alert-banner.js

@@ -1,42 +1,64 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AlertTriangle, ChevronRight, Info, X } from "lucide-react";
+import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 const TONE_FRAME = {
   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)]",
+  success: "border-2 border-[var(--success-border)] bg-[var(--success-bg)]",
   neutral: "border border-[var(--border)]"
 };
+const TONE_ELEVATED = {
+  danger: "bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]",
+  warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
+  info: "bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]",
+  success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]",
+  neutral: ""
+};
+const ELEVATED = "bg-[var(--bg-surface)] shadow-lg";
 function toneFrameClass(tone) {
   return TONE_FRAME[tone];
 }
-function alertFrameClass(tone) {
-  const box = tone === "neutral" ? "rounded-md p-3" : "rounded-md p-[11px]";
+function alertFrameClass(tone, size = "md") {
+  const box = size === "sm" ? tone === "neutral" ? "rounded-md px-2.5 py-1.5" : "rounded-md px-[9px] py-[5px]" : tone === "neutral" ? "rounded-md p-3" : "rounded-md p-[11px]";
   return `${box} ${TONE_FRAME[tone]}`;
 }
+function stripFrameClass(tone, size) {
+  return cn(
+    TONE_FRAME[tone],
+    "rounded-none border-0 border-b",
+    size === "sm" ? "px-4 py-1.5" : "px-4 py-2"
+  );
+}
 const TONE_TEXT = {
   danger: "text-[var(--danger)]",
   warning: "text-[var(--warning)]",
   info: "text-[var(--info)]",
+  success: "text-[var(--success)]",
   neutral: "text-[var(--text-secondary)]"
 };
 const TONE_ICON = {
   danger: "text-[var(--danger)]",
   warning: "text-[var(--warning)]",
   info: "text-[var(--info)]",
+  success: "text-[var(--success)]",
   neutral: "text-[var(--text-muted)]"
 };
 const TONE_GLYPH = {
   danger: AlertTriangle,
   warning: AlertTriangle,
   info: Info,
+  success: CheckCircle2,
   neutral: Info
 };
 function AlertBanner({
   tone = "danger",
   variant = "box",
+  size = "md",
+  elevated = false,
+  action,
   icon,
   onDismiss,
   dismissLabel,
@@ -49,12 +71,28 @@ function AlertBanner({
 }) {
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });
   const inline = variant === "inline";
+  const strip = variant === "strip";
+  const sm = size === "sm";
   const interactive = href !== void 0 || onClick !== void 0;
   const resolvedRole = role ?? (inline ? tone === "danger" ? "alert" : "status" : void 0);
   const Glyph = TONE_GLYPH[tone];
-  const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 [&_svg]:size-4", !inline && "mt-0.5", TONE_ICON[tone]), children: icon }) : /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: cn("size-4 shrink-0", !inline && "mt-0.5", TONE_ICON[tone]) });
-  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 nudge = inline || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
+  const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("flex shrink-0", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", nudge, TONE_ICON[tone]),
+      children: icon
+    }
+  ) : /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: cn(sm ? "size-3.5" : "size-4", "shrink-0", nudge, TONE_ICON[tone]) });
+  const row = cn(
+    inline ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
+    sm ? "gap-1.5 text-xs" : inline ? "gap-1.5 text-sm" : "gap-2 text-sm"
+  );
+  const frame = inline ? "" : cn(
+    strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),
+    elevated && cn(ELEVATED, TONE_ELEVATED[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 = /* @__PURE__ */ jsxs(Fragment, { children: [
     glyph,
@@ -63,7 +101,7 @@ function AlertBanner({
       ChevronRight,
       {
         "aria-hidden": true,
-        className: cn("size-4 shrink-0 opacity-70 rtl:-scale-x-100", !inline && "mt-0.5")
+        className: cn(sm ? "size-3.5" : "size-4", "shrink-0 opacity-70 rtl:-scale-x-100", nudge)
       }
     )
   ] });
@@ -86,6 +124,7 @@ function AlertBanner({
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
     }
   ) : null;
+  const trailing = action !== void 0 && action !== null ? /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inline && "self-center", strip && "ms-auto"), children: action }) : null;
   if (!interactive) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -95,21 +134,24 @@ function AlertBanner({
         className: cn(row, frame, TONE_TEXT[tone], className),
         children: [
           content,
+          trailing,
           dismiss
         ]
       }
     );
   }
   const hover = "cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110";
-  const split = dismiss !== null;
+  const split = dismiss !== null || trailing !== 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-['']",
+    "flex min-w-0 flex-1 text-start",
+    sm ? "gap-1.5" : "gap-2",
+    inline || strip ? "items-center" : "items-start",
+    "outline-none after:absolute after:inset-0 after:content-['']",
+    strip ? "after:rounded-none" : "after:rounded-md",
     "focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]"
   ) : cn(row, !inline && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   const actionRest = split ? {} : rest;
-  const action = href !== void 0 ? /* @__PURE__ */ jsx(
+  const rowAction = href !== void 0 ? /* @__PURE__ */ jsx(
     "a",
     {
       ...actionRest,
@@ -127,7 +169,7 @@ function AlertBanner({
       children: content
     }
   );
-  if (!split) return action;
+  if (!split) return rowAction;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -135,7 +177,8 @@ function AlertBanner({
       role: resolvedRole,
       className: cn("relative", row, frame, TONE_TEXT[tone], hover, className),
       children: [
-        action,
+        rowAction,
+        trailing,
         dismiss
       ]
     }

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"neutral\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone): string {\n  const box = tone === \"neutral\" ? \"rounded-md p-3\" : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   */\n  variant?: \"box\" | \"inline\";\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const interactive = href !== undefined || onClick !== undefined;\n  const resolvedRole = role ?? (inline ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span aria-hidden className={cn(\"flex shrink-0 [&_svg]:size-4\", !inline && \"mt-0.5\", TONE_ICON[tone])}>\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(\"size-4 shrink-0\", !inline && \"mt-0.5\", TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below.\n  const row = inline ? \"inline-flex items-center gap-1.5 text-sm\" : \"flex items-start gap-2 text-sm\";\n  const frame = inline ? \"\" : alertFrameClass(tone);\n  const focusRing =\n    \"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)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inline && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(\"size-4 shrink-0 opacity-70 rtl:-scale-x-100\", !inline && \"mt-0.5\")}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"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\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 gap-2 text-start\",\n        inline ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:rounded-md after:content-['']\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inline && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const action =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return action;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {action}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  success: \"border-2 border-[var(--success-border)] bg-[var(--success-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-[var(--bg-surface)] shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[9px] py-[5px]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  const resolvedRole = role ?? (inline ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inline || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  const row = cn(\n    inline ? \"inline-flex items-center\" : strip ? \"flex flex-wrap items-center gap-y-1\" : \"flex items-start\",\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing =\n    \"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)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inline && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"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\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div className={cn(\"relative z-10 flex shrink-0 items-center gap-2\", !strip && !inline && \"self-center\", strip && \"ms-auto\")}>\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {trailing}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 text-start\",\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inline || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inline && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {rowAction}\n      {trailing}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/amount-input.d.ts

@@ -15,6 +15,8 @@ import '../hooks/use-anchored-rect.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';
@@ -35,6 +37,10 @@ import '../feedback/feedback-dialog.js';
 import './confirm-dialog.js';
 import './floating-panel.js';
 import './copy-button.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './breadcrumbs.js';
+import './toast.js';
 
 interface AmountInputProps {
     value: string;

package/dist/components/breadcrumbs.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+
+interface BreadcrumbsLabels {
+    /** The `nav` landmark's name — what a screen reader lists it as. */
+    label: string;
+    /** The "…" button that reveals the levels collapsed away on a phone. */
+    showAll: string;
+}
+declare const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels;
+interface BreadcrumbItem {
+    label: ReactNode;
+    /** Where the crumb leads. A crumb without one is text (a level with no page of its
+     *  own). The LAST crumb is the current page and is text whether or not it has one. */
+    href?: string;
+    /** A stable React key, when `label` is not a string. */
+    key?: string;
+}
+/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's
+ *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */
+interface BreadcrumbLinkProps {
+    href: string;
+    className: string;
+    children: ReactNode;
+}
+interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+    items: BreadcrumbItem[];
+    /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */
+    renderLink?: (props: BreadcrumbLinkProps) => ReactElement;
+    /**
+     * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing
+     * right in a right-to-left trail points back toward where you came from. Supply your
+     * own and it is drawn as given (a "/" needs no mirroring).
+     */
+    separator?: ReactNode;
+    /**
+     * Collapse the middle on phones (below the `md` breakpoint) into a "…" button, keeping
+     * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail
+     * scrolled sideways on a phone instead, which hides the current page — the one crumb
+     * that must never be off-screen.
+     */
+    collapse?: boolean;
+    /** How many crumbs at the end stay visible when collapsed — the current page and its
+     *  parent by default (2), because "up one level" is what a phone user reaches for. */
+    keepEnd?: number;
+    /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */
+    labels?: Partial<BreadcrumbsLabels>;
+}
+/**
+ * The trail from the app's root to this page.
+ *
+ * `nav` + `ol` + `aria-current="page"` on the last crumb: the WAI breadcrumb pattern,
+ * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of
+ * `span`s, so a screen reader heard no list, no count, and nothing marking where you
+ * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and
+ * the server's first paint is already right.
+ */
+declare function Breadcrumbs({ items, renderLink, separator, collapse, keepEnd, labels: labelsProp, className, "aria-label": ariaLabel, ...rest }: BreadcrumbsProps): react.JSX.Element | null;
+
+export { type BreadcrumbItem, type BreadcrumbLinkProps, Breadcrumbs, type BreadcrumbsLabels, type BreadcrumbsProps, DEFAULT_BREADCRUMBS_LABELS };

package/dist/components/breadcrumbs.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_BREADCRUMBS_LABELS = {
+  label: "Breadcrumb",
+  showAll: "Show full path"
+};
+function Breadcrumbs({
+  items,
+  renderLink,
+  separator,
+  collapse = true,
+  keepEnd = 2,
+  labels: labelsProp,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const labels = useKitLabels("breadcrumbs", DEFAULT_BREADCRUMBS_LABELS, labelsProp);
+  const [expanded, setExpanded] = useState(false);
+  const revealedRef = useRef(null);
+  const focusRevealed = useRef(false);
+  useEffect(() => {
+    if (!expanded || !focusRevealed.current) return;
+    focusRevealed.current = false;
+    const li = revealedRef.current;
+    (li?.querySelector("a[href]") ?? li)?.focus();
+  }, [expanded]);
+  if (items.length === 0) return null;
+  const end = Math.max(1, keepEnd);
+  const firstKept = Math.max(1, items.length - end);
+  const collapsible = collapse && !expanded && firstKept - 1 >= 2;
+  const isHidden = (i) => collapsible && i >= 1 && i < firstKept;
+  const sep = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 items-center text-[var(--text-placeholder)]", children: separator ?? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 rtl:-scale-x-100" }) });
+  const linkClass = "block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]";
+  return /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": ariaLabel ?? labels.label, className: cn("min-w-0 text-sm", className), children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]", children: items.map((item, i) => {
+    const last = i === items.length - 1;
+    const key = item.key ?? (typeof item.label === "string" ? `${i}-${item.label}` : String(i));
+    let content;
+    if (last) {
+      content = /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "block max-w-[16rem] truncate font-medium text-[var(--text-primary)]", children: item.label });
+    } else if (item.href !== void 0) {
+      const props = { href: item.href, className: linkClass, children: item.label };
+      content = renderLink ? renderLink(props) : /* @__PURE__ */ jsx("a", { href: props.href, className: props.className, children: props.children });
+    } else {
+      content = /* @__PURE__ */ jsx("span", { className: "block max-w-[14rem] truncate", children: item.label });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      collapsible && i === 1 && /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1.5 md:hidden", children: [
+        sep,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              focusRevealed.current = true;
+              setExpanded(true);
+            },
+            "aria-label": labels.showAll,
+            "aria-expanded": false,
+            className: "flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": true })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "li",
+        {
+          ref: i === 1 ? revealedRef : void 0,
+          tabIndex: i === 1 && expanded && item.href === void 0 ? -1 : void 0,
+          className: cn("flex min-w-0 items-center gap-1.5 outline-none", isHidden(i) && "hidden md:flex"),
+          children: [
+            i > 0 && sep,
+            content
+          ]
+        }
+      )
+    ] }, key);
+  }) }) });
+}
+export {
+  Breadcrumbs,
+  DEFAULT_BREADCRUMBS_LABELS
+};
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/components/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from \"react\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface BreadcrumbsLabels {\n  /** The `nav` landmark's name — what a screen reader lists it as. */\n  label: string;\n  /** The \"…\" button that reveals the levels collapsed away on a phone. */\n  showAll: string;\n}\n\nexport const DEFAULT_BREADCRUMBS_LABELS: BreadcrumbsLabels = {\n  label: \"Breadcrumb\",\n  showAll: \"Show full path\",\n};\n\nexport interface BreadcrumbItem {\n  label: ReactNode;\n  /** Where the crumb leads. A crumb without one is text (a level with no page of its\n   *  own). The LAST crumb is the current page and is text whether or not it has one. */\n  href?: string;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n}\n\n/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's\n *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface BreadcrumbLinkProps {\n  href: string;\n  className: string;\n  children: ReactNode;\n}\n\nexport interface BreadcrumbsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: BreadcrumbItem[];\n  /** Your router's link. Default `<a>`. The API `Chip`, `StatTile` and `ListItem` share. */\n  renderLink?: (props: BreadcrumbLinkProps) => ReactElement;\n  /**\n   * The mark between crumbs. Default a chevron, mirrored in RTL — a chevron pointing\n   * right in a right-to-left trail points back toward where you came from. Supply your\n   * own and it is drawn as given (a \"/\" needs no mirroring).\n   */\n  separator?: ReactNode;\n  /**\n   * Collapse the middle on phones (below the `md` breakpoint) into a \"…\" button, keeping\n   * the first crumb and the last {@link keepEnd}. Default `true`. kastlan's trail\n   * scrolled sideways on a phone instead, which hides the current page — the one crumb\n   * that must never be off-screen.\n   */\n  collapse?: boolean;\n  /** How many crumbs at the end stay visible when collapsed — the current page and its\n   *  parent by default (2), because \"up one level\" is what a phone user reaches for. */\n  keepEnd?: number;\n  /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */\n  labels?: Partial<BreadcrumbsLabels>;\n}\n\n/**\n * The trail from the app's root to this page.\n *\n * `nav` + `ol` + `aria-current=\"page\"` on the last crumb: the WAI breadcrumb pattern,\n * which kastlan's (shared/components/layout/breadcrumbs.tsx) nearly was — a `nav` of\n * `span`s, so a screen reader heard no list, no count, and nothing marking where you\n * are. The collapse is CSS (`hidden md:flex`), so it costs no media-query listener and\n * the server's first paint is already right.\n */\nexport function Breadcrumbs({\n  items,\n  renderLink,\n  separator,\n  collapse = true,\n  keepEnd = 2,\n  labels: labelsProp,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: BreadcrumbsProps) {\n  const labels = useKitLabels(\"breadcrumbs\", DEFAULT_BREADCRUMBS_LABELS, labelsProp);\n  const [expanded, setExpanded] = useState(false);\n  // The \"…\" button vanishes when pressed; focus goes to the first crumb it revealed,\n  // not back to the top of the document.\n  const revealedRef = useRef<HTMLLIElement>(null);\n  const focusRevealed = useRef(false);\n  useEffect(() => {\n    if (!expanded || !focusRevealed.current) return;\n    focusRevealed.current = false;\n    const li = revealedRef.current;\n    (li?.querySelector<HTMLElement>(\"a[href]\") ?? li)?.focus();\n  }, [expanded]);\n  if (items.length === 0) return null;\n\n  const end = Math.max(1, keepEnd);\n  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a\n  // \"…\" saves nothing, so it takes two.\n  const firstKept = Math.max(1, items.length - end);\n  const collapsible = collapse && !expanded && firstKept - 1 >= 2;\n  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;\n\n  const sep = (\n    <span aria-hidden className=\"flex shrink-0 items-center text-[var(--text-placeholder)]\">\n      {separator ?? <ChevronRight className=\"size-3.5 rtl:-scale-x-100\" />}\n    </span>\n  );\n  const linkClass =\n    \"block max-w-[14rem] truncate rounded-sm hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\";\n\n  return (\n    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn(\"min-w-0 text-sm\", className)}>\n      <ol className=\"m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-[var(--text-muted)]\">\n        {items.map((item, i) => {\n          const last = i === items.length - 1;\n          const key = item.key ?? (typeof item.label === \"string\" ? `${i}-${item.label}` : String(i));\n          let content: ReactNode;\n          if (last) {\n            content = (\n              <span aria-current=\"page\" className=\"block max-w-[16rem] truncate font-medium text-[var(--text-primary)]\">\n                {item.label}\n              </span>\n            );\n          } else if (item.href !== undefined) {\n            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };\n            content = renderLink ? (\n              renderLink(props)\n            ) : (\n              <a href={props.href} className={props.className}>\n                {props.children}\n              </a>\n            );\n          } else {\n            content = <span className=\"block max-w-[14rem] truncate\">{item.label}</span>;\n          }\n          return (\n            <Fragment key={key}>\n              {collapsible && i === 1 && (\n                <li className=\"flex items-center gap-1.5 md:hidden\">\n                  {sep}\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      focusRevealed.current = true;\n                      setExpanded(true);\n                    }}\n                    aria-label={labels.showAll}\n                    aria-expanded={false}\n                    className=\"flex items-center rounded-sm px-0.5 hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n                  >\n                    <MoreHorizontal className=\"size-4\" aria-hidden />\n                  </button>\n                </li>\n              )}\n              <li\n                ref={i === 1 ? revealedRef : undefined}\n                // Focusable only as the landing place for a revealed crumb with no link.\n                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}\n                className={cn(\"flex min-w-0 items-center gap-1.5 outline-none\", isHidden(i) && \"hidden md:flex\")}\n              >\n                {i > 0 && sep}\n                {content}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}