@apliteni/apliteni-ui 0.85.0 → 0.86.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.85.0",
+  "version": "0.86.0",
   "workspaces": [
     "react"
   ],
@@ -56,7 +56,7 @@
     "build-storybook": "storybook build -o storybook-static",
     "build": "npm run build --workspace react",
     "prepare": "npm run build",
-    "test": "for d in src stories site scripts; do [ -d \"$d\" ] || { echo \"npm test: no such directory: $d\" >&2; exit 1; }; done; node --test 'src/**/*.test.js' 'stories/**/*.test.js' 'site/**/*.test.js' 'scripts/**/*.test.js'",
+    "test": "for d in src stories site scripts; do [ -d \"$d\" ] || { echo \"npm test: no such directory: $d\" >&2; exit 1; }; done; node --test --test-reporter=spec --test-reporter-destination=stdout --test-reporter=./scripts/slow-tests.mjs --test-reporter-destination=stdout 'src/**/*.test.js' 'stories/**/*.test.js' 'site/**/*.test.js' 'scripts/**/*.test.js'",
     "tokens:sync": "node scripts/sync-brand-tokens.mjs",
     "tokens:check": "node scripts/sync-brand-tokens.mjs --check",
     "tokens:drift": "node scripts/brand-drift.mjs"

package/react/README.md

@@ -786,3 +786,36 @@ use it to stay the same whenever they run. `locale` names the months and weekday
 the trigger's trailing edge. Without `ariaLabel` the trigger's own text is its accessible
 name, so a control reading "17 September 2026" is heard as that rather than as its
 placeholder. The popover stays mounted while closed, and is `inert` while it is.
+
+## AccentPicker
+
+`AccentPicker` is a controlled group of the kit’s four accent swatches. Pass `value`
+and `onChange`; optionally pass `options` to choose a subset or its order. Values are
+`default`, `phoenix`, `ocean`, and `emerald` (`Accent`). Import the kit CSS.
+
+```tsx
+<AccentPicker value={accent} onChange={setAccent} />
+```
+
+Each button has an accessible name and a pressed state. Tab visits each choice;
+Enter and Space request a change without submitting a surrounding form. The host
+owns setting `data-accent` on the page and persisting the choice. The component does
+neither. A value outside `options` leaves every button unpressed; an empty list
+renders an empty group. Supply unique options.
+
+The group accepts native div attributes, an additional `className`, and a forwarded
+ref. Its default accessible name is “Accent”; override it with `aria-label` or
+`aria-labelledby` when multiple pickers need distinct names.
+
+It emits no `data-accent-pick` on its buttons, so a page that calls
+`wireTopbar(document)` — which a half-migrated page must, to wire its vanilla
+`footer({ switcher: accentPicker() })` — cannot adopt a picker React owns, apply the
+accent and persist it behind your `onChange`. This is the same decision `Dropdown`,
+`Drawer` and `ThemeToggle` make with their own wiring hooks.
+
+The selected swatch is marked by a tick inside the circle, in the kit's ink for a
+saturated fill. Focus is the kit ring (`--ring`) and it is the only accent edge the
+control ever draws: selection and focus are one signal each, and only focus is an
+accent. Accent names and swatch paints come from the kit's `ACCENTS` and
+`accentSwatchStyle`, which the vanilla factory also reads, so the two pickers cannot
+drift.

package/react/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { InputHTMLAttributes, ReactNode, ButtonHTMLAttributes, RefAttributes, ReactElement, AnchorHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes, SVGAttributes } from 'react';
+import { ACCENTS } from '@apliteni/apliteni-ui';
 
 declare function Icon({ name }: {
     name: string;
@@ -931,7 +932,19 @@ declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.Detail
     renderLink?: (item: SidebarNavItem, props: ComponentPropsWithoutRef<"a">) => ReactNode;
 } & react.RefAttributes<HTMLElement>>;
 
+type Accent = (typeof ACCENTS)[number];
+type AccentPickerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> & {
+    value: Accent;
+    onChange: (value: Accent) => void;
+    options?: readonly Accent[];
+};
+declare const AccentPicker: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
+    value: Accent;
+    onChange: (value: Accent) => void;
+    options?: readonly Accent[];
+} & react.RefAttributes<HTMLDivElement>>;
+
 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, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, 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, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, 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 };
+export { type Accent, AccentPicker, type AccentPickerProps, 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, DatePicker, type DatePickerMode, type DatePickerPreset, type DatePickerProps, type DatePickerRange, 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, FileDrop, type FileDropFile, type FileDropProps, type FileDropStatus, 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

@@ -3646,10 +3646,52 @@ var Success = forwardRef9(function Success2({
   );
 });
 
+// src/AccentPicker.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { ACCENTS, accentSwatchStyle } from "@apliteni/apliteni-ui";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var AccentPicker = forwardRef10(function AccentPicker2({
+  value,
+  onChange,
+  options = ACCENTS,
+  className,
+  "aria-label": label = "Accent",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx38(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: ["ui-accent-picker", className].filter(Boolean).join(" "),
+      "data-accent-group": "",
+      role: "group",
+      "aria-label": label,
+      children: options.map((accent) => {
+        const title = accent.charAt(0).toUpperCase() + accent.slice(1);
+        return /* @__PURE__ */ jsx38(
+          "button",
+          {
+            type: "button",
+            className: accent === value ? "is-active" : void 0,
+            style: accentSwatchStyle(accent),
+            "aria-pressed": accent === value,
+            "aria-label": `${title} accent`,
+            title,
+            onClick: () => onChange(accent)
+          },
+          accent
+        );
+      })
+    }
+  );
+});
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
 export {
+  AccentPicker,
   AppShell,
   BackLink,
   Badge,

package/src/components/index.js

@@ -1,4 +1,5 @@
 import { calloutIcons } from '../logic/callout.js';
+import { ACCENTS, accentSwatchStyle } from '../logic/accents.js';
 export { calloutIcons } from '../logic/callout.js';
 // apliteni-ui component factories — each returns an HTML string, matching the
 // viz/ server-render idiom so the portal can adopt them with no framework.
@@ -99,25 +100,16 @@ export function segmented({ options = [], active = 0, size, block, name = 'seg',
 }
 
 // ---- Accent picker -------------------------------------------------------
-// Each swatch is made of the tokens its accent selects: it fades from the next
-// distinct step up that accent's dark ramp down to dark --accent. Most accents
-// land on --purple-light; Nebula's is its own --accent since #157, so it walks
-// on to --purple-mid. site/chrome.mjs and site/index.html hand-keep the same
-// four strings and must change with these. Held by stories/accent-swatch.test.js,
-// which derives both sides rather than restating them. See issue #190.
-const ACCENT_SWATCH = {
-  default: 'linear-gradient(135deg,#bd8cff,#b479ff)',
-  phoenix: 'linear-gradient(135deg,#ff8a5c,#ff6a3d)',
-  ocean: 'linear-gradient(135deg,#5ab0ff,#3b9dff)',
-  emerald: 'linear-gradient(135deg,#3ad9a0,#16c98a)',
-};
+// The accent list and every swatch's paints live in ../logic/accents.js, which
+// the React picker reads too, so neither copy can drift from the other.
 // Swatches have no text and no glyph at all — the aria-label is the whole
 // accessible name, and aria-pressed carries which one is on.
-export function accentPicker({ active = 'default', options = ['default', 'phoenix', 'ocean', 'emerald'] } = {}) {
+export function accentPicker({ active = 'default', options = ACCENTS } = {}) {
   const title = (o) => o.charAt(0).toUpperCase() + o.slice(1);
+  const style = (o) => Object.entries(accentSwatchStyle(o)).map(([k, v]) => `${k}:${v}`).join(';');
   return `<div class="ui-accent-picker" data-accent-group role="group" aria-label="Accent">${options.map((o) =>
     `<button type="button" data-accent-pick="${esc(o)}"${o === active ? ' class="is-active"' : ''}`
-    + ` style="--swatch:${ACCENT_SWATCH[o] || 'transparent'}" aria-pressed="${o === active ? 'true' : 'false'}"`
+    + ` style="${style(o)}" aria-pressed="${o === active ? 'true' : 'false'}"`
     + ` aria-label="${esc(title(o))} accent" title="${esc(title(o))}"></button>`).join('')}</div>`;
 }
 

package/src/components/topbar.js

@@ -119,7 +119,8 @@ export function applyTheme(t, root = document.documentElement) {
 }
 
 const ACCENT_KEY = 'apliteni-strategy-accent';
-export const ACCENTS = ['default', 'phoenix', 'ocean', 'emerald'];
+// One list for the pickers, this wiring and the React component.
+export { ACCENTS } from '../logic/accents.js';
 
 export function applyAccent(name, root = document.documentElement) {
   if (!name || name === 'default') root.removeAttribute('data-accent');

package/src/index.d.ts

@@ -53,6 +53,10 @@ export declare function illo(name: string): string;
 export * from './motion.js';
 export declare const illoNames: string[];
 
+// The custom properties one accent swatch button carries. ACCENTS is declared
+// with the topbar wiring that re-exports it.
+export declare function accentSwatchStyle(accent: string): Record<string, string>;
+
 // Vanilla factories accept their existing option bags and return HTML.
 export declare function accentPicker(opts?: Record<string, unknown>): string;
 export declare function accountMenu(opts?: Record<string, unknown>): string;
@@ -96,7 +100,8 @@ export declare function themeName(theme: string): string;
 export declare function themeToggle(theme?: string): string;
 export declare function versionSwitcher(versions?: { label: string; meta?: string; badge?: string }[], activeIdx?: number): string;
 
-export declare const ACCENTS: string[];
+// A tuple, so React can derive its Accent union from it.
+export declare const ACCENTS: readonly ['default', 'phoenix', 'ocean', 'emerald'];
 export declare const ACCOUNT_NAV: { id: string; icon: string; label: string }[];
 export declare const RAIL_COOKIE: 'apliteni-ui-rail';
 export declare const STAT_TONES: string[];

package/src/index.js

@@ -34,3 +34,4 @@ export { filterChipText, filterChipName, filterChipUnset } from './logic/filter-
 export { PAGE_SIZES, DEFAULT_PAGE_SIZE } from './logic/pagination.js';
 export { calloutIcons } from './logic/callout.js';
 export { formatNumericValue, formatDeltaValue } from './logic/table-values.js';
+export { accentSwatchStyle } from './logic/accents.js';

package/src/logic/accents.js

@@ -0,0 +1,35 @@
+// The accents the kit ships, and the paints one accent swatch needs.
+//
+// Every copy of the picker reads this module, so there is one list and one set of
+// paints rather than a copy per renderer. src/components/index.js and
+// react/src/AccentPicker.tsx call accentSwatchStyle(); site/chrome.mjs and
+// site/index.html still hand-keep the same four gradients. Held by
+// stories/accent-swatch.test.js, which derives both sides out of src/tokens/.
+// why: docs/specification.md#react-accent-picker. See issues #190 and #429.
+export const ACCENTS = ['default', 'phoenix', 'ocean', 'emerald'];
+
+// Per accent, the gradient's two stops — each the value src/tokens/ declares for
+// that accent. The swatch gate reads the tokens and this table apart and
+// compares them.
+const PAINTS = {
+  default: { from: '#bd8cff', to: '#b479ff' },
+  phoenix: { from: '#ff8a5c', to: '#ff6a3d' },
+  ocean: { from: '#5ab0ff', to: '#3b9dff' },
+  emerald: { from: '#3ad9a0', to: '#16c98a' },
+};
+
+/**
+ * The custom properties one swatch button carries, as property → value.
+ *
+ * An accent with no entry here gets `--swatch: transparent`, which is what it
+ * had before this module existed: the strip shows an empty circle you can still
+ * press, and the swatch gate reports it by name. Selected, that circle wears the
+ * same near-black tick, which is ink for a fill rather than for the surface
+ * showing through it — a cost that belongs to the missing paints, not the mark.
+ * Painting the circle as some other accent would be worse.
+ */
+export function accentSwatchStyle(accent) {
+  const paint = PAINTS[accent];
+  if (!paint) return { '--swatch': 'transparent' };
+  return { '--swatch': `linear-gradient(135deg,${paint.from},${paint.to})` };
+}

package/src/styles/segmented.css

@@ -54,7 +54,7 @@
 .ui-seg--block { display: flex; align-self: stretch; justify-self: stretch; }
 .ui-seg--block button { flex: 1; }
 
-/* Accent picker — round colour swatches, active gets a ring */
+/* Accent picker — round colour swatches, the selected one ticked */
 .ui-accent-picker { display: inline-flex; gap: 10px; align-items: center; }
 .ui-accent-picker button {
   width: 26px;
@@ -63,13 +63,30 @@
   border: 0;
   padding: 0;
   cursor: pointer;
+  position: relative;
   background: var(--swatch, var(--accent));
   box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px var(--surface);
   transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
 }
 .ui-accent-picker button:hover { transform: scale(1.08); }
-.ui-accent-picker button.is-active {
-  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch, var(--accent));
+/* Selected is a tick inside the circle, not a second ring around it: one element
+ * carries one accent signal, and on a focusable control that signal is the kit's
+ * focus ring. The mark is the one .ui-check draws for a checked box, at the same
+ * 2px stroke, in --signal-contrast — the circle wears the accent's dark ramp in
+ * both themes, so its ink is the one for a fill, not the --accent-contrast that
+ * pairs with --accent-strong. Held by stories/accent-mark.test.js.
+ * why: docs/specification.md#react-accent-picker */
+.ui-accent-picker button.is-active::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  /* Lifted 2px: turning the box leaves the drawn corner below its middle. */
+  top: calc(50% - 2px);
+  width: 6px;
+  height: 11px;
+  border: solid var(--signal-contrast);
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -50%) rotate(45deg); /* motion: still — the turn is the tick's shape, not travel, and the mark lands with the press that asked for it. Nothing else on the swatch changes with selection, so there is no paint for it to arrive with. */
 }
 .ui-accent-picker button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }