@eifi1/ui-kit 0.7.0 → 0.8.0

package/src/components/date-picker.tsx

@@ -12,7 +12,7 @@ import {
 } from "../i18n/kit-labels";
 import { splitTriggerAria } from "./trigger-aria";
 import type { TriggerAria } from "./trigger-aria";
-import { FieldLabel, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui";
+import { Button, FieldLabel, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui";
 import { MiniCalendar, type MiniCalendarProps } from "./mini-calendar";
 import { Popover } from "./popover";
 import { Tooltip } from "./tooltip";
@@ -553,23 +553,252 @@ export function DatePicker({
 }
 
 export interface DateRangePickerPreset {
+  /**
+   * The preset's identity, independent of its dates — `"last_3_months"`, not two ISO
+   * strings. Optional for the 0.x callers that pass anonymous pairs.
+   *
+   * keksdose's report range field (report-range-field.tsx, "Why this is app-level")
+   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates
+   * from today on every read, so a preset that is only its dates froze "last 3 months"
+   * at whatever day the panel rendered, and two presets that happen to cover the same
+   * days (this week and today, on a Monday) could not be told apart. With an `id` the
+   * choice is reported to `onChange` and shown as selected for as long as the range
+   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,
+   * `dateRangePresets()`) and pass the key as the id.
+   */
+  id?: string;
   label: ReactNode;
   from: string;
   to: string;
 }
 
+/**
+ * When the picker hands its range to `onChange`.
+ *
+ *  - `"immediate"` (the default, and all of 0.7): a preset click commits and closes,
+ *    and each calendar click is reported as it happens — the half-made `(from, "")`
+ *    included. The right shape for quick ranges on a filter, where one click is one
+ *    answer.
+ *  - `"apply"`: the panel works on a DRAFT. A preset ARMS the calendar instead of
+ *    committing, days can then be nudged ("last 3 months, but end it last Friday"),
+ *    and nothing reaches `onChange` until Apply — which stays disabled until both ends
+ *    exist. Cancel, Escape and an outside click discard the draft, and every open
+ *    starts again from the committed value. keksdose's report range asked for exactly
+ *    this: each commit there re-runs a whole page of charts, so an intermediate state
+ *    must never escape the panel.
+ */
+export type DateRangeCommit = "immediate" | "apply";
+
 export interface DateRangePickerProps extends DatePickerBaseProps {
   from: string;
   to: string;
-  onChange: (from: string, to: string) => void;
+  /** The committed range. `presetId` is the chosen preset's `id` when a preset
+   *  produced it (and the range was not nudged since), `undefined` for days picked by
+   *  hand. A 0.x two-argument handler simply ignores it. */
+  onChange: (from: string, to: string, presetId?: string) => void;
   /** Separator between the two formatted dates in the trigger (default " – "). */
   separator?: string;
-  /** Optional named ranges rendered as a left column (last month / YTD / …). */
+  /** Optional named ranges rendered as a start-side column (last month / YTD / …). */
   presets?: DateRangePickerPreset[];
+  /**
+   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.
+   * `null` (or an id no preset has, such as `"custom"`) says "no preset": nothing in
+   * the column is marked even if a preset happens to cover the same days. A preset is
+   * marked only while its dates still equal `from`/`to`.
+   *
+   * Leave it `undefined` and the picker remembers the last preset it committed
+   * itself; with no memory at all it falls back to the first preset whose dates match.
+   */
+  preset?: string | null;
+  /** See {@link DateRangeCommit}. Default `"immediate"`. */
+  commit?: DateRangeCommit;
+}
+
+interface RangeDraft {
+  from: string;
+  to: string;
+  presetId: string | undefined;
+}
+
+/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */
+function markedPreset(
+  presets: readonly DateRangePickerPreset[],
+  from: string,
+  to: string,
+  activeId: string | null | undefined,
+  controlled: boolean,
+): number {
+  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;
+  if (activeId != null) {
+    const byId = presets.findIndex((p) => p.id === activeId && matches(p));
+    if (byId !== -1 || controlled) return byId;
+  } else if (controlled) {
+    return -1;
+  }
+  return presets.findIndex(matches);
+}
+
+/**
+ * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.
+ * Pressed-state rather than colour alone, because "which range is this" is the one
+ * thing a screen-reader user opening the panel needs to hear.
+ */
+function PresetColumn({
+  presets,
+  marked,
+  label,
+  onPick,
+}: {
+  presets: readonly DateRangePickerPreset[];
+  marked: number;
+  label: string;
+  onPick: (p: DateRangePickerPreset) => void;
+}) {
+  return (
+    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule
+    // between it and the calendar has to follow it in a right-to-left UI.
+    <div
+      role="group"
+      aria-label={label}
+      className="flex w-32 shrink-0 flex-col gap-0.5 border-e border-[var(--border)] pe-2"
+    >
+      {presets.map((p, i) => {
+        const selected = i === marked;
+        return (
+          <button
+            key={p.id ?? i}
+            type="button"
+            aria-pressed={selected}
+            data-preset={p.id}
+            onClick={() => onPick(p)}
+            className={cn(
+              "rounded px-2 py-1.5 text-start text-xs",
+              selected
+                ? "bg-[var(--bg-active)] font-medium text-[var(--text-primary)]"
+                : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+            )}
+          >
+            {p.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * The panel's body. A component of its own so `commit="apply"` can keep its draft in
+ * state that is born when the panel opens: `Popover` unmounts its children on close,
+ * so the draft is re-seeded from the committed value on every open, and an abandoned
+ * half-selection cannot survive into the next one.
+ */
+function RangePanel({
+  from,
+  to,
+  presets,
+  activeId,
+  controlled,
+  commit,
+  close,
+  commitRange,
+  calendarProps,
+  labels,
+}: {
+  from: string;
+  to: string;
+  presets: readonly DateRangePickerPreset[] | undefined;
+  activeId: string | null | undefined;
+  controlled: boolean;
+  commit: DateRangeCommit;
+  close: () => void;
+  commitRange: (from: string, to: string, presetId: string | undefined) => void;
+  calendarProps: Pick<MiniCalendarProps, "locale" | "min" | "max" | "labels">;
+  labels: DatePickerLabels;
+}) {
+  const drafting = commit === "apply";
+  const [draft, setDraft] = useState<RangeDraft>({
+    from,
+    to,
+    presetId: activeId ?? undefined,
+  });
+  // What the panel SHOWS: the draft while drafting, the committed value otherwise.
+  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };
+  const marked = presets
+    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)
+    : -1;
+  const complete = Boolean(draft.from && draft.to);
+
+  const calendar = (
+    <MiniCalendar
+      {...calendarProps}
+      focusOnOpen
+      from={shown.from}
+      to={shown.to}
+      onSelect={(f, t) => {
+        if (drafting) {
+          setDraft({ from: f, to: t, presetId: undefined });
+          return;
+        }
+        commitRange(f, t, undefined);
+        // Two-click range: only dismiss once both ends are chosen.
+        if (f && t) close();
+      }}
+    />
+  );
+
+  const body =
+    presets && presets.length > 0 ? (
+      <div className="flex gap-3">
+        <PresetColumn
+          presets={presets}
+          marked={marked}
+          label={labels.presets}
+          onPick={(p) => {
+            if (drafting) {
+              setDraft({ from: p.from, to: p.to, presetId: p.id });
+              return;
+            }
+            commitRange(p.from, p.to, p.id);
+            close();
+          }}
+        />
+        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was
+            seven tiny cells beside a wide preset column. */}
+        <div className="min-w-0 flex-1">{calendar}</div>
+      </div>
+    ) : (
+      calendar
+    );
+
+  if (!drafting) return body;
+  return (
+    <div className="flex flex-col gap-2">
+      {body}
+      <div className="flex items-center justify-end gap-2 border-t border-[var(--border)] pt-2">
+        <Button type="button" variant="ghost" onClick={close}>
+          {labels.cancel}
+        </Button>
+        <Button
+          type="button"
+          // A half-made `(from, "")` would commit a window with no end — a blank
+          // report, one click into a two-click gesture.
+          disabled={!complete}
+          onClick={() => {
+            if (!complete) return;
+            commitRange(draft.from, draft.to, draft.presetId);
+            close();
+          }}
+        >
+          {labels.apply}
+        </Button>
+      </div>
+    </div>
+  );
 }
 
 /** Two-date range picker: click a start then an end; closes once both are set.
- *  With `presets`, a left column of named ranges is shown beside the calendar. */
+ *  With `presets`, a column of named ranges is shown beside the calendar; with
+ *  `commit="apply"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */
 export function DateRangePicker({
   from,
   to,
@@ -582,6 +811,8 @@ export function DateRangePicker({
   formatValue,
   separator = " – ",
   presets,
+  preset,
+  commit = "immediate",
   calendarLabels,
   label,
   clearable,
@@ -593,6 +824,11 @@ export function DateRangePicker({
   const locale = useKitLocale(localeProp);
   const text = useDatePickerLabels(clearLabel, undefined, undefined);
   const render = formatValue ?? ((iso: string) => formatDate(iso, locale, formatOptions));
+  // The preset this picker committed itself, for a caller that does not control
+  // `preset`. Cleared by a hand-picked range or a clear.
+  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);
+  const controlled = preset !== undefined;
+  const activeId = controlled ? preset : ownPreset;
   const a = from ? render(from) : "";
   const b = to ? render(to) : "";
   const triggerText = from
@@ -601,22 +837,13 @@ export function DateRangePicker({
       : `${a}${separator}…`
     : (placeholder ?? "");
   const hasPresets = Boolean(presets && presets.length > 0);
-  const calendar = (close: () => void) => (
-    <MiniCalendar
-      focusOnOpen
-      from={from}
-      to={to}
-      locale={locale}
-      min={min}
-      max={max}
-      labels={calendarLabels}
-      onSelect={(f, t) => {
-        onChange(f, t);
-        // Two-click range: only dismiss once both ends are chosen.
-        if (f && t) close();
-      }}
-    />
-  );
+  const commitRange = (f: string, t: string, presetId: string | undefined) => {
+    setOwnPreset(presetId);
+    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's
+    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.
+    if (presetId === undefined) onChange(f, t);
+    else onChange(f, t, presetId);
+  };
   return (
     <DateField
       {...rest}
@@ -630,44 +857,22 @@ export function DateRangePicker({
       width={hasPresets ? 440 : undefined}
       hasValue={Boolean(from || to)}
       triggerText={triggerText}
-      onClear={() => onChange("", "")}
+      onClear={() => commitRange("", "", undefined)}
     >
-      {(close) =>
-        hasPresets ? (
-          <div className="flex gap-3">
-            {/* `border-e`/`pe`, not `-r`: the preset column is on the START side, and the
-                rule between it and the calendar has to follow it in a right-to-left UI. */}
-            <div className="flex w-32 shrink-0 flex-col gap-0.5 border-e border-[var(--border)] pe-2">
-              {presets!.map((p, i) => {
-                const selected = p.from === from && p.to === to;
-                return (
-                  <button
-                    key={i}
-                    type="button"
-                    onClick={() => {
-                      onChange(p.from, p.to);
-                      close();
-                    }}
-                    className={cn(
-                      "rounded px-2 py-1.5 text-start text-xs",
-                      selected
-                        ? "bg-[var(--bg-active)] font-medium text-[var(--text-primary)]"
-                        : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-                    )}
-                  >
-                    {p.label}
-                  </button>
-                );
-              })}
-            </div>
-            {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was
-                seven tiny cells beside a wide preset column. */}
-            <div className="min-w-0 flex-1">{calendar(close)}</div>
-          </div>
-        ) : (
-          calendar(close)
-        )
-      }
+      {(close) => (
+        <RangePanel
+          from={from}
+          to={to}
+          presets={presets}
+          activeId={activeId}
+          controlled={controlled}
+          commit={commit}
+          close={close}
+          commitRange={commitRange}
+          calendarProps={{ locale, min, max, labels: calendarLabels }}
+          labels={text}
+        />
+      )}
     </DateField>
   );
 }

package/src/components/description-list.tsx

@@ -0,0 +1,174 @@
+import { createContext, useContext } from "react";
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { FieldHint } from "./ui";
+
+export type DescriptionListLayout = "rows" | "cards";
+export type DescriptionListDensity = "comfortable" | "compact";
+
+interface ListContextValue {
+  layout: DescriptionListLayout;
+  numeric: boolean;
+  density: DescriptionListDensity;
+}
+
+const ListContext = createContext<ListContextValue>({ layout: "rows", numeric: false, density: "comfortable" });
+
+export interface DescriptionListProps extends ComponentPropsWithoutRef<"dl"> {
+  /**
+   * `rows` (default): term beside detail, a two-column list that stacks the pair
+   * when the LIST is narrower than 24rem — a container query, so a detail panel
+   * beside a sidebar stacks where it is actually cramped, not where the viewport is.
+   * `cards`: a grid of small bordered cards, term above body — keksdose's overview
+   * figures, lenkbank's account facts.
+   */
+  layout?: DescriptionListLayout;
+  /** Every detail is a figure: tabular digits, end-aligned. A `numeric` list of
+   *  rows does not stack on a phone — a figure is short, and putting it under its
+   *  term would double the list's height to gain no width. Per item: see
+   *  {@link DescriptionItemProps.numeric}. */
+  numeric?: boolean;
+  /** `compact` tightens the rhythm for a dense side panel. */
+  density?: DescriptionListDensity;
+  /** `cards` only: the narrowest a card may get before the grid drops a column. */
+  minCardWidth?: string;
+}
+
+/**
+ * A real `<dl>` — terms and their details, which is what keksdose's eight and
+ * lenkbank's four hand-built "label: value" blocks were, and none of them said so.
+ * As a `<dl>` a reader announces "list, 6 items" and pairs each term with its detail;
+ * as a stack of `<div>`s it read one undifferentiated run of text.
+ *
+ * Composed from {@link DescriptionItem} children rather than taking an `items`
+ * array. The call sites this replaces are mostly CONDITIONAL — "IBAN, if there is
+ * one", "closing date, once closed" — and `{iban && <DescriptionItem …>}` reads as
+ * what it means, where an array wants `.filter(Boolean)` and a cast. Children also
+ * give each item its own props (a numeric figure in an otherwise textual list, a
+ * `data-private` detail) with no parallel config object. A data-driven list loses
+ * nothing: `items.map((i) => <DescriptionItem key={i.term} {...i} />)`.
+ *
+ * Each pair is wrapped in a `<div>`, which HTML permits inside a `<dl>` for exactly
+ * this: styling a pair as a unit (a row, a card) without breaking the list.
+ */
+export function DescriptionList({
+  layout = "rows",
+  numeric = false,
+  density = "comfortable",
+  minCardWidth = "10rem",
+  className,
+  style,
+  ...rest
+}: DescriptionListProps) {
+  const cards = layout === "cards";
+  const grid: CSSProperties | undefined = cards
+    ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${minCardWidth}), 1fr))` }
+    : undefined;
+  return (
+    <ListContext.Provider value={{ layout, numeric, density }}>
+      <dl
+        {...rest}
+        data-layout={layout}
+        style={grid ? { ...grid, ...style } : style}
+        className={cn(
+          cards
+            ? cn("grid", density === "compact" ? "gap-2" : "gap-3")
+            : "@container divide-y divide-[var(--border)]",
+          density === "compact" ? "text-xs" : "text-sm",
+          className,
+        )}
+      />
+    </ListContext.Provider>
+  );
+}
+
+export interface DescriptionItemProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** What is described: "Opened", "IBAN", "Net rent". */
+  term: ReactNode;
+  /** The description itself. */
+  children?: ReactNode;
+  /** The explanation behind a "?" beside the term (a {@link FieldHint}) — the same
+   *  meaning `hint` has on `StatTile` and the labelled fields. */
+  hint?: string;
+  /** This detail is a figure (see {@link DescriptionListProps.numeric}); overrides
+   *  the list's setting either way. */
+  numeric?: boolean;
+  /** Classes for the `<dd>`. */
+  detailClassName?: string;
+}
+
+const ROW_PAD: Record<DescriptionListDensity, string> = { comfortable: "py-2.5", compact: "py-1.5" };
+const CARD_PAD: Record<DescriptionListDensity, string> = { comfortable: "px-3 py-2.5", compact: "px-2.5 py-1.5" };
+
+/** One term and its detail inside a {@link DescriptionList}. */
+export function DescriptionItem({
+  term,
+  children,
+  hint,
+  numeric: numericProp,
+  detailClassName,
+  className,
+  ...rest
+}: DescriptionItemProps) {
+  const { layout, numeric: listNumeric, density } = useContext(ListContext);
+  const numeric = numericProp ?? listNumeric;
+  const cards = layout === "cards";
+
+  const termNode = (
+    <dt
+      className={cn(
+        "flex min-w-0 items-center gap-1 text-[var(--text-muted)]",
+        cards && "text-xs uppercase tracking-wide",
+      )}
+    >
+      <span className="min-w-0 break-words">{term}</span>
+      {hint && <FieldHint label={hint} side="top" className="shrink-0" />}
+    </dt>
+  );
+  const detail = (
+    <dd
+      className={cn(
+        "min-w-0 break-words text-[var(--text-primary)]",
+        numeric && "tabular-nums text-end",
+        cards && "mt-0.5 font-medium",
+        detailClassName,
+      )}
+    >
+      {children}
+    </dd>
+  );
+
+  if (cards) {
+    return (
+      <div
+        {...rest}
+        className={cn(
+          "min-w-0 rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+          CARD_PAD[density],
+          className,
+        )}
+      >
+        {termNode}
+        {detail}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      {...rest}
+      className={cn(
+        "grid gap-x-4 gap-y-0.5",
+        numeric
+          ? // Never stacks: a figure is short (see DescriptionListProps.numeric).
+            "grid-cols-[minmax(0,1fr)_auto] items-baseline"
+          : "grid-cols-1 @sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] @sm:items-baseline",
+        ROW_PAD[density],
+        className,
+      )}
+    >
+      {termNode}
+      {detail}
+    </div>
+  );
+}

package/src/components/disclosure.tsx

@@ -104,6 +104,17 @@ export function Collapse({ open, keepMounted = false, children, className, style
   );
 }
 
+/**
+ * What {@link DisclosureProps.triggerProps} may put on the header button: its own
+ * attributes and handlers, and any `data-*`. Not the ones the disclosure owns —
+ * `aria-expanded`, `aria-controls`, `disabled`, `onClick`, `type` and the content — nor
+ * `className`, which is {@link DisclosureProps.headerClassName}.
+ */
+export type DisclosureTriggerProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "type" | "aria-expanded" | "aria-controls" | "disabled" | "onClick" | "children" | "className"
+> & { [data: `data-${string}`]: string | number | boolean | undefined };
+
 /**
  * `title` is omitted from the div's own props because this component already owns the
  * name: here it is the header's content (and a ReactNode), not the browser's tooltip.
@@ -135,6 +146,16 @@ export interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "
    * its own surface.
    */
   variant?: "card" | "bare";
+  /**
+   * Where a `bare` disclosure draws its chevron. `start` (default) is the leading
+   * chevron that turns from the reading direction to down. `end` puts it at the far
+   * end of the row, pointing down and turning up as the card's does — keksdose's
+   * account menu, whose language sub-list reads "Language 🇩🇪 ⌄" with the chevron
+   * after the flag, like every other menu row with a sub-list. With `trailing`, the
+   * chevron follows it, as on a card. A `card` always has it at the end, so this is
+   * ignored there.
+   */
+  chevronPosition?: "start" | "end";
   /**
    * Wrap the header button in a heading of this level. The WAI-ARIA disclosure pattern
    * puts the button INSIDE the heading when the disclosure titles a section, so the
@@ -147,6 +168,22 @@ export interface DisclosureProps extends Omit<ComponentPropsWithoutRef<"div">, "
   disabled?: boolean;
   /** Extra classes for the header button. */
   headerClassName?: string;
+  /**
+   * Attributes for the header BUTTON — the outer props go to the wrapping div — such as
+   * an `aria-label`, an `id` or a `data-*` test hook. A function of the open state
+   * when they depend on it: keksdose's budget table names each group's toggle
+   * "Expand group Food" / "Collapse group Food", because the visible title is only the
+   * group's name:
+   *
+   * ```tsx
+   * triggerProps={(open) => ({ "aria-label": t(open ? "collapseGroup" : "expandGroup", { name }) })}
+   * ```
+   *
+   * An `aria-label` REPLACES the title as the button's name, so it must still contain
+   * the title's words (WCAG 2.5.3, label in name). See {@link DisclosureTriggerProps}
+   * for what the disclosure keeps for itself.
+   */
+  triggerProps?: DisclosureTriggerProps | ((open: boolean) => DisclosureTriggerProps);
   /** Extra classes for the body's wrapper — where its padding and spacing live. */
   bodyClassName?: string;
   /**
@@ -193,10 +230,12 @@ export function Disclosure({
   defaultOpen = false,
   onOpenChange,
   variant = "card",
+  chevronPosition = "start",
   headingAs: Heading,
   keepMounted,
   disabled,
   headerClassName,
+  triggerProps,
   bodyClassName,
   trailing,
   controls,
@@ -208,6 +247,8 @@ export function Disclosure({
   const open = controlled ?? own;
   const bodyId = useId();
   const card = variant === "card";
+  // The card's chevron trails always; a bare one only when asked to.
+  const chevronAtEnd = card || chevronPosition === "end";
   const triggerOnly = controls !== undefined;
   // The card's header squares its lower corners only when a body opens under it.
   const joined = open && !triggerOnly;
@@ -219,8 +260,11 @@ export function Disclosure({
     onOpenChange?.(next);
   };
 
+  const extraTriggerProps = typeof triggerProps === "function" ? triggerProps(open) : triggerProps;
+
   const button = (
     <button
+      {...extraTriggerProps}
       type="button"
       aria-expanded={open}
       aria-controls={triggerOnly ? controls : bodyId}
@@ -249,7 +293,7 @@ export function Disclosure({
         headerClassName,
       )}
     >
-      {!card && <Chevron open={open} leading />}
+      {!chevronAtEnd && <Chevron open={open} leading />}
       {/* `flex-1`: the title takes the row, so whatever a caller puts at its end sits
           at the header's far edge. */}
       <span className="min-w-0 flex-1">
@@ -258,7 +302,7 @@ export function Disclosure({
           <span className="mt-0.5 block text-xs font-normal text-[var(--text-muted)]">{hint}</span>
         )}
       </span>
-      {card && !hasTrailing && <Chevron open={open} />}
+      {chevronAtEnd && !hasTrailing && <Chevron open={open} small={!card} />}
     </button>
   );
 
@@ -286,7 +330,7 @@ export function Disclosure({
           {/* Positioned, so it paints over the stretched button and takes its own
               clicks; the chevron is not, so a click on it lands on the button. */}
           <div className="relative flex shrink-0 items-center gap-2">{trailing}</div>
-          {card && <Chevron open={open} />}
+          {chevronAtEnd && <Chevron open={open} small={!card} />}
         </div>
       ) : (
         header
@@ -307,13 +351,22 @@ export function Disclosure({
  * header's convention. Rotation, not a mirrored glyph, so RTL needs one opposite angle
  * and no `scale` composing with the turn.
  */
-function Chevron({ open, leading = false }: { open: boolean; leading?: boolean }) {
+function Chevron({
+  open,
+  leading = false,
+  small = leading,
+}: {
+  open: boolean;
+  leading?: boolean;
+  /** The bare variant's size, which a bare chevron keeps at either end of its row. */
+  small?: boolean;
+}) {
   return (
     <ChevronDown
       aria-hidden
       className={cn(
         "shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none",
-        leading ? "size-3.5" : "size-4",
+        small ? "size-3.5" : "size-4",
         leading ? !open && "-rotate-90 rtl:rotate-90" : open && "rotate-180",
       )}
     />