@apliteni/apliteni-ui 0.67.0 → 0.69.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.67.0",
+  "version": "0.69.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.d.ts

@@ -483,8 +483,8 @@ declare function Segmented({ options, value, onChange, label, appearance, disabl
 
 type Filter = {
     id: string;
-    label: string;
-    value: string;
+    label: string; /** empty or absent while nothing is chosen; the chip then shows `label` */
+    value?: string;
     items: DropdownEntry[];
     disabled?: boolean;
     open?: boolean;
@@ -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: [
@@ -1938,6 +1938,7 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 
 // src/FilterBar.tsx
 import { useRef as useRef11, useState as useState7 } from "react";
+import { filterChipText, filterChipName, filterChipUnset } from "@apliteni/apliteni-ui";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters", disabled = false, busy = false, onRemove, onClear, onChange }) {
   const bar = useRef11(null);
@@ -1983,11 +1984,10 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
               /* @__PURE__ */ jsx23(
                 Dropdown,
                 {
-                  label: filter.label,
-                  value: filter.value,
                   items: filter.items,
                   variant: "select",
-                  ariaLabel: `${filter.label}: ${filter.value}`,
+                  ariaLabel: filterChipName(filter),
+                  triggerContent: /* @__PURE__ */ jsx23("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
                   open: !blocked && !filter.disabled && (opened[filter.id] && opened[filter.id].against === filter.open ? opened[filter.id].open : !!filter.open),
                   onOpenChange: (open) => setOpened((previous) => ({ ...previous, [filter.id]: { open, against: filter.open } })),
                   onSelect: (value) => {
@@ -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/components/filter-bar.js

@@ -1,12 +1,17 @@
 import { button, esc } from './index.js';
 import { dropdown, wireDropdown } from './dropdown.js';
+import { filterChipText, filterChipName, filterChipUnset } from '../logic/filter-bar.js';
 
 export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all filters', disabled = false, busy = false } = {}) {
   return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
     + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
     + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
       + `<legend class="ui-filter-bar__legend">${esc(filter.label)}</legend>`
-      + dropdown({ label: filter.label, value: filter.value, items: filter.items || [], variant: 'select', ariaLabel: `${filter.label}: ${filter.value}`, open: !!filter.open && !disabled && !busy && !filter.disabled })
+      + dropdown({ items: filter.items || [], variant: 'select',
+        // The chip prints one line; the field's name reaches a reader through the
+        // trigger's name and the chip's own legend. why: docs/specification.md#dense-financial-tables
+        triggerContent: `<span class="${filterChipUnset(filter) ? 'ui-dropdown__value is-placeholder' : 'ui-dropdown__value'}">${esc(filterChipText(filter))}</span>`,
+        ariaLabel: filterChipName(filter), open: !!filter.open && !disabled && !busy && !filter.disabled })
       + `<button type="button" class="ui-filter-bar__remove" data-filter-remove aria-label="${esc(`Remove ${filter.label} filter`)}">×</button></fieldset>`).join('')
     + `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost', disabled: !filters.length })}</span></fieldset>`;
 }
@@ -46,7 +51,18 @@ export function initFilterBar(host, options = {}) {
       if (item.getAttribute('aria-disabled') !== 'true') {
         const id = chip?.dataset.filterId, value = item.dataset.value;
         // Dropdown completes its own close/focus before the consumer replaces the markup.
-        queueMicrotask(() => emit('ui-filter-change', { id, value }));
+        queueMicrotask(() => {
+          // Dropdown writes the picked row's label into the trigger; the name it is
+          // read by follows it, so the two cannot disagree while the consumer answers.
+          const filter = (current.filters || []).find(f => f.id === id);
+          const trigger = chip?.querySelector('[data-dropdown-trigger]');
+          const span = trigger?.querySelector('.ui-dropdown__value');
+          const shown = span?.textContent;
+          if (filter && trigger) trigger.setAttribute('aria-label', filterChipName({ ...filter, value: shown }));
+          // A chip that was empty stops being a placeholder the moment it shows a pick.
+          if (span) span.classList.toggle('is-placeholder', filterChipUnset({ value: shown }));
+          emit('ui-filter-change', { id, value });
+        });
       }
     }
   };

package/src/index.d.ts

@@ -7,6 +7,9 @@ export declare function numericValue(opts?: Record<string, unknown>): string;
 export declare function deltaValue(opts?: Record<string, unknown>): string;
 export declare function filterBar(opts?: Record<string, unknown>): string;
 export declare function initFilterBar(host: Element, opts?: Record<string, unknown>): { update: (opts: Record<string, unknown>) => void; destroy: () => void };
+export declare function filterChipText(filter?: { label?: string; value?: string }): string;
+export declare function filterChipName(filter?: { label?: string; value?: string }): string;
+export declare function filterChipUnset(filter?: { value?: string }): boolean;
 export declare function segmentedNextIndex(key: string, index: number, length: number): number | null;
 export declare function icon(name: string, className?: string): string;
 export declare function snippet(opts?: Record<string, unknown>): string;

package/src/index.js

@@ -30,6 +30,7 @@ export * from './components/filter-bar.js';
 export { dropdownMatch, dropdownFiltering } from './logic/dropdown.js';
 export { SCORE, rankGroups, rankCommands, scoreCommand, paletteHotkey } from './logic/command-palette.js';
 export { segmentedNextIndex } from './logic/segmented.js';
+export { filterChipText, filterChipName, filterChipUnset } from './logic/filter-bar.js';
 export { PAGE_SIZES, DEFAULT_PAGE_SIZE } from './logic/pagination.js';
 export { calloutIcons } from './logic/callout.js';
 export { formatNumericValue, formatDeltaValue } from './logic/table-values.js';

package/src/logic/filter-bar.js

@@ -0,0 +1,29 @@
+/* What a filter chip shows, what it is called, and when it counts as unset.
+ * The chip prints the chosen value by itself — never the field's name beside it
+ * — and the field's name stands in while nothing is chosen. Both faces ask
+ * these, so a chip reads the same in vanilla and in React.
+ *
+ * `value` is display text: it is the chip's only visible line, so a consumer
+ * answers a change with text a reader can read, not a raw code.
+ * why: docs/specification.md#dense-financial-tables
+ */
+
+const text = (v) => (v == null ? '' : String(v));
+
+/** No value chosen: absent, null or the empty string. */
+export function filterChipUnset({ value } = {}) {
+  return text(value) === '';
+}
+
+/** The one line the chip prints: the value, or the field's name while unset. */
+export function filterChipText(filter = {}) {
+  return filterChipUnset(filter) ? text(filter.label) : text(filter.value);
+}
+
+/** What a reader hears: the field, and its value or the empty state. A filter
+ *  with no label is named by its value alone — "undefined" is not a name. */
+export function filterChipName(filter = {}) {
+  const field = text(filter.label);
+  if (!field) return text(filter.value);
+  return filterChipUnset(filter) ? `${field}: any` : `${field}: ${text(filter.value)}`;
+}

package/src/styles/filter-bar.css

@@ -7,7 +7,10 @@
 .ui-filter-bar:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
 
-.ui-filter-bar .ui-dropdown__pre, .ui-filter-bar .ui-dropdown__value { color: inherit; }
+.ui-filter-bar .ui-dropdown__value { color: inherit; }
+/* A chip with nothing chosen prints the field's name in the slot the value will
+   take. `:enabled` leaves a disabled chip its own ink. why: guidelines/labels-and-titles.md */
+.ui-filter-bar button:enabled .ui-dropdown__value.is-placeholder { /* muted-ink: placeholder — a filter chip with nothing chosen */ color: var(--muted); }
 
 /* A chip's panel is as wide as the chip's trigger, never the 240px floor
    .ui-dropdown__panel gives a standalone dropdown. A panel is positioned at its

package/src/styles/layout.css

@@ -441,6 +441,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