@eifi1/ui-kit 0.9.0 → 0.11.0

package/src/components/file-dropzone.tsx

@@ -14,6 +14,7 @@ import {
 } from "./file-button";
 import type { FilePickHandler, FilePickerLabels, FileRejection } from "./file-button";
 import { useDragTarget } from "../hooks/use-file-drop";
+import { toast } from "./toast";
 
 /**
  * Where a refused file's message goes.
@@ -97,10 +98,9 @@ export interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<"div">,
    * carries the reason and the translated message as well.
    *
    * Its existence used to be what switched the toast off, and it still does (see
-   * {@link rejectionFeedback}). The toast is a dynamic `import("sonner")` on the
-   * failure path only: `sonner` is an OPTIONAL peer, and a static import here once
-   * broke `import { Button }` for every app without it (see
-   * `optional-peer-imports.test.tsx`).
+   * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`
+   * lazily: it is an OPTIONAL peer, and a static import here once broke
+   * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).
    */
   onInvalid?: (file: File) => void;
   /** Every refused file of one pick, with its reason and message. */
@@ -246,12 +246,11 @@ export function FileDropzone({
         ? summariseRejections(rejected, labels)
         : labels.rejectedPick(picked.length);
       if (feedback === "toast") {
-        // sonner is an optional peer: imported here, on the failure path only, so an
-        // app that never trips this never has to install it. Not awaited — nothing
-        // downstream depends on the toast having appeared, and the handlers that
-        // reach this are DOM events. sonner's own toaster is a live region, so this
-        // path does not announce a second time.
-        void import("sonner").then(({ toast }) => toast.error(message));
+        // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app
+        // that never trips this never has to install it. Nothing downstream depends
+        // on the toast having appeared. The toaster is a live region, so this path
+        // does not announce a second time.
+        toast.error(message);
       } else {
         if (feedback === "inline") setError(message);
         alert.announce(message);

package/src/components/floating-panel.tsx

@@ -1,18 +1,38 @@
 import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import type { ButtonHTMLAttributes, CSSProperties, KeyboardEvent, ReactNode, Ref } from "react";
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  CSSProperties,
+  HTMLAttributes,
+  KeyboardEvent,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+  Ref,
+} from "react";
 import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
 import { dirOf, type Direction } from "../lib/direction";
 import { useKitLabels } from "../i18n/kit-labels";
+import { Tooltip, type TooltipSide } from "./tooltip";
 
 export interface FloatingPanelLabels {
   /** Accessible name of the panel header's X. */
   close: string;
+  /**
+   * What a {@link FloatingAction}'s count badge adds to its accessible name ("3 new"),
+   * read after the label: "Invoices, 3 new". The dot itself is hidden from a reader —
+   * a bare "3" read out of context says nothing about what is counted.
+   */
+  badge: (count: number) => string;
 }
 
-export const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = { close: "Close" };
+export const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels = {
+  close: "Close",
+  badge: (count) => `${count} new`,
+};
 
 /** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */
 export type FloatingCorner = "bottom-end" | "bottom-start";
@@ -89,6 +109,49 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
    * in both states; `aria-pressed` already says which one it is in.
    */
   pressed?: boolean;
+  /**
+   * Show `label` beside the icon: the EXTENDED FAB, a pill rather than a disc. For a
+   * corner control whose words are the point — kastlan's offline indicator
+   * (shared/offline/offline-indicator.tsx:39) is a pill saying "Offline — 2 photo(s)
+   * queued" / "Syncing…", hand-placed at `fixed bottom-4 left-4`, i.e. over the
+   * bottom nav and on the wrong side in RTL. Same height as the disc (3rem), so a
+   * {@link FloatingPanel} card above it still clears it.
+   */
+  extended?: boolean;
+  /**
+   * Announce `label` whenever it changes, through a polite `role="status"` region — for
+   * an extended FAB that REPORTS something (kastlan's offline/sync state), where a
+   * sighted user sees the words change and a screen reader user otherwise hears
+   * nothing until they happen to land on the button.
+   *
+   * ⚠️ A live region announces changes, not its own arrival: a FAB that mounts already
+   * saying "Offline" says it to nobody. Keep it mounted and pass `hidden` while there
+   * is nothing to report (kastlan returns `null` when online and idle); the region
+   * stays in the page, and the first real status is heard.
+   */
+  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.
+   */
+  variant?: "primary" | "surface";
+  /**
+   * 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,
+   * which cannot work: the tooltip's anchor is a `relative inline-flex` span, and this
+   * button is `fixed` and portalled. With `tooltip` the FAB positions a fixed wrapper
+   * instead and the button sits in the tooltip inside it. `true` shows the `label`;
+   * any other content shows that. Implies no native `title` (whatever `nativeTitle`
+   * says): one hover hint, not two. `style` stays on the button; the corner and
+   * `offset` move to the wrapper.
+   */
+  tooltip?: ReactNode;
+  /** 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;
   ref?: Ref<HTMLButtonElement>;
 }
 
@@ -116,6 +179,11 @@ export function FloatingActionButton({
   offset = "1rem",
   nativeTitle = true,
   pressed,
+  extended = false,
+  live = false,
+  variant = "primary",
+  tooltip,
+  tooltipSide = "top",
   className,
   style,
   type = "button",
@@ -124,13 +192,12 @@ export function FloatingActionButton({
 }: FloatingActionButtonProps) {
   const [marker, dir] = usePortalDir();
   const toggle = pressed !== undefined;
-  // An empty title is "no tooltip", not an attribute with nothing in it.
-  const nativeTip = nativeTitle && title !== "" ? (title ?? label) : undefined;
-  return (
-    <>
-      <span ref={marker} hidden />
-      {typeof document !== "undefined" &&
-        createPortal(
+  const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? undefined : tooltip;
+  const wrapped = tip !== undefined && tip !== null;
+  // An empty title is "no tooltip", not an attribute with nothing in it. The kit
+  // tooltip replaces it outright.
+  const nativeTip = !wrapped && nativeTitle && title !== "" ? (title ?? label) : undefined;
+  const button = (
           <button
             {...rest}
             type={type}
@@ -138,11 +205,19 @@ export function FloatingActionButton({
             aria-label={label}
             aria-pressed={pressed ?? rest["aria-pressed"]}
             title={nativeTip}
-            style={{ ...cornerStyle(corner, offset), ...style }}
+            style={wrapped ? style : { ...cornerStyle(corner, offset), ...style }}
             className={cn(
-              "fixed z-40 inline-flex size-12 items-center justify-center rounded-full",
-              "shadow-lg transition-colors",
-              !toggle && "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
+              // Wrapped, the wrapper is the fixed thing and the button sits in it.
+              !wrapped && "fixed z-40",
+              "inline-flex items-center justify-center rounded-full",
+              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" &&
+                "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]",
+              !toggle &&
+                variant === "surface" &&
+                "border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] disabled:hover:bg-[var(--bg-surface)]",
               // A toggle sits on the page's surface — a solid brand disc would read as
               // "on" in both states — and says "on" in the brand family.
               toggle && "border border-[var(--border)]",
@@ -151,12 +226,48 @@ export function FloatingActionButton({
               pressed === true &&
                 "border-[var(--brand)] bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]",
               "outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2",
-              "[&_svg]:size-6",
               className,
             )}
           >
             {icon}
-          </button>,
+            {/* Visible words, not the name: `aria-label` already is the name, and the
+                span would only repeat it. */}
+            {extended && (
+              <span aria-hidden className="whitespace-nowrap">
+                {label}
+              </span>
+            )}
+          </button>
+  );
+  return (
+    <>
+      <span ref={marker} hidden />
+      {typeof document !== "undefined" &&
+        createPortal(
+          <>
+            {wrapped ? (
+              <div
+                dir={dir}
+                hidden={rest.hidden}
+                style={cornerStyle(corner, offset)}
+                className="fixed z-40 inline-flex"
+              >
+                <Tooltip label={tip} side={tooltipSide} portal>
+                  {/* A fragment when the bubble says the name again, so the tooltip
+                      does not describe the button with its own label — a reader would
+                      hear it twice. Other text is a real description. */}
+                  {tip === label ? <>{button}</> : button}
+                </Tooltip>
+              </div>
+            ) : (
+              button
+            )}
+            {live && (
+              <span role="status" className="sr-only">
+                {label}
+              </span>
+            )}
+          </>,
           document.body,
         )}
     </>
@@ -183,6 +294,10 @@ export interface FloatingPanelProps {
   /** The FAB's native `title` — see {@link FloatingActionButtonProps.nativeTitle}.
    *  `false` for keksdose's assistant launcher, under its one-tooltip rule (dev#523). */
   fabNativeTitle?: boolean;
+  /** The FAB's kit tooltip — see {@link FloatingActionButtonProps.tooltip}. `true` for
+   *  keksdose's assistant launcher, which wanted the kit bubble and had no way to
+   *  put one on a fixed, portalled button (dev#523). */
+  fabTooltip?: ReactNode;
   /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else "Close". */
   closeLabel?: string;
   /**
@@ -239,6 +354,7 @@ export function FloatingPanel({
   corner = "bottom-end",
   offset = "1rem",
   fabNativeTitle,
+  fabTooltip,
   closeLabel,
   initialFocus,
   className,
@@ -308,6 +424,7 @@ export function FloatingPanel({
         corner={corner}
         offset={offset}
         nativeTitle={fabNativeTitle}
+        tooltip={fabTooltip}
         aria-expanded={open}
         aria-controls={open ? panelId : undefined}
         onClick={() => {
@@ -383,3 +500,237 @@ export function FloatingPanel({
     </>
   );
 }
+
+export interface FloatingActionGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+  /** Name the group ("Register actions"); a reader then introduces the members as one
+   *  set. A group with no name is one more unlabelled wrapper. */
+  "aria-label"?: string;
+  /** Default `bottom-end`. */
+  corner?: FloatingCorner;
+  /** Distance above the nav / home indicator — see {@link FloatingActionButtonProps.offset}. */
+  offset?: string;
+  /** {@link FloatingAction}s, in reading order. */
+  children: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * A floating pill of {@link FloatingAction}s — one to four `size-12` toggles, actions
+ * or links with hairline dividers — pinned to a corner exactly as the
+ * {@link FloatingActionButton} is: `--app-nav-h` and the home indicator cleared, a
+ * logical corner, portalled.
+ *
+ * keksdose built it twice by hand: the /transactions phone toolbar
+ * (transactions-page.tsx:644 — upcoming and pending toggles, an invoices link with a
+ * pending count, and the brand "+") and the feedback page's "awaiting only" toggle
+ * (feedback-page.tsx:854, one button in the group anyway, so the two pages look
+ * alike). Both at `right-4 bottom-20` — `right`, not `end`, so over the page's leading
+ * edge in RTL — with `divide-x`, slate hovers, and each member's `Tooltip` spelled out.
+ *
+ * `role="group"`, NOT a toolbar: every member keeps its own tab stop, as the
+ * hand-built ones did, and there is no arrow-key roving to learn. Hide it where it
+ * does not belong with a class (`md:hidden`, as both keksdose pages do).
+ */
+export function FloatingActionGroup({
+  corner = "bottom-end",
+  offset = "1rem",
+  className,
+  style,
+  children,
+  ...rest
+}: FloatingActionGroupProps) {
+  const [marker, dir] = usePortalDir();
+  return (
+    <>
+      <span ref={marker} hidden />
+      {typeof document !== "undefined" &&
+        createPortal(
+          <div
+            {...rest}
+            role="group"
+            dir={dir}
+            data-corner={corner}
+            style={{ ...cornerStyle(corner, offset), ...style }}
+            className={cn(
+              "fixed z-40 inline-flex flex-row overflow-hidden rounded-2xl",
+              "border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+              // Dividers on the logical start edge of every member but the first, so
+              // they sit between the same two members in RTL. The member is the
+              // tooltip's wrapper span, which is the direct child.
+              "[&>*:not(:first-child)]:border-s [&>*]:border-[var(--border)]",
+              className,
+            )}
+          >
+            {children}
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+/** What {@link FloatingActionProps.renderLink} is handed. Spread it onto your router's
+ *  link, mapping `href` — `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+export interface FloatingActionLinkProps {
+  href: string;
+  /** The member's whole look — keep it. */
+  className: string;
+  children: ReactNode;
+  "aria-label": string;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick"> {
+  /** The accessible name, and the tooltip's text. Keep it the same in both states of a
+   *  toggle; `aria-pressed` says which one it is in. */
+  label: string;
+  icon: ReactNode;
+  /** Make it a toggle: `aria-pressed` and the brand "on" look (the brand glyph on the
+   *  quiet brand fill), as {@link FloatingActionButtonProps.pressed}. Ignored on a link. */
+  pressed?: boolean;
+  /**
+   * `primary`: the brand-filled member, for the group's main action (the /transactions
+   * "+"). Default: the quiet one.
+   */
+  variant?: "default" | "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
+   * joins the accessible name through `floatingPanel.badge` ("Invoices, 3 new"), or
+   * `badgeLabel` when passed.
+   */
+  badge?: number;
+  /** The badge's words for a reader, replacing `floatingPanel.badge` — "3 to review". */
+  badgeLabel?: string;
+  /** The dot's colour. Default `warning`, the pending count's. */
+  badgeTone?: "warning" | "danger" | "brand";
+  /** Show `label` in the kit {@link Tooltip} on hover and focus. Default `true`: the
+   *  members are icon-only and this is their only visible label. */
+  tooltip?: boolean;
+  /** Where the tooltip opens. Default `top` — the group sits at the bottom of the screen. */
+  tooltipSide?: TooltipSide;
+  /** Make it a link — the /transactions invoices member. A plain `<a>` unless
+   *  `renderLink` hands it to your router. */
+  href?: string;
+  /** Render the link through your router's `Link` — see {@link FloatingActionLinkProps}. */
+  renderLink?: (props: FloatingActionLinkProps) => ReactElement;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  ref?: Ref<HTMLButtonElement>;
+}
+
+const BADGE_TONE: Record<NonNullable<FloatingActionProps["badgeTone"]>, string> = {
+  warning: "bg-[var(--warning)] text-[var(--text-inverse)]",
+  danger: "bg-[var(--danger)] text-[var(--danger-contrast)]",
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)]",
+};
+
+/**
+ * One member of a {@link FloatingActionGroup}: a `size-12` icon button, toggle or link
+ * with its label in a styled tooltip — what each keksdose member wrapped by hand in
+ * `<Tooltip portal>`. The tooltip is portalled because the group clips (`overflow-hidden`
+ * keeps the brand member's fill inside the pill's corners), and the focus ring is inset
+ * for the same reason.
+ */
+export function FloatingAction({
+  label,
+  icon,
+  pressed,
+  variant = "default",
+  badge,
+  badgeLabel,
+  badgeTone = "warning",
+  tooltip = true,
+  tooltipSide = "top",
+  href,
+  renderLink,
+  className,
+  type = "button",
+  onClick,
+  ref,
+  ...rest
+}: FloatingActionProps) {
+  const labels = useKitLabels("floatingPanel", DEFAULT_FLOATING_PANEL_LABELS);
+  const counted = badge !== undefined && badge > 0;
+  const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
+  const isLink = href !== undefined;
+  const look = cn(
+    "relative flex size-12 items-center justify-center transition-colors",
+    "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-5",
+    variant === "primary"
+      ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]"
+      : pressed && !isLink
+        ? "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)]"
+        : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+    className,
+  );
+  const body = (
+    <>
+      {icon}
+      {counted && (
+        <span
+          aria-hidden
+          data-badge=""
+          className={cn(
+            "pointer-events-none absolute end-1 top-1 h-4 min-w-4 rounded-full px-1 text-center text-[10px] leading-4 font-semibold",
+            BADGE_TONE[badgeTone],
+          )}
+        >
+          {badge > 99 ? "99+" : badge}
+        </span>
+      )}
+    </>
+  );
+
+  let member: ReactElement;
+  if (isLink) {
+    // The button-only attributes stay behind; `aria-*`, `data-*` and the like ride along.
+    const { disabled: _disabled, form: _form, value: _value, name: _name, ...anchorRest } = rest;
+    const linkProps: FloatingActionLinkProps = {
+      ...(anchorRest as AnchorHTMLAttributes<HTMLAnchorElement>),
+      href,
+      "aria-label": name,
+      onClick,
+      className: look,
+      children: body,
+    };
+    const { children: content, ...anchor } = linkProps;
+    member = renderLink ? (
+      <RenderedFloatingLink render={renderLink} {...linkProps} />
+    ) : (
+      <a {...anchor}>{content}</a>
+    );
+  } else {
+    member = (
+      <button
+        {...rest}
+        ref={ref}
+        type={type}
+        aria-label={name}
+        aria-pressed={pressed ?? rest["aria-pressed"]}
+        onClick={onClick}
+        className={look}
+      >
+        {body}
+      </button>
+    );
+  }
+  if (!tooltip) return member;
+  return (
+    // A fragment: the bubble says the member's name, and a description that repeats
+    // the name is read twice.
+    <Tooltip label={label} side={tooltipSide} portal>
+      <>{member}</>
+    </Tooltip>
+  );
+}
+
+/** Calls `renderLink` as a component, so its hooks belong to the link, not to us. */
+function RenderedFloatingLink({
+  render,
+  ...props
+}: FloatingActionLinkProps & { render: (props: FloatingActionLinkProps) => ReactElement }) {
+  return render(props);
+}

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

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useId, useRef } from "react";
 import { createPortal } from "react-dom";
 import type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
 import { X } from "lucide-react";
@@ -20,12 +20,29 @@ import { useFocusTrap } from "../hooks/use-focus-trap";
  * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going
  * to the panel inside it, which is what it has always meant here.
  */
-export interface FullBleedDialogProps extends ComponentPropsWithoutRef<"div"> {
+export interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
   open: boolean;
   /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —
    *  the platform Back gesture all call this. */
   onClose: () => void;
-  /** What the header strip shows beside the close button. */
+  /**
+   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start
+   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is
+   * announced by name rather than as just "dialog".
+   *
+   * Before this the strip was a styled `div`, and a caller that wanted its full-screen
+   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —
+   * keksdose's budget-table phone editor says so in a comment at the call site. A
+   * caller's own `aria-label` / `aria-labelledby` still wins.
+   */
+  title?: ReactNode;
+  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */
+  headingAs?: "h1" | "h2" | "h3" | "h4";
+  /**
+   * Free content for the header strip, beside the close button — after the
+   * {@link title} when there is one, or on its own (the row editor shows the row's
+   * own first cell here). It does not name the dialog; `title` does.
+   */
   header?: ReactNode;
   closeLabel: string;
   children: ReactNode;
@@ -81,12 +98,16 @@ export interface FullBleedDialogProps extends ComponentPropsWithoutRef<"div"> {
  * ## What the caller still owns
  *
  * The HEADER's content, because the two callers name themselves differently: the row
- * editor shows the row's own first column, the create card a plain title. And `open`,
+ * editor shows the row's own first column, the create card a plain title. A plain
+ * title belongs in `title`, which is a real heading and the dialog's name; `header`
+ * stays the free slot beside it. And `open`,
  * because who decides is the caller's business — see {@link backCloses}.
  */
 export function FullBleedDialog({
   open,
   onClose,
+  title,
+  headingAs: Heading = "h2",
   header,
   closeLabel,
   children,
@@ -108,6 +129,9 @@ export function FullBleedDialog({
   useOverlayHistory(open && backCloses, requestClose);
 
   const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  const hasTitle = title !== undefined && title !== null && title !== false;
+  const hasHeader = header !== undefined && header !== null && header !== false;
   // The half of "modal" this dialog was only claiming. It has said
   // `aria-modal="true"` since it was extracted from `data-table.tsx`, which tells
   // assistive technology to hide everything outside it — while the user's focus stayed
@@ -166,6 +190,10 @@ export function FullBleedDialog({
       )}
       role="dialog"
       aria-modal="true"
+      // The heading names the dialog unless the caller named it some other way — an
+      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would
+      // silently outrank).
+      aria-labelledby={rest["aria-labelledby"] ?? (hasTitle && !rest["aria-label"] ? titleId : undefined)}
       // `tabIndex={-1}` is what makes the line above more than a claim: without it the
       // container cannot take focus and `useFocusTrap` silently does nothing.
       tabIndex={-1}
@@ -195,7 +223,16 @@ export function FullBleedDialog({
         )}
       >
         <div className="flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3">
-          <div className="min-w-0 flex-1 font-medium">{header}</div>
+          {hasTitle ? (
+            <div className="flex min-w-0 flex-1 items-center gap-2">
+              <Heading id={titleId} className="min-w-0 break-words text-base font-semibold leading-snug text-[var(--text-primary)]">
+                {title}
+              </Heading>
+              {hasHeader && <div className="min-w-0 flex-1 font-medium">{header}</div>}
+            </div>
+          ) : (
+            <div className="min-w-0 flex-1 font-medium">{header}</div>
+          )}
           <button
             type="button"
             onClick={requestClose}