@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/components/breadcrumbs.tsx

@@ -1,205 +0,0 @@
-import { Fragment, useContext, useEffect, useRef, useState } from "react";
-import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import { cn } from "../lib/cn";
-import { FOCUS_RING } from "./focus-ring";
-import { useKitLabels, useKitLink, type LabelOverride } from "../i18n/kit-labels";
-import { pickLinkRenderer, RenderedKitLink } from "./text-link";
-import { DEFAULT_BREADCRUMBS_LABELS } from "./breadcrumbs-labels";
-import { PageHeaderTrailContext } from "./page-header-context";
-
-export 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;
-}
-
-// Defined in ./breadcrumbs-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_BREADCRUMBS_LABELS };
-
-export 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;
-  /**
-   * The app's home entry (0.49 KIT-9). Default: an entry whose `href` is `"/"`. No trail
-   * is drawn when only home entries are left — inside a `PageHeader`, or wherever the
-   * current entry is hidden (`hideCurrent`): "Home" above a page's title says nothing.
-   */
-  home?: boolean;
-}
-
-/** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's
- *  link — `({ href, ...p }) => <Link to={href} {...p} />`. */
-export interface BreadcrumbLinkProps {
-  href: string;
-  className: string;
-  children: ReactNode;
-}
-
-export interface BreadcrumbsProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
-  items: BreadcrumbItem[];
-  /** Your router's link. Default: the `<UiKitProvider linkComponent>` (for an in-app
-   *  `href`), then `<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?: LabelOverride<BreadcrumbsLabels>;
-  /**
-   * Leave out the last entry, the current page (0.49 KIT-9). The entry before it stays a
-   * link, and no entry carries `aria-current`: the page's title names where you are.
-   *
-   * Default `true` inside a `PageHeader`'s `breadcrumbs` (the title is right below, so
-   * the trail would repeat it), `false` elsewhere. With the current entry hidden — and
-   * inside a `PageHeader` either way — the trail is drawn only when at least one entry
-   * that is not home ({@link BreadcrumbItem.home}) is left, so a trail drawn by the
-   * layout above the page shows no lone "Home" link either. `false` keeps the current
-   * entry as text with `aria-current="page"`.
-   */
-  hideCurrent?: boolean;
-}
-
-/**
- * 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.
- */
-export function Breadcrumbs({
-  items: allItems,
-  renderLink,
-  separator,
-  collapse = true,
-  keepEnd = 2,
-  labels: labelsProp,
-  hideCurrent,
-  className,
-  "aria-label": ariaLabel,
-  ...rest
-}: BreadcrumbsProps) {
-  const host = useContext(PageHeaderTrailContext);
-  const labels = useKitLabels("breadcrumbs", DEFAULT_BREADCRUMBS_LABELS, labelsProp);
-  const kitLink = useKitLink();
-  const [expanded, setExpanded] = useState(false);
-  // The "…" button vanishes when pressed; focus goes to the first crumb it revealed,
-  // not back to the top of the document.
-  const revealedRef = useRef<HTMLLIElement>(null);
-  const focusRevealed = useRef(false);
-  useEffect(() => {
-    if (!expanded || !focusRevealed.current) return;
-    focusRevealed.current = false;
-    const li = revealedRef.current;
-    (li?.querySelector<HTMLElement>("a[href]") ?? li)?.focus();
-  }, [expanded]);
-  const hides = hideCurrent ?? host?.titled ?? false;
-  const shown = hides ? allItems.slice(0, -1) : allItems;
-  if (shown.length === 0) return null;
-  // A trail of home entries alone repeats nothing worth a line: in a PageHeader, and
-  // wherever the current entry is hidden (a layout's trail above the page's title).
-  if ((host || hides) && !shown.some((item) => !(item.home ?? item.href === "/"))) return null;
-  const items = shown;
-
-  const end = Math.max(1, keepEnd);
-  // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a
-  // "…" saves nothing, so it takes two.
-  const firstKept = Math.max(1, items.length - end);
-  const collapsible = collapse && !expanded && firstKept - 1 >= 2;
-  const isHidden = (i: number) => collapsible && i >= 1 && i < firstKept;
-
-  const sep = (
-    <span aria-hidden className="flex shrink-0 items-center text-placeholder">
-      {separator ?? <ChevronRight className="size-3.5 rtl:-scale-x-100" />}
-    </span>
-  );
-  // Each crumb is capped (in rem, so the cap grows with the text) and cut with an
-  // ellipsis at Normal; from Large up it wraps inside its cap instead (text size §10.17,
-  // round 0.34 T1): the list already wraps between crumbs, and a crumb cut to "Inv…" at
-  // 150 % names no page.
-  const linkClass = cn("block max-w-[14rem] truncate-until-large rounded-sm hover:text-primary", FOCUS_RING);
-
-  return (
-    <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn("min-w-0 text-sm", className)}>
-      <ol className="m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-muted">
-        {items.map((item, i) => {
-          // With the current entry hidden, the last one shown is a parent: a link.
-          const last = !hides && i === items.length - 1;
-          const key = item.key ?? (typeof item.label === "string" ? `${i}-${item.label}` : String(i));
-          let content: ReactNode;
-          if (last) {
-            content = (
-              <span aria-current="page" className="block max-w-[16rem] truncate-until-large font-medium text-primary">
-                {item.label}
-              </span>
-            );
-          } else if (item.href !== undefined) {
-            const props: BreadcrumbLinkProps = { href: item.href, className: linkClass, children: item.label };
-            const kit = pickLinkRenderer<BreadcrumbLinkProps>(undefined, kitLink, item.href);
-            content = renderLink ? (
-              renderLink(props)
-            ) : kit ? (
-              <RenderedKitLink render={kit} props={props} />
-            ) : (
-              <a href={props.href} className={props.className}>
-                {props.children}
-              </a>
-            );
-          } else {
-            content = <span className="block max-w-[14rem] truncate-until-large">{item.label}</span>;
-          }
-          return (
-            <Fragment key={key}>
-              {collapsible && i === 1 && (
-                <li className="flex items-center gap-1.5 md:hidden">
-                  {sep}
-                  <button
-                    type="button"
-                    onClick={() => {
-                      focusRevealed.current = true;
-                      setExpanded(true);
-                    }}
-                    aria-label={labels.showAll}
-                    aria-expanded={false}
-                    className={cn("flex items-center rounded-sm px-0.5 hover:text-primary", FOCUS_RING)}
-                  >
-                    <MoreHorizontal className="size-4" aria-hidden />
-                  </button>
-                </li>
-              )}
-              <li
-                ref={i === 1 ? revealedRef : undefined}
-                // Focusable only as the landing place for a revealed crumb with no link.
-                tabIndex={i === 1 && expanded && item.href === undefined ? -1 : undefined}
-                className={cn("flex min-w-0 items-center gap-1.5 outline-none", isHidden(i) && "hidden md:flex")}
-              >
-                {i > 0 && sep}
-                {content}
-              </li>
-            </Fragment>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

package/src/components/bulk-action-bar-labels.ts

@@ -1,11 +0,0 @@
-// The English words of ./bulk-action-bar, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./bulk-action-bar re-exports them.
-
-import type { BulkActionBarLabels } from "./bulk-action-bar";
-
-export const DEFAULT_BULK_ACTION_BAR_LABELS: BulkActionBarLabels = {
-  selected: (count) => `${count} selected`,
-  clear: "Clear selection",
-  cleared: "Selection cleared",
-};

package/src/components/bulk-action-bar.tsx

@@ -1,443 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithRef, CSSProperties, FocusEvent, KeyboardEvent, ReactNode, RefObject } from "react";
-import { X } from "lucide-react";
-
-import { cn } from "../lib/cn";
-import { horizontalStep } from "../lib/direction";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { useAnnounce } from "../hooks/use-announce";
-import { useBreakpoint } from "../hooks/use-breakpoint";
-import { OVERLAY_EXIT_MS, skipsExitAnimation } from "../hooks/use-close-transition";
-import { focusFirst, focusIsLost, whenFocusLeftForNothing } from "../lib/focus-left";
-import { hasContent } from "../lib/presence";
-import { Button } from "./button";
-import { IconButton } from "./icon-button";
-import { DEFAULT_BULK_ACTION_BAR_LABELS } from "./bulk-action-bar-labels";
-
-export interface BulkActionBarLabels {
-  /** The count, shown in the bar, spoken by its live region and used as the toolbar's
-   *  name: "3 selected". */
-  selected: (count: number) => string;
-  /** The clear/cancel action's name — the X of the floating bar, the text button of the
-   *  others. */
-  clear: string;
-  /** Spoken when the selection empties and the bar goes. */
-  cleared: string;
-}
-
-// Defined in ./bulk-action-bar-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_BULK_ACTION_BAR_LABELS };
-
-/**
- * `floating` — the phone's: fixed above `AppShell`'s bottom nav (`--app-nav-h`) and the
- * home indicator, inset from both sides, a rounded card with a shadow. `sticky` — the
- * desktop's: pinned to the top of its scroll container, over the rows it acts on.
- * `inline` — in the flow, where the caller places it.
- */
-export type BulkActionBarVariant = "floating" | "sticky" | "inline";
-
-/**
- * A variant per breakpoint, mobile first — `{ base: "floating", md: "sticky" }` is the
- * phone's floating card below 768px and the desktop's sticky bar from there up. The
- * breakpoints are the ones the kit's classes use (sm 640, md 768, lg 1024, xl 1280px
- * at Normal text size; since 0.32 they move with the text size, as `md:` does). keksdose's payees selection bar (payees-selection-bar.tsx)
- * computes exactly this with its own `useMediaQuery("(min-width: 768px)")`; every bar
- * that is a card on a phone and a strip on a desktop would repeat it.
- *
- * Resolved in JS rather than with `md:` classes because the variants differ in more
- * than classes: the floating bar's clear is an icon at the start, the others' a text
- * button at the end, and the floating bar is positioned by inline style.
- */
-export interface ResponsiveBulkActionBarVariant {
-  base: BulkActionBarVariant;
-  sm?: BulkActionBarVariant;
-  md?: BulkActionBarVariant;
-  lg?: BulkActionBarVariant;
-  xl?: BulkActionBarVariant;
-}
-
-/** Widest first: the first that matches and names a value wins. Each is the class's own
- *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */
-const BREAKPOINTS = ["xl", "lg", "md", "sm"] as const;
-
-/** The variant in force: the widest breakpoint that matches AND names one, else
- *  `base`. The four queries are subscribed unconditionally — hooks cannot be skipped —
- *  and a plain string variant simply ignores them. Without `matchMedia` (SSR, tests)
- *  every query is false, so the bar renders its `base`, the phone's, first. */
-function useResolvedVariant(variant: BulkActionBarVariant | ResponsiveBulkActionBarVariant): BulkActionBarVariant {
-  const matches = {
-    xl: useBreakpoint("xl"),
-    lg: useBreakpoint("lg"),
-    md: useBreakpoint("md"),
-    sm: useBreakpoint("sm"),
-  };
-  if (typeof variant === "string") return variant;
-  for (const key of BREAKPOINTS) {
-    const v = variant[key];
-    if (matches[key] && v !== undefined) return v;
-  }
-  return variant.base;
-}
-
-export interface BulkActionBarProps extends Omit<ComponentPropsWithRef<"div">, "role" | "children"> {
-  /** How many items are selected. The bar shows only while this is above zero —
-   *  unless {@link open} says otherwise. */
-  count: number;
-  /**
-   * Show the bar regardless of `count` — `true` for SELECTION MODE with nothing picked
-   * yet, `false` to hide it with rows still selected. Left out, `count > 0` decides, as
-   * before.
-   *
-   * keksdose's invoice lines (invoice-lines-bulk-bar.tsx) enter selection with a
-   * "Select" button, and the bar must be there at "0 selected" to hold the way out and
-   * a "Select all" (pass it as a child); gated on the count, the bar appeared only at
-   * the first tick, and the user who pressed "Select" saw nothing happen. The exit plays
-   * when it closes either way, and the count is still announced on every change.
-   */
-  open?: boolean;
-  /** Clear the selection / leave selection mode. */
-  onClear: () => void;
-  /**
-   * The actions: buttons (`IconButton size="lg"` on a phone, `Button` from md up),
-   * in the caller's order. They are the toolbar's arrow-key stops, after the clear.
-   *
-   * LINKS rove too (keksdose F8): a `<Button href>` — "View report", which navigates
-   * rather than acts — is an `<a href>`, and it is one more arrow-key stop in its place
-   * among the buttons, not a second Tab stop beside the toolbar's one. A disabled
-   * `<Button href disabled>` has no `href` and is skipped, as a disabled button is. Any
-   * other focusable of your own joins with `data-toolbar-item`.
-   */
-  children?: ReactNode;
-  /** Default `floating`. See {@link BulkActionBarVariant}; an object picks one per
-   *  breakpoint, see {@link ResponsiveBulkActionBarVariant}. */
-  variant?: BulkActionBarVariant | ResponsiveBulkActionBarVariant;
-  /**
-   * Content BELOW the toolbar row, inside the same surface — the same floating card or
-   * sticky tinted strip — but OUTSIDE the toolbar: its fields keep their own Tab stops
-   * and arrow keys, and the toolbar's roving focus never walks into it. keksdose's
-   * desktop receipt-line bar (invoice-lines-bulk-bar.tsx) shows its `BulkFields` form —
-   * a category picker, an exclude checkbox, Apply — under the count and the clear; a
-   * form is not a toolbar's content (`role="toolbar"` promises one arrow-key widget),
-   * and set beside the bar it lost the sticky tint and scrolled away from it.
-   *
-   * On the floating variant the panel scrolls within 60% of the viewport's height, so a
-   * long form on a phone cannot push the bar off the top of the screen.
-   */
-  panel?: ReactNode;
-  /** Default: `bulkActionBar` from the {@link UiKitProvider}, else English. */
-  labels?: LabelOverride<BulkActionBarLabels>;
-  /**
-   * Where the focus goes when the bar leaves while it holds it — after Clear, or an action
-   * that empties the selection (0.52, refactor audit 2026-10-30, DSP-15). Without it, the
-   * control the focus came into the bar from (the row's box, say), if that is still on the
-   * page; with it, this first. Pass one where the selection takes that control with it — a
-   * bulk delete removes the rows whose boxes were ticked: the table, the list's heading,
-   * the "Select" button that entered selection mode. A bar that leaves without the focus
-   * in it moves nothing.
-   */
-  returnFocusRef?: RefObject<HTMLElement | null>;
-}
-
-/** Where the floating bar sits: clear of the phone nav and of the home indicator,
- *  whichever reaches higher — `FloatingPanel`'s rule, plus the bar's own 0.5rem gap.
- *  Set as inline style, so reposition it through `style` (which is merged over this,
- *  e.g. `style={{ insetInline: "auto 2rem", width: "24rem" }}`), not `className`. */
-const FLOATING_STYLE: CSSProperties = {
-  bottom: "calc(max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px)) + 0.5rem)",
-  // Both insets on both sides: a logical side has no one physical inset to name, and
-  // the bar is symmetric, so RTL needs nothing more.
-  insetInline: "max(0.5rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))",
-};
-
-/** What the arrow keys walk: the toolbar's enabled controls. Matched by element, not by
- *  `tabindex`, because the roving below sets every one but the current to `-1` — a
- *  custom control joins with `data-toolbar-item`.
- *
- *  `a[href]` is here on purpose (keksdose F8, a "View report" `Button href` in the bar):
- *  a link in a toolbar is a toolbar item like any other, and left out it would keep its
- *  own Tab stop, so Tab would stop twice in a bar that promises one. `[href]` rather than `a`: the kit's disabled link is an `<a>`
- *  WITHOUT one, and is skipped as a disabled button is. */
-const ITEMS =
-  "button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[data-toolbar-item]";
-
-/** Keys a text field needs for itself — the toolbar must not take its caret away. */
-function ownsArrows(el: Element): boolean {
-  if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) return true;
-  if (el instanceof HTMLInputElement) return !["button", "checkbox", "radio", "submit", "reset"].includes(el.type);
-  return (el as HTMLElement).isContentEditable;
-}
-
-/**
- * The bar that appears while rows are selected: the count, a way out, and what can be
- * done to all of them at once.
- *
- * keksdose had written it three times — the transactions phone bar
- * (mobile-bulk-bar.tsx), the invoice lines' phone and desktop bars
- * (invoice-lines-bulk-bar.tsx) and the payees selection bar — and the copies had
- * drifted where it matters: two parked themselves with a guessed `bottom-16` that the
- * third had already found leaves a 24px gap (live #314: the nav is content-sized and
- * `AppShell` publishes its height as `--app-nav-h`), none of them announced the count,
- * and all three were `role="toolbar"` without the arrow keys that role promises.
- *
- * ## Keep it mounted
- *
- * Render it unconditionally and let `count` decide. At zero it renders only its live
- * region — which must already be in the DOM for the first "3 selected" to be heard —
- * and when the count drops to zero it plays its exit before it goes, which a
- * `{count > 0 && <Bar/>}` gate would cut off.
- *
- * ## The toolbar
- *
- * One Tab stop: ←/→ (mirrored in RTL), Home and End move between the controls, and Tab
- * leaves — the WAI-ARIA toolbar pattern, since that is what `role="toolbar"` tells a
- * screen reader to expect. The stop remembers the control last used. Arrow keys inside
- * a text field stay the field's.
- *
- * It is NOT a dialog: no focus trap, no scroll lock — the list behind stays live,
- * because tapping more rows is how a selection grows.
- */
-export function BulkActionBar({
-  count,
-  onClear,
-  children,
-  variant: variantProp = "floating",
-  open,
-  panel,
-  labels: labelsProp,
-  returnFocusRef,
-  className,
-  style,
-  onKeyDown,
-  onFocus,
-  onBlur,
-  ...rest
-}: BulkActionBarProps) {
-  const labels = useKitLabels("bulkActionBar", DEFAULT_BULK_ACTION_BAR_LABELS, labelsProp);
-  const { announce, regionProps } = useAnnounce();
-  const barRef = useRef<HTMLDivElement>(null);
-  const variant = useResolvedVariant(variantProp);
-  const shown = open ?? count > 0;
-
-  // The count the bar last SHOWED, so a bar lowering itself after "clear" still reads
-  // "3 selected" on its way out rather than "0 selected". Adjusted during render
-  // (`Collapse`'s pattern), as is the exit below.
-  const [shownCount, setShownCount] = useState(count);
-  const [leaving, setLeaving] = useState(false);
-  const [prev, setPrev] = useState({ count, shown });
-  if (count !== prev.count || shown !== prev.shown) {
-    setPrev({ count, shown });
-    if (shown) {
-      setShownCount(count);
-      setLeaving(false);
-    } else if (prev.shown) {
-      setLeaving(!skipsExitAnimation());
-    }
-  }
-  useEffect(() => {
-    if (!leaving) return;
-    const timer = setTimeout(() => setLeaving(false), OVERLAY_EXIT_MS);
-    return () => clearTimeout(timer);
-  }, [leaving]);
-
-  // Spoken on every CHANGE, not on mount: a bar mounted with rows already selected
-  // was not the result of anything the user just did.
-  const spoken = useRef(count);
-  useEffect(() => {
-    if (spoken.current === count) return;
-    spoken.current = count;
-    // In selection mode the bar stays at zero, so zero is a count like any other.
-    announce(count > 0 || shown ? labels.selected(count) : labels.cleared);
-  }, [count, shown, labels, announce]);
-
-  // Roving tab stop. The controls are the caller's, so the stop is kept on the DOM
-  // rather than through props: after every render the remembered control (or the
-  // first) is the one with `tabindex=0`, every other one `-1`.
-  const active = useRef<HTMLElement | null>(null);
-  // Every render: the caller's controls come and go (a "remove added" that exists
-  // only while some are removable), and a stop on a control that left must move on.
-  useLayoutEffect(() => {
-    rove(barRef.current, active);
-  });
-
-  // Leaving with the focus in it (refactor audit 2026-10-30, DSP-15): the bar goes `inert`,
-  // which blurs the control it holds, then unmounts — and the focus fell to <body>; on a
-  // phone VoiceOver's cursor jumped to the top of the page (keksdose's register). Noted on
-  // the bar's outermost element, so the `panel`'s fields count: where the focus came in
-  // from (the first entry since the bar showed, replaced once that control is gone), and
-  // whether it is in the bar. Focus that leaves for nothing because the page took it —
-  // inert, a removal — still counts as in it; a real element elsewhere takes it out, and
-  // so does a click on the page that left it nowhere (0.52 code review,
-  // bulk-action-bar.tsx: the note outlived it, and the bar's hide long after — the last row
-  // unticked with the pointer — pulled the focus and the scroll back to the row's box).
-  const cameFrom = useRef<HTMLElement | null>(null);
-  const holdsFocus = useRef(false);
-  const trackFocus = {
-    onFocus: (e: FocusEvent<HTMLDivElement>) => {
-      holdsFocus.current = true;
-      const from = e.relatedTarget;
-      if (from instanceof HTMLElement && !e.currentTarget.contains(from) && !cameFrom.current?.isConnected)
-        cameFrom.current = from;
-    },
-    onBlur: (e: FocusEvent<HTMLDivElement>) => {
-      onBlur?.(e);
-      const to = e.relatedTarget;
-      if (to instanceof Element && !e.currentTarget.contains(to)) holdsFocus.current = false;
-      whenFocusLeftForNothing(e, () => {
-        holdsFocus.current = false;
-      });
-    },
-  };
-  // The commit that hides the bar: the focus goes back while the control holding it is
-  // still in place — before `inert` takes it, or, with no exit to play, before <body> does.
-  const wasShown = useRef(shown);
-  useLayoutEffect(() => {
-    if (wasShown.current === shown) return;
-    wasShown.current = shown;
-    const from = cameFrom.current;
-    const held = holdsFocus.current;
-    cameFrom.current = null;
-    holdsFocus.current = false;
-    if (shown) return;
-    // The outermost element: the toolbar, or with a `panel` the surface round both.
-    const surface = barRef.current?.closest("[data-bulk-action-bar]");
-    const inBar = !!surface && surface.contains(document.activeElement);
-    if (inBar || (held && focusIsLost())) focusFirst([returnFocusRef?.current, from]);
-  }, [shown, returnFocusRef]);
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    onKeyDown?.(e);
-    if (e.defaultPrevented || ownsArrows(e.target as Element)) return;
-    const list = itemsOf(barRef.current);
-    const at = list.indexOf(document.activeElement as HTMLElement);
-    if (at === -1 || list.length === 0) return;
-    const step = horizontalStep(e.key, barRef.current);
-    let next = -1;
-    if (step !== 0) next = (at + step + list.length) % list.length;
-    else if (e.key === "Home") next = 0;
-    else if (e.key === "End") next = list.length - 1;
-    if (next === -1) return;
-    e.preventDefault();
-    active.current = list[next];
-    rove(barRef.current, active);
-    list[next].focus();
-  };
-
-  if (!shown && !leaving) {
-    return <span {...regionProps} />;
-  }
-
-  const floating = variant === "floating";
-  const clear = floating ? (
-    <IconButton size="lg" onClick={onClear} aria-label={labels.clear}>
-      <X />
-    </IconButton>
-  ) : (
-    // `ms-auto`: when the actions wrap, the way out still sits at the bar's end.
-    <Button type="button" variant="secondary" size="sm" onClick={onClear} className="ms-auto">
-      {labels.clear}
-    </Button>
-  );
-
-  // `hasContent` (refactor audit 2026-10-30, DUP-14): an empty-string panel drew an empty
-  // bordered strip under the bar.
-  const hasPanel = hasContent(panel);
-  // The surface — where the bar sits and what it looks like — and the toolbar row's
-  // own layout. Without a panel they are one element, exactly as before 0.11.0; with
-  // one the surface wraps the row and the panel, so both share its tint and position.
-  const surfaceClass = floating
-    ? cn(
-        "fixed z-30 rounded-2xl border border-subtle bg-surface shadow-lg",
-        shown ? "animate-sheet" : "animate-sheet-out",
-      )
-    : cn(
-        variant === "sticky" &&
-          "sticky top-0 z-20 border-b border-subtle bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
-        shown ? "animate-overlay" : "animate-overlay-out",
-      );
-  // `flex-wrap`: on a phone the count, three actions and a text "Clear selection" are
-  // wider than the screen. Without wrapping the count (the one shrinkable item)
-  // collapsed to a sliver and the rest ran out of the bar; wrapped, the actions that do
-  // not fit move to a second line and every label stays whole.
-  const rowClass = cn("flex flex-wrap items-center", floating ? "gap-1 px-2 py-1" : "gap-2 px-3 py-2");
-  const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;
-
-  const toolbar = (
-    <div
-      {...(hasPanel ? null : rest)}
-      ref={barRef}
-      role="toolbar"
-      aria-label={labels.selected(shownCount)}
-      aria-orientation="horizontal"
-      data-bulk-action-bar={hasPanel ? undefined : variant}
-      // Leaving: out of the tab order and the accessibility tree at once, while the
-      // bar still animates. The selection it acted on is already gone.
-      inert={(!hasPanel && !shown) || undefined}
-      onKeyDown={handleKeyDown}
-      onFocus={(e) => {
-        onFocus?.(e);
-        if (!hasPanel) trackFocus.onFocus(e);
-        // Clicking a control is using it: the stop follows the pointer too.
-        const hit = itemsOf(barRef.current).find((el) => el === e.target);
-        if (hit) {
-          active.current = hit;
-          rove(barRef.current, active);
-        }
-      }}
-      onBlur={hasPanel ? undefined : trackFocus.onBlur}
-      style={hasPanel ? undefined : surfaceStyle}
-      className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}
-    >
-      {floating && clear}
-      {/* `flex-auto`, not `flex-1`: a zero basis told the wrapping that the count needs
-          no room, so it was the item squeezed to nothing instead of a line breaking.
-          Its own width is its basis now; `truncate` is left for a label too long for a
-          line on its own. */}
-      <span className="min-w-0 flex-auto truncate text-sm font-medium text-primary">{labels.selected(shownCount)}</span>
-      {/* `contents`, so the caller's controls are flex items of the bar itself. */}
-      <div className="contents">{children}</div>
-      {!floating && clear}
-    </div>
-  );
-
-  return (
-    <>
-      <span {...regionProps} />
-      {hasPanel ? (
-        /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the focus is
-           only noted here (DSP-15): where it came from, whether it is in the bar; the
-           controls are the toolbar's and the panel's own. */
-        <div
-          {...rest}
-          onFocus={trackFocus.onFocus}
-          onBlur={trackFocus.onBlur}
-          data-bulk-action-bar={variant}
-          inert={!shown || undefined}
-          style={surfaceStyle}
-          className={cn("flex flex-col", surfaceClass, className)}
-        >
-          {toolbar}
-          <div
-            data-bulk-action-bar-panel=""
-            className={cn("border-t border-subtle px-3 py-3", floating && "max-h-[60dvh] overflow-y-auto")}
-          >
-            {panel}
-          </div>
-        </div>
-      ) : (
-        toolbar
-      )}
-    </>
-  );
-}
-
-function itemsOf(bar: HTMLElement | null): HTMLElement[] {
-  return bar ? Array.from(bar.querySelectorAll<HTMLElement>(ITEMS)) : [];
-}
-
-/** Put the one Tab stop on the remembered control — or the first, when that one has
- *  gone or was never set — and take it off every other. */
-function rove(bar: HTMLElement | null, active: { current: HTMLElement | null }): void {
-  const list = itemsOf(bar);
-  if (!active.current || !list.includes(active.current)) active.current = list[0] ?? null;
-  for (const el of list) el.tabIndex = el === active.current ? 0 : -1;
-}