@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Tabs.js

@@ -0,0 +1,288 @@
+import { jsx as f, jsxs as h } from "react/jsx-runtime";
+import { useRef as S, useEffect as T, useContext as k, useState as W, useCallback as p, createContext as C } from "react";
+import { Tabs as d } from "@base-ui/react/tabs";
+import { tv as z } from "tailwind-variants";
+import { cn as u } from "../lib/cn.js";
+import { reducedMotion as A } from "../lib/motion.js";
+import { Icon as g } from "./Icon.js";
+import { IconButton as x } from "./IconButton.js";
+const m = z({
+  slots: {
+    root: "flex min-w-0 flex-col gap-4",
+    /* A STRIP THAT OUTGROWS ITS CONTAINER SCROLLS ITSELF, and three of these
+           utilities are what make that true rather than one.
+    
+           `overflow-x-auto` is the scroller. `min-w-0` is what lets the strip be
+           narrower than the tabs inside it — a flex item's automatic minimum is its
+           CONTENT, so without this the strip is floored at the full width of its
+           tabs and pushes its parent wide instead of scrolling. `overscroll-x-contain`
+           stops a trackpad fling that reaches the end of the strip from chaining
+           into the page and scrolling the whole document sideways, which is the
+           version of this bug that only appears on a laptop.
+    
+           `shrink-0` is about the OTHER axis and is not a contradiction. `Tabs`'
+           root is a flex COLUMN, so shrink applies to height: inside a bounded
+           column — a tabbed panel filling a fixed-height card — a strip without it
+           gets squashed toward zero to make room for the panel, and the tab labels
+           clip. Width is settled by `align-items: stretch` and `min-w-0` above,
+           which `shrink-0` does not touch. */
+    list: "relative flex min-w-0 shrink-0 items-center gap-1 overflow-x-auto overscroll-x-contain",
+    /* z-10 / z-0: the indicator is a LATER DOM sibling than the tabs (see
+       TabList), so with both at `z-auto` the indicator paints on top of the
+       labels. `line` survives that by accident — its indicator is a 2px bar
+       below the text. `pill`'s is a full-size opaque panel, and it covered the
+       selected label completely. Ordering the two explicitly states the
+       invariant the sibling structure depends on: the indicator is always
+       BEHIND the label, whatever shape a variant gives it. */
+    tab: [
+      /* justify-center is inert until `dx-tap` widens a short label past its
+         own padding on a touch pointer — without it that extra width all lands
+         on the right and the label sits off-centre under its own indicator. */
+      "dx-tap relative z-10 flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap",
+      "font-medium text-tertiary outline-none",
+      "transition-colors duration-(--dur-fast) ease-hover",
+      "hover:text-secondary",
+      /* `data-active`, NOT `data-selected`. Base UI marks the current tab with
+         `data-active` (measured on the rendered DOM: the selected tab carries
+         `data-active`, `aria-selected="true"`, and no `data-selected` at all),
+         so the rule written against `data-selected` matched nothing and the
+         current tab's label sat at text-tertiary like every other. It looked
+         right only because the indicator underneath it marks the selection —
+         the same silent-dead-variant shape as the `data-side-top:` arrow rules,
+         and equally invisible from the source. */
+      "data-active:text-primary",
+      /* Selected AND hovered holds full strength. The two rules above weigh
+               the same, so pointing at the CURRENT tab could dim its label from
+               primary to secondary — selection reading weaker under the pointer.
+      
+               A tab's hover is deliberately text-only: the tab paints ABOVE its own
+               indicator (z-10 over z-0, see the note on `tab`), so a background on
+               hover would cover the underline and the pill panel that mark it. */
+      "data-active:hover:text-primary",
+      "data-disabled:pointer-events-none data-disabled:opacity-45"
+    ],
+    indicator: [
+      "absolute z-0 rounded-full bg-accent",
+      "translate-x-[var(--active-tab-left)] w-[var(--active-tab-width)]",
+      /* DX-4996: the slide is for a CHANGE OF SELECTION only. Colour always eases; position and width carry a transition only while `data-sliding`
+         is set (TabList sets it for the length of a selection change), so a mark arriving, a resize, a font load or a first paint puts the
+         indicator on the new geometry at once instead of travelling there from where the tab used to be. */
+      "transition-[var(--tx-colors)] duration-(--dur-slow) ease-emphasis",
+      "data-sliding:transition-[var(--tx-colors),translate,width]"
+    ],
+    panel: "min-w-0 outline-none"
+  },
+  variants: {
+    variant: {
+      /* Underline: the default. Reads as navigation within one surface. */
+      line: {
+        list: "border-b border-border",
+        tab: "px-3 py-2.5 text-sm",
+        indicator: "bottom-0 left-0 h-0.5"
+      },
+      /* Pill: for switching a view's mode, where the tabs are a control
+         rather than a section header. */
+      pill: {
+        list: "gap-1 rounded-lg bg-surface-inset p-1",
+        tab: "rounded-md px-3 py-1.5 text-sm data-active:text-primary",
+        indicator: "inset-y-1 left-0 rounded-md bg-surface shadow-sm"
+      }
+    },
+    /* FILLING THE HEIGHT THE GROUP WAS GIVEN — see `TabsProps.fill` for when
+           to ask for it and why it is not the default.
+    
+           Two utilities on each of two slots, and all four are load-bearing.
+           `flex-1` is what claims the free space; `min-h-0` is what lets the box
+           be SHORTER than its content, without which a flex item's automatic
+           minimum size is its content and the column grows instead of letting a
+           descendant scroll. The panel additionally becomes a flex COLUMN,
+           because `flex-1` on a screen inside it is inert against a block parent
+           — the same fact `AppShell`'s content column was changed for, one
+           landmark down.
+    
+           The strip needs nothing: `list` already carries `shrink-0`, which is
+           exactly what stops a bounded column squashing the labels to make room
+           for the panel. */
+    fill: {
+      true: {
+        root: "min-h-0 flex-1",
+        panel: "flex min-h-0 flex-1 flex-col"
+      }
+    }
+  },
+  defaultVariants: { variant: "line", fill: !1 }
+}), L = C(!1);
+function D({ variant: e, fill: a = !1, className: s, children: o, ref: n, ...t }) {
+  const r = m({ variant: e, fill: a });
+  return /* @__PURE__ */ f(L, { value: a, children: /* @__PURE__ */ f(d.Root, { ref: n, className: u(r.root(), s), ...t, children: o }) });
+}
+const y = 48, N = 0.8;
+function M(e) {
+  const [a, s] = W({ before: !1, after: !1 }), o = p(() => {
+    const t = e.current, r = t?.querySelector('[role="tab"][data-active]'), c = t?.querySelector('[role="presentation"]');
+    if (!t || !r || !c) return;
+    const i = r.getBoundingClientRect(), l = t.getBoundingClientRect();
+    c.style.setProperty("--active-tab-left", `${i.left - l.left + t.scrollLeft - t.clientLeft}px`), c.style.setProperty("--active-tab-width", `${i.width}px`);
+  }, [e]), n = p(() => {
+    const t = e.current;
+    if (!t) return;
+    const r = t.scrollLeft > 1, c = t.scrollLeft + t.clientWidth < t.scrollWidth - 1;
+    s((i) => i.before === r && i.after === c ? i : { before: r, after: c });
+  }, [e]);
+  return T(() => {
+    const t = e.current;
+    if (!t) return;
+    n(), t.addEventListener("scroll", n, { passive: !0 });
+    const r = new ResizeObserver(() => {
+      o(), n();
+    });
+    r.observe(t);
+    for (const i of Array.from(t.children)) r.observe(i);
+    const c = new MutationObserver(() => {
+      r.disconnect(), r.observe(t);
+      for (const i of Array.from(t.children)) r.observe(i);
+      n();
+    });
+    return c.observe(t, { childList: !0 }), () => {
+      t.removeEventListener("scroll", n), r.disconnect(), c.disconnect();
+    };
+  }, [e, n, o]), a;
+}
+const _ = "[mask-image:linear-gradient(to_right,transparent_0px,#000_calc(var(--tabs-fade-before)*1px),#000_calc(100%-var(--tabs-fade-after)*1px),transparent_100%)]";
+function q({ before: e, after: a }) {
+  return {
+    "--tabs-fade-before": e ? y : 0,
+    "--tabs-fade-after": a ? y : 0
+  };
+}
+function w(e) {
+  if (e.scrollWidth <= e.clientWidth) return;
+  const a = e.querySelector('[role="tab"][data-active]');
+  if (!a) return;
+  const s = 24, o = a.offsetLeft - e.clientLeft, n = o + a.offsetWidth, t = e.scrollLeft;
+  let r = t;
+  if (o - s < t) r = o - s;
+  else if (n + s > t + e.clientWidth) r = n + s - e.clientWidth;
+  else return;
+  r = Math.max(0, Math.min(r, e.scrollWidth - e.clientWidth)), !(Math.abs(r - t) < 1) && e.scrollTo({ left: r, behavior: A() ? "auto" : "smooth" });
+}
+function E(e) {
+  const a = e.querySelector('[role="presentation"]');
+  if (!a) return;
+  a.setAttribute("data-sliding", "");
+  const s = String(performance.now());
+  a.dataset.slidingToken = s, requestAnimationFrame(
+    () => requestAnimationFrame(() => {
+      const o = typeof a.getAnimations == "function" ? a.getAnimations() : [];
+      Promise.allSettled(o.map((n) => n.finished)).then(() => {
+        a.dataset.slidingToken === s && (a.removeAttribute("data-sliding"), delete a.dataset.slidingToken);
+      });
+    })
+  );
+}
+function V({ className: e, children: a, variant: s, scrollLabels: o }) {
+  const n = m({ variant: s }), t = S(null);
+  T(() => {
+    const i = t.current;
+    if (!i) return;
+    w(i);
+    const l = new MutationObserver(() => {
+      w(i), E(i);
+    });
+    return l.observe(i, {
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["data-active"]
+    }), () => l.disconnect();
+  }, []);
+  const r = M(t), c = (i) => {
+    const l = t.current;
+    if (!l) return;
+    const v = l.scrollWidth - l.clientWidth, b = Math.max(0, Math.min(l.scrollLeft + i * l.clientWidth * N, v));
+    l.scrollTo({ left: b, behavior: A() ? "auto" : "smooth" }), (b <= 1 || b >= v - 1) && l.querySelector('[role="tab"][data-active]')?.focus({ preventScroll: !0 });
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-tabs-strip": "",
+      "data-overflow-before": r.before,
+      "data-overflow-after": r.after,
+      className: "relative min-w-0 shrink-0",
+      children: [
+        /* @__PURE__ */ h(d.List, { ref: t, className: u(n.list(), (r.before || r.after) && _, e), style: q(r), children: [
+          a,
+          /* @__PURE__ */ f(d.Indicator, { className: n.indicator() })
+        ] }),
+        o && r.before && /* @__PURE__ */ f(
+          x,
+          {
+            label: o.before,
+            icon: /* @__PURE__ */ f(g, { name: "chevron-left", size: "sm" }),
+            variant: "ghost",
+            size: "sm",
+            onClick: () => c(-1),
+            className: "absolute top-1/2 left-0 z-20 -translate-y-1/2"
+          }
+        ),
+        o && r.after && /* @__PURE__ */ f(
+          x,
+          {
+            label: o.after,
+            icon: /* @__PURE__ */ f(g, { name: "chevron-right", size: "sm" }),
+            variant: "ghost",
+            size: "sm",
+            onClick: () => c(1),
+            className: "absolute top-1/2 right-0 z-20 -translate-y-1/2"
+          }
+        )
+      ]
+    }
+  );
+}
+function X({ className: e, children: a, variant: s, ref: o, ...n }) {
+  const t = m({ variant: s });
+  return /* @__PURE__ */ f(d.Tab, { ref: o, className: u(t.tab(), e), ...n, children: a });
+}
+function G({ className: e, children: a, ref: s, ...o }) {
+  const n = m({ fill: k(L) });
+  return /* @__PURE__ */ f(
+    d.Panel,
+    {
+      ref: s,
+      className: u(
+        n.panel(),
+        /* Content fades and rises a little on arrival. Deliberately subtle and
+           quick — a panel that makes an entrance every time you switch tabs
+           becomes tiring within a minute of real use. */
+        "data-starting-style:opacity-0 data-starting-style:translate-y-1",
+        /* THE EXIT IS NOT OPTIONAL, AND ITS ABSENCE WAS NOT COSMETIC.
+        
+                   Declaring a transition on a panel makes Base UI keep the OUTGOING one
+                   mounted until that transition finishes. With only a starting style
+                   declared there was nothing for the exit to animate: the leaving panel
+                   sat at `opacity: 1` with `inert` and `data-ending-style` set, waiting
+                   for a transition that would never run — so it never unmounted.
+        
+                   The symptom is not a missing fade. It is that PANELS ACCUMULATE: open
+                   four tabs and all four are on screen at once, stacked, the inert ones
+                   unreachable but fully painted. The tab list looks correct throughout,
+                   which is what makes it read as a layout bug rather than a tab bug.
+        
+                   Found in a consuming app whose workspace has eight tabs, by opening
+                   the page. Every test passed. */
+        "data-ending-style:opacity-0 data-ending-style:translate-y-1",
+        "transition-[var(--tx-colors),opacity,translate] duration-(--dur-base) ease-entrance",
+        e
+      ),
+      ...o,
+      children: a
+    }
+  );
+}
+export {
+  X as Tab,
+  V as TabList,
+  G as TabPanel,
+  D as Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../src/components/Tabs.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { reducedMotion } from \"../lib/motion\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\n\n/* ----------------------------------------------------------------------------\n   TABS\n\n   THE INDICATOR SLIDES. That is the whole point of having one: a bar that\n   jumps between tabs tells you the selection changed, while a bar that travels\n   tells you WHERE IT CAME FROM — which is what stops someone losing their\n   place in a row of six. Base UI publishes the active tab's position and width\n   as `--active-tab-left` / `--active-tab-width`, so the movement is two\n   transitions on one absolutely-positioned element, not a measurement loop.\n\n   The label does NOT change weight on selection. Bolding the active tab\n   changes its width, which shoves every tab after it sideways and makes the\n   indicator chase a moving target. Colour carries the state; the metrics stay\n   still.\n   -------------------------------------------------------------------------- */\n\nconst tabs = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-4\",\n    /* A STRIP THAT OUTGROWS ITS CONTAINER SCROLLS ITSELF, and three of these\n       utilities are what make that true rather than one.\n\n       `overflow-x-auto` is the scroller. `min-w-0` is what lets the strip be\n       narrower than the tabs inside it — a flex item's automatic minimum is its\n       CONTENT, so without this the strip is floored at the full width of its\n       tabs and pushes its parent wide instead of scrolling. `overscroll-x-contain`\n       stops a trackpad fling that reaches the end of the strip from chaining\n       into the page and scrolling the whole document sideways, which is the\n       version of this bug that only appears on a laptop.\n\n       `shrink-0` is about the OTHER axis and is not a contradiction. `Tabs`'\n       root is a flex COLUMN, so shrink applies to height: inside a bounded\n       column — a tabbed panel filling a fixed-height card — a strip without it\n       gets squashed toward zero to make room for the panel, and the tab labels\n       clip. Width is settled by `align-items: stretch` and `min-w-0` above,\n       which `shrink-0` does not touch. */\n    list: \"relative flex min-w-0 shrink-0 items-center gap-1 overflow-x-auto overscroll-x-contain\",\n    /* z-10 / z-0: the indicator is a LATER DOM sibling than the tabs (see\n       TabList), so with both at `z-auto` the indicator paints on top of the\n       labels. `line` survives that by accident — its indicator is a 2px bar\n       below the text. `pill`'s is a full-size opaque panel, and it covered the\n       selected label completely. Ordering the two explicitly states the\n       invariant the sibling structure depends on: the indicator is always\n       BEHIND the label, whatever shape a variant gives it. */\n    tab: [\n      /* justify-center is inert until `dx-tap` widens a short label past its\n         own padding on a touch pointer — without it that extra width all lands\n         on the right and the label sits off-centre under its own indicator. */\n      \"dx-tap relative z-10 flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap\",\n      \"font-medium text-tertiary outline-none\",\n      \"transition-colors duration-(--dur-fast) ease-hover\",\n      \"hover:text-secondary\",\n      /* `data-active`, NOT `data-selected`. Base UI marks the current tab with\n         `data-active` (measured on the rendered DOM: the selected tab carries\n         `data-active`, `aria-selected=\"true\"`, and no `data-selected` at all),\n         so the rule written against `data-selected` matched nothing and the\n         current tab's label sat at text-tertiary like every other. It looked\n         right only because the indicator underneath it marks the selection —\n         the same silent-dead-variant shape as the `data-side-top:` arrow rules,\n         and equally invisible from the source. */\n      \"data-active:text-primary\",\n      /* Selected AND hovered holds full strength. The two rules above weigh\n         the same, so pointing at the CURRENT tab could dim its label from\n         primary to secondary — selection reading weaker under the pointer.\n\n         A tab's hover is deliberately text-only: the tab paints ABOVE its own\n         indicator (z-10 over z-0, see the note on `tab`), so a background on\n         hover would cover the underline and the pill panel that mark it. */\n      \"data-active:hover:text-primary\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-45\",\n    ],\n    indicator: [\n      \"absolute z-0 rounded-full bg-accent\",\n      \"translate-x-[var(--active-tab-left)] w-[var(--active-tab-width)]\",\n      /* DX-4996: the slide is for a CHANGE OF SELECTION only. Colour always eases; position and width carry a transition only while `data-sliding`\n         is set (TabList sets it for the length of a selection change), so a mark arriving, a resize, a font load or a first paint puts the\n         indicator on the new geometry at once instead of travelling there from where the tab used to be. */\n      \"transition-[var(--tx-colors)] duration-(--dur-slow) ease-emphasis\",\n      \"data-sliding:transition-[var(--tx-colors),translate,width]\",\n    ],\n    panel: \"min-w-0 outline-none\",\n  },\n  variants: {\n    variant: {\n      /* Underline: the default. Reads as navigation within one surface. */\n      line: {\n        list: \"border-b border-border\",\n        tab: \"px-3 py-2.5 text-sm\",\n        indicator: \"bottom-0 left-0 h-0.5\",\n      },\n      /* Pill: for switching a view's mode, where the tabs are a control\n         rather than a section header. */\n      pill: {\n        list: \"gap-1 rounded-lg bg-surface-inset p-1\",\n        tab: \"rounded-md px-3 py-1.5 text-sm data-active:text-primary\",\n        indicator: \"inset-y-1 left-0 rounded-md bg-surface shadow-sm\",\n      },\n    },\n    /* FILLING THE HEIGHT THE GROUP WAS GIVEN — see `TabsProps.fill` for when\n       to ask for it and why it is not the default.\n\n       Two utilities on each of two slots, and all four are load-bearing.\n       `flex-1` is what claims the free space; `min-h-0` is what lets the box\n       be SHORTER than its content, without which a flex item's automatic\n       minimum size is its content and the column grows instead of letting a\n       descendant scroll. The panel additionally becomes a flex COLUMN,\n       because `flex-1` on a screen inside it is inert against a block parent\n       — the same fact `AppShell`'s content column was changed for, one\n       landmark down.\n\n       The strip needs nothing: `list` already carries `shrink-0`, which is\n       exactly what stops a bounded column squashing the labels to make room\n       for the panel. */\n    fill: {\n      true: {\n        root: \"min-h-0 flex-1\",\n        panel: \"flex min-h-0 flex-1 flex-col\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"line\", fill: false },\n});\n\n/* The panel is a SEPARATE component from the group, and `fill` is a property\n   of the group's box rather than of any one panel — so asking for it once on\n   `Tabs` has to reach every `TabPanel` under it. A prop on each panel would\n   let the two disagree, which is a state with no meaning: a group that fills\n   its height and a panel inside it that does not is just the same auto-height\n   break one level down. */\nconst FillContext = createContext(false);\n\nexport interface TabsProps\n  extends Omit<BaseTabs.Root.Props, \"className\">,\n    VariantProps<typeof tabs> {\n  /**\n   * Fill the height this group was given, instead of sizing to the content of\n   * whichever panel is open.\n   *\n   * THIS IS THE SHAPE `AppShell` ASKS FOR AND A TABBED SCREEN COULD NOT GIVE.\n   * The shell bounds the viewport and hands its content column a real height;\n   * its own instruction to a screen that wants to use it is \"write `flex-1\n   * min-h-0`, and never name a viewport unit\". A tabbed screen was the one\n   * arrangement where that could not be honoured — the root here passes a\n   * height DOWN (it is already a flex column) but claims none of its own, and\n   * the panel below it is a plain block, so the two together are an\n   * auto-height gap in the middle of an otherwise sound chain. The only way\n   * through was for the content inside to name a fraction of the viewport,\n   * which is precisely the arithmetic the shell exists to have ended.\n   *\n   * OPT-IN, AND THAT IS THE DESIGN RATHER THAN CAUTION. A tab group inside a\n   * card is the ordinary case and must keep sizing to its content. It also\n   * cannot be a default safely: a consumer rendering SEVERAL panels at once\n   * (Base UI also keeps an OUTGOING panel mounted for the length of its exit\n   * transition, so even a one-panel group briefly has two) would have them\n   * split the same free space between them. Filling is a claim about the box\n   * this group was handed, so the caller who knows that box is the one who\n   * makes it.\n   *\n   * @default false\n   */\n  fill?: boolean;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Tabs({ variant, fill = false, className, children, ref, ...props }: TabsProps) {\n  const s = tabs({ variant, fill });\n  return (\n    <FillContext value={fill}>\n      <BaseTabs.Root ref={ref} className={cn(s.root(), className)} {...props}>\n        {children}\n      </BaseTabs.Root>\n    </FillContext>\n  );\n}\n\nexport interface TabListProps {\n  className?: string;\n  children: ReactNode;\n  variant?: VariantProps<typeof tabs>[\"variant\"];\n  /**\n   * The words for the two scroll buttons a strip that overflows grows on the edge that has more tabs. DX-4973.\n   *\n   * ABSENT MEANS FADE ONLY. A strip wider than its box always fades its content out at the edge that has more (that is the cue, and it\n   * needs no colour: it fades the tabs themselves, not a patch of the surface over them). The buttons are the part a keyboard or a\n   * screen reader can act on, and the library has no default language, so the caller supplies what they say (\"Show earlier tabs\",\n   * \"Show later tabs\") rather than the strip speaking English by itself. Pass them wherever a strip can overflow. A button shows\n   * only on the edge that has more.\n   */\n  scrollLabels?: { before: string; after: string };\n}\n\n/** How wide the fade is, and how far a button press scrolls (a fraction of the visible strip, so a tab or two stays in view). */\nconst FADE_PX = 48;\nconst SCROLL_FRACTION = 0.8;\n\n/**\n * Which edges of a scrolling strip have more beyond them, kept current as it scrolls, is resized, or gains and loses tabs. DX-4973.\n * One pixel of slack, because `scrollLeft` is fractional on a scaled display and an end that reads 0.4px short is the end.\n */\nfunction useOverflowEdges(list: { current: HTMLElement | null }) {\n  const [edges, setEdges] = useState({ before: false, after: false });\n\n  /* DX-4996: Base UI re-measures the indicator when a tab resizes, but through a React state update that lands a task AFTER the resize\n     observer fires - one painted frame with the underline where the tab used to be. Writing the same numbers from here, in the observer\n     callback itself, closes that frame; Base UI's own render then writes identical values. */\n  const syncIndicator = useCallback(() => {\n    const el = list.current;\n    const active = el?.querySelector<HTMLElement>('[role=\"tab\"][data-active]');\n    const indicator = el?.querySelector<HTMLElement>('[role=\"presentation\"]');\n    if (!el || !active || !indicator) return;\n    const a = active.getBoundingClientRect();\n    const l = el.getBoundingClientRect();\n    indicator.style.setProperty(\"--active-tab-left\", `${a.left - l.left + el.scrollLeft - el.clientLeft}px`);\n    indicator.style.setProperty(\"--active-tab-width\", `${a.width}px`);\n  }, [list]);\n\n  const measure = useCallback(() => {\n    const el = list.current;\n    if (!el) return;\n    const before = el.scrollLeft > 1;\n    const after = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;\n    setEdges((prev) => (prev.before === before && prev.after === after ? prev : { before, after }));\n  }, [list]);\n\n  useEffect(() => {\n    const el = list.current;\n    if (!el) return;\n    measure();\n    el.addEventListener(\"scroll\", measure, { passive: true });\n    /* The strip's own box changing, and the box of every tab changing (a longer label, a tab added), are both reasons the answer moved. */\n    const resize = new ResizeObserver(() => {\n      syncIndicator();\n      measure();\n    });\n    resize.observe(el);\n    for (const child of Array.from(el.children)) resize.observe(child);\n    const mutation = new MutationObserver(() => {\n      resize.disconnect();\n      resize.observe(el);\n      for (const child of Array.from(el.children)) resize.observe(child);\n      measure();\n    });\n    mutation.observe(el, { childList: true });\n    return () => {\n      el.removeEventListener(\"scroll\", measure);\n      resize.disconnect();\n      mutation.disconnect();\n    };\n  }, [list, measure, syncIndicator]);\n\n  return edges;\n}\n\n/* Fade the strip's own content out where there is more: a mask, so the colour behind the tabs is never needed. The two widths are custom\n   properties (pixels, unitless, 0 on an edge with nothing beyond it) read by one class, so the same rule serves every combination of edges. */\nconst FADE_CLASS =\n  \"[mask-image:linear-gradient(to_right,transparent_0px,#000_calc(var(--tabs-fade-before)*1px),#000_calc(100%-var(--tabs-fade-after)*1px),transparent_100%)]\";\n\nfunction fadeStyle({ before, after }: { before: boolean; after: boolean }) {\n  return {\n    \"--tabs-fade-before\": before ? FADE_PX : 0,\n    \"--tabs-fade-after\": after ? FADE_PX : 0,\n  } as React.CSSProperties;\n}\n\n/**\n * Bring the selected tab inside the strip's own scroll window.\n *\n * A STRIP THAT SCROLLS BUT STRANDS THE SELECTION IS WORSE THAN ONE THAT\n * OVERFLOWS. Overflowing at least leaves the selected tab somewhere on the\n * page; a scroller leaves it clipped, with the indicator — the whole mechanism\n * for showing where the selection went — sliding to a position nobody can see.\n * The strip has to follow the selection, and it has to do it on every route\n * that changes the value, not only on the click that a browser would have\n * scrolled focus for anyway.\n *\n * `offsetLeft`, NOT `getBoundingClientRect`. The strip is `relative`, so a\n * tab's `offsetParent` IS the strip and `offsetLeft` is already in the\n * scroller's own coordinate space — the same space `scrollLeft` is written in.\n * A client rect would be in viewport coordinates and would have to be\n * corrected by the strip's own position and current scroll, which is the same\n * arithmetic done twice with a chance to get it wrong. `clientLeft` is\n * subtracted because a border sits outside that space.\n *\n * `scrollTo` ON THE STRIP, NEVER `scrollIntoView`. `scrollIntoView` walks every\n * scrollable ancestor, so revealing a tab can scroll the page under the reader\n * — and on a tabbed panel inside a dialog it moves the dialog too.\n */\nfunction revealActiveTab(list: HTMLElement): void {\n  if (list.scrollWidth <= list.clientWidth) return;\n\n  const active = list.querySelector<HTMLElement>('[role=\"tab\"][data-active]');\n  if (!active) return;\n\n  /* A sliver of the neighbouring tab stays visible, so the strip reads as\n     \"there is more this way\" rather than as a strip that happens to end. */\n  const peek = 24;\n  const left = active.offsetLeft - list.clientLeft;\n  const right = left + active.offsetWidth;\n  const from = list.scrollLeft;\n\n  let to = from;\n  if (left - peek < from) to = left - peek;\n  else if (right + peek > from + list.clientWidth) to = right + peek - list.clientWidth;\n  else return;\n\n  to = Math.max(0, Math.min(to, list.scrollWidth - list.clientWidth));\n  if (Math.abs(to - from) < 1) return;\n\n  /* Smooth, unless the reader asked for less. A programmatic scroll is exactly\n     the vestibular trigger the preference exists for, and unlike a transition\n     it has no reduced version — it is a glide or it is a jump. */\n  list.scrollTo({ left: to, behavior: reducedMotion() ? \"auto\" : \"smooth\" });\n}\n\n/**\n * Let the indicator travel for this selection change, then stop it travelling. DX-4996.\n *\n * THE SLIDE TELLS YOU WHERE THE SELECTION CAME FROM, which only a change of selection has to say. The same transition on a layout change\n * made the underline glide for ~300ms every time a health mark widened an earlier tab, and sit visibly under the wrong tab to anything\n * that looked in that window (a screenshot, a hidden document whose animation clock is stopped). So the transition is opt-in per\n * selection: `data-sliding` goes on before the browser styles the new position (this runs in the mutation microtask, ahead of the next\n * style pass) and comes off once the transitions it started have finished or been cancelled.\n *\n * Cleared after two frames by what is actually running (`getAnimations`) rather than by a timer, so it matches the real duration, and a\n * reduced-motion zero duration (nothing running) clears at once.\n */\nfunction slideIndicator(list: HTMLElement): void {\n  const indicator = list.querySelector<HTMLElement>('[role=\"presentation\"]');\n  if (!indicator) return;\n  indicator.setAttribute(\"data-sliding\", \"\");\n  const token = String(performance.now());\n  indicator.dataset.slidingToken = token;\n  requestAnimationFrame(() =>\n    requestAnimationFrame(() => {\n      const running = typeof indicator.getAnimations === \"function\" ? indicator.getAnimations() : [];\n      void Promise.allSettled(running.map((a) => a.finished)).then(() => {\n        if (indicator.dataset.slidingToken !== token) return; // a newer selection change owns the flag now\n        indicator.removeAttribute(\"data-sliding\");\n        delete indicator.dataset.slidingToken;\n      });\n    }),\n  );\n}\n\nexport function TabList({ className, children, variant, scrollLabels }: TabListProps) {\n  const s = tabs({ variant });\n  const list = useRef<HTMLDivElement | null>(null);\n\n  /* WATCHED ON THE DOM RATHER THAN ON A VALUE, because this component is not\n     given one. `TabList` renders whatever tabs it is handed and Base UI owns\n     the selection, so the honest observable is the attribute Base UI writes —\n     and observing it covers every route into a change at once: a click, an\n     arrow key, and a consumer setting `value` from somewhere else entirely.\n     A `value` prop threaded down here would only cover the third. */\n  useEffect(() => {\n    const el = list.current;\n    if (!el) return;\n    /* Once on mount as well: a strip whose selected tab starts off-screen is\n       the same defect, arrived at without any change to observe. */\n    revealActiveTab(el);\n    const observer = new MutationObserver(() => {\n      revealActiveTab(el);\n      slideIndicator(el);\n    });\n    observer.observe(el, {\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"data-active\"],\n    });\n    return () => observer.disconnect();\n  }, []);\n\n  const edges = useOverflowEdges(list);\n\n  /* Scroll toward an edge by most of a strip. When that press reaches the end, the button is about to leave the DOM, and a focused\n     element that leaves drops focus to the page: hand it to the selected tab first. */\n  const scrollToward = (direction: 1 | -1) => {\n    const el = list.current;\n    if (!el) return;\n    const max = el.scrollWidth - el.clientWidth;\n    const to = Math.max(0, Math.min(el.scrollLeft + direction * el.clientWidth * SCROLL_FRACTION, max));\n    el.scrollTo({ left: to, behavior: reducedMotion() ? \"auto\" : \"smooth\" });\n    if (to <= 1 || to >= max - 1) el.querySelector<HTMLElement>('[role=\"tab\"][data-active]')?.focus({ preventScroll: true });\n  };\n\n  return (\n    <div\n      data-tabs-strip=\"\"\n      data-overflow-before={edges.before}\n      data-overflow-after={edges.after}\n      className=\"relative min-w-0 shrink-0\"\n    >\n      <BaseTabs.List ref={list} className={cn(s.list(), (edges.before || edges.after) && FADE_CLASS, className)} style={fadeStyle(edges)}>\n        {children}\n        {/* The indicator is a SIBLING of the tabs, not a child of the selected\n            one — a child would be destroyed and recreated on every change, which\n            is exactly what makes an indicator jump instead of travel. */}\n        <BaseTabs.Indicator className={s.indicator()} />\n      </BaseTabs.List>\n      {/* Outside the list, so the tablist holds tabs and nothing else, and over the faded edge, where the fade says there is more. */}\n      {scrollLabels && edges.before && (\n        <IconButton\n          label={scrollLabels.before}\n          icon={<Icon name=\"chevron-left\" size=\"sm\" />}\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => scrollToward(-1)}\n          className=\"absolute top-1/2 left-0 z-20 -translate-y-1/2\"\n        />\n      )}\n      {scrollLabels && edges.after && (\n        <IconButton\n          label={scrollLabels.after}\n          icon={<Icon name=\"chevron-right\" size=\"sm\" />}\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => scrollToward(1)}\n          className=\"absolute top-1/2 right-0 z-20 -translate-y-1/2\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface TabProps extends Omit<BaseTabs.Tab.Props, \"className\"> {\n  className?: string;\n  variant?: VariantProps<typeof tabs>[\"variant\"];\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function Tab({ className, children, variant, ref, ...props }: TabProps) {\n  const s = tabs({ variant });\n  return (\n    <BaseTabs.Tab ref={ref} className={cn(s.tab(), className)} {...props}>\n      {children}\n    </BaseTabs.Tab>\n  );\n}\n\nexport interface TabPanelProps extends Omit<BaseTabs.Panel.Props, \"className\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function TabPanel({ className, children, ref, ...props }: TabPanelProps) {\n  /* From the GROUP, never from a prop here — see `FillContext`. */\n  const s = tabs({ fill: useContext(FillContext) });\n  return (\n    <BaseTabs.Panel\n      ref={ref}\n      className={cn(\n        s.panel(),\n        /* Content fades and rises a little on arrival. Deliberately subtle and\n           quick — a panel that makes an entrance every time you switch tabs\n           becomes tiring within a minute of real use. */\n        \"data-starting-style:opacity-0 data-starting-style:translate-y-1\",\n        /* THE EXIT IS NOT OPTIONAL, AND ITS ABSENCE WAS NOT COSMETIC.\n\n           Declaring a transition on a panel makes Base UI keep the OUTGOING one\n           mounted until that transition finishes. With only a starting style\n           declared there was nothing for the exit to animate: the leaving panel\n           sat at `opacity: 1` with `inert` and `data-ending-style` set, waiting\n           for a transition that would never run — so it never unmounted.\n\n           The symptom is not a missing fade. It is that PANELS ACCUMULATE: open\n           four tabs and all four are on screen at once, stacked, the inert ones\n           unreachable but fully painted. The tab list looks correct throughout,\n           which is what makes it read as a layout bug rather than a tab bug.\n\n           Found in a consuming app whose workspace has eight tabs, by opening\n           the page. Every test passed. */\n        \"data-ending-style:opacity-0 data-ending-style:translate-y-1\",\n        \"transition-[var(--tx-colors),opacity,translate] duration-(--dur-base) ease-entrance\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </BaseTabs.Panel>\n  );\n}\n"],"names":["tabs","tv","FillContext","createContext","Tabs","variant","fill","className","children","ref","props","s","jsx","BaseTabs","cn","FADE_PX","SCROLL_FRACTION","useOverflowEdges","list","edges","setEdges","useState","syncIndicator","useCallback","el","active","indicator","a","measure","before","after","prev","useEffect","resize","child","mutation","FADE_CLASS","fadeStyle","revealActiveTab","peek","left","right","from","to","reducedMotion","slideIndicator","token","running","TabList","scrollLabels","useRef","observer","scrollToward","direction","max","jsxs","IconButton","Icon","Tab","TabPanel","useContext"],"mappings":"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"}

package/dist/components/ThemeMenu.js

@@ -0,0 +1,198 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { Button as v } from "./Button.js";
+import { Callout as C } from "./Callout.js";
+import { Icon as h } from "./Icon.js";
+import { Popover as S } from "./Popover.js";
+import { Slider as k } from "./Slider.js";
+import { Switch as w } from "./Choice.js";
+import { useTheme as p, useUiScale as M, useContrast as R, useMotionPreference as z } from "../lib/preferences.js";
+import { useReducedMotion as E, OS_REDUCE as I } from "../lib/motion.js";
+import { useMediaQuery as T } from "../lib/use-media-query.js";
+import { reducedMotionHelp as j, detectPlatform as H } from "../lib/reduced-motion-help.js";
+import { useUiStrings as d } from "../lib/i18n/provider.js";
+const l = ["sm", "md", "lg"], P = ["system", "full", "reduced"];
+function A(e, r, n) {
+  return r === "full" ? e.full : r === "reduced" ? e.reduced : n ? e.systemReduced : e.systemFull;
+}
+function O() {
+  const e = d().themeMenu, r = j(
+    H(navigator),
+    e.osSteps
+  );
+  return /* @__PURE__ */ s(
+    C,
+    {
+      tone: "warning",
+      title: e.systemReducesTitle,
+      "data-motion-os-help": r.platform,
+      children: [
+        /* @__PURE__ */ a("p", { children: r.href ? /* @__PURE__ */ a("a", { href: r.href, className: "font-medium text-accent-text underline underline-offset-2", children: r.steps }) : r.steps }),
+        /* @__PURE__ */ a("p", { children: e.systemReducesAdvice })
+      ]
+    }
+  );
+}
+const U = { sm: "0.85rem", md: "1.05rem", lg: "1.3rem" };
+function L({
+  label: e,
+  hint: r,
+  control: n
+}) {
+  return /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+      /* @__PURE__ */ a("span", { className: "text-sm font-medium text-primary", children: e }),
+      r && /* @__PURE__ */ a("span", { className: "text-2xs text-tertiary text-pretty", children: r })
+    ] }),
+    n
+  ] });
+}
+function V(e) {
+  return e === "dark" ? "moon" : "sun";
+}
+function Z({ className: e, triggerClassName: r, iconOnly: n = !1 }) {
+  const i = d().themeMenu, { theme: m } = p();
+  return /* @__PURE__ */ a(
+    S,
+    {
+      align: "end",
+      width: "calc(20rem*var(--ui-scale))",
+      className: e,
+      trigger: /* @__PURE__ */ s(
+        v,
+        {
+          size: "sm",
+          variant: n ? "ghost" : "outline",
+          iconOnly: n,
+          className: r,
+          "aria-label": i.triggerLabel,
+          children: [
+            /* @__PURE__ */ a(h, { name: V(m), size: "sm" }),
+            !n && /* @__PURE__ */ a("span", { className: "hidden sm:inline", children: i.appearance })
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ a(_, {})
+    }
+  );
+}
+function _() {
+  const e = d().themeMenu, { theme: r, setTheme: n } = p(), { scale: i, setScale: m } = M(), { contrast: x, setContrast: g } = R(), { motion: c, setMotion: b } = z(), u = E(), y = T(I), N = l.indexOf(i);
+  return /* @__PURE__ */ s("div", { "data-theme-menu-panel": "", className: "flex w-full min-w-0 flex-col gap-5", children: [
+    /* @__PURE__ */ s("div", { className: "flex flex-col gap-2.5", children: [
+      /* @__PURE__ */ a("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e.theme }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": e.theme,
+          className: "flex gap-1 rounded-lg bg-surface-inset p-1",
+          children: ["light", "dark"].map((t) => /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": r === t,
+              onClick: () => n(t),
+              className: f(r === t),
+              children: [
+                /* @__PURE__ */ a(h, { name: t === "dark" ? "moon" : "sun", size: "sm" }),
+                e.themes[t]
+              ]
+            },
+            t
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ a("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e.textSize }),
+      /* @__PURE__ */ s("div", { className: "px-[calc(var(--spacing)*2.75)]", children: [
+        /* @__PURE__ */ a("div", { className: "relative h-5 select-none", "aria-hidden": !0, children: l.map((t, o) => /* @__PURE__ */ a(
+          "span",
+          {
+            className: i === t ? "absolute bottom-0 -translate-x-1/2 font-display leading-none text-accent-text" : "absolute bottom-0 -translate-x-1/2 font-display leading-none text-tertiary",
+            style: {
+              left: `${o / (l.length - 1) * 100}%`,
+              fontSize: U[t],
+              /* `translate`, not `transform` — same Tailwind v4 property as
+                 the Slider's own extreme labels. */
+              ...o === 0 ? { translate: "none", left: 0 } : {},
+              ...o === l.length - 1 ? { translate: "none", left: "auto", right: 0 } : {}
+            },
+            children: "Aa"
+          },
+          t
+        )) }),
+        /* @__PURE__ */ a(
+          k,
+          {
+            "aria-label": e.textSize,
+            min: 0,
+            max: 2,
+            step: 1,
+            value: N,
+            onValueChange: (t) => m(l[Number(t)]),
+            showValue: !1,
+            tooltip: "never",
+            marks: l.map((t, o) => ({ value: o, label: e.scales[t] })),
+            format: (t) => e.scales[l[t]]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex flex-col gap-3.5 border-t border-border-subtle pt-4", children: /* @__PURE__ */ a(
+      L,
+      {
+        label: e.highContrast,
+        hint: e.highContrastHint,
+        control: /* @__PURE__ */ a(
+          w,
+          {
+            checked: x === "aa",
+            onCheckedChange: (t) => g(t ? "aa" : "design"),
+            "aria-label": e.highContrast
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ s("div", { className: "flex flex-col gap-2.5", children: [
+      /* @__PURE__ */ a("span", { className: "text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e.motion }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          role: "radiogroup",
+          "aria-label": e.motion,
+          className: "flex gap-1 rounded-lg bg-surface-inset p-1",
+          children: P.map((t) => /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": c === t,
+              onClick: () => b(t),
+              className: f(c === t),
+              children: e.motionChoices[t]
+            },
+            t
+          ))
+        }
+      ),
+      /* @__PURE__ */ a("p", { "data-motion-effective": u ? "reduced" : "full", className: "text-2xs text-tertiary text-pretty", children: A(e.motionHint, c, u) }),
+      y && c === "system" && /* @__PURE__ */ a(O, {})
+    ] })
+  ] });
+}
+function f(e) {
+  return [
+    "dx-tap flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2",
+    "text-sm font-medium",
+    "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+    e ? "bg-surface text-primary shadow-sm" : "text-tertiary hover:text-secondary"
+  ].join(" ");
+}
+export {
+  Z as ThemeMenu,
+  _ as ThemePanel,
+  V as themeIcon
+};
+//# sourceMappingURL=ThemeMenu.js.map

package/dist/components/ThemeMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeMenu.js","sources":["../../src/components/ThemeMenu.tsx"],"sourcesContent":["import { useUiStrings, type UiStrings } from \"../lib/i18n\";\nimport { Button } from \"./Button\";\nimport { Callout } from \"./Callout\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { Popover } from \"./Popover\";\nimport { Slider } from \"./Slider\";\nimport { Switch } from \"./Choice\";\nimport {\n  useTheme,\n  useUiScale,\n  useContrast,\n  useMotionPreference,\n} from \"../lib/preferences\";\nimport { OS_REDUCE, useReducedMotion } from \"../lib/motion\";\nimport { useMediaQuery } from \"../lib/use-media-query\";\nimport { detectPlatform, reducedMotionHelp } from \"../lib/reduced-motion-help\";\nimport type { MotionPreference, Theme, UiScale } from \"../lib/preference-values\";\n\n/* ============================================================================\n   THEME MENU — every display preference behind one control.\n\n   These four settings were four separate buttons in the header, which is the\n   arrangement that seems obvious right up until you count them. They are all\n   answers to the same question — \"how should this look for me?\" — and a person\n   adjusting one very often wants to adjust another. Four buttons make that\n   four separate hunts across a crowded header; one popover makes it one place\n   you learn once.\n\n   Scale is a SLIDER rather than three buttons because it is an ordered\n   quantity, and a slider is the control that says so. The specimen row above\n   it previews the actual sizes, so the choice is visible before it is made.\n\n   THIS COMPONENT OWNS TWO BOXES, AND ONLY ONE OF THEM CAN BE `className`.\n\n   It supplies both the trigger and the popup, which is the arrangement that\n   makes a single `className` ambiguous — and it resolved the ambiguity in the\n   direction a caller does not expect, because `Popover` puts `className` on the\n   POPUP. For a while that was the only styling prop here, so the one prop that\n   existed went somewhere invisible and nothing reached the button at all.\n\n   The fix is not to move `className` — a consumer sizes the panel with it, and\n   quietly repointing a prop is a breaking change that no version number would\n   admit to. It is to name the second box: `triggerClassName`, exactly as\n   `Collapsible` already does for the same reason.\n\n   And a class is the WRONG tool for the case that prompted this anyway. Making\n   the trigger icon-only from outside means re-deriving `Button`'s square box by\n   hand AND out-specifying the label's `hidden sm:inline` with an `!` — a copy\n   of two internal decisions that will drift the first time either moves. So\n   `iconOnly` is a MODE: it forwards `Button`'s own `iconOnly` variant and drops\n   the label from the tree, and the accessible name never depended on the\n   visible text in the first place.\n   ========================================================================= */\n\nconst SCALES: UiScale[] = [\"sm\", \"md\", \"lg\"];\nconst MOTION_CHOICES: MotionPreference[] = [\"system\", \"full\", \"reduced\"];\n\n/** What the motion choice means right now, including what \"System\" resolved to. */\nfunction motionHint(hints: UiStrings[\"themeMenu\"][\"motionHint\"], motion: MotionPreference, reduced: boolean): string {\n  if (motion === \"full\") return hints.full;\n  if (motion === \"reduced\") return hints.reduced;\n  return reduced ? hints.systemReduced : hints.systemFull;\n}\n\n/* DX-4504 - the warning, and the way out, for the OS this runs on. Shown only while the choice is System: under\n   Full the animations run, and under Reduced the person asked for exactly this. Live through the media query's\n   `change` event (`useMediaQuery`), so switching the OS setting back updates the open menu. */\nfunction SystemReducesMotion() {\n  const strings = useUiStrings().themeMenu;\n  const help = reducedMotionHelp(\n    detectPlatform(navigator as Navigator & { userAgentData?: { platform?: string } }),\n    strings.osSteps,\n  );\n  return (\n    <Callout\n      tone=\"warning\"\n      title={strings.systemReducesTitle}\n      data-motion-os-help={help.platform}\n    >\n      <p>\n        {help.href ? (\n          <a href={help.href} className=\"font-medium text-accent-text underline underline-offset-2\">\n            {help.steps}\n          </a>\n        ) : (\n          help.steps\n        )}\n      </p>\n      <p>{strings.systemReducesAdvice}</p>\n    </Callout>\n  );\n}\n/* Fixed px on purpose: sized by the scale token, all three specimens would\n   move together and always look identical no matter which is selected. */\nconst SPECIMEN: Record<UiScale, string> = { sm: \"0.85rem\", md: \"1.05rem\", lg: \"1.3rem\" };\n\nfunction Setting({\n  label,\n  hint,\n  control,\n}: {\n  label: string;\n  hint?: string;\n  control: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-4\">\n      <span className=\"flex min-w-0 flex-col gap-0.5\">\n        <span className=\"text-sm font-medium text-primary\">{label}</span>\n        {hint && <span className=\"text-2xs text-tertiary text-pretty\">{hint}</span>}\n      </span>\n      {control}\n    </div>\n  );\n}\n\nexport interface ThemeMenuProps {\n  /**\n   * Restyles the POPUP, not the trigger — see `triggerClassName` below.\n   *\n   * Stated rather than left to be discovered, because the discovery is\n   * expensive and has already been made once. This is the only styling prop\n   * this component had, `Popover` forwards it to `Popover.Popup`, and a caller\n   * reaching for \"the class that styles this component\" reasonably expects it\n   * on the button they can see. It is kept where it is because a consumer sizes\n   * the panel with it; moving it would be a silent breaking change wearing a\n   * bug fix's clothes.\n   */\n  className?: string;\n  /**\n   * Restyles the TRIGGER.\n   *\n   * Named after `Collapsible.triggerClassName`, which exists for exactly this\n   * situation one component over: a component that supplies its own trigger has\n   * two boxes a caller might mean, and only one of them can have `className`.\n   * Prefer `iconOnly` below when the goal is the icon-only shape — that is a\n   * MODE this component knows how to enter, and re-drawing it from classes\n   * means re-deriving `Button`'s square box by hand.\n   */\n  triggerClassName?: string;\n  /**\n   * Drop the \"Appearance\" label and render the trigger as a square icon button.\n   *\n   * Named after `Button.iconOnly`, which is the variant it forwards to — the\n   * width is pinned to the control height there, so the hit area stays square\n   * and can never fall below the tap minimum.\n   *\n   * WHY A MODE AND NOT A CLASS. The label is `hidden sm:inline`: present from\n   * 640px up, which is most screens the app runs on. So \"make it icon-only\"\n   * from the outside means a descendant selector plus an `!` to out-specify a\n   * responsive rule, next to a hand-copy of `Button`'s `px-0 aspect-square` —\n   * which is what the consuming app that reported this shipped, and which\n   * drifts the moment either of those changes here. The mode removes the label\n   * from the tree instead of fighting a media query for it.\n   *\n   * The accessible name is unaffected: `aria-label=\"Appearance settings\"` is on\n   * the button in both modes, and it is what a screen reader announces either\n   * way — the visible text was never the name.\n   */\n  iconOnly?: boolean;\n}\n\n/** The glyph of the Appearance button: the sun in the light theme, the moon in the dark. A folded account-menu entry draws the same one. */\nexport function themeIcon(theme: Theme): IconName {\n  return theme === \"dark\" ? \"moon\" : \"sun\";\n}\n\nexport function ThemeMenu({ className, triggerClassName, iconOnly = false }: ThemeMenuProps) {\n  const strings = useUiStrings().themeMenu;\n  const { theme } = useTheme();\n\n  return (\n    <Popover\n      align=\"end\"\n      width=\"calc(20rem*var(--ui-scale))\"\n      className={className}\n      trigger={\n        <Button\n          size=\"sm\"\n          variant={iconOnly ? \"ghost\" : \"outline\"}\n          iconOnly={iconOnly}\n          className={triggerClassName}\n          aria-label={strings.triggerLabel}\n        >\n          <Icon name={themeIcon(theme)} size=\"sm\" />\n          {/* Not rendered, rather than hidden — see `iconOnly`. `hidden\n              sm:inline` is a RESPONSIVE rule, so hiding it from outside means\n              out-specifying a media query; not rendering it costs nothing and\n              cannot be undone by a breakpoint. */}\n          {!iconOnly && <span className=\"hidden sm:inline\">{strings.appearance}</span>}\n        </Button>\n      }\n    >\n      {/* DX-4086 — the design width lives on the popup (`width` below), which renders at\n          exactly that width capped by the clamp (Popover.tsx), so the panel just fills it. */}\n      <ThemePanel />\n    </Popover>\n  );\n}\n\n/**\n * DX-5319 - the Appearance popup's body on its own: theme, text size, contrast, motion. `ThemeMenu` draws it in its popover;\n * an app whose header folded the Appearance button into the account menu (`useHeaderFold`) has no trigger left to anchor a popover\n * to, so it draws this same panel in a `Dialog`. One body, two containers.\n */\nexport function ThemePanel() {\n  const strings = useUiStrings().themeMenu;\n  const { theme, setTheme } = useTheme();\n  const { scale, setScale } = useUiScale();\n  const { contrast, setContrast } = useContrast();\n  const { motion, setMotion } = useMotionPreference();\n  const reduced = useReducedMotion();\n  const osReduces = useMediaQuery(OS_REDUCE);\n\n  const scaleIndex = SCALES.indexOf(scale);\n\n  return (\n    <div data-theme-menu-panel=\"\" className=\"flex w-full min-w-0 flex-col gap-5\">\n      <div className=\"flex flex-col gap-2.5\">\n        <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n          {strings.theme}\n        </span>\n        {/* A segmented control rather than a switch: these are two named\n            choices, not an on/off state, and \"dark mode: off\" is a worse\n            description of \"light\" than \"light\" is. */}\n        <div\n          role=\"radiogroup\"\n          aria-label={strings.theme}\n          className=\"flex gap-1 rounded-lg bg-surface-inset p-1\"\n        >\n          {([\"light\", \"dark\"] as Theme[]).map((option) => (\n            <button\n              key={option}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={theme === option}\n              onClick={() => setTheme(option)}\n              className={cnRadio(theme === option)}\n            >\n              <Icon name={option === \"dark\" ? \"moon\" : \"sun\"} size=\"sm\" />\n              {strings.themes[option]}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n          {strings.textSize}\n        </span>\n        {/* The specimens sit ABOVE the slider, aligned to its stops, so the\n            scale reads as a preview strip rather than three abstract steps.\n\n            POSITIONED THE SAME WAY THE SLIDER'S MARKS ARE, and for the same\n            reason they have to be: the marks are absolutely placed at\n            0% / 50% / 100% and centred on their ticks, so anything laid out\n            by BOX EDGES cannot agree with them. `justify-between` did exactly\n            that — it pins the outer edges while the marks pin centres, so the\n            two rows drifted by 10, 4 and 14px, and the gap GREW with the\n            specimen font-size spread because bigger boxes push their own\n            edges further out. Deriving both rows from the same percentages\n            makes them agree at any size. */}\n        {/* DX-3785 — `px-[calc(var(--spacing)*2.75)]` insets BOTH rows below\n            by (a bit more than) half of the Slider's (default `md`) thumb\n            diameter at its LARGEST rendered size. The thumb is centred on\n            its 0%/100% stops, so at either end part of it draws OUTSIDE the\n            track it is percent-positioned against — by design, every\n            slider in this library does this, and it is normally invisible\n            because whatever contains the slider has side padding wider\n            than a half-thumb. This popover's content column does not: it\n            is `w-full` inside a flex column with no horizontal padding of\n            its own (the popup's padding is outside it, see `Popover`'s\n            `POPUP_CLAMP` / `SCROLLER`), so the bled pixels landed past the\n            SCROLLER's own edge. That box has `overflow-y-auto`, and CSS\n            computes a 'visible' overflow-x on the OTHER axis up to 'auto'\n            the moment its partner isn't 'visible' (spec: overflow-x/-y\n            can't be visible+non-visible) — so the bleed stopped being\n            invisible paint and became a horizontal scrollbar plus a\n            genuinely wider scroll range than the popup.\n\n            THE THUMB IS NOT A FIXED SIZE. `hover:scale-110` and\n            `data-dragging:scale-110` (`Slider.tsx`'s `thumb` slot) grow it\n            10% on hover, focus-drag and drag — and a CSS `transform` DOES\n            enlarge an element's SCROLLABLE overflow area (unlike\n            `box-shadow`, which the spec excludes from it), so the resting\n            half-radius (`size-4.5` ÷ 2 = 2.25 spacing units) is not enough:\n            at rest the thumb fit, but the moment it was hovered or dragged\n            at the `Large` end the scaled-up circle pushed past the inset\n            and the scrollbar came back. `2.75` is `size-4.5` ÷ 2 × 1.1\n            (2.475) rounded up with room to spare, so the padding already\n            covers the hovered/focused/dragging size and does not need a\n            `:hover`/`:focus`/`data-dragging` variant of its own. */}\n        <div className=\"px-[calc(var(--spacing)*2.75)]\">\n          <div className=\"relative h-5 select-none\" aria-hidden>\n            {SCALES.map((option, i) => (\n              <span\n                key={option}\n                className={\n                  scale === option\n                    ? \"absolute bottom-0 -translate-x-1/2 font-display leading-none text-accent-text\"\n                    : \"absolute bottom-0 -translate-x-1/2 font-display leading-none text-tertiary\"\n                }\n                style={{\n                  left: `${(i / (SCALES.length - 1)) * 100}%`,\n                  fontSize: SPECIMEN[option],\n                  /* `translate`, not `transform` — same Tailwind v4 property as\n                     the Slider's own extreme labels. */\n                  ...(i === 0 ? { translate: \"none\", left: 0 } : {}),\n                  ...(i === SCALES.length - 1\n                    ? { translate: \"none\", left: \"auto\", right: 0 }\n                    : {}),\n                }}\n              >\n                {/* I18N-ALLOW: the \"Aa\" type specimen shows the glyph size; it is a sample of letters and not a word */}\n                Aa\n              </span>\n            ))}\n          </div>\n          <Slider\n            aria-label={strings.textSize}\n            min={0}\n            max={2}\n            step={1}\n            value={scaleIndex}\n            onValueChange={(v) => setScale(SCALES[Number(v)])}\n            showValue={false}\n            /* I18N-ALLOW: Slider tooltip display mode token, not text */\n            tooltip=\"never\"\n            marks={SCALES.map((option, i) => ({ value: i, label: strings.scales[option] }))}\n            format={(v) => strings.scales[SCALES[v]]}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-3.5 border-t border-border-subtle pt-4\">\n        <Setting\n          label={strings.highContrast}\n          hint={strings.highContrastHint}\n          control={\n            <Switch\n              checked={contrast === \"aa\"}\n              onCheckedChange={(on) => setContrast(on ? \"aa\" : \"design\")}\n              aria-label={strings.highContrast}\n            />\n          }\n        />\n      </div>\n\n      {/* DX-4504 - three named choices, not a \"Reduce motion\" switch. A switch could only say on or off, and with\n          the preference at `system` it read OFF on a machine whose OS reduces motion (Windows \"Animation effects\"\n          off), so the person was told motion was on and got none. The hint says what the system choice resolves\n          to, and \"Full\" is the explicit way to see motion on such a machine. */}\n      <div className=\"flex flex-col gap-2.5\">\n        <span className=\"text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n          {strings.motion}\n        </span>\n        <div\n          role=\"radiogroup\"\n          aria-label={strings.motion}\n          className=\"flex gap-1 rounded-lg bg-surface-inset p-1\"\n        >\n          {MOTION_CHOICES.map((option) => (\n            <button\n              key={option}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={motion === option}\n              onClick={() => setMotion(option)}\n              className={cnRadio(motion === option)}\n            >\n              {strings.motionChoices[option]}\n            </button>\n          ))}\n        </div>\n        <p data-motion-effective={reduced ? \"reduced\" : \"full\"} className=\"text-2xs text-tertiary text-pretty\">\n          {motionHint(strings.motionHint, motion, reduced)}\n        </p>\n        {osReduces && motion === \"system\" && <SystemReducesMotion />}\n      </div>\n    </div>\n  );\n}\n\n/** Segmented-control button styling, shared by the theme and motion choices. */\nfunction cnRadio(selected: boolean) {\n  return [\n    \"dx-tap flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2\",\n    \"text-sm font-medium\",\n    \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n    selected\n      ? \"bg-surface text-primary shadow-sm\"\n      : \"text-tertiary hover:text-secondary\",\n  ].join(\" \");\n}\n"],"names":["SCALES","MOTION_CHOICES","motionHint","hints","motion","reduced","SystemReducesMotion","strings","useUiStrings","help","reducedMotionHelp","detectPlatform","jsxs","Callout","jsx","SPECIMEN","Setting","label","hint","control","themeIcon","theme","ThemeMenu","className","triggerClassName","iconOnly","useTheme","Popover","Button","Icon","ThemePanel","setTheme","scale","setScale","useUiScale","contrast","setContrast","useContrast","setMotion","useMotionPreference","useReducedMotion","osReduces","useMediaQuery","OS_REDUCE","scaleIndex","option","cnRadio","i","Slider","v","Switch","on","selected"],"mappings":"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"}