@apliteni/apliteni-ui 0.68.0 → 0.70.0

package/package.json

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

package/react/README.md

@@ -29,7 +29,7 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
-Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
 
 `Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral
 metadata or use `live` or `soon`. Its children accept React content.
@@ -477,6 +477,27 @@ class and invalid styling as appropriate:
 The frame supplies a stable ID, required state, and linked hint/error messages.
 An optional `id` lets the caller choose the control ID; it must be unique.
 
+### Search
+
+`SearchField` is the toolbar's search box: a search glyph, a native
+`type="search"` input, and no visible label, so the row keeps the height of the
+unlabelled controls beside it. `ariaLabel` is required and is the control's only
+name. It forwards its ref and the native input props, and `className` joins
+`.ui-input`. There is no clear button — see the specification for why.
+
+```tsx
+<div className="ui-toolbar">
+  <SearchField ariaLabel="Search invoices" placeholder="Vendor or number"
+    value={query} onChange={e => setQuery(e.currentTarget.value)} />
+  {/* then the filters, then the view switch */}
+</div>
+```
+
+Put it first in a `.ui-toolbar`. Above 560px it is the control there that grows
+into the slack the others leave; at 560px and below it takes a line of its own
+and the rest of the row wraps under it. Use `TextField` instead wherever the
+field stands in a form and a visible label belongs over it.
+
 ## Toast
 
 Wrap your app in `Toast`, then call `useToast()` inside it to add a notice.

package/react/dist/index.css

@@ -420,6 +420,11 @@
   box-shadow: var(--ring);
   border-radius: 4px;
 }
+.ui-table__selection input[type=checkbox]:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--ring);
+  border-radius: var(--radius-xs);
+}
 .rx-caret {
   margin-left: 2px;
   width: 16px;

package/react/dist/index.d.ts

@@ -602,6 +602,29 @@ type FileFieldProps = FieldMessage & Omit<InputHTMLAttributes<HTMLInputElement>,
 };
 declare function FileField({ label, hint, error, required, disabled, onFileChange, className, ...props }: FileFieldProps): react.JSX.Element;
 
+type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'aria-label'> & {
+    /** The control's name. A toolbar search box shows no label, so this is the
+        only name it has. */
+    ariaLabel: string;
+};
+/**
+ * The toolbar's search box: one `.ui-input-group` holding the `search` glyph and
+ * a native `type="search"` control on `.ui-input`. It has no visible label, so
+ * the row keeps the height of the unlabelled controls beside it, and no CSS of
+ * its own, so the toolbar's row rule and the field's focus ring reach it from
+ * the kit's stylesheet.
+ *
+ * No clear button. The browser paints its own near-black on the light field and
+ * white on the dark one, beside the kit's `--muted` magnifier — two glyphs, and
+ * only one answers to a token — so `input.css` suppresses it.
+ * why: docs/specification.md#react-search-field
+ */
+declare const SearchField: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-label"> & {
+    /** The control's name. A toolbar search box shows no label, so this is the
+        only name it has. */
+    ariaLabel: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type ToastNotice = {
     tone?: 'success' | 'danger' | 'warn' | 'info' | 'neutral';
     title: string;
@@ -799,4 +822,4 @@ declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.Detail
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, SearchField, type SearchFieldProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Success, SuccessCheck, type SuccessCheckProps, type SuccessCountdown, SuccessPanel, type SuccessPanelProps, type SuccessProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -79,7 +79,7 @@ var cx = (...a) => a.filter(Boolean).join(" ");
 var Button = forwardRef3(function Button2({
   variant = "secondary",
   size = "md",
-  icon: icon6,
+  icon: icon7,
   leading,
   iconRight,
   iconOnly,
@@ -143,7 +143,7 @@ var Button = forwardRef3(function Button2({
     className
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
-  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon6;
+  const fallback = typeof children === "string" && children.trim() ? children.trim() : icon7;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
   const Root = href === void 0 ? "button" : "a";
   return /* @__PURE__ */ jsxs3(
@@ -188,7 +188,7 @@ var Button = forwardRef3(function Button2({
         if (!blockKey(event)) onKeyUp?.(event);
       },
       children: [
-        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon6 && /* @__PURE__ */ jsx4(Icon, { name: icon6 }),
+        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon7 && /* @__PURE__ */ jsx4(Icon, { name: icon7 }),
         !iconOnly && renderedChildren != null && /* @__PURE__ */ jsx4("span", { className: "ui-btn__label-slot", children: /* @__PURE__ */ jsx4("span", { className: "ui-btn__label", ref: labelRef, children: renderedChildren }) }),
         iconRight && /* @__PURE__ */ jsx4(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs3("span", { className: "ui-btn__dots", "aria-hidden": "true", children: [
@@ -258,9 +258,9 @@ function Card({ title, sub, level = 2, children }) {
 // src/primitives/Callout.tsx
 import { calloutIcons, icon as kitIcon } from "@apliteni/apliteni-ui";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function Callout({ variant, icon: icon6 = calloutIcons[variant ?? "neutral"], children, actions }) {
+function Callout({ variant, icon: icon7 = calloutIcons[variant ?? "neutral"], children, actions }) {
   return /* @__PURE__ */ jsxs5("div", { className: `ui-callout${variant && variant !== "neutral" ? ` ui-callout--${variant}` : ""}`, role: variant === "danger" ? "alert" : void 0, children: [
-    /* @__PURE__ */ jsx9("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon6) } }),
+    /* @__PURE__ */ jsx9("span", { className: "ui-callout__icon", dangerouslySetInnerHTML: { __html: kitIcon(icon7) } }),
     /* @__PURE__ */ jsxs5("div", { className: "ui-callout__body", children: [
       children,
       actions != null && /* @__PURE__ */ jsx9("div", { className: "ui-toolbar ui-callout__actions", children: actions })
@@ -1429,12 +1429,12 @@ function Denied({
   title = "You don\u2019t have access",
   sub,
   need,
-  icon: icon6 = "lock",
+  icon: icon7 = "lock",
   className,
   children
 }) {
   return /* @__PURE__ */ jsxs14("div", { className: cx4("ui-denied", className), children: [
-    /* @__PURE__ */ jsx18("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx18(Icon, { name: icon6 }) }),
+    /* @__PURE__ */ jsx18("div", { className: "ui-denied__seal", children: /* @__PURE__ */ jsx18(Icon, { name: icon7 }) }),
     /* @__PURE__ */ jsx18("div", { className: "ui-denied__title", children: title }),
     sub && /* @__PURE__ */ jsx18("div", { className: "ui-denied__sub", children: sub }),
     need && /* @__PURE__ */ jsxs14("div", { className: "ui-denied__need", children: [
@@ -2362,10 +2362,30 @@ function FileField({ label, hint, error, required, disabled, onFileChange, class
   ) });
 }
 
+// src/SearchField.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { icon as icon5 } from "@apliteni/apliteni-ui";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+var SearchField = forwardRef7(function SearchField2({ ariaLabel, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs24("div", { className: "ui-input-group", children: [
+    /* @__PURE__ */ jsx29("span", { className: "ui-input-group__icon", dangerouslySetInnerHTML: { __html: icon5("search") } }),
+    /* @__PURE__ */ jsx29(
+      "input",
+      {
+        ref,
+        ...props,
+        type: "search",
+        "aria-label": ariaLabel,
+        className: ["ui-input", className].filter(Boolean).join(" ")
+      }
+    )
+  ] });
+});
+
 // src/Toast.tsx
 import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useRef as useRef16, useState as useState10 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var Context = createContext2(null);
 var glyphs = { success: "circleCheck", danger: "circleX", warn: "circleAlert", info: "info", neutral: "bolt" };
 function useToast() {
@@ -2411,7 +2431,7 @@ function Notice({ notice, remove }) {
       remaining.current = Math.max(0, remaining.current - (Date.now() - started));
     };
   }, [dismiss, leaving2, notice.action, paused]);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ref: root,
@@ -2425,12 +2445,12 @@ function Notice({ notice, remove }) {
         if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
       },
       children: [
-        /* @__PURE__ */ jsx29("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx29(Icon, { name: glyphs[tone] }) }),
-        /* @__PURE__ */ jsxs24("div", { className: "ui-toast__body", children: [
-          /* @__PURE__ */ jsx29("div", { className: "ui-toast__title", children: notice.title }),
-          notice.text && /* @__PURE__ */ jsx29("div", { className: "ui-toast__text", children: notice.text })
+        /* @__PURE__ */ jsx30("span", { className: "ui-toast__icon", children: /* @__PURE__ */ jsx30(Icon, { name: glyphs[tone] }) }),
+        /* @__PURE__ */ jsxs25("div", { className: "ui-toast__body", children: [
+          /* @__PURE__ */ jsx30("div", { className: "ui-toast__title", children: notice.title }),
+          notice.text && /* @__PURE__ */ jsx30("div", { className: "ui-toast__text", children: notice.text })
         ] }),
-        notice.action && /* @__PURE__ */ jsx29(
+        notice.action && /* @__PURE__ */ jsx30(
           "button",
           {
             type: "button",
@@ -2445,8 +2465,8 @@ function Notice({ notice, remove }) {
             children: notice.action.label
           }
         ),
-        /* @__PURE__ */ jsx29("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx29(Icon, { name: "x" }) }),
-        !notice.action && /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30("button", { type: "button", className: "ui-toast__close", "aria-label": "Dismiss", disabled: leaving2, onClick: dismiss, children: /* @__PURE__ */ jsx30(Icon, { name: "x" }) }),
+        !notice.action && /* @__PURE__ */ jsx30(
           "span",
           {
             className: "ui-toast__timer is-running",
@@ -2488,10 +2508,10 @@ function Toast({ children }) {
     setEntries((current) => [...current, { id, notice, remove }]);
   }, []);
   usePublishedReach(stack2, entries.length);
-  return /* @__PURE__ */ jsxs24(Context.Provider, { value: push, children: [
+  return /* @__PURE__ */ jsxs25(Context.Provider, { value: push, children: [
     children,
     typeof document !== "undefined" && createPortal4(
-      /* @__PURE__ */ jsx29("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx29(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
+      /* @__PURE__ */ jsx30("div", { className: "ui-toast-stack rx-toast-stack", ref: stack2, children: entries.map((entry) => /* @__PURE__ */ jsx30(Notice, { notice: entry.notice, remove: entry.remove }, entry.id)) }),
       document.body
     )
   ] });
@@ -2502,9 +2522,9 @@ import { useEffect as useEffect13, useId as useId12, useState as useState12 } fr
 import { applyTheme, paletteHotkey, prism, railCollapsed, themeIcon, themeName } from "@apliteni/apliteni-ui";
 
 // src/SidebarNav.tsx
-import { forwardRef as forwardRef7, useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect12, useId as useId11, useState as useState11 } from "react";
 import { ENTRANCE_FALLBACK_MS } from "@apliteni/apliteni-ui/motion";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var badgeText = (badge) => typeof badge === "object" ? badge.text : badge;
 function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
   const uid = useId11();
@@ -2530,15 +2550,15 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
     item.disabled && "is-disabled",
     item.danger && "is-danger"
   ].filter(Boolean).join(" ");
-  const children = /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    (item.leading ?? item.icon) && /* @__PURE__ */ jsx30("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx30(Icon, { name: item.icon }) }),
-    /* @__PURE__ */ jsx30("span", { className: "ui-nav__label", children: item.label }),
-    count != null && count !== "" && /* @__PURE__ */ jsx30("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
-    group && /* @__PURE__ */ jsx30("span", { className: "ui-nav__caret", "aria-hidden": "true" })
+  const children = /* @__PURE__ */ jsxs26(Fragment7, { children: [
+    (item.leading ?? item.icon) && /* @__PURE__ */ jsx31("span", { className: "ui-nav__ic", children: item.leading ?? /* @__PURE__ */ jsx31(Icon, { name: item.icon }) }),
+    /* @__PURE__ */ jsx31("span", { className: "ui-nav__label", children: item.label }),
+    count != null && count !== "" && /* @__PURE__ */ jsx31("span", { className: `ui-nav__badge is-${typeof item.badge === "object" ? item.badge.tone ?? "neutral" : "neutral"}`, children: count }),
+    group && /* @__PURE__ */ jsx31("span", { className: "ui-nav__caret", "aria-hidden": "true" })
   ] });
   const common = { className, "aria-label": name, title: collapsed ? name : void 0, children };
-  if (group) return /* @__PURE__ */ jsxs25("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
-    /* @__PURE__ */ jsx30(
+  if (group) return /* @__PURE__ */ jsxs26("li", { className: `ui-nav__group${open ? " is-open" : ""}`, children: [
+    /* @__PURE__ */ jsx31(
       "button",
       {
         ...common,
@@ -2552,25 +2572,25 @@ function Row({ item, active, activeIs, collapsed, renderLink, sub }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx30("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx30(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
+    /* @__PURE__ */ jsx31("ul", { id: uid, className: `ui-nav__sub${entering ? " is-entering" : ""}`, hidden: !open, onAnimationEnd: () => setEntering(false), children: item.items.map((child) => /* @__PURE__ */ jsx31(Row, { item: child, active, activeIs, collapsed, renderLink, sub: true }, child.id)) })
   ] });
-  if (item.disabled) return /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30("span", { ...common, role: "link", "aria-disabled": "true" }) });
+  if (item.disabled) return /* @__PURE__ */ jsx31("li", { children: /* @__PURE__ */ jsx31("span", { ...common, role: "link", "aria-disabled": "true" }) });
   const props = {
     ...common,
     href: item.href ?? `#${item.id}`,
     target: item.target,
     "aria-current": isActive ? activeIs === "section" ? "true" : "page" : void 0
   };
-  return /* @__PURE__ */ jsx30("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx30("a", { ...props }) });
+  return /* @__PURE__ */ jsx31("li", { children: renderLink ? renderLink(item, props) : /* @__PURE__ */ jsx31("a", { ...props }) });
 }
 function Section({ section, ...props }) {
   const uid = useId11();
-  return /* @__PURE__ */ jsxs25("div", { className: "ui-nav__section", children: [
-    section.label && /* @__PURE__ */ jsx30("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
-    /* @__PURE__ */ jsx30("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx30(Row, { item, ...props }, item.id)) })
+  return /* @__PURE__ */ jsxs26("div", { className: "ui-nav__section", children: [
+    section.label && /* @__PURE__ */ jsx31("div", { className: "ui-nav__cap", id: uid, "aria-hidden": props.collapsed || void 0, children: section.label }),
+    /* @__PURE__ */ jsx31("ul", { className: "ui-nav__list", "aria-labelledby": section.label ? uid : void 0, children: section.items.map((item) => /* @__PURE__ */ jsx31(Row, { item, ...props }, item.id)) })
   ] });
 }
-var SidebarNav = forwardRef7(function SidebarNav2({
+var SidebarNav = forwardRef8(function SidebarNav2({
   items = [],
   sections,
   active,
@@ -2582,8 +2602,8 @@ var SidebarNav = forwardRef7(function SidebarNav2({
   "aria-label": label = "Sidebar",
   ...rest
 }, ref) {
-  return /* @__PURE__ */ jsxs25("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
-    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs26("nav", { ...rest, ref, "aria-label": label, className: ["ui-nav", "ui-nav--side", collapsed && "is-collapsed", className].filter(Boolean).join(" "), children: [
+    (sections?.length ? sections : [{ items }]).map((section, index) => /* @__PURE__ */ jsx31(
       Section,
       {
         section,
@@ -2594,12 +2614,12 @@ var SidebarNav = forwardRef7(function SidebarNav2({
       },
       index
     )),
-    footer && /* @__PURE__ */ jsx30("div", { className: "ui-nav__foot", children: footer })
+    footer && /* @__PURE__ */ jsx31("div", { className: "ui-nav__foot", children: footer })
   ] });
 });
 
 // src/AppShell.tsx
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var path = (value) => value.split(/[?#]/)[0].replace(/\/+$/, "") || "/";
 function AppShell({
   sections,
@@ -2672,15 +2692,15 @@ function AppShell({
       onClick: (event) => {
         if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
       },
-      children: /* @__PURE__ */ jsxs26(Fragment8, { children: [
-        /* @__PURE__ */ jsx31("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx31(Icon, { name: section.icon }) }),
-        /* @__PURE__ */ jsx31("span", { className: "ui-nav__label", children: section.label }),
-        section.count != null && /* @__PURE__ */ jsx31("span", { className: "ui-nav__badge is-neutral", children: section.count })
+      children: /* @__PURE__ */ jsxs27(Fragment8, { children: [
+        /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx32(Icon, { name: section.icon }) }),
+        /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: section.label }),
+        section.count != null && /* @__PURE__ */ jsx32("span", { className: "ui-nav__badge is-neutral", children: section.count })
       ] })
     };
-    return /* @__PURE__ */ jsx31("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx31("a", { ...linkProps }) }, section.href);
+    return /* @__PURE__ */ jsx32("li", { children: renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx32("a", { ...linkProps }) }, section.href);
   });
-  const sidebar = (items, label) => /* @__PURE__ */ jsx31(
+  const sidebar = (items, label) => /* @__PURE__ */ jsx32(
     SidebarNav,
     {
       "aria-label": label,
@@ -2692,7 +2712,7 @@ function AppShell({
         const linkProps = { ...props, onClick: (event) => {
           if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) setMore(false);
         } };
-        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx31("a", { ...linkProps });
+        return renderLink ? renderLink(section, linkProps) : /* @__PURE__ */ jsx32("a", { ...linkProps });
       }
     }
   );
@@ -2700,33 +2720,33 @@ function AppShell({
   const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
   const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
-  return /* @__PURE__ */ jsxs26("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs26("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx31("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs26("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-        brand ?? /* @__PURE__ */ jsx31("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-        /* @__PURE__ */ jsx31("span", { children: word })
+  return /* @__PURE__ */ jsxs27("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
+    /* @__PURE__ */ jsxs27("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx32("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs27("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+        brand ?? /* @__PURE__ */ jsx32("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+        /* @__PURE__ */ jsx32("span", { children: word })
       ] }) }),
       sidebar(sections, "Sections"),
-      /* @__PURE__ */ jsx31("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx31("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs26("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
-        /* @__PURE__ */ jsx31("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs26("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx31("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-          /* @__PURE__ */ jsx31("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
-          /* @__PURE__ */ jsx31("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
+      /* @__PURE__ */ jsx32("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx32("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs27("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
+        /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs27("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx32("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx32("path", { className: "ui-app__fold-seam", d: "M9 3v18" }),
+          /* @__PURE__ */ jsx32("path", { className: "ui-app__fold-arrow", d: "m16 15-3-3 3-3" })
         ] }) }),
-        /* @__PURE__ */ jsx31("span", { className: "ui-nav__label", children: foldLabel })
+        /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: foldLabel })
       ] }) }) })
     ] }),
-    /* @__PURE__ */ jsxs26("div", { className: "ui-app__well", children: [
-      /* @__PURE__ */ jsxs26("header", { className: "ui-app__bar", children: [
-        /* @__PURE__ */ jsxs26("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
-          /* @__PURE__ */ jsx31("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx31(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx31("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
-          /* @__PURE__ */ jsx31("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
+    /* @__PURE__ */ jsxs27("div", { className: "ui-app__well", children: [
+      /* @__PURE__ */ jsxs27("header", { className: "ui-app__bar", children: [
+        /* @__PURE__ */ jsxs27("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
+          /* @__PURE__ */ jsx32("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx32(Icon, { name: "search" }) }),
+          /* @__PURE__ */ jsx32("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx32("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
-        /* @__PURE__ */ jsx31("span", { className: "ui-app__bar-gap" }),
+        /* @__PURE__ */ jsx32("span", { className: "ui-app__bar-gap" }),
         bandControl,
-        /* @__PURE__ */ jsx31("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx31("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
-        /* @__PURE__ */ jsx31("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32("button", { type: "button", className: "toggle", "aria-label": themeName(theme), title: themeName(theme), onClick: () => applyTheme(theme === "light" ? "dark" : "light"), children: /* @__PURE__ */ jsx32("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: themeIcon(theme) } }) }),
+        /* @__PURE__ */ jsx32("div", { className: "ui-app__user ui-app__user--bar", children: /* @__PURE__ */ jsx32(
           Dropdown,
           {
             variant: "menu",
@@ -2735,27 +2755,27 @@ function AppShell({
             ariaLabel: `Signed in as ${account.name}, ${account.email}`,
             triggerClass: "ui-app__user-trigger",
             panelClass: "ui-app__user-panel",
-            triggerContent: /* @__PURE__ */ jsx31("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
-            header: /* @__PURE__ */ jsxs26("div", { className: "ui-dropdown__head", children: [
-              /* @__PURE__ */ jsx31("b", { children: account.name }),
-              /* @__PURE__ */ jsx31("span", { children: account.email })
+            triggerContent: /* @__PURE__ */ jsx32("span", { className: "ui-app__av", "aria-hidden": "true", children: initials }),
+            header: /* @__PURE__ */ jsxs27("div", { className: "ui-dropdown__head", children: [
+              /* @__PURE__ */ jsx32("b", { children: account.name }),
+              /* @__PURE__ */ jsx32("span", { children: account.email })
             ] }),
             items: [{ label: "Sign out", icon: "logout", danger: true }],
             onSelect: onSignOut
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs26("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
-        back && /* @__PURE__ */ jsx31(BackLink, { ...back }),
-        /* @__PURE__ */ jsx31("h1", { children: title }),
-        lede && /* @__PURE__ */ jsx31("p", { className: "ui-app__sub", children: lede }),
-        actions && /* @__PURE__ */ jsx31("div", { className: "ui-react-app__actions", children: actions }),
-        /* @__PURE__ */ jsx31("div", { className: "ui-app__body", children })
+      /* @__PURE__ */ jsxs27("main", { className: `ui-app__main${width === "wide" ? " ui-app__main--wide" : ""}`, children: [
+        back && /* @__PURE__ */ jsx32(BackLink, { ...back }),
+        /* @__PURE__ */ jsx32("h1", { children: title }),
+        lede && /* @__PURE__ */ jsx32("p", { className: "ui-app__sub", children: lede }),
+        actions && /* @__PURE__ */ jsx32("div", { className: "ui-react-app__actions", children: actions }),
+        /* @__PURE__ */ jsx32("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx31("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs26("ul", { className: "ui-nav__list", children: [
+    /* @__PURE__ */ jsx32("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs27("ul", { className: "ui-nav__list", children: [
       links(visible),
-      remaining.length > 0 && /* @__PURE__ */ jsx31("li", { children: /* @__PURE__ */ jsxs26(
+      remaining.length > 0 && /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsxs27(
         "button",
         {
           type: "button",
@@ -2764,43 +2784,43 @@ function AppShell({
           "aria-expanded": more,
           onClick: () => setMore(true),
           children: [
-            /* @__PURE__ */ jsx31("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx31(Icon, { name: "moreHorizontal" }) }),
-            /* @__PURE__ */ jsx31("span", { className: "ui-nav__label", children: "More" })
+            /* @__PURE__ */ jsx32("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsx32(Icon, { name: "moreHorizontal" }) }),
+            /* @__PURE__ */ jsx32("span", { className: "ui-nav__label", children: "More" })
           ]
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx31(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
-    /* @__PURE__ */ jsx31(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
+    /* @__PURE__ */ jsx32(Drawer, { open: more, onClose: () => setMore(false), title: "More sections", side: "bottom", children: sidebar(remaining, "More sections") }),
+    /* @__PURE__ */ jsx32(CommandPalette, { ...palette ?? { groups: [{ items: sections.map((section) => ({ id: section.href, ...section })) }] }, open: search, onClose: () => setSearch(false) })
   ] });
 }
 
 // src/EmptyState.tsx
 import { icon as kitIcon2, illo } from "@apliteni/apliteni-ui";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var cases = {
   "first-run": { title: "Nothing needs you yet", sub: "New items will appear here when they need your attention.", icon: "check" },
   "no-matches": { title: "No results in this view", sub: "Try another search or clear your filters.", icon: "search" },
   "not-found": { title: "We can't find that page", sub: "Check the address or return to the home page.", icon: "folder" },
   "not-yet-built": { title: "This ships later", sub: "This screen is not available yet. Check back later.", icon: "clock" }
 };
-function EmptyState({ variant = "first-run", title, sub, icon: icon6, art, actions }) {
+function EmptyState({ variant = "first-run", title, sub, icon: icon7, art, actions }) {
   const preset = cases[variant];
   const heading = title ?? preset.title;
   const guidance = sub ?? preset.sub;
-  const glyph = icon6 ?? preset.icon;
-  return /* @__PURE__ */ jsxs27("div", { className: "ui-empty", children: [
-    art ? typeof art === "string" ? /* @__PURE__ */ jsx32("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx32("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx32("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
-    heading && /* @__PURE__ */ jsx32("div", { className: "ui-empty__title", children: heading }),
-    guidance && /* @__PURE__ */ jsx32("div", { className: "ui-empty__sub", children: guidance }),
-    actions && /* @__PURE__ */ jsx32("div", { className: "ui-empty__actions", children: actions })
+  const glyph = icon7 ?? preset.icon;
+  return /* @__PURE__ */ jsxs28("div", { className: "ui-empty", children: [
+    art ? typeof art === "string" ? /* @__PURE__ */ jsx33("div", { className: "ui-empty__art", dangerouslySetInnerHTML: { __html: /<svg/.test(art) ? art : illo(art) } }) : /* @__PURE__ */ jsx33("div", { className: "ui-empty__art", "aria-hidden": "true", children: art }) : glyph ? /* @__PURE__ */ jsx33("div", { className: "ui-empty__icon", dangerouslySetInnerHTML: { __html: kitIcon2(glyph) } }) : null,
+    heading && /* @__PURE__ */ jsx33("div", { className: "ui-empty__title", children: heading }),
+    guidance && /* @__PURE__ */ jsx33("div", { className: "ui-empty__sub", children: guidance }),
+    actions && /* @__PURE__ */ jsx33("div", { className: "ui-empty__actions", children: actions })
   ] });
 }
 
 // src/ThemeToggle.tsx
 import { useSyncExternalStore } from "react";
-import { icon as icon5 } from "@apliteni/apliteni-ui";
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { icon as icon6 } from "@apliteni/apliteni-ui";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 var STORAGE_KEY = "apliteni-strategy-theme";
 var CHOICE_EVENT = "apliteni-theme-choice";
 var THEME_INIT_SCRIPT = `(()=>{let t;try{t=localStorage.getItem('apliteni-strategy-theme')}catch{}document.documentElement.setAttribute('data-theme',t==='dark'||t==='light'?t:window.matchMedia?.('(prefers-color-scheme: light)').matches?'light':'dark')})()`;
@@ -2858,10 +2878,10 @@ function ThemeToggle({ labelled = false }) {
     }
     window.dispatchEvent(new Event(CHOICE_EVENT));
   };
-  const button = /* @__PURE__ */ jsx33("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx33("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon5(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
-  return labelled ? /* @__PURE__ */ jsxs28("span", { className: "ui-theme-toggle", children: [
+  const button = /* @__PURE__ */ jsx34("button", { type: "button", className: "toggle", "aria-label": name, title: name, onClick: toggle, children: /* @__PURE__ */ jsx34("span", { className: "ic", "aria-hidden": "true", dangerouslySetInnerHTML: { __html: icon6(theme === "auto" ? "monitor" : theme === "light" ? "sun" : "moon") } }) });
+  return labelled ? /* @__PURE__ */ jsxs29("span", { className: "ui-theme-toggle", children: [
     button,
-    /* @__PURE__ */ jsxs28("span", { children: [
+    /* @__PURE__ */ jsxs29("span", { children: [
       label,
       " theme"
     ] })
@@ -2869,11 +2889,11 @@ function ThemeToggle({ labelled = false }) {
 }
 
 // src/Success.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect14, useRef as useRef17, useState as useState13 } from "react";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
-var SuccessCheck = forwardRef8(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
+import { forwardRef as forwardRef9, useEffect as useEffect14, useRef as useRef17, useState as useState13 } from "react";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+var SuccessCheck = forwardRef9(function SuccessCheck2({ variant = "line", className, ...rest }, ref) {
   const circled = variant === "circled";
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "svg",
     {
       ...rest,
@@ -2885,18 +2905,18 @@ var SuccessCheck = forwardRef8(function SuccessCheck2({ variant = "line", classN
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        circled && /* @__PURE__ */ jsx34("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-        /* @__PURE__ */ jsx34("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
+        circled && /* @__PURE__ */ jsx35("path", { className: "ui-sx__circle", d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx35("path", { className: "ui-sx__tick", d: circled ? "M22 4L12 14.01l-3-3" : "M20 6L9 17l-5-5" })
       ]
     }
   );
 });
-var SuccessPanel = forwardRef8(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
+var SuccessPanel = forwardRef9(function SuccessPanel2({ title = "Done", sub, check = "line", className, ...rest }, ref) {
   const circled = check === "circled";
-  return /* @__PURE__ */ jsxs29("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx34("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx34(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
-    /* @__PURE__ */ jsx34("div", { className: "ui-success__title", children: title }),
-    sub && /* @__PURE__ */ jsx34("div", { className: "ui-success__sub", children: sub })
+  return /* @__PURE__ */ jsxs30("div", { ...rest, ref, className: ["ui-success", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx35("div", { className: ["ui-success__check", circled && "ui-success__check--circled"].filter(Boolean).join(" "), children: /* @__PURE__ */ jsx35(SuccessCheck, { variant: circled ? "circled" : "line" }) }),
+    /* @__PURE__ */ jsx35("div", { className: "ui-success__title", children: title }),
+    sub && /* @__PURE__ */ jsx35("div", { className: "ui-success__sub", children: sub })
   ] });
 });
 var pieces = [
@@ -2933,17 +2953,17 @@ function Countdown({ seconds, label = "Redirecting", onDone }) {
     }, 1e3);
     return () => clearInterval(timer);
   }, [seconds]);
-  return /* @__PURE__ */ jsxs29("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
-    /* @__PURE__ */ jsx34("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs29("span", { className: "ui-sx__count-text", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "ui-sx__count", "data-sx-count": "", style: { "--sx-secs": `${seconds}s` }, children: [
+    /* @__PURE__ */ jsx35("span", { className: "ui-sx__count-ring", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs30("span", { className: "ui-sx__count-text", children: [
       label,
       " in ",
-      /* @__PURE__ */ jsx34("b", { "data-sx-num": "", children: remaining }),
+      /* @__PURE__ */ jsx35("b", { "data-sx-num": "", children: remaining }),
       "s"
     ] })
   ] });
 }
-var Success = forwardRef8(function Success2({
+var Success = forwardRef9(function Success2({
   layout = "hero",
   level,
   check = "line",
@@ -2965,7 +2985,7 @@ var Success = forwardRef8(function Success2({
   const seconds = countdown?.seconds;
   const duration = seconds != null && Number.isFinite(seconds) && seconds >= 1 ? Math.floor(seconds) : 5;
   const mark = check === "circled" ? "circled" : "line";
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       role: "status",
@@ -2974,16 +2994,16 @@ var Success = forwardRef8(function Success2({
       ref,
       className: ["ui-sx", `ui-sx--${layout}`, `ui-sx--check-${mark}`, confetti && "ui-sx--confetti", className].filter(Boolean).join(" "),
       children: [
-        confetti && /* @__PURE__ */ jsx34("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
-          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx34("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
+        confetti && /* @__PURE__ */ jsx35("div", { className: "ui-sx__confetti", "aria-hidden": "true", children: pieces.map(
+          ([x, d, r, t, s], index) => /* @__PURE__ */ jsx35("i", { className: `ui-sx__piece ui-sx__piece--${t}`, style: { left: `${x}%`, "--sx-d": `${d}s`, "--sx-r": `${r}deg`, "--sx-s": s } }, index)
         ) }),
-        /* @__PURE__ */ jsxs29("div", { className: "ui-sx__inner", children: [
-          /* @__PURE__ */ jsx34("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx34(SuccessCheck, { variant: mark }) }),
-          /* @__PURE__ */ jsxs29("div", { className: "ui-sx__content", children: [
-            /* @__PURE__ */ jsx34(Heading, { className: "ui-sx__title", children: title }),
-            body && /* @__PURE__ */ jsx34("p", { className: "ui-sx__body", children: body }),
-            hasActions && /* @__PURE__ */ jsx34("div", { className: "ui-sx__actions", children: actions }),
-            countdown && /* @__PURE__ */ jsx34(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
+        /* @__PURE__ */ jsxs30("div", { className: "ui-sx__inner", children: [
+          /* @__PURE__ */ jsx35("div", { className: "ui-sx__visual", children: /* @__PURE__ */ jsx35(SuccessCheck, { variant: mark }) }),
+          /* @__PURE__ */ jsxs30("div", { className: "ui-sx__content", children: [
+            /* @__PURE__ */ jsx35(Heading, { className: "ui-sx__title", children: title }),
+            body && /* @__PURE__ */ jsx35("p", { className: "ui-sx__body", children: body }),
+            hasActions && /* @__PURE__ */ jsx35("div", { className: "ui-sx__actions", children: actions }),
+            countdown && /* @__PURE__ */ jsx35(Countdown, { seconds: duration, label: countdown.label, onDone: onCountdownEnd }, duration)
           ] })
         ] })
       ]
@@ -3024,6 +3044,7 @@ export {
   Pagination,
   Pill,
   RowIdentity,
+  SearchField,
   Segmented,
   SelectField,
   SidebarNav,

package/src/styles/callout.css

@@ -67,6 +67,7 @@
 /* Tone ink keeps actions readable on the neutral surface. */
 .ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.ui-toast__action:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
 .ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; /* muted-ink: glyph — dismiss icon */ color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
 .ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
@@ -90,6 +91,7 @@
   transform: translate(-50%, -50%);
 }
 .ui-toast__close:hover { color: var(--text); }
+.ui-toast__close:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 
 /* auto-dismiss progress bar — .is-running is added by wireToastStack() */
 .ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }

package/src/styles/card.css

@@ -58,6 +58,7 @@
 }
 /* The lift alone: the kit casts no shadow anywhere (#295), and cards are flat (#284). */
 .ui-card--interactive:hover { transform: translateY(-2px); }
+.ui-card--interactive:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
 /* card() emits the title as an h2, so the text face is named here rather than
    left to the element. why: docs/specification.md#labels-and-titles */

package/src/styles/code.css

@@ -51,6 +51,7 @@
 }
 .ui-snippet__copy:hover { color: var(--accent); }
 .ui-snippet--reveal .ui-snippet__copy:hover { color: var(--strong); }
+.ui-snippet__copy:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 .ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; }
 
 /* Shell token highlighting (matches viz/account.mjs classes) */

package/src/styles/dropdown.css

@@ -95,6 +95,15 @@
 .ui-dropdown__panel.is-end { left: auto; right: 0; }
 .ui-dropdown__panel.is-scroll { max-height: 300px; overflow-y: auto; }
 
+/* Chrome makes a scroll container a keyboard stop on its own — no tabindex, no
+   author rule — so `.is-scroll` took the browser's outline, black in light mode.
+   #457 refused that, and #487's review measured it here. Written for every panel
+   rather than the scrolling one, as the palette and the drawer write it, because
+   a panel that takes focus any other way has the same claim on the ring. The
+   ring is COMPOSED with the floating treatment rather than over it: a box-shadow
+   list replaces the whole list. why: docs/specification.md#elevation */
+.ui-dropdown__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
+
 /* Opening upward. The kit releases its own `top` here so that nothing outside
    the kit has to: an absolute box with both edges pinned is stretched between
    them, and a consumer who set `bottom` and left our `top` standing got a

package/src/styles/feedback.css

@@ -78,6 +78,7 @@
 .ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
 .ui-fbc__x { margin-left: auto; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ /* muted-ink: glyph — dismiss icon */ color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
 .ui-fbc__x:hover { color: var(--strong); }
+.ui-fbc__x:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
 .ui-fbc__qm { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
@@ -94,6 +95,7 @@
 .ui-fbbtn { font-family: var(--font-sans); font-size: calc(var(--text-sm) + 0.5px); font-weight: var(--weight-semibold); border-radius: 10px; padding: 9px 17px; cursor: pointer; border: 0; transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
 .ui-fbbtn.ghost { background: transparent; color: var(--text); }
 .ui-fbbtn.ghost:hover { color: var(--strong); background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.ui-fbbtn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .ui-fbbtn.primary { background: var(--accent-strong); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 9px; }
 .ui-fbbtn.primary:hover { filter: brightness(1.08); }
 /* Same flat pair as .ui-btn:disabled, for the same reason (#220). */

package/src/styles/footer.css

@@ -62,6 +62,7 @@
     transform var(--dur-fast) var(--ease);
 }
 .ui-footer__social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
+.ui-footer__social:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .ui-footer__social svg { width: 17px; height: 17px; display: block; }
 
 /* Link columns */
@@ -85,6 +86,7 @@
   transition: color var(--dur-fast) var(--ease);
 }
 .ui-footer__links a:hover { color: var(--footer-link-hover); }
+.ui-footer__links a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 
 /* Legal bar — shared by every variant */
 .ui-footer__bar {
@@ -102,6 +104,7 @@
 .ui-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
 .ui-footer__legal-links a { color: var(--footer-link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
 .ui-footer__legal-links a:hover { color: var(--footer-link-hover); }
+.ui-footer__legal-links a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 .ui-footer__switcher { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
 
 /* slim — a single legal row, no divider above it. */

package/src/styles/layout.css

@@ -83,6 +83,7 @@
 /* Carries the shell's class as well as its own, for the same reason the rail
    rows do (see nav.css): a host stylesheet's `a:link` is (0,1,1). */
 .ui-app .ui-app__brand { color: var(--strong); }
+.ui-app__brand:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 .ui-app__brand svg { display: block; flex: none; }
 
 /* The head band: the product's mark, and the rail's own control at the far end of
@@ -441,6 +442,13 @@
 .ui-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
 .ui-toolbar > .ui-input,
 .ui-toolbar > .ui-input-group { flex: 1 1 6rem; min-width: 0; }
+/* At one column the 6rem basis stops being a floor and becomes the field's size:
+   a row with two narrow chips beside it keeps all three on the line and cuts the
+   field's own placeholder off. why: docs/specification.md#a-toolbar-at-one-column */
+@media (max-width: 560px) {
+  .ui-toolbar > .ui-input,
+  .ui-toolbar > .ui-input-group { flex-basis: 100%; }
+}
 
 /* -- The narrow rail ------------------------------------------------------ */
 /* Below this width the rail folds to the icon strip instead of disappearing, and

package/src/styles/topbar.css

@@ -41,6 +41,9 @@
 .brand svg { display: block; flex: none; }
 /* Topbar wordmark runs a touch smaller than the auth-card lockup. */
 .topbar .brand { font-size: var(--text-sm); }
+/* The lockup is a link, so it takes focus: the shared ring, with a radius of its
+   own because the mark and the word have no box to borrow one from. #482 */
+.brand:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */
@@ -67,6 +70,7 @@
 }
 .dtsw a:hover { color: var(--strong); }
 .dtsw a.cur { color: var(--strong); background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.dtsw a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
 /* Theme toggle — a single icon-only switch (no label). */
 .toggle {
@@ -86,6 +90,7 @@
     border-color var(--dur-fast) var(--ease);
 }
 .toggle:hover { transform: translateY(-1px); border-color: var(--border-strong); }
+.toggle:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .toggle .ic { width: 17px; height: 17px; display: inline-block; color: var(--text); }
 .toggle .ic svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }
 
@@ -107,6 +112,7 @@
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .vsw__btn:hover { border-color: var(--accent); }
+.vsw__btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .vsw__btn .lbl { color: var(--text); }
 .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vsw__btn .car {
@@ -180,9 +186,14 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:155 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:164 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+/* The row is a keyboard stop: src/components/dropdown.js:554
+   `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
+   the arrow keys, and this is one. It takes the ring on its own 10px radius, the
+   same way `.amenu a` above does. #482 */
+.vopt:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .vopt .vname { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vopt .vmeta { font-size: var(--text-xs); color: var(--text); margin-top: 2px; }
 .vopt .vbadge {
@@ -221,6 +232,7 @@
   transition: border-color var(--dur-fast) var(--ease);
 }
 .acct .avatar:hover { border-color: var(--accent); }
+.avatar:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .amenu {
   position: absolute;
   right: 0; top: 44px;
@@ -259,6 +271,7 @@
 .amenu .ahead .aem { color: var(--text); font-size: calc(var(--text-xs) + 0.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer; }
 .amenu a:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.amenu a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 .amenu a.cur { color: var(--accent); }
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }