@apliteni/apliteni-ui 0.12.0 → 0.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.12.0",
+  "version": "0.23.2",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -1,3 +1,22 @@
+/* ../src/styles/reduced-motion.css */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  [data-reveal] {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}
+
 /* src/Modal.css */
 .rx-scrim {
   position: fixed;

package/react/dist/index.d.ts

@@ -12,9 +12,11 @@ type ButtonProps = {
     iconRight?: string;
     iconOnly?: boolean;
     block?: boolean;
+    /** In flight: aria-busy, disabled, and the kit's indeterminate bars. */
+    busy?: boolean;
     children?: ReactNode;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ variant, size, icon, iconRight, iconOnly, block, children, type, ...rest }: ButtonProps): react.JSX.Element;
+declare function Button({ variant, size, icon, iconRight, iconOnly, block, busy, children, type, disabled, ...rest }: ButtonProps): react.JSX.Element;
 
 declare function Badge({ variant, children }: {
     variant?: string;
@@ -55,4 +57,43 @@ declare function DataTable<T extends {
     name: string;
 }>({ columns, rows, pageSize, selected, onToggle, onTogglePage, }: DataTableProps<T>): react.JSX.Element;
 
-export { Badge, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Icon, Modal, type ModalProps };
+type SkeletonProps = {
+    /** A count of bars, or explicit widths when a ragged prose edge matters. */
+    lines?: number | string[];
+    width?: string;
+    height?: string;
+    radius?: string;
+    className?: string;
+};
+declare function Skeleton({ lines, width, height, radius, className }: SkeletonProps): react.JSX.Element;
+type SkeletonTableProps = {
+    rows?: number;
+    cols?: number;
+    head?: boolean;
+};
+declare function SkeletonTable({ rows, cols, head }: SkeletonTableProps): react.JSX.Element;
+type BusyRegionProps = {
+    busy: boolean;
+    /** Spoken while it works. */
+    label?: string;
+    /** Spoken when it finishes — the specific line ("14 invoices") beats "Loaded". */
+    message?: string;
+    /** Placeholder while busy. Defaults to a three-bar skeleton. */
+    placeholder?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+};
+declare function BusyRegion({ busy, label, message, placeholder, className, children, }: BusyRegionProps): react.JSX.Element;
+type DeniedProps = {
+    title?: string;
+    sub?: string;
+    /** The scope or role the reader is missing, verbatim. */
+    need?: string;
+    icon?: string;
+    className?: string;
+    /** Buttons. Nothing is assumed about what a reader can do next. */
+    children?: ReactNode;
+};
+declare function Denied({ title, sub, need, icon, className, children, }: DeniedProps): react.JSX.Element;
+
+export { Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, DataTable, type DataTableProps, Denied, type DeniedProps, Icon, Modal, type ModalProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps };

package/react/dist/index.js

@@ -24,8 +24,10 @@ function Button({
   iconRight,
   iconOnly,
   block,
+  busy,
   children,
   type = "button",
+  disabled,
   ...rest
 }) {
   const cls = cx(
@@ -38,11 +40,27 @@ function Button({
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
   const fallback = typeof children === "string" && children.trim() ? children.trim() : icon2;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
-  return /* @__PURE__ */ jsxs("button", { type, className: cls, ...rest, ...named, children: [
-    icon2 && /* @__PURE__ */ jsx2(Icon, { name: icon2 }),
-    !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
-    iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      className: cls,
+      disabled: disabled || busy,
+      "aria-disabled": disabled || busy ? true : void 0,
+      "aria-busy": busy ? true : void 0,
+      ...rest,
+      ...named,
+      children: [
+        icon2 && /* @__PURE__ */ jsx2(Icon, { name: icon2 }),
+        !iconOnly && children != null && /* @__PURE__ */ jsx2("span", { children }),
+        iconRight && /* @__PURE__ */ jsx2(Icon, { name: iconRight }),
+        busy && /* @__PURE__ */ jsxs("span", { className: "ui-btn__bars", children: [
+          /* @__PURE__ */ jsx2("i", {}),
+          /* @__PURE__ */ jsx2("i", {})
+        ] })
+      ]
+    }
+  );
 }
 
 // src/primitives/Badge.tsx
@@ -244,11 +262,85 @@ function DataTable({
     ] })
   ] });
 }
+
+// src/Loading.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var cx2 = (...a) => a.filter(Boolean).join(" ");
+function Skeleton({ lines = 3, width, height, radius, className }) {
+  const widths = Array.isArray(lines) ? lines : null;
+  const n = widths ? widths.length : Math.max(1, lines);
+  const styleFor = (i) => {
+    const w = widths ? widths[i] : width;
+    if (!w && !height && !radius) return void 0;
+    return { ...w && { width: w }, ...height && { height }, ...radius && { borderRadius: radius } };
+  };
+  return /* @__PURE__ */ jsx7("div", { className: cx2("ui-skel", className), "aria-hidden": "true", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx7("span", { className: "ui-skel__bar m-skeleton", style: styleFor(i) }, i)) });
+}
+function SkeletonTable({ rows = 5, cols = 4, head = true }) {
+  const cells = Array.from({ length: Math.max(1, cols) }, (_, i) => /* @__PURE__ */ jsx7("span", { className: "ui-skel__bar m-skeleton" }, i));
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "ui-skel ui-skel--table",
+      style: { "--skel-cols": Math.max(1, cols) },
+      "aria-hidden": "true",
+      children: [
+        head && /* @__PURE__ */ jsx7("div", { className: "ui-skel__row ui-skel__row--head", children: cells }),
+        Array.from({ length: Math.max(1, rows) }, (_, i) => /* @__PURE__ */ jsx7("div", { className: "ui-skel__row", children: cells }, i))
+      ]
+    }
+  );
+}
+function BusyRegion({
+  busy,
+  label = "Loading\u2026",
+  message = "Loaded",
+  placeholder,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: cx2("ui-busy", className),
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": busy,
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "ui-sr", children: busy ? label : message }),
+        /* @__PURE__ */ jsx7("div", { className: "ui-busy__body", children: busy ? placeholder ?? /* @__PURE__ */ jsx7(Skeleton, { lines: 3 }) : children })
+      ]
+    }
+  );
+}
+function Denied({
+  title = "You don\u2019t have access",
+  sub,
+  need,
+  icon: icon2 = "lock",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: cx2("ui-denied", className), children: [
+    /* @__PURE__ */ jsx7("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx7(Icon, { name: icon2 }) }),
+    /* @__PURE__ */ jsx7("div", { className: "ui-denied__title", children: title }),
+    sub && /* @__PURE__ */ jsx7("div", { className: "ui-denied__sub", children: sub }),
+    need && /* @__PURE__ */ jsxs5("div", { className: "ui-denied__need", children: [
+      "Needs ",
+      /* @__PURE__ */ jsx7("code", { className: "ui-code", children: need })
+    ] }),
+    children && /* @__PURE__ */ jsx7("div", { className: "ui-denied__actions", children })
+  ] });
+}
 export {
   Badge,
+  BusyRegion,
   Button,
   Card,
   DataTable,
+  Denied,
   Icon,
-  Modal
+  Modal,
+  Skeleton,
+  SkeletonTable
 };

package/src/assets/icons.js

@@ -1,34 +1,13 @@
-// Line-icon set — 24×24, stroke=currentColor, 1.7 weight, round caps/joins.
-// House style is Feather/Lucide (Lucide is the maintained Feather; our glyphs
-// match it 1:1). Delivery is inline SVG strings: no runtime dependency, works
-// in any framework, and every glyph inherits `currentColor` + a consistent
-// stroke so it sits right next to our type.
+// Line-icon set — 24×24, stroke=currentColor, 1.7 weight, round caps/joins,
+// Lucide house style. Delivery is inline SVG strings, so there is no runtime
+// dependency and every glyph inherits `currentColor`.
 //
 // Each value is the INNER markup; icon() wraps it in the shared <svg>. Glyphs
 // are grouped by domain — the flat ICONS map is what icon() looks up, and
 // iconCategories drives the Storybook grid.
 //
-// ---- Adding a glyph -------------------------------------------------------
-//
-// NAME it for what it depicts, not for the one place it is used: `trash`, not
-// `deleteWorkspace`. camelCase, and a modifier follows its noun — `circleX`,
-// `eyeOff`, `trendingUp` — so the family sorts together. A name is taken once;
-// a second declaration of one is a gate failure, not a merge conflict.
-//
-// GROUP it by what it depicts, again rather than by caller. `chart` lives in
-// DATA because it draws data, even when a comms panel is what renders it. If
-// two groups both look right, the glyph belongs to the one whose other members
-// it would sit beside in the catalogue. Groups are not tags: exactly one.
-//
-// PROVENANCE: the path comes from Lucide, unmodified, at the 24×24 / 1.7 house
-// stroke — that is what keeps the set looking like one hand. Say which Lucide
-// name it came from in the commit if the two differ. A hand-drawn path needs a
-// reason in the commit message, because the next person cannot tell one from a
-// traced one by looking.
-//
-// The gates: src/assets/icons.test.js holds one-group-per-glyph and the
-// emitter's numbers, and stories/guidelines/iconography.test.js holds the
-// icon-only list below. The written rules are on Guidelines / Iconography.
+// Naming, grouping and provenance, and the gates that hold them:
+// why: CONTRIBUTING.md#add-a-glyph
 
 const NAV = {
   chevronDown: '<path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round"/>',

package/src/components/account-nav.js

@@ -3,7 +3,7 @@
 // shell.js and topbar.js need it and shell.js already imports topbar.js — the
 // other direction would be a cycle. shell.js re-exports ACCOUNT_NAV, which is
 // the published name docs/library.md documents.
-// why: docs/adr/0007-one-page-shell-built-from-the-kits-own-nav.md
+// why: docs/specification.md#the-page-shell
 import { esc } from './index.js';
 
 // nav.js item objects. Labels are raw text — every nav primitive escapes, so a

package/src/components/confirm.js

@@ -3,18 +3,13 @@
 //   container.innerHTML = confirm({ title, body, confirmLabel, cancelLabel });
 //   wireConfirm(container);   // scrim/Esc/answers + focus trap
 //
-// A page trigger opens it by id:  <button data-confirm-open="ID">…</button>
-// (or call openConfirm(rootEl) directly). Pass `open: true` to render it already
-// open, or `specimen: true` for a picture of one on a documentation page.
+// A page trigger opens it by id: <button data-confirm-open="ID">. Answering is
+// the caller's job — a listener on [data-confirm-accept] is where the
+// destructive work goes — and focus opens on the SAFE answer, so a reader who
+// hits Enter out of habit keeps what they have.
 //
-// Answering is the caller's job: both answers close the dialog, and a listener
-// on [data-confirm-accept] is where the destructive work goes. Focus opens on
-// the SAFE answer, never the destructive one, so a reader who hits Enter out of
-// habit keeps what they have.
-//
-// Inertness, Escape and the focus trap come from ./overlay.js — one stack for
-// every overlay on the page, so a confirm over a drawer never has to guess which
-// of the two the keyboard belongs to.
+// Inertness, Escape and the focus trap come from ./overlay.js: one stack for
+// every overlay on the page.
 import { button, esc } from './index.js';
 import { OVERLAY_LAYER, adoptOverlay, focusablesIn, popOverlay, pushOverlay, returnFocus, syncOverlays } from './overlay.js';
 
@@ -24,23 +19,27 @@ const cx = (...a) => a.filter(Boolean).join(' ');
 let _uid = 0;
 const nextId = (p = 'confirm') => `${p}-${++_uid}`;
 
-// The public factory. Returns an HTML string; wire it with wireConfirm().
-//   title         the question — also the dialog's accessible name
-//   body          the consequence — the dialog's accessible description
-//   confirmLabel  the destructive answer (default 'Confirm')
-//   cancelLabel   the safe answer (default 'Cancel')
-//   variant       'danger' (default) | 'primary' — which button the answer is
-//   open          render already-open, as a real dialog: wireConfirm() adopts it
-//                 onto the overlay stack, so the page behind it goes inert, Tab
-//                 is trapped in the panel and Escape closes it
-//   specimen      render open as a *picture* of the dialog: same markup, minus
-//                 the data-confirm hook and aria-modal, so no wiring and no key
-//                 handler can reach it. A documentation page shows several at
-//                 once and none of them owns the page or answers Escape — an
-//                 answered specimen would erase itself with nothing to bring it
-//                 back, and three modal dialogs on one page trap the reader in
-//                 the first. `open` is the one to use when the dialog is real.
-//   id            root id — a [data-confirm-open="id"] trigger targets it
+/**
+ * The public factory. Returns an HTML string; wire it with wireConfirm().
+ *
+ * `specimen` renders open as a *picture* of the dialog — same markup, minus the
+ * data-confirm hook and aria-modal, so no wiring and no key handler can reach
+ * it. A documentation page shows several at once and none of them may own the
+ * page or answer Escape: an answered specimen would erase itself with nothing to
+ * bring it back, and three modal dialogs on one page trap the reader in the
+ * first. Use `open` when the dialog is real.
+ *
+ * @param {object} [o]
+ * @param {string} [o.title]         the question — also the accessible name
+ * @param {string} [o.body]          the consequence — the accessible description
+ * @param {string} [o.confirmLabel]  the destructive answer (default 'Confirm')
+ * @param {string} [o.cancelLabel]   the safe answer (default 'Cancel')
+ * @param {string} [o.variant]       'danger' (default) | 'primary'
+ * @param {boolean} [o.open]         render already-open, as a real dialog
+ * @param {boolean} [o.specimen]     render open as a picture of the dialog
+ * @param {string} [o.id]            root id a [data-confirm-open] trigger targets
+ * @returns {string} html
+ */
 export function confirm({
   title = 'Are you sure?', body = '', confirmLabel = 'Confirm', cancelLabel = 'Cancel',
   variant = 'danger', id, open = false, specimen = false,

package/src/components/drawer.js

@@ -1,19 +1,15 @@
-// Drawer — the kit's edge-anchored overlay panel (a.k.a. Sheet / Slide-over): a
-// panel that slides in from any screen edge over a scrim. Header (title + close)
-// / scrollable body / footer actions. Sizes sm|md|lg — full-height for
-// left|right, full-width for top|bottom.
+// Drawer — the kit's edge-anchored overlay panel: a panel that slides in from
+// any screen edge over a scrim. Header / scrollable body / footer actions, sizes
+// sm|md|lg along the slide axis.
 //
 //   container.innerHTML = drawer({ side: 'right', title: 'Filters', body });
 //   wireDrawer(container);   // scrim/Esc/close-button + focus trap
 //
-// A page trigger opens it by id:  <button data-drawer-open="ID">…</button>
-// (or call openDrawer(rootEl) directly). Pass `open: true` to render it already
-// open, or `specimen: true` for a picture of one on a documentation page.
-//
-// Inertness, Escape and the focus trap are shared with confirm(): both are
+// A page trigger opens it by id: <button data-drawer-open="ID">. Inertness,
+// Escape and the focus trap are shared with confirm(): both are
 // "content over a scrim, focus-trapped, Esc-dismissable", and they push onto one
-// stack in ./overlay.js so the two can never disagree about which of them the
-// keyboard currently belongs to.
+// stack in ./overlay.js, so the two can never disagree about which of them the
+// keyboard belongs to.
 import { esc, icon } from './index.js';
 import { OVERLAY_LAYER, adoptOverlay, focusablesIn, popOverlay, pushOverlay, returnFocus, syncOverlays } from './overlay.js';
 
@@ -23,23 +19,26 @@ const cx = (...a) => a.filter(Boolean).join(' ');
 let _uid = 0;
 const nextId = (p = 'drawer') => `${p}-${++_uid}`;
 
-// The public factory. Returns an HTML string; wire it with wireDrawer().
-//   side        'right' (default) | 'left' | 'top' | 'bottom' — the edge it hugs
-//   size        'sm' | 'md' (default) | 'lg' — panel extent along the slide axis
-//   title       header heading (also the dialog's accessible name)
-//   body        scrollable body HTML (trusted markup)
-//   footer      pinned footer actions HTML (trusted markup)
-//   open        render already-open, as a real panel: wireDrawer() adopts it onto
-//               the overlay stack, so the page behind it goes inert, Tab is
-//               trapped in the panel and Escape closes it
-//   specimen    render open as a *picture* of the panel: same markup, minus the
-//               data-drawer hook and aria-modal, so no wiring and no key handler
-//               can reach it. See confirm() for why a documentation page wants
-//               that; `open` is the one to use when the drawer is real.
-//   id          root id — a [data-drawer-open="id"] trigger targets it
-//   ariaLabel   accessible name when there's no visible title
-//   dismissible show the close button + allow scrim/Esc dismiss (default true)
-//   closeLabel  accessible name for the close button (default 'Close')
+/**
+ * The public factory. Returns an HTML string; wire it with wireDrawer().
+ *
+ * `specimen` renders open as a *picture* of the panel — see confirm() for why a
+ * documentation page wants that. Use `open` when the drawer is real.
+ *
+ * @param {object} [o]
+ * @param {string} [o.side]        'right' (default) | 'left' | 'top' | 'bottom'
+ * @param {string} [o.size]        'sm' | 'md' (default) | 'lg', along the slide axis
+ * @param {string} [o.title]       header heading, also the accessible name
+ * @param {string} [o.body]        scrollable body HTML (trusted markup)
+ * @param {string} [o.footer]      pinned footer actions HTML (trusted markup)
+ * @param {boolean} [o.open]       render already-open, as a real panel
+ * @param {boolean} [o.specimen]   render open as a picture of the panel
+ * @param {string} [o.id]          root id a [data-drawer-open] trigger targets
+ * @param {string} [o.ariaLabel]   accessible name when there is no visible title
+ * @param {boolean} [o.dismissible] close button + scrim/Esc dismiss (default true)
+ * @param {string} [o.closeLabel]  accessible name for the close button
+ * @returns {string} html
+ */
 export function drawer({
   side = 'right', size = 'md', title, body = '', footer = '',
   open = false, specimen = false, id, ariaLabel, dismissible = true, closeLabel = 'Close',

package/src/components/dropdown.js

@@ -1,20 +1,17 @@
-// Dropdown — the kit's one popover-list primitive. A trigger (label + optional
-// value + rotating chevron) opens a panel of item rows (label, optional
-// description, optional leading icon, optional trailing badge, selected +
-// disabled state). Two flavours share the same panel + the same open/close JS:
+// Dropdown — the kit's one popover-list primitive. A trigger opens a panel of
+// item rows; two flavours share the same panel and the same open/close JS:
 //
 //   variant: 'select'  → role="listbox" / role="option", value shown in trigger
 //   variant: 'menu'    → role="menu"    / role="menuitem", action list
 //
-// "dropdown" (not "menu" or "select") is deliberate: `menu` implies actions
-// only and `select` implies a form control bound to a value — this factory is
-// the umbrella both of those are specialisations of, and it's the word the
-// issue and the topbar already use. The topbar's version switcher and account
-// menu are thin consumers of the SAME wiring (wireDropdown) so there is exactly
-// one open/close/click-outside/Esc/keyboard implementation in the kit.
+// The name is deliberate: `menu` implies actions only and `select` implies a
+// form control bound to a value, and this factory is the umbrella both are
+// specialisations of. The topbar's version switcher and account menu are thin
+// consumers of the SAME wiring, so there is one open/close/Esc/keyboard
+// implementation in the kit.
 //
 //   container.innerHTML = dropdown({ label: 'version:', value: '…', items });
-//   wireDropdown(container);   // or let wireTopbar() do it (it calls this)
+//   wireDropdown(container);   // or let wireTopbar() do it
 import { esc, icon } from './index.js';
 
 const cx = (...a) => a.filter(Boolean).join(' ');
@@ -66,18 +63,24 @@ function ddBody({ items, sections }, listbox) {
   return (items || []).map((it) => ddItem(it, listbox)).join('');
 }
 
-// The public factory. Returns an HTML string; wire it with wireDropdown().
-//   label       muted prefix in the trigger (e.g. "version:")
-//   value       current value shown in the trigger (single-select)
-//   placeholder shown when there's no value
-//   variant     'select' (listbox) | 'menu' (default inferred from items)
-//   items       [{ label, value?, description?, icon?, badge?, selected?, disabled?, href?, danger? }]
-//   sections    [{ label, items }] — grouped alternative to items
-//   header/footer  raw HTML blocks pinned top/bottom of the panel
-//   align       'start' (default) | 'end'  — which edge the panel hugs
-//   scroll      true | maxHeight px — cap panel height and scroll
-//   open        render already-open (handy for screenshots)
-//   ariaLabel   accessible name for the panel (and trigger, if no visible text)
+/**
+ * The public factory. Returns an HTML string; wire it with wireDropdown().
+ *
+ * @param {object} [o]
+ * @param {string} [o.label]       muted prefix in the trigger (e.g. "version:")
+ * @param {string} [o.value]       current value shown in the trigger
+ * @param {string} [o.placeholder] shown when there is no value
+ * @param {string} [o.variant]     'select' (listbox) | 'menu' (inferred from items)
+ * @param {Array}  [o.items]       [{ label, value?, description?, icon?, badge?, selected?, disabled?, href?, danger? }]
+ * @param {Array}  [o.sections]    [{ label, items }] — grouped alternative to items
+ * @param {string} [o.header]      raw HTML pinned to the top of the panel
+ * @param {string} [o.footer]      raw HTML pinned to the bottom of the panel
+ * @param {string} [o.align]       'start' (default) | 'end' — the edge the panel hugs
+ * @param {boolean|number} [o.scroll] true, or a maxHeight in px, to cap and scroll
+ * @param {boolean} [o.open]       render already-open (handy for screenshots)
+ * @param {string} [o.ariaLabel]   accessible name for the panel and trigger
+ * @returns {string} html
+ */
 export function dropdown({
   label, value, placeholder = 'Select…', variant, items, sections,
   header = '', footer = '', triggerContent, triggerClass = '', chevron = true,

package/src/components/index.js

@@ -66,21 +66,17 @@ export function card({ title, sub, body = '', variant, pad, icon: ic } = {}) {
 }
 
 // ---- Segmented control ---------------------------------------------------
-// A strip of mutually exclusive toggle buttons — a filter, a unit switch, a
-// language picker. It is NOT a tablist: it controls no panel, so it must not
-// announce one. `role="toolbar"` with a roving tabindex is the honest shape —
-// one Tab stop for the whole strip, ArrowLeft/ArrowRight to move between the
-// options, Home/End to jump to the ends, and `aria-pressed` to say which is on.
-// wireTopbar() ships that keyboard behaviour (see topbar.js); the markup here
-// carries the state it reads.
+// A strip of mutually exclusive toggle buttons.
+// It is NOT a tablist: it controls no panel, so it must not announce one.
+// `role="toolbar"` with a roving tabindex is the honest shape, and wireTopbar()
+// ships the keyboard behaviour.
 //
-// When the pill drives a real change of view with content behind it, reach for
-// tabs() instead — that one owns panels and earns the tab announcement.
+// When the pill drives a real change of view, reach for tabs() instead —
+// that one owns panels and earns the tab announcement.
 //
-// `ariaLabel` names the strip. `name` seeds data-seg (a hook for callers) and
-// is deliberately not an accessible name — it is an identifier, not prose.
-// Defaults to "Options" so a strip is never left unlabelled, the same way
-// switchToggle() defaults its label.
+// `ariaLabel` names the strip. `name` seeds data-seg and is deliberately
+// not an accessible name — it is an identifier, not prose, defaulting to
+// "Options" so a strip is never left unlabelled.
 export function segmented({ options = [], active = 0, size, block, name = 'seg', ariaLabel = 'Options' } = {}) {
   const cls = cx('ui-seg', size && `ui-seg--${size}`, block && 'ui-seg--block');
   // Exactly one option holds the Tab stop. If `active` points nowhere (nothing