@eifi1/ui-kit 0.9.0 → 0.11.0

package/src/components/list.tsx

@@ -0,0 +1,443 @@
+import { createContext, forwardRef, useContext } from "react";
+import type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import { ExternalLink } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Spinner } from "./ui";
+import { StatusDot } from "./status-dot";
+import { useKitLabels } from "../i18n/kit-labels";
+
+/* ── Labels ───────────────────────────────────────────────────────────────── */
+
+export interface ListLabels {
+  /** Read after an unread row's title — the dot alone says nothing to a screen reader. */
+  unread: string;
+  /** Read after an external row's title: the row leaves the app in a new tab. */
+  opensInNewTab: string;
+}
+
+export const DEFAULT_LIST_LABELS: ListLabels = {
+  unread: "Unread",
+  opensInNewTab: "opens in a new tab",
+};
+
+/* ── List ─────────────────────────────────────────────────────────────────── */
+
+/**
+ * `compact` 36px-ish rows for a dense panel (an inbox in a menu), `default` the ~44px
+ * row every site draws with `py-2.5`, `comfortable` for a list that is the page.
+ */
+export type ListDensity = "compact" | "default" | "comfortable";
+/** `divider`: a rule between rows (kastlan's `divide-y` lists); `gap`: a small space
+ *  between rows (lenkbank's `space-y-2`, kastlan's `space-y-1`); `none`: flush. */
+export type ListSeparator = "divider" | "gap" | "none";
+
+const ListContext = createContext<{ density: ListDensity; separator: ListSeparator }>({
+  density: "default",
+  separator: "gap",
+});
+
+export interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role"> {
+  /** `ol` when the order means something (a ranked list, numbered segments). */
+  as?: "ul" | "ol";
+  /** Every row's density, unless a row says otherwise. Default `default`. */
+  density?: ListDensity;
+  /** Default `gap`. */
+  separator?: ListSeparator;
+}
+
+/**
+ * The list of {@link ListItem}s.
+ *
+ * A `<ul>` with an explicit `role="list"`: Safari drops a list's semantics once its
+ * bullets are styled away, and "list, 7 items" is exactly what a screen-reader user
+ * wants to hear before the first row.
+ */
+export const List = forwardRef<HTMLUListElement, ListProps>(function List(
+  { as = "ul", density = "default", separator = "gap", className, children, ...rest },
+  ref,
+) {
+  const Tag = as;
+  return (
+    <ListContext.Provider value={{ density, separator }}>
+      <Tag
+        {...rest}
+        ref={ref as Ref<HTMLUListElement & HTMLOListElement>}
+        role="list"
+        className={cn(
+          "m-0 flex list-none flex-col p-0",
+          separator === "gap" && (density === "compact" ? "gap-0.5" : "gap-1"),
+          className,
+        )}
+      >
+        {children}
+      </Tag>
+    </ListContext.Provider>
+  );
+});
+
+/* ── ListItem ─────────────────────────────────────────────────────────────── */
+
+/** What {@link ListItemProps.renderLink} is handed. Spread it onto your router's link,
+ *  mapping `href` to what it calls it — `({ href, ...p }) => <Link to={href} {...p} />`. */
+export interface ListItemLinkProps {
+  href: string;
+  /** The row's target look — keep it, or the row's padding and focus ring go. */
+  className: string;
+  children: ReactNode;
+  ref?: Ref<HTMLAnchorElement>;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  "aria-current"?: "true";
+  "aria-busy"?: true;
+  id?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+const PAD: Record<ListDensity, { target: string; actions: string; gap: string }> = {
+  compact: { target: "gap-2 px-2 py-1.5", actions: "pe-1.5", gap: "gap-0.5" },
+  default: { target: "gap-3 px-3 py-2.5", actions: "pe-2", gap: "gap-1" },
+  comfortable: { target: "gap-3 px-4 py-3", actions: "pe-3", gap: "gap-1" },
+};
+
+const TARGET_RING =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
+
+interface ListItemBaseProps {
+  /** The row's name: one line, truncated. */
+  title: ReactNode;
+  /** The line under it: one line, truncated — or two, with `subtitleLines={2}`. */
+  subtitle?: ReactNode;
+  /** `2` for a line that is a body rather than a label (keksdose's notification text). */
+  subtitleLines?: 1 | 2;
+  /** A third line in the caption type: a timestamp, "Updated …" (lenkbank's projects). */
+  meta?: ReactNode;
+  /** A Lucide icon before the text, muted, at 16px. */
+  icon?: LucideIcon;
+  /** Anything else before the text — an avatar, a file-type badge, a drag handle. */
+  leading?: ReactNode;
+  /**
+   * Inside the main target, at its end: a status chip, a file size, a count. It is part
+   * of what the row's click does and part of its accessible name — so never a control.
+   * Controls go in {@link actions}.
+   */
+  trailing?: ReactNode;
+  /**
+   * Controls BESIDE the main target, never inside it: copy, delete, "Open".
+   *
+   * A button inside a button (or a link) is invalid HTML, and a screen reader folds the
+   * inner one into the outer one's name where it cannot be reached. lenkbank found this
+   * three times (profile-bar.tsx:110, projects-page.tsx:61, segment-list.tsx:165) and
+   * solved it the same way each time: the row's target and its actions are siblings in
+   * one bordered box. That is this slot — and being siblings is also what stops a click
+   * on "Copy" from selecting the row.
+   */
+  actions?: ReactNode;
+  /**
+   * The unread mark: a brand dot at the row's end, the title in semibold, and "Unread"
+   * read after the title (keksdose notification-inbox.tsx:215). For another status,
+   * pass your own mark in {@link status}.
+   */
+  unread?: boolean;
+  /** A mark in the unread dot's place — a `StatusDot` of another tone, a count. */
+  status?: ReactNode;
+  /**
+   * The row is the chosen one — a brand border on the raised surface (lenkbank's
+   * profile bar and segment list). `aria-current="true"` on the target: the row is the
+   * current one of a set, which is what those lists mean, not a pressed toggle.
+   */
+  selected?: boolean;
+  disabled?: boolean;
+  /**
+   * Work under way on the row — keksdose's attachment download (support-attachments
+   * .tsx:91). A spinner takes the trailing edge, the target is `aria-busy`, and a
+   * second click is ignored. The row keeps focus: `aria-disabled`, not `disabled`, so
+   * a keyboard user is not dropped back to the top of the page mid-download.
+   */
+  loading?: boolean;
+  /** Overrides the {@link List}'s density for this row. */
+  density?: ListDensity;
+  /** `start` for rows whose text runs to two or three lines, so the icon sits by the
+   *  title rather than the middle of the paragraph. Default `center`. */
+  align?: "center" | "start";
+  /** Classes on the visible row (the bordered box). */
+  className?: string;
+  /** Classes on the main target (the button, link or static block). */
+  targetClassName?: string;
+  /**
+   * Extra attributes and handlers for the main target — e.g. HTML5 drag-and-drop
+   * (`draggable`, `onDragStart`, `onDragEnd`): lenkbank's segment list drags the WHOLE
+   * 44px row, and a grip inside the button cannot start a drag in Firefox. Spread first,
+   * so the row's own role, name, state and click handling always win.
+   */
+  targetProps?: HTMLAttributes<HTMLElement>;
+  /**
+   * A visible border while unselected, instead of the transparent one. For rows laid out
+   * as a wrapping strip (lenkbank's profile bar), where borderless rows read as loose
+   * text. The selected row's brand border is unchanged.
+   */
+  bordered?: boolean;
+  /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */
+  as?: "li" | "div";
+  /** Reaches the main target — the element with the row's name and action. */
+  id?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+/**
+ * The row is ONE thing to activate, so the types allow one: a button, an in-app link,
+ * an external link, or nothing (a static row, like kastlan's passkey and user lists).
+ */
+export type ListItemProps = ListItemBaseProps &
+  (
+    | {
+        /** Makes the row a button — select, open, mark read. */
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        href?: never;
+        renderLink?: never;
+        external?: never;
+        onAuxClick?: never;
+      }
+    | {
+        /**
+         * Makes the row a link. A real `<a href>`, so a middle click opens it in a
+         * background tab (keksdose feedback #451) — which a button calling `navigate`
+         * cannot do.
+         */
+        href: string;
+        /** Your router's link for an in-app `href`. Default `<a>`. The API `Chip`,
+         *  `StatTile` and `MenuItem` share. Ignored for an `external` row. */
+        renderLink?: (props: ListItemLinkProps) => ReactElement;
+        /**
+         * The link leaves the app: a plain `<a target="_blank" rel="noopener
+         * noreferrer">` with an external-link mark, and "opens in a new tab" read
+         * after the title. keksdose's inbox rows whose URL is absolute.
+         */
+        external?: boolean;
+        /** Runs on a click, before the navigation (mark the row read). */
+        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+        /** Runs on a middle click, which fires no `click` — keksdose marks a
+         *  notification read here too, so a row opened into a background tab does not
+         *  stay unread. */
+        onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+      }
+    | {
+        onClick?: never;
+        href?: never;
+        renderLink?: never;
+        external?: never;
+        onAuxClick?: never;
+      }
+  );
+
+/**
+ * One row of a {@link List}: leading icon or avatar, title and subtitle (both
+ * truncating), a trailing slot, and — beside the row, not inside it — its actions.
+ *
+ * All three apps draw this row by hand, a dozen times: kastlan's units
+ * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity
+ * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)
+ * and passkeys (passkeys-card.tsx:75); keksdose's notification inbox and attachment
+ * downloads; lenkbank's profiles, projects and segments. The copies differ in the
+ * details that are easy to get wrong — which of them truncate, whether the actions
+ * are nested in the button, whether a link row is a link at all.
+ */
+export const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(
+  {
+    title,
+    subtitle,
+    subtitleLines = 1,
+    meta,
+    icon: Icon,
+    leading,
+    trailing,
+    actions,
+    unread = false,
+    status,
+    selected = false,
+    disabled = false,
+    loading = false,
+    density: densityProp,
+    align = "center",
+    className,
+    targetClassName,
+    targetProps,
+    bordered = false,
+    as = "li",
+    href,
+    renderLink,
+    external = false,
+    onClick,
+    onAuxClick,
+    ...rest
+  },
+  ref,
+) {
+  const list = useContext(ListContext);
+  const labels = useKitLabels("list", DEFAULT_LIST_LABELS);
+  const density = densityProp ?? list.density;
+  const pad = PAD[density];
+  const isLink = href !== undefined && !disabled;
+  const isButton = !isLink && onClick !== undefined && href === undefined;
+  const interactive = isLink || isButton;
+  const inert = disabled || loading;
+
+  const mark =
+    status ??
+    (unread ? <StatusDot tone="brand" size="sm" className={align === "start" ? "mt-1.5" : undefined} /> : null);
+
+  const body = (
+    <>
+      {Icon && (
+        <Icon
+          className={cn("size-4 shrink-0 text-[var(--text-muted)]", align === "start" && "mt-0.5")}
+          aria-hidden
+        />
+      )}
+      {leading}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span
+          className={cn(
+            "block truncate text-sm text-[var(--text-primary)]",
+            unread ? "font-semibold" : "font-medium",
+          )}
+        >
+          {title}
+          {unread && <span className="sr-only"> ({labels.unread})</span>}
+          {external && href !== undefined && <span className="sr-only"> ({labels.opensInNewTab})</span>}
+        </span>
+        {subtitle != null && (
+          <span
+            className={cn(
+              "block text-xs text-[var(--text-muted)]",
+              subtitleLines === 2 ? "line-clamp-2" : "truncate",
+            )}
+          >
+            {subtitle}
+          </span>
+        )}
+        {meta != null && <span className="mt-0.5 block truncate text-[11px] leading-snug text-[var(--text-muted)]">{meta}</span>}
+      </span>
+      {trailing != null && <span className="flex shrink-0 items-center gap-2 text-xs text-[var(--text-muted)]">{trailing}</span>}
+      {loading ? (
+        <Spinner label={null} className="size-3.5 shrink-0" />
+      ) : (
+        external && href !== undefined && (
+          <ExternalLink className="size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100" aria-hidden />
+        )
+      )}
+      {mark}
+    </>
+  );
+
+  const target = cn(
+    "flex min-w-0 flex-1 text-start",
+    align === "start" ? "items-start" : "items-center",
+    pad.target,
+    "rounded-[inherit]",
+    interactive && TARGET_RING,
+    interactive && !inert && "cursor-pointer",
+    loading && "cursor-progress",
+    targetClassName,
+  );
+
+  // `role` is the row's own (a button, a link, or nothing on a static block): a
+  // targetProps role would silently turn the row into something else.
+  const { role: _ignoredRole, ...targetExtras } = targetProps ?? {};
+
+  let main: ReactNode;
+  if (isLink) {
+    const linkProps: ListItemLinkProps = {
+      ...(targetExtras as Partial<ListItemLinkProps>),
+      ...rest,
+      ref: ref as Ref<HTMLAnchorElement>,
+      href,
+      className: target,
+      "aria-current": selected ? "true" : undefined,
+      "aria-busy": loading || undefined,
+      onClick: loading
+        ? (e) => e.preventDefault()
+        : (onClick as ListItemLinkProps["onClick"]),
+      onAuxClick,
+      children: body,
+    };
+    const { children: linkBody, ...anchorProps } = linkProps;
+    main = renderLink && !external ? (
+      <RenderedLink render={renderLink} {...linkProps} />
+    ) : (
+      <a {...anchorProps} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : null)}>
+        {linkBody}
+      </a>
+    );
+  } else if (isButton) {
+    main = (
+      <button
+        {...(targetExtras as HTMLAttributes<HTMLButtonElement>)}
+        {...rest}
+        ref={ref as Ref<HTMLButtonElement>}
+        type="button"
+        // A disabled row is `disabled`: nothing to do there, and nothing to reach. A
+        // loading row is only `aria-disabled` — see `loading`.
+        disabled={disabled}
+        aria-disabled={loading || undefined}
+        aria-busy={loading || undefined}
+        aria-current={selected ? "true" : undefined}
+        onClick={loading ? undefined : (onClick as (event: MouseEvent<HTMLButtonElement>) => void)}
+        className={target}
+      >
+        {body}
+      </button>
+    );
+  } else {
+    main = (
+      <div
+        {...(targetExtras as HTMLAttributes<HTMLDivElement>)}
+        {...rest}
+        ref={ref as Ref<HTMLDivElement>}
+        aria-disabled={disabled || undefined}
+        aria-busy={loading || undefined}
+        className={target}
+      >
+        {body}
+      </div>
+    );
+  }
+
+  const Tag = as;
+  return (
+    <Tag
+      className={cn(
+        list.separator === "divider" && "border-b border-[var(--border)] last:border-b-0",
+        list.separator === "divider" && as === "li" && "py-0.5",
+      )}
+    >
+      <div
+        className={cn(
+          "flex min-w-0 items-center rounded-md border transition-colors",
+          selected
+            ? "border-[var(--brand)] bg-[var(--bg-surface-2)]"
+            : bordered
+              ? "border-[var(--border)]"
+              : "border-transparent",
+          interactive && !inert && !selected && "hover:bg-[var(--bg-hover)]",
+          disabled && "opacity-50",
+          className,
+        )}
+      >
+        {main}
+        {actions != null && (
+          <div className={cn("flex shrink-0 items-center", pad.gap, pad.actions)}>{actions}</div>
+        )}
+      </div>
+    </Tag>
+  );
+});
+
+function RenderedLink({
+  render,
+  ...props
+}: ListItemLinkProps & { render: (props: ListItemLinkProps) => ReactElement }) {
+  return render(props);
+}

package/src/components/menu-item.tsx

@@ -0,0 +1,235 @@
+import { forwardRef } from "react";
+import type { MouseEvent, ReactElement, ReactNode, Ref } from "react";
+import { Check } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../lib/cn";
+
+/**
+ * `TOPBAR_MENU_ITEM_CLASS`'s row, spelled out rather than imported: a component does
+ * not reach up into the shell (the same call `Disclosure`'s menu variant made). A test
+ * holds the two to the same classes, so a menu mixing `MenuItem`s with the shell's own
+ * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.
+ */
+const MENU_ITEM_ROW =
+  "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+
+/** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the
+ *  ring, a keyboard user always does. Inset, because the panel clips its children. */
+const MENU_ITEM_FOCUS =
+  "focus-visible:outline-none focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]";
+
+export type MenuItemTone = "default" | "danger";
+
+/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,
+ *  mapping `href` to what the link calls it —
+ *  `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */
+export interface MenuItemLinkProps {
+  href: string;
+  className: string;
+  children: ReactNode;
+  role: "menuitem";
+  ref?: Ref<HTMLAnchorElement>;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  "aria-current"?: "page";
+  id?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+interface MenuItemBaseProps {
+  /** The row's text. */
+  children: ReactNode;
+  /** An icon before the label, drawn at the menu's 16px. */
+  icon?: LucideIcon;
+  /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */
+  leading?: ReactNode;
+  /**
+   * Right after the label text, before the gap that pushes {@link trailing} to the
+   * row's end: keksdose's budget switcher tags a budget "Guest" or "Shared" with a
+   * `Chip` that belongs to the NAME (budget-switcher.tsx:55/59), not to the row's end
+   * where a count or a check mark sits. Hand-placed inside `children` it was truncated
+   * with the name — a long budget name ate the chip first. Here the label truncates
+   * and the badge never shrinks, so it stays visible beside what is left of the name.
+   * It is part of the row's accessible name ("Household Shared"), so keep it text.
+   */
+  badge?: ReactNode;
+  /** After the label, at the row's end: a shortcut, a count. (A tag that belongs to the name is {@link badge}.) */
+  trailing?: ReactNode;
+  /** `danger` for the row that destroys or signs out. Colour is not the whole message:
+   *  the label must still say what the row does. */
+  tone?: MenuItemTone;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  [key: `aria-${string}`]: string | boolean | number | undefined;
+  [key: `data-${string}`]: unknown;
+}
+
+/**
+ * A menu row is a button OR a link, and only the button can be CHECKED: a checked link
+ * is a link to where you already are, which is `current`, not a selection.
+ */
+export type MenuItemProps = MenuItemBaseProps &
+  (
+    | {
+        href?: never;
+        renderLink?: never;
+        current?: never;
+        /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to
+         *  the render prop that draws the rows. */
+        onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+        /**
+         * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a
+         * plain command; `false` is a choice that is not chosen, which is different.
+         * A check mark is drawn at the end when it is on.
+         */
+        checked?: boolean;
+        /**
+         * What kind of choice, when `checked` is given:
+         *
+         * - `radio` (default): one of a set — keksdose's budget switcher
+         *   (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.
+         * - `checkbox`: an independent on/off — "Show archived". `menuitemcheckbox`.
+         *
+         * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a
+         * `role="menu"` a screen reader expects the menu roles and reads "checked"
+         * only from them. A button with `aria-pressed` in a menu is announced as a
+         * button in a menu, which is two widgets in one.
+         */
+        checkable?: "radio" | "checkbox";
+      }
+    | {
+        /** Makes the row a link — keksdose's "Manage budgets" and account-menu rows. */
+        href: string;
+        /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads
+         *  a single-page app. Default `<a>`. The same API as `Chip` and `StatTile`. */
+        renderLink?: (props: MenuItemLinkProps) => ReactElement;
+        /** Runs on the way (close the menu). */
+        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+        /** The link to the page already open: `aria-current="page"` and a check mark. */
+        current?: boolean;
+        checked?: never;
+        checkable?: never;
+      }
+  );
+
+/**
+ * One row of a `HoverMenu` / `TopBarActionMenu` panel.
+ *
+ * keksdose's account menu and budget switcher each rebuild this row by hand — the
+ * shell's class, an icon, a label, a badge, a check mark on the active budget — and the
+ * check mark was the only thing saying which budget was active, so a screen reader
+ * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).
+ *
+ * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less
+ * buttons and links to `menuitem`: a checked row must be `menuitemradio` or
+ * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that
+ * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up
+ * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`
+ * turns the list markup into `role="none"`.
+ */
+export const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(
+  {
+    children,
+    icon: Icon,
+    leading,
+    badge,
+    trailing,
+    tone = "default",
+    disabled = false,
+    className,
+    href,
+    renderLink,
+    onClick,
+    checked,
+    checkable,
+    current,
+    ...rest
+  },
+  ref,
+) {
+  const on = href !== undefined ? !!current : !!checked;
+  const look = cn(
+    MENU_ITEM_ROW,
+    MENU_ITEM_FOCUS,
+    tone === "danger" && "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]",
+    disabled && "cursor-default opacity-50 hover:bg-transparent",
+    className,
+  );
+  const body = (
+    <>
+      <span className="flex min-w-0 items-center gap-2">
+        {Icon && <Icon className="size-4 shrink-0" aria-hidden />}
+        {leading}
+        <span className="min-w-0 truncate">{children}</span>
+        {badge != null && badge !== false && (
+          <>
+            {/* A space between the name and the badge in the accessible name ("Household
+                Shared", not "HouseholdShared"); whitespace between flex items is not
+                laid out, so it costs nothing on screen. */}{" "}
+            <span data-menu-item-badge="" className="flex shrink-0 items-center">
+              {badge}
+            </span>
+          </>
+        )}
+      </span>
+      {(trailing != null || on) && (
+        <span className="flex shrink-0 items-center gap-2">
+          {trailing}
+          {on && <Check className="size-4 text-[var(--text-secondary)]" aria-hidden />}
+        </span>
+      )}
+    </>
+  );
+
+  if (href !== undefined && !disabled) {
+    const linkProps: MenuItemLinkProps = {
+      ...rest,
+      ref: ref as Ref<HTMLAnchorElement>,
+      href,
+      role: "menuitem",
+      className: look,
+      onClick: onClick as MenuItemLinkProps["onClick"],
+      "aria-current": current ? "page" : undefined,
+      children: body,
+    };
+    if (renderLink) return <RenderedLink render={renderLink} {...linkProps} />;
+    const { children: linkBody, ...anchorProps } = linkProps;
+    return <a {...anchorProps}>{linkBody}</a>;
+  }
+
+  const role =
+    href === undefined && checked !== undefined
+      ? checkable === "checkbox"
+        ? "menuitemcheckbox"
+        : "menuitemradio"
+      : "menuitem";
+  return (
+    <button
+      {...rest}
+      ref={ref as Ref<HTMLButtonElement>}
+      type="button"
+      role={role}
+      aria-checked={role === "menuitem" ? undefined : !!checked}
+      // `aria-disabled` rather than `disabled`: HoverMenu's roving focus skips either,
+      // and the ARIA menu pattern keeps an unavailable item perceivable ("Delete,
+      // dimmed") rather than greyed to the point some browsers stop exposing it.
+      aria-disabled={disabled || undefined}
+      onClick={
+        disabled
+          ? (e) => e.preventDefault()
+          : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)
+      }
+      className={look}
+    >
+      {body}
+    </button>
+  );
+});
+
+function RenderedLink({
+  render,
+  ...props
+}: MenuItemLinkProps & { render: (props: MenuItemLinkProps) => ReactElement }) {
+  return render(props);
+}