eidos-ui 4.0.0 → 4.1.1

package/dist/{chunk-U5KD4BWL.js → chunk-DHOBGYRD.js}

@@ -1,6 +1,10 @@
+import {
+  Switch
+} from "./chunk-7HEUWGYW.js";
 import {
   CONTRAST_DARK,
   CONTRAST_LIGHT,
+  DARK_SURFACE,
   FONT_ACCEPT,
   FONT_SCALE_MAX,
   FONT_SCALE_MIN,
@@ -13,10 +17,13 @@ import {
   subscribeToFontLoads,
   toFontStack,
   useTheme
-} from "./chunk-XOUNVK45.js";
+} from "./chunk-EJWEG66P.js";
 import {
   Slider
 } from "./chunk-2BC4M4QZ.js";
+import {
+  SegmentedControl
+} from "./chunk-BHZ76J2K.js";
 import {
   Select
 } from "./chunk-2WDL2ZVP.js";
@@ -39,9 +46,25 @@ import {
 
 // src/components/ThemeEditor/ThemeEditor.component.tsx
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
-import { CircleCheck, CircleX, RotateCcw, TriangleAlert, Upload } from "lucide-react";
+import {
+  Check,
+  CircleCheck,
+  CircleX,
+  Clipboard,
+  RotateCcw,
+  TriangleAlert,
+  Upload
+} from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var PAGE_SURFACE = CONTRAST_LIGHT;
+var PAGE_SURFACE = {
+  light: CONTRAST_LIGHT,
+  dark: DARK_SURFACE
+};
+var SCHEME_OPTIONS = [
+  { value: "light", label: "Light" },
+  { value: "dark", label: "Dark" },
+  { value: "system", label: "System" }
+];
 var EDGE_MIN_RATIO = 1.5;
 var COLOR_LABELS = {
   primary: "Primary",
@@ -86,20 +109,21 @@ var GRADE_BADGE = {
   "aa-large": { label: "Too low for body text", icon: TriangleAlert },
   fail: { label: "Fails AA", icon: CircleX }
 };
-var diagnose = (key, base, explicitContrast) => {
+var diagnose = (key, base, explicitContrast, scheme) => {
+  const page = PAGE_SURFACE[scheme];
   if (!isFill(key)) {
-    const ratio2 = contrastRatio(base, PAGE_SURFACE);
+    const ratio2 = contrastRatio(base, page);
     const grade2 = gradeFor(ratio2);
     return {
       grade: grade2,
       ratio: ratio2,
-      detail: `Link text on the page background: ${ratio2.toFixed(2)}:1 against white.${GRADE_CAVEAT[grade2] ?? ""}`
+      detail: `Link text on the page background: ${ratio2.toFixed(2)}:1 against the ${scheme} page.${GRADE_CAVEAT[grade2] ?? ""}`
     };
   }
   const foreground = explicitContrast ?? pickContrast(base);
   const ratio = contrastRatio(base, foreground);
   const name = foreground.toLowerCase() === CONTRAST_DARK ? "dark" : "white";
-  const edge = contrastRatio(base, PAGE_SURFACE);
+  const edge = contrastRatio(base, page);
   const grade = gradeFor(ratio);
   return {
     grade,
@@ -219,8 +243,21 @@ var ThemeEditor = ({
   hideCssExport = false,
   className
 }) => {
-  const { theme, resolvedTheme, setTheme, updateTheme, resetTheme, isDefault, toCss } = useTheme();
+  const {
+    theme,
+    resolvedTheme,
+    setTheme,
+    updateTheme,
+    resetTheme,
+    isDefault,
+    toCss,
+    colorScheme,
+    resolvedColorScheme,
+    setColorScheme
+  } = useTheme();
   const [copied, setCopied] = useState(false);
+  const hasDarkOverrides = Object.keys(theme.dark?.colors ?? {}).length > 0;
+  const [separateDark, setSeparateDark] = useState(hasDarkOverrides);
   const [uploaded, setUploaded] = useState([]);
   const [monoUploaded, setMonoUploaded] = useState([]);
   const setColor = useCallback(
@@ -239,12 +276,43 @@ var ThemeEditor = ({
     },
     [theme, setTheme]
   );
+  const setDarkColor = useCallback(
+    (key, hex) => updateTheme({ dark: { colors: { [key]: hex } } }),
+    [updateTheme]
+  );
+  const resetDarkColor = useCallback(
+    (key) => {
+      const nextDark = { ...theme.dark?.colors };
+      delete nextDark[key];
+      setTheme({ ...theme, dark: { colors: nextDark } });
+    },
+    [theme, setTheme]
+  );
+  const toggleSeparateDark = useCallback(
+    (on) => {
+      setSeparateDark(on);
+      if (!on && hasDarkOverrides) setTheme({ ...theme, dark: { colors: {} } });
+    },
+    [hasDarkOverrides, setTheme, theme]
+  );
   const diagnostics = useMemo(
     () => colors.map((key) => {
-      const { base, contrast } = resolvedTheme.colors[key];
-      return { key, base, ...diagnose(key, base, contrast) };
+      const palette = resolvedColorScheme === "dark" ? resolvedTheme.dark.colors : resolvedTheme.colors;
+      const { base, contrast } = palette[key];
+      const diagnostic = diagnose(key, base, contrast, resolvedColorScheme);
+      const lightBase = resolvedTheme.colors[key].base;
+      return {
+        key,
+        base: lightBase,
+        darkBase: resolvedTheme.dark.colors[key].base,
+        ...diagnostic,
+        // In dark the picker still shows the colour as picked, but what is
+        // graded - and rendered - is its dark tone. Name it, or the badge
+        // appears to describe a colour that is not on screen.
+        detail: resolvedColorScheme === "dark" && base !== lightBase ? `In dark this renders as ${base}. ${diagnostic.detail}` : diagnostic.detail
+      };
     }),
-    [colors, resolvedTheme]
+    [colors, resolvedTheme, resolvedColorScheme]
   );
   const failing = diagnostics.filter((d) => d.grade === "fail");
   const invisible = diagnostics.filter((d) => d.edgeWarning);
@@ -275,14 +343,52 @@ var ThemeEditor = ({
         "."
       ] })
     ] }),
+    /* @__PURE__ */ jsxs(Card, { variant: "outlined", padding: "lg", className: "eidos-theme-editor-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-section__header", children: [
+        /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-section__title", id: "eidos-theme-editor-scheme", children: "Colour scheme" }),
+        /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-section__hint", children: "Your colours apply to both schemes. In dark each one is lightened until it reads on the dark page, with dark text on it - turn on separate dark colours to pick them yourself." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-rows", children: [
+        /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-row eidos-theme-editor-row--wide", children: [
+          /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-row__label", children: "Scheme" }),
+          /* @__PURE__ */ jsx("div", { className: "eidos-theme-editor-row__control", children: /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              options: SCHEME_OPTIONS,
+              value: colorScheme,
+              onChange: (value) => setColorScheme(value),
+              "aria-labelledby": "eidos-theme-editor-scheme",
+              size: "sm"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-row eidos-theme-editor-row--wide", children: [
+          /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-row__label" }),
+          /* @__PURE__ */ jsx("div", { className: "eidos-theme-editor-row__control", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              label: "Separate dark colours",
+              checked: separateDark,
+              onChange: (event) => toggleSeparateDark(event.target.checked),
+              size: "sm"
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs(Card, { variant: "outlined", padding: "lg", className: "eidos-theme-editor-section", children: [
       /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-section__header", children: [
         /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-section__title", children: "Colours" }),
-        /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-section__hint", children: "Shades, tints and foregrounds are derived from each base colour." })
+        /* @__PURE__ */ jsxs("span", { className: "eidos-theme-editor-section__hint", children: [
+          "Shades, tints and foregrounds are derived from each base colour. Contrast is measured against the ",
+          resolvedColorScheme,
+          " page."
+        ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "eidos-theme-editor-rows", children: diagnostics.map(({ key, base, grade, ratio, detail, edgeWarning }) => {
+      /* @__PURE__ */ jsx("div", { className: "eidos-theme-editor-rows", children: diagnostics.map(({ key, base, darkBase, grade, ratio, detail, edgeWarning }) => {
         const badge = GRADE_BADGE[grade];
         const overridden = theme.colors?.[key] !== void 0;
+        const darkOverridden = theme.dark?.colors?.[key] !== void 0;
         return /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-row", children: [
           /* @__PURE__ */ jsx("span", { className: "eidos-theme-editor-row__label", children: COLOR_LABELS[key] }),
           /* @__PURE__ */ jsx(
@@ -294,6 +400,15 @@ var ThemeEditor = ({
               ariaLabel: COLOR_LABELS[key]
             }
           ),
+          separateDark && /* @__PURE__ */ jsx(
+            ColorPicker,
+            {
+              value: darkBase,
+              onChange: (hex) => setDarkColor(key, hex),
+              size: "md",
+              ariaLabel: `${COLOR_LABELS[key]} (dark)`
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-row__diagnostics", children: [
             /* @__PURE__ */ jsx(Tooltip, { message: detail, children: /* @__PURE__ */ jsxs("span", { className: `eidos-theme-editor-badge eidos-theme-editor-badge--${grade}`, children: [
               /* @__PURE__ */ jsx(badge.icon, { className: "eidos-theme-editor-badge__icon" }),
@@ -304,19 +419,34 @@ var ThemeEditor = ({
               "Invisible on page"
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "eidos-theme-editor-row__actions", children: /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: RotateCcw,
-              variant: "text",
-              color: "secondary",
-              size: "sm",
-              disabled: !overridden,
-              onClick: () => resetColor(key),
-              tooltip: overridden ? `Reset ${COLOR_LABELS[key]} to the preset` : "Unchanged",
-              "aria-label": `Reset ${COLOR_LABELS[key]}`
-            }
-          ) })
+          /* @__PURE__ */ jsxs("div", { className: "eidos-theme-editor-row__actions", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: RotateCcw,
+                variant: "text",
+                color: "secondary",
+                size: "sm",
+                disabled: !overridden,
+                onClick: () => resetColor(key),
+                tooltip: overridden ? `Reset ${COLOR_LABELS[key]} to the preset` : "Unchanged",
+                "aria-label": `Reset ${COLOR_LABELS[key]}`
+              }
+            ),
+            separateDark && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: RotateCcw,
+                variant: "text",
+                color: "secondary",
+                size: "sm",
+                disabled: !darkOverridden,
+                onClick: () => resetDarkColor(key),
+                tooltip: darkOverridden ? `Use the derived dark ${COLOR_LABELS[key]} again` : "Derived from the light colour",
+                "aria-label": `Reset dark ${COLOR_LABELS[key]}`
+              }
+            )
+          ] })
         ] }, key);
       }) })
     ] }),
@@ -384,9 +514,9 @@ var ThemeEditor = ({
         Button,
         {
           variant: "outlined",
-          preIcon: copied ? "Check" : "Clipboard",
+          preIcon: copied ? Check : Clipboard,
           onClick: copyCss,
-          tooltip: "Copy the resolved tokens as a :root block you can paste into your own stylesheet",
+          tooltip: "Copy the resolved tokens - light and dark - as CSS you can paste into your own stylesheet",
           children: copied ? "Copied" : "Copy as CSS"
         }
       )
@@ -398,4 +528,4 @@ ThemeEditor.displayName = "ThemeEditor";
 export {
   ThemeEditor
 };
-//# sourceMappingURL=chunk-U5KD4BWL.js.map
+//# sourceMappingURL=chunk-DHOBGYRD.js.map

package/dist/chunk-DHOBGYRD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ThemeEditor/ThemeEditor.component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';\nimport {\n  Check,\n  CircleCheck,\n  CircleX,\n  Clipboard,\n  RotateCcw,\n  TriangleAlert,\n  Upload,\n} from 'lucide-react';\nimport { Alert } from '../Alert';\nimport { Button, IconButton } from '../Button';\nimport { Card } from '../Card';\nimport { ColorPicker } from '../ColorPicker';\nimport { SegmentedControl } from '../SegmentedControl';\nimport { Select } from '../Select';\nimport { Slider } from '../Slider';\nimport { Switch } from '../Switch';\nimport { Tooltip } from '../Tooltip';\nimport { useTheme } from '../ThemeProvider';\nimport type {\n  ColorScheme,\n  ResolvedColorScheme,\n  ThemeColorKey,\n  ThemeFontOption,\n} from '../ThemeProvider';\nimport {\n  THEME_COLOR_KEYS,\n  FONT_SCALE_MAX,\n  FONT_SCALE_MIN,\n  defaultTheme,\n} from '../ThemeProvider/ThemeProvider.tokens';\nimport {\n  CONTRAST_DARK,\n  CONTRAST_LIGHT,\n  DARK_SURFACE,\n  contrastRatio,\n  pickContrast,\n} from '../ThemeProvider/ThemeProvider.color';\nimport {\n  FONT_ACCEPT,\n  isFontStackAvailable,\n  registerFontFile,\n  subscribeToFontLoads,\n  toFontStack,\n} from '../ThemeProvider/ThemeProvider.fonts';\nimport type { ThemeEditorProps } from './ThemeEditor.types';\n\n/**\n * The page surface each scheme's diagnostics are measured against - the\n * `--surface` token's value in that scheme.\n */\nconst PAGE_SURFACE: Record<ResolvedColorScheme, string> = {\n  light: CONTRAST_LIGHT,\n  dark: DARK_SURFACE,\n};\n\nconst SCHEME_OPTIONS: { value: ColorScheme; label: string }[] = [\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n  { value: 'system', label: 'System' },\n];\n\n/** Below this, a fill is effectively invisible against the page behind it. */\nconst EDGE_MIN_RATIO = 1.5;\n\nconst COLOR_LABELS: Record<ThemeColorKey, string> = {\n  primary: 'Primary',\n  secondary: 'Secondary',\n  success: 'Success',\n  danger: 'Danger',\n  warning: 'Warning',\n  info: 'Info',\n  hyperlink: 'Hyperlink',\n};\n\n/** `hyperlink` is only ever text on a surface, so it is graded differently. */\nconst isFill = (key: ThemeColorKey): boolean => key !== 'hyperlink';\n\n/**\n * Built-in stacks, deliberately limited to fonts that can be relied on.\n *\n * A dropdown implies its entries are available, but a font stack is only a list\n * of *names* - nothing here can install a font. So the list is restricted to\n * generic families (guaranteed by CSS), `system-ui` (whatever the OS provides),\n * and the handful of genuinely web-safe faces. Fonts like Inter, which are not\n * installed anywhere by default, were removed: offering one is offering a\n * choice that silently does nothing on most machines.\n *\n * The preset is included because it is the shipped default and therefore has to\n * be representable - and note that `eidos-ui` does not ship the Plus Jakarta\n * Sans file either, so it renders only where the consumer provides it. That is\n * exactly why unavailable options are labelled as such.\n *\n * Anything beyond this belongs to the consuming app, via `fontOptions`.\n */\nconst FONT_STACKS: ThemeFontOption[] = [\n  // Taken from the preset rather than retyped, so the shipped default always\n  // matches an option exactly. A hand-copied shorter stack did not match, and\n  // the row fell back to showing a synthetic \"custom\" entry instead of the\n  // name of the font actually in use.\n  { label: 'Plus Jakarta Sans (theme default)', value: defaultTheme.typography.fontFamily! },\n  { label: 'System UI', value: \"system-ui, -apple-system, 'Segoe UI', sans-serif\" },\n  { label: 'Helvetica / Arial', value: 'Helvetica, Arial, sans-serif' },\n  { label: 'Georgia', value: \"Georgia, 'Times New Roman', serif\" },\n  { label: 'Sans-serif (generic)', value: 'sans-serif' },\n  { label: 'Serif (generic)', value: 'serif' },\n];\n\nconst MONO_STACKS: ThemeFontOption[] = [\n  { label: 'JetBrains Mono (theme default)', value: defaultTheme.typography.monoFamily! },\n  { label: 'Menlo / Consolas', value: 'Menlo, Consolas, monospace' },\n  { label: 'Courier New', value: \"'Courier New', Courier, monospace\" },\n  { label: 'Monospace (generic)', value: 'monospace' },\n];\n\ntype Grade = 'aa' | 'aa-large' | 'fail';\n\nconst gradeFor = (ratio: number): Grade => (ratio >= 4.5 ? 'aa' : ratio >= 3 ? 'aa-large' : 'fail');\n\n/** Spelled out for the middle grade, which is the one that misleads. */\nconst GRADE_CAVEAT: Partial<Record<Grade, string>> = {\n  'aa-large':\n    ' WCAG AA needs 4.5:1 for normal text and allows 3:1 only at 24px or larger - button and label text here is around 12px, so this does not pass.',\n  fail: ' Below 3:1, which fails WCAG AA at every text size.',\n};\n\n/**\n * Severity is carried by an icon and the label text, not by colour.\n *\n * These badges cannot use `Pill`, or any themed `--x-color`: the theme being\n * edited also styles this editor, so a washed-out `success` colour would render\n * the \"passes AA\" badge illegible at precisely the moment it is reporting that\n * a colour is illegible. The badge styling comes from the gray ramp, which is\n * deliberately not themeable.\n *\n * Not relying on colour alone also satisfies WCAG 1.4.1 (Use of Colour).\n */\nconst GRADE_BADGE: Record<\n  Grade,\n  { label: string; icon: React.ComponentType<{ className?: string }> }\n> = {\n  aa: { label: 'AA', icon: CircleCheck },\n  // Named for what it means in practice, not just for the threshold it clears.\n  // WCAG's relaxed 3:1 tier applies only to text at 24px (or 18.7px bold) and\n  // above, and nothing in this library is that large - `--font-size-sm` is\n  // ~12.25px at the default root size. A bare \"AA large only\" reads as a pass\n  // when for every component here it is a fail.\n  'aa-large': { label: 'Too low for body text', icon: TriangleAlert },\n  fail: { label: 'Fails AA', icon: CircleX },\n};\n\ninterface Diagnostic {\n  grade: Grade;\n  ratio: number;\n  /** What the ratio describes, for the tooltip. */\n  detail: string;\n  /** Set when the fill is too close to the page surface to be seen. */\n  edgeWarning?: string;\n}\n\nconst diagnose = (\n  key: ThemeColorKey,\n  base: string,\n  explicitContrast: string | undefined,\n  scheme: ResolvedColorScheme,\n): Diagnostic => {\n  const page = PAGE_SURFACE[scheme];\n  if (!isFill(key)) {\n    // Link text sits on the page, so the page is what it must contrast with.\n    const ratio = contrastRatio(base, page);\n    const grade = gradeFor(ratio);\n    return {\n      grade,\n      ratio,\n      detail: `Link text on the page background: ${ratio.toFixed(2)}:1 against the ${scheme} page.${GRADE_CAVEAT[grade] ?? ''}`,\n    };\n  }\n\n  const foreground = explicitContrast ?? pickContrast(base);\n  const ratio = contrastRatio(base, foreground);\n  const name = foreground.toLowerCase() === CONTRAST_DARK ? 'dark' : 'white';\n  const edge = contrastRatio(base, page);\n\n  const grade = gradeFor(ratio);\n\n  return {\n    grade,\n    ratio,\n    detail: `${name === 'white' ? 'White' : 'Near-black'} text on this fill is ${ratio.toFixed(2)}:1.${\n      explicitContrast ? ' Foreground pinned via the theme.' : ''\n    }${GRADE_CAVEAT[grade] ?? ''}`,\n    edgeWarning:\n      edge < EDGE_MIN_RATIO\n        ? `Only ${edge.toFixed(2)}:1 against the page background - this fill is barely distinguishable from the page it sits on.`\n        : undefined,\n  };\n};\n\ninterface FontRowProps {\n  label: string;\n  /** Stack currently applied, used to pick the matching option. */\n  value: string;\n  options: ThemeFontOption[];\n  mono: boolean;\n  allowUpload: boolean;\n  onChange: (stack: string) => void;\n  onUploaded: (option: ThemeFontOption, file: File, family: string) => void;\n}\n\n/** Pulls the first family out of a stack, unquoted. */\nconst firstFamily = (stack: string): string =>\n  stack\n    .split(',')[0]\n    ?.trim()\n    .replace(/^['\"]|['\"]$/g, '') || 'Custom';\n\n/**\n * One font row: a `Select` over the known stacks, an optional upload, and an\n * availability warning.\n *\n * Uses `Select` rather than `Combobox` deliberately. `Combobox` filters its\n * options against the text in the field, and the field holds a full font stack\n * (`'Plus Jakarta Sans', -apple-system, …`) which matches no option label - so\n * the list read \"No results found\" until the text was cleared by hand. A font\n * is a choice from a known set, not a search.\n */\nconst FontRow: React.FC<FontRowProps> = ({\n  label,\n  value,\n  options,\n  mono,\n  allowUpload,\n  onChange,\n  onUploaded,\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  // Web fonts load asynchronously, so the first render always sees them as\n  // unavailable. Without re-checking once they arrive, the row would sit on a\n  // stale \"not installed\" warning for a font that is rendering perfectly.\n  // The reducer exists only to schedule that re-render; its value is unused.\n  const [, onFontsLoaded] = useReducer((count: number) => count + 1, 0);\n  useEffect(() => subscribeToFontLoads(onFontsLoaded), [onFontsLoaded]);\n\n  const baseOptions = useMemo(() => {\n    // A stack the theme carries but that isn't in the list (loaded by the host\n    // app, or set programmatically) still needs to be selectable, labelled with\n    // its own first family so the row names the font actually in use.\n    const known = options.some((o) => o.value === value);\n    return known ? options : [...options, { label: `${firstFamily(value)} (custom)`, value }];\n  }, [options, value]);\n\n  // Probed on every render rather than memoised: availability changes over time\n  // as fonts load, so a cached answer is a wrong answer. Four canvas\n  // measurements are far cheaper than getting this wrong.\n  //\n  // Availability is annotated per option rather than filtered or disabled. A\n  // theme is shared across machines, so a font present here may be absent for\n  // the next user - and vice versa, which would mean hiding a font someone\n  // legitimately wants. Annotating keeps every choice selectable while making\n  // the list stop implying that a name is a guarantee.\n  const selectOptions = baseOptions.map((option) => ({\n    id: option.value,\n    label: isFontStackAvailable(option.value) ? option.label : `${option.label} - not installed`,\n    value: option.value,\n  }));\n\n  const handleFile = useCallback(\n    async (file: File | undefined) => {\n      if (!file) return;\n      setError(null);\n      try {\n        const family = await registerFontFile(file);\n        const stack = toFontStack(family, mono);\n        onUploaded({ label: `${family} (this session)`, value: stack }, file, family);\n        onChange(stack);\n      } catch (cause) {\n        setError(\n          cause instanceof Error ? cause.message : 'That file could not be loaded as a font.',\n        );\n      }\n    },\n    [mono, onChange, onUploaded],\n  );\n\n  const unavailable = !isFontStackAvailable(value);\n\n  return (\n    <div className=\"eidos-theme-editor-row eidos-theme-editor-row--wide\">\n      <span className=\"eidos-theme-editor-row__label\">{label}</span>\n\n      <div className=\"eidos-theme-editor-row__control\">\n        <Select\n          options={selectOptions}\n          value={value}\n          onChange={(next) => onChange(Array.isArray(next) ? next[0] : next)}\n          fullWidth\n          // The row's visible label is a `<span>`, not a `<label htmlFor>`,\n          // so nothing associates it with the control. Naming the input\n          // directly keeps the two in step without restructuring the row.\n          inputProps={{ 'aria-label': label }}\n        />\n      </div>\n\n      {/* Occasional - lives before the action so it can never displace it. */}\n      <div className=\"eidos-theme-editor-row__diagnostics\">\n        {unavailable && (\n          <Tooltip\n            message={`${firstFamily(value)} isn't available here, so the browser is rendering the next family in the stack instead. Upload the file, or have your app serve it, to use it.`}\n          >\n            <span className=\"eidos-theme-editor-badge eidos-theme-editor-badge--aa-large\">\n              <TriangleAlert className=\"eidos-theme-editor-badge__icon\" />\n              Not installed\n            </span>\n          </Tooltip>\n        )}\n        {error && (\n          <Tooltip message={error}>\n            <span className=\"eidos-theme-editor-badge eidos-theme-editor-badge--fail\">\n              <CircleX className=\"eidos-theme-editor-badge__icon\" />\n              Upload failed\n            </span>\n          </Tooltip>\n        )}\n      </div>\n\n      {allowUpload && (\n        <div className=\"eidos-theme-editor-row__actions\">\n          <Button\n            variant=\"text\"\n            color=\"secondary\"\n            size=\"sm\"\n            preIcon={Upload}\n            onClick={() => inputRef.current?.click()}\n            tooltip=\"Load a font file to use it right away. Not saved - see onFontUpload to persist it.\"\n          >\n            Upload\n          </Button>\n          {/* Plain input rather than FileUpload: this is a single inline\n              action in a dense row, not a drop zone. */}\n          <input\n            ref={inputRef}\n            type=\"file\"\n            accept={FONT_ACCEPT}\n            // Same proxy pattern as `MessageComposer` - see the note there.\n            className=\"eidos-theme-editor-file\"\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            onChange={(event) => {\n              void handleFile(event.target.files?.[0]);\n              // Allow re-picking the same file after a failure.\n              event.target.value = '';\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Live editor for the active `ThemeProvider` theme.\n *\n * Renders no preview of its own: the provider writes tokens to\n * `document.documentElement`, so the surrounding page is the preview.\n *\n * Contrast readouts are diagnostics only - a colour that fails is still\n * applied. Automatically \"correcting\" a chosen colour would mean silently\n * rendering something other than what was picked.\n */\nexport const ThemeEditor: React.FC<ThemeEditorProps> = ({\n  colors = THEME_COLOR_KEYS as ThemeColorKey[],\n  fontOptions = FONT_STACKS,\n  monoFontOptions = MONO_STACKS,\n  allowFontUpload = true,\n  onFontUpload,\n  hideTypography = false,\n  hideReset = false,\n  hideCssExport = false,\n  className,\n}) => {\n  const {\n    theme,\n    resolvedTheme,\n    setTheme,\n    updateTheme,\n    resetTheme,\n    isDefault,\n    toCss,\n    colorScheme,\n    resolvedColorScheme,\n    setColorScheme,\n  } = useTheme();\n  const [copied, setCopied] = useState(false);\n\n  // Separate dark colours are opt-in: most palettes want the derived dark\n  // tones, which are accessible by construction. Starts on when the theme\n  // already carries dark overrides, so none are hidden from view.\n  const hasDarkOverrides = Object.keys(theme.dark?.colors ?? {}).length > 0;\n  const [separateDark, setSeparateDark] = useState(hasDarkOverrides);\n\n  // Fonts registered through the upload control this session. Kept local\n  // because font *data* cannot live in a ThemeConfig - see the .mdx.\n  const [uploaded, setUploaded] = useState<ThemeFontOption[]>([]);\n  const [monoUploaded, setMonoUploaded] = useState<ThemeFontOption[]>([]);\n\n  const setColor = useCallback(\n    (key: ThemeColorKey, hex: string) => {\n      const current = theme.colors?.[key];\n      // Only the base is written here. A `contrast` pinned in the theme is\n      // preserved rather than dropped, since the editor never sets one.\n      const pinned = typeof current === 'object' ? current.contrast : undefined;\n      updateTheme({ colors: { [key]: pinned ? { base: hex, contrast: pinned } : hex } });\n    },\n    [theme.colors, updateTheme],\n  );\n\n  const resetColor = useCallback(\n    (key: ThemeColorKey) => {\n      // Must go through setTheme, not updateTheme: updateTheme merges, so a key\n      // left out of the patch keeps its existing value instead of being removed.\n      // Removal is what restores the preset, since resolveTheme fills gaps.\n      const nextColors = { ...theme.colors };\n      delete nextColors[key];\n      setTheme({ ...theme, colors: nextColors });\n    },\n    [theme, setTheme],\n  );\n\n  const setDarkColor = useCallback(\n    (key: ThemeColorKey, hex: string) => updateTheme({ dark: { colors: { [key]: hex } } }),\n    [updateTheme],\n  );\n\n  const resetDarkColor = useCallback(\n    (key: ThemeColorKey) => {\n      // As `resetColor`: removing the override is what restores the derived tone.\n      const nextDark = { ...theme.dark?.colors };\n      delete nextDark[key];\n      setTheme({ ...theme, dark: { colors: nextDark } });\n    },\n    [theme, setTheme],\n  );\n\n  const toggleSeparateDark = useCallback(\n    (on: boolean) => {\n      setSeparateDark(on);\n      // Turning it off discards the overrides rather than hiding them: a\n      // hidden override would keep changing the dark scheme with no control\n      // left on screen to explain or undo it.\n      if (!on && hasDarkOverrides) setTheme({ ...theme, dark: { colors: {} } });\n    },\n    [hasDarkOverrides, setTheme, theme],\n  );\n\n  // Diagnostics follow the scheme being previewed: a colour is graded against\n  // the page it is actually on right now, with the foreground it actually has.\n  const diagnostics = useMemo(\n    () =>\n      colors.map((key) => {\n        const palette =\n          resolvedColorScheme === 'dark' ? resolvedTheme.dark.colors : resolvedTheme.colors;\n        const { base, contrast } = palette[key];\n        const diagnostic = diagnose(key, base, contrast, resolvedColorScheme);\n        const lightBase = resolvedTheme.colors[key].base;\n        return {\n          key,\n          base: lightBase,\n          darkBase: resolvedTheme.dark.colors[key].base,\n          ...diagnostic,\n          // In dark the picker still shows the colour as picked, but what is\n          // graded - and rendered - is its dark tone. Name it, or the badge\n          // appears to describe a colour that is not on screen.\n          detail:\n            resolvedColorScheme === 'dark' && base !== lightBase\n              ? `In dark this renders as ${base}. ${diagnostic.detail}`\n              : diagnostic.detail,\n        };\n      }),\n    [colors, resolvedTheme, resolvedColorScheme],\n  );\n\n  const failing = diagnostics.filter((d) => d.grade === 'fail');\n  const invisible = diagnostics.filter((d) => d.edgeWarning);\n\n  const copyCss = useCallback(() => {\n    const css = toCss();\n    const done = () => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1600);\n    };\n    if (navigator.clipboard?.writeText) {\n      navigator.clipboard.writeText(css).then(done, done);\n      return;\n    }\n    done();\n  }, [toCss]);\n\n  return (\n    <div className={['eidos-theme-editor', className].filter(Boolean).join(' ')}>\n      {(failing.length > 0 || invisible.length > 0) && (\n        <Alert variant=\"warning\" title=\"Contrast issues\">\n          {failing.length > 0 && (\n            <p>\n              Cannot reach WCAG AA (4.5:1) with either foreground:{' '}\n              {failing.map((d) => COLOR_LABELS[d.key]).join(', ')}.\n            </p>\n          )}\n          {invisible.length > 0 && (\n            <p>\n              Too close to the page background to read as a filled surface:{' '}\n              {invisible.map((d) => COLOR_LABELS[d.key]).join(', ')}.\n            </p>\n          )}\n        </Alert>\n      )}\n\n      <Card variant=\"outlined\" padding=\"lg\" className=\"eidos-theme-editor-section\">\n        <div className=\"eidos-theme-editor-section__header\">\n          <span className=\"eidos-theme-editor-section__title\" id=\"eidos-theme-editor-scheme\">\n            Colour scheme\n          </span>\n          <span className=\"eidos-theme-editor-section__hint\">\n            Your colours apply to both schemes. In dark each one is lightened until it reads on the\n            dark page, with dark text on it - turn on separate dark colours to pick them yourself.\n          </span>\n        </div>\n        <div className=\"eidos-theme-editor-rows\">\n          <div className=\"eidos-theme-editor-row eidos-theme-editor-row--wide\">\n            <span className=\"eidos-theme-editor-row__label\">Scheme</span>\n            <div className=\"eidos-theme-editor-row__control\">\n              <SegmentedControl\n                options={SCHEME_OPTIONS}\n                value={colorScheme}\n                onChange={(value) => setColorScheme(value as ColorScheme)}\n                aria-labelledby=\"eidos-theme-editor-scheme\"\n                size=\"sm\"\n              />\n            </div>\n          </div>\n          <div className=\"eidos-theme-editor-row eidos-theme-editor-row--wide\">\n            <span className=\"eidos-theme-editor-row__label\" />\n            <div className=\"eidos-theme-editor-row__control\">\n              <Switch\n                label=\"Separate dark colours\"\n                checked={separateDark}\n                onChange={(event) => toggleSeparateDark(event.target.checked)}\n                size=\"sm\"\n              />\n            </div>\n          </div>\n        </div>\n      </Card>\n\n      <Card variant=\"outlined\" padding=\"lg\" className=\"eidos-theme-editor-section\">\n        <div className=\"eidos-theme-editor-section__header\">\n          <span className=\"eidos-theme-editor-section__title\">Colours</span>\n          <span className=\"eidos-theme-editor-section__hint\">\n            Shades, tints and foregrounds are derived from each base colour. Contrast is measured\n            against the {resolvedColorScheme} page.\n          </span>\n        </div>\n\n        <div className=\"eidos-theme-editor-rows\">\n          {diagnostics.map(({ key, base, darkBase, grade, ratio, detail, edgeWarning }) => {\n            const badge = GRADE_BADGE[grade];\n            const overridden = theme.colors?.[key] !== undefined;\n            const darkOverridden = theme.dark?.colors?.[key] !== undefined;\n            return (\n              <div className=\"eidos-theme-editor-row\" key={key}>\n                <span className=\"eidos-theme-editor-row__label\">{COLOR_LABELS[key]}</span>\n\n                {/* `md` rather than `sm`: the size drives the panel's\n                    saturation/brightness canvas, and 120px is cramped for\n                    picking a lightness precisely. */}\n                <ColorPicker\n                  value={base}\n                  onChange={(hex) => setColor(key, hex)}\n                  size=\"md\"\n                  // The row draws its own visible label, so the picker must\n                  // not draw a second one - but without a name of its own\n                  // every picker here announced as \"Open colour picker\" and\n                  // they were indistinguishable.\n                  ariaLabel={COLOR_LABELS[key]}\n                />\n\n                {separateDark && (\n                  <ColorPicker\n                    value={darkBase}\n                    onChange={(hex) => setDarkColor(key, hex)}\n                    size=\"md\"\n                    ariaLabel={`${COLOR_LABELS[key]} (dark)`}\n                  />\n                )}\n\n                <div className=\"eidos-theme-editor-row__diagnostics\">\n                  <Tooltip message={detail}>\n                    <span className={`eidos-theme-editor-badge eidos-theme-editor-badge--${grade}`}>\n                      <badge.icon className=\"eidos-theme-editor-badge__icon\" />\n                      {`${ratio.toFixed(2)}:1 ${badge.label}`}\n                    </span>\n                  </Tooltip>\n                  {edgeWarning && (\n                    <Tooltip message={edgeWarning}>\n                      <span className=\"eidos-theme-editor-badge eidos-theme-editor-badge--fail\">\n                        <CircleX className=\"eidos-theme-editor-badge__icon\" />\n                        Invisible on page\n                      </span>\n                    </Tooltip>\n                  )}\n                </div>\n\n                <div className=\"eidos-theme-editor-row__actions\">\n                  <IconButton\n                    icon={RotateCcw}\n                    variant=\"text\"\n                    color=\"secondary\"\n                    size=\"sm\"\n                    disabled={!overridden}\n                    onClick={() => resetColor(key)}\n                    tooltip={overridden ? `Reset ${COLOR_LABELS[key]} to the preset` : 'Unchanged'}\n                    aria-label={`Reset ${COLOR_LABELS[key]}`}\n                  />\n                  {separateDark && (\n                    <IconButton\n                      icon={RotateCcw}\n                      variant=\"text\"\n                      color=\"secondary\"\n                      size=\"sm\"\n                      disabled={!darkOverridden}\n                      onClick={() => resetDarkColor(key)}\n                      tooltip={\n                        darkOverridden\n                          ? `Use the derived dark ${COLOR_LABELS[key]} again`\n                          : 'Derived from the light colour'\n                      }\n                      aria-label={`Reset dark ${COLOR_LABELS[key]}`}\n                    />\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </Card>\n\n      {!hideTypography && (\n        <Card variant=\"outlined\" padding=\"lg\" className=\"eidos-theme-editor-section\">\n          <div className=\"eidos-theme-editor-section__header\">\n            <span className=\"eidos-theme-editor-section__title\">Typography</span>\n            <span className=\"eidos-theme-editor-section__hint\">\n              A stack only names a font - upload the file to use one the browser doesn&apos;t\n              already have. Spacing is declared in <code>em</code>, so the scale moves padding with\n              the text.\n            </span>\n          </div>\n\n          <div className=\"eidos-theme-editor-rows\">\n            <FontRow\n              label=\"Body font\"\n              value={resolvedTheme.typography.fontFamily}\n              options={[...fontOptions, ...uploaded]}\n              mono={false}\n              allowUpload={allowFontUpload}\n              onChange={(fontFamily) => updateTheme({ typography: { fontFamily } })}\n              onUploaded={(option, file, family) => {\n                setUploaded((prev) => [...prev, option]);\n                onFontUpload?.(file, family, false);\n              }}\n            />\n\n            <FontRow\n              label=\"Mono font\"\n              value={resolvedTheme.typography.monoFamily}\n              options={[...monoFontOptions, ...monoUploaded]}\n              mono\n              allowUpload={allowFontUpload}\n              onChange={(monoFamily) => updateTheme({ typography: { monoFamily } })}\n              onUploaded={(option, file, family) => {\n                setMonoUploaded((prev) => [...prev, option]);\n                onFontUpload?.(file, family, true);\n              }}\n            />\n\n            <div className=\"eidos-theme-editor-row eidos-theme-editor-row--wide\">\n              <span className=\"eidos-theme-editor-row__label\">Scale</span>\n              <div className=\"eidos-theme-editor-row__control\">\n                <Slider\n                  value={resolvedTheme.typography.fontScale}\n                  min={FONT_SCALE_MIN}\n                  max={FONT_SCALE_MAX}\n                  step={0.025}\n                  showValue\n                  showMinMax\n                  unit=\"×\"\n                  onChange={(value) => updateTheme({ typography: { fontScale: value } })}\n                />\n              </div>\n            </div>\n          </div>\n        </Card>\n      )}\n\n      {(!hideReset || !hideCssExport) && (\n        <div className=\"eidos-theme-editor-actions\">\n          {!hideReset && (\n            <Button variant=\"outlined\" color=\"secondary\" disabled={isDefault} onClick={resetTheme}>\n              Reset all\n            </Button>\n          )}\n          {!hideCssExport && (\n            <Button\n              variant=\"outlined\"\n              preIcon={copied ? Check : Clipboard}\n              onClick={copyCss}\n              tooltip=\"Copy the resolved tokens - light and dark - as CSS you can paste into your own stylesheet\"\n            >\n              {copied ? 'Copied' : 'Copy as CSS'}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nThemeEditor.displayName = 'ThemeEditor';\n"],"mappings":"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","names":["ratio","grade"]}

package/dist/{chunk-YZEALKC4.cjs → chunk-E7BFBU6K.cjs}

@@ -20,6 +20,8 @@ var SegmentedControl = ({
   disabled = false,
   fullWidth = false,
   scrollButtons = "auto",
+  ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   className = ""
 }) => {
   const isControlled = value !== void 0;
@@ -128,37 +130,47 @@ var SegmentedControl = ({
     `eidos-segmented-scroll-button--${direction}`,
     `eidos-segmented-scroll-button--${size}`
   ].join(" ");
-  const track = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: trackRef, className: containerClasses, role: "radiogroup", children: options.map((opt) => {
-    const isActive = activeValue === opt.value;
-    const isDisabled = disabled || !!opt.disabled;
-    if (!opt.label && !opt.tooltip) {
-      _chunkR5WI5IGRcjs.devWarn.call(void 0, 
-        "segmented-icon-only-name",
-        `SegmentedControl: option "${opt.value}" has an icon but no \`label\` or \`tooltip\`, so it has no accessible name.`
-      );
+  const track = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: trackRef,
+      className: containerClasses,
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: options.map((opt) => {
+        const isActive = activeValue === opt.value;
+        const isDisabled = disabled || !!opt.disabled;
+        if (!opt.label && !opt.tooltip) {
+          _chunkR5WI5IGRcjs.devWarn.call(void 0, 
+            "segmented-icon-only-name",
+            `SegmentedControl: option "${opt.value}" has an icon but no \`label\` or \`tooltip\`, so it has no accessible name.`
+          );
+        }
+        const segment = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isActive,
+            disabled: isDisabled,
+            "data-value": opt.value,
+            tabIndex: isTabbable(opt.value) ? 0 : -1,
+            className: ["eidos-segmented-item", isActive && "eidos-segmented-item--active"].filter(Boolean).join(" "),
+            onClick: () => !isDisabled && handleSelect(opt.value),
+            onKeyDown: handleKeyDown,
+            "aria-label": !opt.label ? opt.tooltip : void 0,
+            children: [
+              opt.icon && _chunkR5WI5IGRcjs.renderIcon.call(void 0, opt.icon, "eidos-segmented-icon"),
+              opt.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-segmented-label", children: opt.label })
+            ]
+          },
+          opt.value
+        );
+        return opt.tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: opt.tooltip, children: segment }, opt.value) : _react2.default.cloneElement(segment, { key: opt.value });
+      })
     }
-    const segment = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "button",
-      {
-        type: "button",
-        role: "radio",
-        "aria-checked": isActive,
-        disabled: isDisabled,
-        "data-value": opt.value,
-        tabIndex: isTabbable(opt.value) ? 0 : -1,
-        className: ["eidos-segmented-item", isActive && "eidos-segmented-item--active"].filter(Boolean).join(" "),
-        onClick: () => !isDisabled && handleSelect(opt.value),
-        onKeyDown: handleKeyDown,
-        "aria-label": !opt.label ? opt.tooltip : void 0,
-        children: [
-          opt.icon && _chunkR5WI5IGRcjs.renderIcon.call(void 0, opt.icon, "eidos-segmented-icon"),
-          opt.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-segmented-label", children: opt.label })
-        ]
-      },
-      opt.value
-    );
-    return opt.tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: opt.tooltip, children: segment }, opt.value) : _react2.default.cloneElement(segment, { key: opt.value });
-  }) });
+  );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: barClasses, children: [
     showPrevButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
@@ -191,4 +203,4 @@ var SegmentedControl = ({
 
 
 exports.SegmentedControl = SegmentedControl;
-//# sourceMappingURL=chunk-YZEALKC4.cjs.map
+//# sourceMappingURL=chunk-E7BFBU6K.cjs.map

package/dist/chunk-E7BFBU6K.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-E7BFBU6K.cjs","../src/components/SegmentedControl/SegmentedControl.component.tsx"],"names":["track"],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-E7BFBU6K.cjs","sourcesContent":[null,"import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Tooltip } from '../Tooltip';\nimport { renderIcon, devWarn } from '../../utils';\nimport type { SegmentedControlProps } from './SegmentedControl.types';\n\n/**\n * SegmentedControl - a compact, single-select toggle group rendered as a pill.\n *\n * Semantics: `role=\"radiogroup\"` on the container, `role=\"radio\"` on each\n * segment. Supports controlled and uncontrolled usage.\n *\n * @example\n * ```tsx\n * // Controlled\n * const [view, setView] = useState('list');\n * <SegmentedControl\n *   options={[\n *     { value: 'list',  icon: List,       tooltip: 'List view' },\n *     { value: 'grid',  icon: LayoutGrid, tooltip: 'Grid view' },\n *     { value: 'table', icon: Table2,     tooltip: 'Table view' },\n *   ]}\n *   value={view}\n *   onChange={setView}\n * />\n *\n * // With labels\n * <SegmentedControl\n *   options={[\n *     { value: 'day',   label: 'Day' },\n *     { value: 'week',  label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]}\n *   defaultValue=\"week\"\n *   onChange={console.log}\n * />\n * ```\n */\nexport const SegmentedControl: React.FC<SegmentedControlProps> = ({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  size = 'md',\n  color = 'primary',\n  disabled = false,\n  fullWidth = false,\n  scrollButtons = 'auto',\n  ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  className = '',\n}) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<string>(\n    defaultValue ?? options[0]?.value ?? '',\n  );\n\n  const activeValue = isControlled ? value : internalValue;\n\n  const handleSelect = (optValue: string) => {\n    if (disabled) return;\n    if (optValue === activeValue) return; // already selected\n    if (!isControlled) setInternalValue(optValue);\n    onChange?.(optValue);\n  };\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  // Roving tabindex: the group is a single tab stop, and arrow keys move\n  // within it - the WAI-ARIA radiogroup pattern, which this had none of.\n  // Every segment used to be its own tab stop, so a six-option control cost\n  // six presses to skip past.\n  //\n  // The tabbable segment is the selected one; if nothing is selected (a\n  // controlled `value` matching no option), the first enabled segment takes\n  // the stop so the group can still be reached at all.\n  const selectableValues = options.filter((opt) => !opt.disabled).map((opt) => opt.value);\n  const hasSelection = selectableValues.includes(activeValue);\n  const fallbackTabbableValue = selectableValues[0];\n\n  const isTabbable = (optValue: string) =>\n    hasSelection ? optValue === activeValue : optValue === fallbackTabbableValue;\n\n  // Selection follows focus, which is what the radio pattern specifies -\n  // unlike `Tabs`, where arrow keys only move focus. Disabled segments are\n  // skipped rather than selected-and-ignored, and both ends wrap.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || selectableValues.length === 0) return;\n\n    const currentIndex = selectableValues.indexOf(activeValue);\n    const from = currentIndex === -1 ? 0 : currentIndex;\n    let targetIndex = -1;\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      targetIndex = (from + 1) % selectableValues.length;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      targetIndex = (from - 1 + selectableValues.length) % selectableValues.length;\n    } else if (event.key === 'Home') {\n      targetIndex = 0;\n    } else if (event.key === 'End') {\n      targetIndex = selectableValues.length - 1;\n    }\n\n    if (targetIndex === -1) return;\n\n    event.preventDefault();\n    const targetValue = selectableValues[targetIndex];\n    handleSelect(targetValue);\n\n    // Focus has to follow the selection explicitly: the segment that was\n    // focused is about to lose its `tabIndex={0}` to the newly selected one,\n    // and focus does not move on its own.\n    const target = trackRef.current?.querySelector<HTMLElement>(\n      `[data-value=\"${CSS.escape(targetValue)}\"]`,\n    );\n    target?.focus();\n  };\n\n  // The selected segment can sit outside the scrollport - after a controlled\n  // `value` change, or once focus moves to a segment off screen. `scrollLeft`\n  // is set directly rather than through `scrollIntoView`, which walks the\n  // whole ancestor chain and would scroll the page vertically when the\n  // control is below the fold.\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const activeItem = track.querySelector('[aria-checked=\"true\"]') as HTMLElement | null;\n    if (!activeItem) return;\n\n    const left = activeItem.offsetLeft;\n    const right = left + activeItem.offsetWidth;\n\n    if (left < track.scrollLeft) {\n      track.scrollLeft = left;\n    } else if (right > track.scrollLeft + track.clientWidth) {\n      track.scrollLeft = right - track.clientWidth;\n    }\n  }, [activeValue]);\n\n  // Whether either end has segments hidden past it. Drives the presence of\n  // each button: none at all when the track fits, and none at the end already\n  // reached, since a button there would point at nothing.\n  const [scrollState, setScrollState] = useState({ canScrollPrev: false, canScrollNext: false });\n  const hasScrollButtons = scrollButtons !== 'none';\n\n  useEffect(() => {\n    if (!hasScrollButtons) return;\n    const track = trackRef.current;\n    if (!track) return;\n\n    const update = () => {\n      const maxScroll = track.scrollWidth - track.clientWidth;\n      // 1px of tolerance: fractional layout widths leave a sub-pixel\n      // remainder at either end that would otherwise keep a button enabled\n      // for a scroll that can no longer move anything.\n      const canScrollPrev = track.scrollLeft > 1;\n      const canScrollNext = track.scrollLeft < maxScroll - 1;\n      setScrollState((previous) =>\n        previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext\n          ? previous\n          : { canScrollPrev, canScrollNext },\n      );\n    };\n\n    update();\n    track.addEventListener('scroll', update, { passive: true });\n\n    // The track's own box stays the same width when a label reflows or a font\n    // finishes loading, so the segments have to be observed as well as the\n    // container - only their sizes tell us the track started overflowing.\n    const observer = new ResizeObserver(update);\n    observer.observe(track);\n    Array.from(track.children).forEach((child) => observer.observe(child));\n\n    return () => {\n      track.removeEventListener('scroll', update);\n      observer.disconnect();\n    };\n  }, [hasScrollButtons, options.length, size, fullWidth]);\n\n  const scrollByStep = (direction: -1 | 1) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    // A step just short of a full page keeps a segment of context on screen,\n    // the same way a paged scrollbar click does.\n    const step = track.clientWidth * 0.8;\n    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    track.scrollBy({ left: direction * step, behavior: reducedMotion ? 'auto' : 'smooth' });\n  };\n\n  const barClasses = [\n    'eidos-segmented-bar',\n    fullWidth && 'eidos-segmented-bar--full-width',\n    disabled && 'eidos-segmented-bar--disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const containerClasses = [\n    'eidos-segmented',\n    `eidos-segmented--${size}`,\n    `eidos-segmented--${color}`,\n    disabled && 'eidos-segmented--disabled',\n    fullWidth && 'eidos-segmented--full-width',\n    // With buttons, they are the affordance - a native scrollbar under a\n    // compact pill control is redundant and would break its shape.\n    hasScrollButtons && 'eidos-segmented--hide-scrollbar',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;\n  const showNextButton = hasScrollButtons && scrollState.canScrollNext;\n\n  const scrollButtonClasses = (direction: 'prev' | 'next') =>\n    [\n      'eidos-segmented-scroll-button',\n      `eidos-segmented-scroll-button--${direction}`,\n      `eidos-segmented-scroll-button--${size}`,\n    ].join(' ');\n\n  const track = (\n    <div\n      ref={trackRef}\n      className={containerClasses}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n    >\n      {options.map((opt) => {\n        const isActive = activeValue === opt.value;\n        const isDisabled = disabled || !!opt.disabled;\n\n        // An icon-only segment has no text to be named by. `tooltip` wraps\n        // it in a `Tooltip`, which contributes nothing to the accessible\n        // name, so such a segment was announced as just \"radio\" - identical\n        // to every other segment, making the group unusable by voice or\n        // screen reader. Same fallback as `Button`.\n        if (!opt.label && !opt.tooltip) {\n          devWarn(\n            'segmented-icon-only-name',\n            `SegmentedControl: option \"${opt.value}\" has an icon but no \\`label\\` or \\`tooltip\\`, so it has no accessible name.`,\n          );\n        }\n\n        const segment = (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isActive}\n            disabled={isDisabled}\n            // Read back by the keyboard handler to move focus onto the newly\n            // selected segment, which `value` alone can't identify in the DOM.\n            data-value={opt.value}\n            tabIndex={isTabbable(opt.value) ? 0 : -1}\n            className={['eidos-segmented-item', isActive && 'eidos-segmented-item--active']\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => !isDisabled && handleSelect(opt.value)}\n            onKeyDown={handleKeyDown}\n            aria-label={!opt.label ? opt.tooltip : undefined}\n          >\n            {opt.icon && renderIcon(opt.icon, 'eidos-segmented-icon')}\n            {opt.label && <span className=\"eidos-segmented-label\">{opt.label}</span>}\n          </button>\n        );\n\n        return opt.tooltip ? (\n          <Tooltip key={opt.value} message={opt.tooltip}>\n            {segment}\n          </Tooltip>\n        ) : (\n          React.cloneElement(segment, { key: opt.value })\n        );\n      })}\n    </div>\n  );\n\n  // The buttons are siblings of the track, never children of it:\n  // `role=\"radiogroup\"` only accepts radios. They are also hidden from\n  // assistive tech and skipped by Tab, because they are a pointer affordance\n  // for something the keyboard already does - tabbing to a segment scrolls it\n  // into view. Same arrangement as `Tabs`.\n  return (\n    <div className={barClasses}>\n      {showPrevButton && (\n        <button\n          type=\"button\"\n          className={scrollButtonClasses('prev')}\n          onClick={() => scrollByStep(-1)}\n          // `tabIndex={-1}` keeps these out of the tab order, but it does not\n          // stop a *click* from focusing them - and focus landing inside an\n          // `aria-hidden` subtree is an error the browser reports (\"Blocked\n          // aria-hidden on an element because its descendant retained\n          // focus\"). Suppressing the default mousedown behaviour keeps the\n          // button unfocusable by pointer as well, while the click still\n          // fires. `inert` would also prevent the click, so it is not an\n          // option here.\n          onMouseDown={(event) => event.preventDefault()}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        >\n          <ChevronLeft className=\"eidos-segmented-scroll-button-icon\" />\n        </button>\n      )}\n\n      {track}\n\n      {showNextButton && (\n        <button\n          type=\"button\"\n          className={scrollButtonClasses('next')}\n          onClick={() => scrollByStep(1)}\n          onMouseDown={(event) => event.preventDefault()} // see the prev button\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        >\n          <ChevronRight className=\"eidos-segmented-scroll-button-icon\" />\n        </button>\n      )}\n    </div>\n  );\n};\n"]}