@eifi1/ui-kit 0.48.2 → 0.50.0

package/src/components/floating-panel.tsx

@@ -15,11 +15,12 @@ import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
+import { warnDeprecatedVariant } from "./button-look";
 import { dirOf, type Direction } from "../lib/direction";
 import { registerFloating } from "../lib/floating-stack";
 import { useFloatClearance } from "../lib/float-clearance";
 import { isComposing } from "../lib/ime";
-import { takeEscape } from "../hooks/use-dismiss";
+import { takeEscape, useOverlayOpen } from "../hooks/use-dismiss";
 import { useKitLabels, useKitLink } from "../i18n/kit-labels";
 import { assignRef } from "./field-parts";
 import { pickLinkRenderer } from "./text-link";
@@ -137,13 +138,18 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
    */
   live?: boolean;
   /**
-   * `primary` (default): the solid brand disc of a page's main action. `surface`: the
-   * page's surface with a hairline border — for a FAB that is a status rather than a
-   * call to action, as kastlan's offline pill is (a brand pill would shout "press me"
-   * at a user who is merely offline). Ignored while `pressed` is set; a toggle has its
-   * own two looks.
+   * `accent` (default): the solid brand disc of a page's main action, as Button's
+   * `accent`. `surface`: the page's surface with a hairline border — for a FAB that is a
+   * status rather than a call to action, as kastlan's offline pill is (a brand pill would
+   * shout "press me" at a user who is merely offline). Ignored while `pressed` is set; a
+   * toggle has its own two looks. `primary` is a deprecated alias of `accent` (0.49; a
+   * development build warns once), removed in 0.51.
    */
-  variant?: "primary" | "surface";
+  variant?:
+    | "accent"
+    | "surface"
+    /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
+    | "primary";
   /**
    * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —
    * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,
@@ -158,9 +164,23 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
   /** Where the {@link tooltip} opens. Default `top`; the bubble is portalled and kept on
    *  screen, so a corner button's label is not pushed off the edge. */
   tooltipSide?: TooltipSide;
+  /**
+   * 0.49 KIT-11: step aside (as `hidden` does: off screen, the room kept) while a dialog,
+   * a sheet, a popover, a hover menu or a list is open, instead of floating over it or
+   * beside it. Default `true`; `false` keeps it on screen. A tooltip does not count.
+   */
+  hideWhenOverlay?: boolean;
   ref?: Ref<HTMLButtonElement>;
 }
 
+/** FloatingActionButton's and FloatingAction's `primary` was always the solid brand
+ *  fill: it reads as `accent` (warning once in development), never as Button's
+ *  `default`. */
+function deprecatedPrimary(component: string): "accent" {
+  warnDeprecatedVariant(component, "primary", "accent");
+  return "accent";
+}
+
 /**
  * A round, icon-only button pinned to a corner of the viewport — the trigger of a
  * {@link FloatingPanel}, and usable alone for a page's one primary action.
@@ -195,17 +215,22 @@ export function FloatingActionButton({
   pressed,
   extended = false,
   live = false,
-  variant = "primary",
+  variant: givenVariant = "accent",
   tooltip,
   tooltipSide = "top",
+  hideWhenOverlay = true,
   className,
   style,
   type = "button",
   title,
+  hidden: hiddenProp,
   ref,
   ...rest
 }: FloatingActionButtonProps) {
+  const overlay = useOverlayOpen(hideWhenOverlay);
+  const hidden = hiddenProp || overlay || undefined;
   const [marker, dir] = usePortalDir();
+  const variant = givenVariant === "primary" ? deprecatedPrimary("FloatingActionButton variant") : givenVariant;
   const toggle = pressed !== undefined;
   const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? undefined : tooltip;
   const wrapped = tip !== undefined && tip !== null;
@@ -229,6 +254,7 @@ export function FloatingActionButton({
   const button = (
           <button
             {...rest}
+            hidden={wrapped ? undefined : hidden}
             ref={buttonRef}
             type={type}
             dir={dir}
@@ -243,7 +269,7 @@ export function FloatingActionButton({
               extended ? "h-12 gap-2 px-4 text-sm font-medium [&_svg]:size-5" : "size-12 [&_svg]:size-6",
               "shadow-lg transition-colors disabled:cursor-default",
               !toggle &&
-                variant === "primary" &&
+                variant === "accent" &&
                 "bg-brand text-brand-contrast hover:bg-brand-hover",
               !toggle &&
                 variant === "surface" &&
@@ -280,7 +306,7 @@ export function FloatingActionButton({
               <div
                 ref={setFixed}
                 dir={dir}
-                hidden={rest.hidden}
+                hidden={hidden}
                 style={cornerStyle(corner, offset)}
                 className="fixed z-40 inline-flex"
               >
@@ -350,6 +376,13 @@ export interface FloatingPanelProps {
    * back and shorten the page under the reader's thumb.
    */
   hidden?: boolean;
+  /**
+   * 0.49 KIT-11: the FAB steps aside while a dialog, a sheet, a popover, a hover menu or
+   * a list is open elsewhere (see {@link FloatingActionButtonProps.hideWhenOverlay}).
+   * Default `true`. An OPEN panel stays: what opens from inside it (a select, a date
+   * picker) is its own content.
+   */
+  hideWhenOverlay?: boolean;
   children: ReactNode;
 }
 
@@ -400,7 +433,8 @@ export function FloatingPanel({
   initialFocus,
   className,
   bodyClassName,
-  hidden = false,
+  hidden: hiddenProp = false,
+  hideWhenOverlay = true,
   children,
 }: FloatingPanelProps) {
   const labels = useKitLabels(
@@ -410,6 +444,8 @@ export function FloatingPanel({
   );
   const [ownOpen, setOwnOpen] = useState(defaultOpen);
   const open = openProp ?? ownOpen;
+  const overlay = useOverlayOpen(hideWhenOverlay && !open);
+  const hidden = hiddenProp || overlay;
   const setOpen = (next: boolean) => {
     if (openProp === undefined) setOwnOpen(next);
     onOpenChange?.(next);
@@ -477,6 +513,7 @@ export function FloatingPanel({
         nativeTitle={fabNativeTitle}
         tooltip={fabTooltip}
         hidden={hidden || undefined}
+        hideWhenOverlay={false}
         aria-expanded={open}
         aria-controls={open && !hidden ? panelId : undefined}
         onClick={() => {
@@ -564,6 +601,9 @@ export interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivEle
   offset?: string;
   /** {@link FloatingAction}s, in reading order. */
   children: ReactNode;
+  /** 0.49 KIT-11: step aside while a dialog, a sheet, a popover, a hover menu or a list
+   *  is open — see {@link FloatingActionButtonProps.hideWhenOverlay}. Default `true`. */
+  hideWhenOverlay?: boolean;
   ref?: Ref<HTMLDivElement>;
 }
 
@@ -587,12 +627,15 @@ export interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivEle
 export function FloatingActionGroup({
   corner = "bottom-end",
   offset = "1rem",
+  hideWhenOverlay = true,
+  hidden,
   className,
   style,
   children,
   ...rest
 }: FloatingActionGroupProps) {
   const [marker, dir] = usePortalDir();
+  const overlay = useOverlayOpen(hideWhenOverlay);
   // As the FAB's (keksdose dev#612): its 3rem members plus the frame's 1px borders.
   useFloatClearance(offset, "2px");
   return (
@@ -602,6 +645,7 @@ export function FloatingActionGroup({
         createPortal(
           <div
             {...rest}
+            hidden={hidden || overlay || undefined}
             role="group"
             dir={dir}
             data-corner={corner}
@@ -655,10 +699,16 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
    */
   pressedStyle?: "tint" | "plain";
   /**
-   * `primary`: the brand-filled member, for the group's main action (the /transactions
-   * "+"). Default: the quiet one.
+   * `accent`: the brand-filled member, for the group's main action (the /transactions
+   * "+"), as Button's `accent`. `default` (default): the quiet one. `primary` is a
+   * deprecated alias of `accent` (0.49; a development build warns once), removed no
+   * earlier than 0.51.
    */
-  variant?: "default" | "primary";
+  variant?:
+    | "default"
+    | "accent"
+    /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
+    | "primary";
   /**
    * A count in a dot at the member's top end corner — the /transactions invoices link's
    * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count
@@ -704,7 +754,7 @@ export function FloatingAction({
   icon,
   pressed,
   pressedStyle = "tint",
-  variant = "default",
+  variant: givenVariant = "default",
   badge,
   badgeLabel,
   badgeTone = "warning",
@@ -723,12 +773,13 @@ export function FloatingAction({
   const counted = badge !== undefined && badge > 0;
   const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
   const isLink = href !== undefined;
+  const variant = givenVariant === "primary" ? deprecatedPrimary("FloatingAction variant") : givenVariant;
   const look = cn(
     "relative flex size-12 items-center justify-center transition-colors",
     "outline-none focus-visible:ring-inset",
     FOCUS_RING,
     "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
-    variant === "primary"
+    variant === "accent"
       ? "bg-brand text-brand-contrast hover:bg-brand-hover"
       : pressed && !isLink && pressedStyle === "tint"
         ? "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted"

package/src/components/form-actions.tsx

@@ -204,7 +204,7 @@ export interface FormActionsProps extends Omit<ComponentPropsWithoutRef<"div">,
    * allows (the account's own settings, docs/billing-harmonization.md §12.36).
    */
   commit?: CommitScope;
-  /** The save button's variant. Default `brand`; `danger` for a save that destroys
+  /** The save button's variant. Default `accent`; `danger` for a save that destroys
    *  (kastlan's `destructive` flag on its own FormActions). */
   submitVariant?: ButtonVariant;
   /**
@@ -371,7 +371,7 @@ export function FormActions({
   submitDisabled = false,
   submitDisabledReason,
   commit = false,
-  submitVariant = "brand",
+  submitVariant = "accent",
   cancelVariant = "secondary",
   size = "md",
   destructive,

package/src/components/full-bleed-dialog.tsx

@@ -208,6 +208,9 @@ export function FullBleedDialog({
       // `tabIndex` below by passing one of them too — this is the element the focus
       // trap holds, and each of those failures is invisible on screen.
       {...rest}
+      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):
+      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.
+      data-kit-layer="backdrop"
       className={cn(
         "fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none",
         closing ? "animate-overlay-out" : "animate-overlay",

package/src/components/icon-button.tsx

@@ -28,8 +28,9 @@ import {
   HIT_AREA_LARGE,
   TOUCH_TARGET_LARGE,
   buttonVariantClasses,
+  resolveButtonVariant,
 } from "./button-look";
-import type { ButtonVariant } from "./button-look";
+import type { ButtonVariant, CanonicalButtonVariant } from "./button-look";
 
 // Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2
 // gap-2 — so rendering a bare glyph through it gives a small icon in a wide,
@@ -199,12 +200,12 @@ function iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined):
 // and would out-rank a caller's plain `hover:` override), each variant pins its
 // RESTING look under `disabled:hover:`, which out-ranks any `hover:` by specificity
 // and only ever matches a disabled button.
-const ICON_BUTTON_DISABLED_REST: Record<IconButtonVariant, string> = {
-  primary: "disabled:hover:bg-surface-2",
+const ICON_BUTTON_DISABLED_REST: Record<CanonicalButtonVariant | "overlay" | "shutter", string> = {
+  default: "disabled:hover:bg-surface-2",
   secondary: "disabled:hover:bg-transparent",
   ghost: "disabled:hover:bg-transparent",
   danger: "disabled:hover:bg-danger",
-  brand: "disabled:hover:bg-brand",
+  accent: "disabled:hover:bg-brand",
   link: "disabled:hover:bg-transparent disabled:hover:no-underline",
   overlay: "disabled:hover:bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)]",
   shutter: "disabled:hover:bg-media-scrim",
@@ -633,6 +634,7 @@ function iconButtonLook({
   /** The label is drawn beside the glyph (see `labelVisible`). */
   withText?: boolean;
 }) {
+  const look = variant === "overlay" || variant === "shutter" ? variant : resolveButtonVariant(variant, "IconButton variant");
   return cn(
     ICON_BUTTON_BASE,
     withText
@@ -644,13 +646,13 @@ function iconButtonLook({
     withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],
     glyphSize !== undefined && ICON_BUTTON_GLYPH_SIZES[glyphSize],
     // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
-    variant === "overlay"
+    look === "overlay"
       ? ICON_BUTTON_OVERLAY
-      : variant === "shutter"
+      : look === "shutter"
         ? ICON_BUTTON_SHUTTER
-        : buttonVariantClasses[variant],
+        : buttonVariantClasses[look],
     shape === "round" && "rounded-full",
-    ICON_BUTTON_DISABLED_REST[variant],
+    ICON_BUTTON_DISABLED_REST[look],
     iconButtonToneClass(tone, quiet),
     toneColor !== undefined && typeof toneColor !== "string" && ICON_BUTTON_TONE_PAIR,
   );
@@ -676,6 +678,17 @@ function withIconButtonBadge(control: ReactElement, badge: ReactNode, stretch: b
 
 // Declared link-first, as Button is, so `<IconButton href>` picks the link props and
 // `ComponentProps<typeof IconButton>` (the LAST signature) is still the button's.
+/**
+ * An icon-only button whose `label` is its name and its tooltip.
+ *
+ * Destructive actions (0.49 KIT-12): a delete, revoke or erase is NOT an icon repeated in
+ * every row of a list — one stray tap away, and a bin per row draws the eye to the one
+ * thing nobody should do by accident. Put it in the row's menu, `RowActions` (where a
+ * `tone: "danger"` action goes by default and opens a `ConfirmDialog` first), or in the
+ * selection bar ("2 selected" → Delete), and confirm it through `useConfirm`. A single
+ * standalone delete — a card's own, a bulk bar's — may be an IconButton
+ * `tone="danger"`; it still asks first.
+ */
 export function IconButton(props: IconButtonLinkProps): ReactElement;
 export function IconButton(props: IconButtonProps): ReactElement;
 export function IconButton(props: IconButtonProps | IconButtonLinkProps): ReactElement {

package/src/components/modal.tsx

@@ -394,6 +394,9 @@ function ModalPanel({
       // that page from a screen reader for 220ms. Not `inert` — that would let a tap
       // fall through the fading backdrop to the row underneath.
       aria-hidden={exiting || undefined}
+      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):
+      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.
+      data-kit-layer="backdrop"
       className={cn(
         // Live #320. The panel below rises only where it is bottom-anchored: from md up
         // it is centred, and a centred box sliding up from off-screen reads as a

package/src/components/nav-pills.tsx

@@ -1,5 +1,7 @@
+import { useLayoutEffect, useRef } from "react";
 import type { ComponentPropsWithoutRef, ComponentType, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { cn } from "../lib/cn";
+import { scrollIntoStrip, useStripFade } from "../lib/strip-fade";
 import { useKitLink } from "../i18n/kit-labels";
 import { FOCUS_RING } from "./focus-ring";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
@@ -50,6 +52,13 @@ export interface NavPillsProps<T extends string> extends Omit<ComponentPropsWith
   landmark?: boolean;
   /** Classes for every pill. */
   itemClassName?: string;
+  /**
+   * 0.49: `wrap` (default) puts the pills on as many rows as they need. `scroll` keeps
+   * them on ONE row that scrolls sideways — faded at a cut edge, the current pill
+   * scrolled into view (the row only, never the page) — for a strip that must stay one
+   * line high, as {@link SectionNav} under a page title on a phone.
+   */
+  layout?: "wrap" | "scroll";
   /** The `<nav>` (or the `<div role="group">`) — hence `HTMLElement` (0.34, API-2,
    *  refactor audit 2026-10). */
   ref?: Ref<HTMLElement>;
@@ -89,12 +98,22 @@ export function NavPills<T extends string>({
   size = "md",
   landmark = true,
   itemClassName,
+  layout = "wrap",
   className,
   ref,
   ...rest
 }: NavPillsProps<T>) {
   const kitLink = useKitLink();
   const Root = landmark ? "nav" : "div";
+  const scroll = layout === "scroll";
+  const listRef = useRef<HTMLUListElement>(null);
+  const fade = useStripFade(listRef);
+  // The current pill into view — the row only, never the page.
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const currentPill = list?.querySelector<HTMLElement>("[aria-current]");
+    if (scroll && list && currentPill) scrollIntoStrip(list, currentPill);
+  }, [scroll, current]);
   return (
     <Root
       {...rest}
@@ -102,7 +121,15 @@ export function NavPills<T extends string>({
       role={landmark ? undefined : "group"}
       className={cn("min-w-0", className)}
     >
-      <ul className="m-0 flex list-none flex-wrap gap-1 p-0">
+      <ul
+        ref={listRef}
+        className={cn(
+          "m-0 flex list-none gap-1 p-0",
+          scroll ? "flex-nowrap overflow-x-auto overscroll-x-contain [scrollbar-width:none]" : "flex-wrap",
+        )}
+        data-overflow={scroll ? fade.overflow : undefined}
+        style={scroll && fade.mask ? { maskImage: fade.mask, WebkitMaskImage: fade.mask } : undefined}
+      >
         {items.map((item) => {
           const isCurrent = item.value === current;
           const Icon = item.icon;
@@ -152,7 +179,7 @@ export function NavPills<T extends string>({
             );
           }
           return (
-            <li key={item.value} className="flex">
+            <li key={item.value} className={cn("flex", scroll && "shrink-0")}>
               {pill}
             </li>
           );

package/src/components/number-input.tsx

@@ -16,10 +16,11 @@ import { useEndWidth, useNumericField } from "./numeric-field";
 import type { CommitScope } from "./write-lock";
 import { cn } from "../lib/cn";
 import { commitExpression, formatResult } from "../lib/calc";
+import { dataAttributes, type DataAttributes } from "../lib/data-attributes";
 
 /** {@link NumberInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a
  *  wrapper typed itself off `ComponentProps<typeof NumberInput>` until then. */
-export interface NumberInputProps extends FieldHelpProps {
+export interface NumberInputProps extends FieldHelpProps, DataAttributes {
   /** The text, DOT-decimal ("1234.5", or a calculation being typed: "12+5"), as
    *  `onChange` reports it — so a caller's `Number(value)` reads it. The field SHOWS it
    *  in the locale's mark (see `locale`). A comma here is read as the decimal mark too,
@@ -549,12 +550,16 @@ export function NumberInput(props: NumberInputProps) {
   ) : (
     field
   );
-  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) return box;
+  const data = dataAttributes(props);
+  if (numeric.hint.captionText === undefined && numeric.errorEl === null && !reserve) {
+    // Bare, unless the caller tags it: then the same plain root as below carries the tags.
+    return Object.keys(data).length > 0 ? <div {...data}>{box}</div> : box;
+  }
   // Outside the field's own `relative` box, as Select's caption is: the calculator
   // and the unit are `inset-y-0` in it and would stretch down over a second line.
   // `className` stays on the field, so adding a caption cannot change what it styles.
   return (
-    <div>
+    <div {...data}>
       {box}
       <FieldCaption parts={numeric.hint} />
       {numeric.errorEl}

package/src/components/numpad-sheet.tsx

@@ -209,6 +209,10 @@ export function NumberPadSheet({
     <div
       role="group"
       aria-label={text.panel}
+      // A kit layer, and the bottom layer a docked tour card stays clear of (0.50,
+      // docs/tours-harmonization.md §11.6).
+      data-kit-layer=""
+      data-tour-obstruction=""
       // Keep the host input focused when tapping the pad: preventDefault on
       // pointerdown blocks the focus/blur, while the buttons' click still fires.
       onPointerDown={(e) => e.preventDefault()}

package/src/components/page-header-context.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+/**
+ * Set by `PageHeader` around its `breadcrumbs` (0.49 KIT-9), so a `Breadcrumbs` there
+ * knows the page's title is already on screen: it hides its current entry by default
+ * (`hideCurrent`) and draws nothing when only the home entry would remain. Internal.
+ */
+export const PageHeaderTrailContext = createContext<{ titled: boolean } | null>(null);

package/src/components/page-header.tsx

@@ -2,6 +2,8 @@ import { useLayoutEffect, useRef, useState } from "react";
 import type { ComponentPropsWithRef, ElementType, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { SECTION_LABEL_CLASS } from "./text";
+import { useDocumentTitle } from "../hooks/use-document-title";
+import { PageHeaderTrailContext } from "./page-header-context";
 
 /**
  * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
@@ -71,8 +73,20 @@ export interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "tit
   /** Buttons for the page — "New", "Export". At the title's end from `sm` up; under it,
    *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */
   actions?: ReactNode;
-  /** A `Breadcrumbs` trail, drawn above everything else. */
+  /** A `Breadcrumbs` trail, drawn above everything else. Inside a header with a title
+   *  it hides its current entry (the title names it) and is drawn only when an entry
+   *  other than home is left — `Breadcrumbs.hideCurrent` (0.49 KIT-9). */
   breadcrumbs?: ReactNode;
+  /**
+   * The window's title (`document.title`) while the header is mounted (0.49 KIT-9),
+   * through `useDocumentTitle` and the provider's format ("{page} · {section} · {app}",
+   * `appName` as the app). A string is the page; an array is `[page, section]` (or
+   * `[page, section, app]`); `false` leaves the window's title alone.
+   *
+   * Default: the `title` when it is a string, and only for the page's own header
+   * (`as="h1"`) — a tab's `h2` header does not rename the window.
+   */
+  documentTitle?: string | ReadonlyArray<string | null | undefined> | false;
   /** A small uppercase line above the title — the section or the kind of record
    *  ("Building", "Settings"). The section-label type. */
   eyebrow?: ReactNode;
@@ -147,6 +161,9 @@ export interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "tit
   truncateTitle?: boolean;
 }
 
+const TITLED = { titled: true };
+const UNTITLED = { titled: false };
+
 /**
  * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the
  * page's actions.
@@ -170,10 +187,23 @@ export function PageHeader({
   secondaryActions,
   actionsAlign,
   truncateTitle = false,
+  documentTitle,
   className,
   ...rest
 }: PageHeaderProps) {
   const Heading = as as ElementType;
+  useDocumentTitle(
+    documentTitle === false
+      ? []
+      : documentTitle === undefined
+        ? as === "h1" && typeof title === "string"
+          ? [title]
+          : []
+        : typeof documentTitle === "string"
+          ? [documentTitle]
+          : documentTitle,
+  );
+  const titled = title != null && title !== false && title !== "";
   const hasSecondary = secondaryActions != null;
   const wrapsSecondary = hasSecondary && mobileLayout === "inline";
   const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;
@@ -216,7 +246,9 @@ export function PageHeader({
   }, [measuresWrap]);
   return (
     <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
-      {breadcrumbs}
+      {breadcrumbs != null && (
+        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>{breadcrumbs}</PageHeaderTrailContext.Provider>
+      )}
       {/* With a second group, `inline` wraps so that group's full-width basis puts it
           on a row of its own on a phone (`stacked` is a column there already, and a
           basis would size a column item's HEIGHT); from `sm` up the row stops wrapping

package/src/components/picker-sheet.tsx

@@ -211,6 +211,10 @@ export function PickerSheet({
       // caller has something to add.
       {...rest}
       ref={setSheet}
+      // A kit layer and a bottom layer a docked tour card stays clear of (0.50,
+      // docs/tours-harmonization.md §11.6).
+      data-kit-layer=""
+      data-tour-obstruction=""
       role="dialog"
       aria-modal="true"
       // Without it the container cannot take focus, and `useFocusTrap` has nothing to

package/src/components/pie-chart.tsx

@@ -20,6 +20,7 @@ import { DEFAULT_PIE_CHART_LABELS, type PieChartLabels } from "./pie-chart-label
 import { StaticLegend, ToggleLegend, toggleHidden, type LegendEntry } from "./toggle-legend";
 import { useTextSize } from "../theme/text-size";
 import { chartHeightProps, type ChartHeight } from "./chart-height";
+import { formatWithMinus } from "../lib/minus";
 
 /** One slice. */
 export interface PieChartSlice {
@@ -186,7 +187,7 @@ export function PieChart({
   // Memoised, like everything the sectors are drawn from: they must not be rebuilt on
   // this component's own re-renders (see `pie` below).
   const formatValue = useCallback(
-    (v: number) => (formatValueProp ? formatValueProp(v) : numberFormat.format(v)),
+    (v: number) => (formatValueProp ? formatValueProp(v) : formatWithMinus(numberFormat, v)),
     [formatValueProp, numberFormat],
   );
   // One decimal under 10 %, where rounding to whole percents starts to lie — a slice

package/src/components/popover.tsx

@@ -206,6 +206,8 @@ export function Popover({
             // to remove one of them by accident.
             {...rest}
             ref={setPanel}
+            // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).
+            data-kit-layer=""
             role="dialog"
             id={panelId}
             // The caller's own `aria-label` wins over {@link PopoverLabels.panel}, which

package/src/components/progress-bar.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride }
 import { toneTextClass } from "./signed-amount";
 import type { TextTone } from "./signed-amount";
 import { DEFAULT_PROGRESS_BAR_LABELS } from "./progress-bar-labels";
+import { formatWithMinus } from "../lib/minus";
 
 /** The words a progress bar adds of its own. */
 export interface ProgressBarLabels {
@@ -57,6 +58,7 @@ const TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: "h-1", slim: "h-1.5"
 
 // A segment with no tone of its own takes the next categorical chart colour, so a
 // stacked bar of unnamed parts is still a set of tellable parts rather than one fill.
+// Eight, cycled like `paletteFor` (0.49): `--chart-9` only repeats slot 1.
 const SERIES_FILL = [
   "bg-[var(--chart-1)]",
   "bg-[var(--chart-2)]",
@@ -66,7 +68,6 @@ const SERIES_FILL = [
   "bg-[var(--chart-6)]",
   "bg-[var(--chart-7)]",
   "bg-[var(--chart-8)]",
-  "bg-[var(--chart-9)]",
 ];
 
 /** Each segment's fill classes: its own classes, else its tone, else (with no `color`)
@@ -282,7 +283,7 @@ export function ProgressBar({
         ? undefined
         : formatValue
           ? formatValue(value, Infinity, min)
-          : new Intl.NumberFormat(kitLocale).format(value);
+          : formatWithMinus(new Intl.NumberFormat(kitLocale), value);
     return (
       <Tag {...rest} ref={tagRef} className={cn("min-w-0", inlineClass, className)} data-state="unlimited">
         <Tag className="flex items-baseline gap-2 text-sm">
@@ -325,7 +326,9 @@ export function ProgressBar({
   const formatPart = (v: number) => {
     if (!Number.isFinite(v)) return format(min);
     if (formatValue) return formatValue(v, max, min);
-    return new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
+    // A part can be negative (a refund): U+2212, as everywhere (0.49, KIT-1).
+    return formatWithMinus(
+      new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }),
       span <= 0 ? 0 : (v - min) / span,
     );
   };

package/src/components/reauth-dialog.tsx

@@ -257,7 +257,7 @@ function ReauthActions({
       <Button
         type="submit"
         form={formId}
-        variant={danger ? "danger" : "primary"}
+        variant={danger ? "danger" : "default"}
         disabled={!canSubmit || busy}
         aria-busy={busy || undefined}
       >

package/src/components/row-actions-labels.ts

@@ -7,4 +7,6 @@ import type { RowActionsLabels } from "./row-actions";
 export const DEFAULT_ROW_ACTIONS_LABELS: RowActionsLabels = {
   actions: "Actions",
   actionsFor: (name) => `Actions for ${name}`,
+  confirmTitle: (action, name) => (name ? `${action} “${name}”?` : `${action}?`),
+  confirmBody: "This cannot be undone.",
 };