@enigmax/primitives 0.18.0 → 0.19.0

package/dist/react/palette.d.ts

@@ -1,3 +1,231 @@
-import 'react';
-export { P as PaletteContent, a as PaletteContextValue, b as PaletteField, c as PaletteFooter, d as PaletteItem, e as PaletteList, f as PaletteListProps, g as PaletteRoot, h as PaletteRootProps, i as PaletteRow, j as PaletteSection, k as PaletteTrigger, S as SearchPalette, m as SearchPaletteProps, i as SearchPaletteRow, u as usePaletteContext } from '../index-D-ARvWpQ.js';
-import '../search-CsO3L1Lw.js';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { b as SearchMatch, c as SearchOptions } from '../search-DXxY8SEH.js';
+import { R as RecentEntry } from '../palette-D7iuQh_T.js';
+
+/** One line in the palette, whatever it came from. */
+interface PaletteRow<Item> {
+    /** Stable within a render. Used for React keys and for `aria-activedescendant`. */
+    id: string;
+    /** Which group it appears under. */
+    group: string;
+    /** `item` for a result, `recent` for a memory, `action` for a row the app declared. */
+    kind: "item" | "recent" | "action";
+    item?: Item;
+    recent?: RecentEntry;
+    /** Set for a result that came from the engine, so a renderer can show the score. */
+    match?: SearchMatch<Item>;
+    /** What running this row does. The palette closes afterwards unless this returns false. */
+    onSelect?: () => void | boolean;
+    label: string;
+    description?: string;
+}
+interface PaletteContextValue<Item = unknown> {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    query: string;
+    setQuery: (query: string) => void;
+    rows: PaletteRow<Item>[];
+    active: number;
+    setActive: (index: number) => void;
+    /** Run a row: its own action, or the palette's `onSelect`, then remember it. */
+    select: (row: PaletteRow<Item> | undefined) => void;
+    /** Wipe the remembered searches. */
+    clearRecents: () => void;
+    forgetRecent: (entry: RecentEntry) => void;
+    /** True while the engine is loading or an async source is in flight. */
+    busy: boolean;
+    /** ids the parts need to point at each other. */
+    ids: {
+        field: string;
+        list: string;
+        title: string;
+    };
+    /** `Ctrl K` or `⌘ K`, whichever this platform uses. */
+    shortcutLabel: string;
+    triggerRef: {
+        current: HTMLElement | null;
+    };
+    fieldRef: {
+        current: HTMLInputElement | null;
+    };
+    rowId: (row: PaletteRow<Item>) => string;
+}
+declare function usePaletteContext<Item = unknown>(part: string): PaletteContextValue<Item>;
+
+/**
+ * The command palette: the panel that opens on Ctrl/Cmd+K, searches as you type, remembers
+ * what was searched before, and is driven entirely from the keyboard.
+ *
+ * It is a DIALOG, which is why it is its own component rather than a prop on `<Input>`: a
+ * palette is a trigger, an overlay, a focus trap, a listbox and a footer, and the thing that
+ * makes those usable together is composition. Radix draws the line in the same place, and
+ * for the same reason - one `<input>` is a component, a widget made of parts is an anatomy:
+ *
+ * ```tsx
+ * <SearchPalette.Root items={docs} keys={["title"]} onSelect={open}>
+ *     <SearchPalette.Trigger />
+ *     <SearchPalette.Content>
+ *         <SearchPalette.Field placeholder="Search the docs" />
+ *         <SearchPalette.List />
+ *         <SearchPalette.Footer />
+ *     </SearchPalette.Content>
+ * </SearchPalette.Root>
+ * ```
+ *
+ * `<SearchPalette>` on its own renders exactly that, for the case that needs no arguing
+ * with. Every part takes `asChild`, so any of them can be your own element instead.
+ *
+ * The keyboard sequence is ONE flat list across every group - a group boundary is invisible
+ * to the arrow keys - and the highlight wraps, because in a short list the row after the
+ * last one is the first, and a key that does nothing at the end reads as a frozen panel.
+ */
+interface PaletteSection<Item> {
+    label: string;
+    items: Item[];
+    /** Shown whatever the query, e.g. a list of commands. Off by default. */
+    always?: boolean;
+}
+interface PaletteRootProps<Item> {
+    /** What to search. */
+    items?: Item[];
+    /** Fields to read. Dotted paths work. */
+    keys?: SearchOptions<Item>["keys"];
+    /** Fuse.js's constructor, for fuzzy matching. Without it, a substring matcher runs. */
+    fuse?: SearchOptions<Item>["fuse"];
+    fuseOptions?: SearchOptions<Item>["fuseOptions"];
+    /** Replaces the engine outright. */
+    matcher?: SearchOptions<Item>["matcher"];
+    /** ms after the last keystroke. Default 120: a palette should feel immediate. */
+    delay?: number;
+    limit?: number;
+    /** Which group a result belongs under. One group when this is left out. */
+    groupBy?: (item: Item) => string;
+    /** The row's text. Falls back to the first string field. */
+    labelOf?: (item: Item) => string;
+    descriptionOf?: (item: Item) => string | undefined;
+    /** Rows the app always offers - commands, shortcuts, "create new". */
+    sections?: PaletteSection<Item>[];
+    /** What running a row does. Closing afterwards is the default; return false to stay. */
+    onSelect?: (item: Item) => void | boolean;
+    /** Remember what was searched, in this browser. On by default. */
+    recents?: boolean;
+    recentsKey?: string;
+    recentsLimit?: number;
+    /** The key that opens it, with Ctrl or Cmd. `null` binds nothing. Default "k". */
+    shortcut?: string | null;
+    /** Controlled open state. Leave both out for an uncontrolled palette. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    defaultOpen?: boolean;
+    /** Wording for the empty group heading of ungrouped results. Default "Results". */
+    resultsLabel?: string;
+    recentsLabel?: string;
+    children?: ReactNode;
+}
+declare function PaletteRoot<Item>({ items, keys, fuse, fuseOptions, matcher, delay, limit, groupBy, labelOf, descriptionOf, sections, onSelect, recents, recentsKey, recentsLimit, shortcut, open: openProp, onOpenChange, defaultOpen, resultsLabel, recentsLabel, children }: PaletteRootProps<Item>): ReactNode;
+interface PaletteTriggerProps extends ComponentPropsWithoutRef<"button"> {
+    asChild?: boolean;
+}
+/** Opens the palette. Carries the shortcut in `aria-keyshortcuts`, so it is announced. */
+declare function PaletteTrigger({ asChild, children, onClick, ...props }: PaletteTriggerProps): ReactNode;
+interface PaletteContentProps extends ComponentPropsWithoutRef<"div"> {
+    /** Accessible name for the dialog. Rendered for screen readers only. */
+    title?: string;
+    /** Render into `document.body`. On by default: a palette inside a clipped or
+     *  transformed ancestor is a panel nobody can see. */
+    portal?: boolean;
+    /** Rendered behind the panel. Pass null for no overlay of ours. */
+    overlayProps?: ComponentPropsWithoutRef<"div"> | null;
+    /**
+     * How long the closing animation is given before the panel leaves the DOM, in ms.
+     *
+     * It exists because a component that unmounts on close can only ever animate IN: the
+     * element is gone before a leaving animation has a frame to run. `data-state="closed"`
+     * is set first, the stylesheet animates it, and only then does it unmount. 0 removes it
+     * immediately, which is also what a reader with reduced motion gets.
+     */
+    closeDuration?: number;
+}
+/**
+ * The panel: overlay, focus trap, Escape, scroll lock, and focus handed back to the trigger.
+ *
+ * Mounted only while open, so nothing of the palette is in the document (or in the tab
+ * order) the rest of the time.
+ */
+declare function PaletteContent({ title, portal, overlayProps, closeDuration, children, ...props }: PaletteContentProps): ReactNode;
+interface PaletteFieldProps extends Omit<ComponentPropsWithoutRef<"input">, "value" | "onChange"> {
+    asChild?: boolean;
+}
+/**
+ * The query field.
+ *
+ * A `combobox` that keeps the caret while the arrows move a highlight somewhere else -
+ * which is exactly what `aria-activedescendant` is for. Without it a screen reader hears
+ * nothing move, because focus never leaves the field.
+ */
+declare function PaletteField({ asChild, onKeyDown, ...props }: PaletteFieldProps): ReactNode;
+interface PaletteListProps<Item> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    /** Render one row. The default prints its label, which is enough to be usable. */
+    children?: (row: PaletteRow<Item>, state: {
+        active: boolean;
+        index: number;
+    }) => ReactNode;
+    /** Rendered when there is nothing to show. */
+    empty?: ReactNode;
+    /** The group heading. Pass null for a flat list with no headings. */
+    heading?: ((label: string) => ReactNode) | null;
+}
+/** The results, grouped, with one flat keyboard sequence running through them. */
+declare function PaletteList<Item>({ children, empty, heading, ...props }: PaletteListProps<Item>): ReactNode;
+interface PaletteItemProps<Item> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+    row: PaletteRow<Item>;
+    index: number;
+    children?: ReactNode;
+}
+/**
+ * One row.
+ *
+ * The pointer MOVES the highlight rather than running a second one of its own: two
+ * highlights on screen is the thing that makes a palette feel unpredictable, because Enter
+ * then opens the row the mouse is not on.
+ */
+declare function PaletteItem<Item>({ row, index, children, ...props }: PaletteItemProps<Item>): ReactNode;
+interface PaletteFooterProps extends ComponentPropsWithoutRef<"div"> {
+    /** Replace the hints. The default names the three keys that actually matter. */
+    hints?: ReactNode;
+}
+/** The strip along the bottom that says which keys do what. */
+declare function PaletteFooter({ hints, children, ...props }: PaletteFooterProps): ReactNode;
+
+interface SearchPaletteProps<Item> extends PaletteRootProps<Item> {
+    placeholder?: string;
+    /** The trigger's own content. Pass null for a palette that only opens on the shortcut. */
+    trigger?: ReactNode | null;
+    /** Render one row, same signature as `SearchPalette.List`. */
+    renderItem?: PaletteListProps<Item>["children"];
+    empty?: ReactNode;
+    footer?: ReactNode;
+}
+/**
+ * The palette, assembled.
+ *
+ * ```tsx
+ * <SearchPalette items={docs} keys={["title", "body"]} onSelect={(doc) => go(doc.href)} />
+ * ```
+ *
+ * Everything it renders is a part you can render yourself instead - see `SearchPalette.Root`
+ * for the anatomy. This is the composition that covers the common case, not a different
+ * component: it is those parts, in the order they belong in.
+ */
+declare function SearchPalette<Item>({ placeholder, trigger, renderItem, empty, footer, children, ...root }: SearchPaletteProps<Item>): ReactNode;
+declare namespace SearchPalette {
+    var Root: typeof PaletteRoot;
+    var Trigger: typeof PaletteTrigger;
+    var Content: typeof PaletteContent;
+    var Field: typeof PaletteField;
+    var List: typeof PaletteList;
+    var Item: typeof PaletteItem;
+    var Footer: typeof PaletteFooter;
+}
+
+export { PaletteContent, type PaletteContextValue, PaletteField, PaletteFooter, PaletteItem, PaletteList, type PaletteListProps, PaletteRoot, type PaletteRootProps, type PaletteRow, type PaletteSection, PaletteTrigger, SearchPalette, type SearchPaletteProps, type PaletteRow as SearchPaletteRow, usePaletteContext };

package/dist/react/palette.js

@@ -1,4 +1,5 @@
 "use client";
-export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-LKA2UG4P.js';
-import '../chunk-UZFEEFMF.js';
+export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FWVWX67R.js';
+import '../chunk-DTWZDONY.js';
+import '../chunk-D5A2ZMAG.js';
 import '../chunk-HS3X3XCW.js';

package/dist/react/search.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { b as SearchMatch, c as SearchOptions } from '../search-CsO3L1Lw.js';
+import { b as SearchMatch, c as SearchOptions } from '../search-DXxY8SEH.js';
 
 interface UseSearchResult<T> {
     /** Attach to the search field, or drive it yourself with `search`. */

package/dist/react/search.js

@@ -1,3 +1,3 @@
 "use client";
-export { useSearch } from '../chunk-WSB655JB.js';
-import '../chunk-UZFEEFMF.js';
+export { useSearch } from '../chunk-QQFNAKMY.js';
+import '../chunk-D5A2ZMAG.js';

package/dist/react-router/index.d.ts

@@ -5,9 +5,9 @@ export { M as MarqueeHover, a as MarqueeInstance, b as MarqueeOptions } from '..
 export { PasswordStrength, PasswordStrengthProps, UseButtonResult, UseInputResult, getLinkComponent, setLinkComponent, useButton, useInput } from '../react/index.js';
 export { UseSearchResult, useSearch } from '../react/search.js';
 export { I as InputAction, b as InputIcon, d as InputOptions } from '../input-BwXjFenq.js';
-export { F as FuseConstructor, b as SearchMatch, c as SearchOptions } from '../search-CsO3L1Lw.js';
+export { F as FuseConstructor, a as FuseLike, S as SearchInstance, b as SearchMatch, c as SearchOptions } from '../search-DXxY8SEH.js';
 export { c as ButtonOptions, d as ButtonState } from '../button-CaXaqG_K.js';
-export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-DNXPtY9X.js';
+export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-dTdAbOWl.js';
 export { Slot, SlotProps, mergeSlotProps } from '../react/slot.js';
 export { E as EstimateOptions, G as GeneratePasswordOptions, a as PasswordScore, b as PasswordStrengthReport, e as estimatePasswordStrength, g as generatePassword } from '../password-C8lG4Zm9.js';
 export { UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications } from '../react/notifications.js';
@@ -15,11 +15,12 @@ export { ToastControls, ToastPosition, Toaster, ToasterProps } from '../react/to
 export { useNetworkState } from '../react/network.js';
 export { a as NetworkState } from '../network-D2LsBG_k.js';
 export { RelativeTime, RelativeTimeProps } from '../react/relative-time.js';
+export { R as RelativeTimeFormat, a as RelativeTimeOptions, b as RelativeTimePrecision, c as RelativeTimeStyle, d as RelativeTimeTense } from '../relative-time-YpRTG7YH.js';
+export { N as Notification, a as NotificationAction, b as NotificationInput, c as NotificationTone, e as NotificationsOptions } from '../notifications-BpVV6sel.js';
 export { Flag, FlagProps } from '../react/flag.js';
 export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-BBJc9unY.js';
-export { P as PaletteContent, a as PaletteContextValue, b as PaletteField, c as PaletteFooter, d as PaletteItem, e as PaletteList, f as PaletteListProps, g as PaletteRoot, h as PaletteRootProps, i as PaletteRow, j as PaletteSection, k as PaletteTrigger, R as RecentEntry, l as RecentStore, S as SearchPalette, m as SearchPaletteProps, n as createRecentStore, o as groupRows, p as isPaletteShortcut, q as moveActive, r as recentKey, s as shortcutLabel, u as usePaletteContext } from '../index-D-ARvWpQ.js';
-import '../notifications-BpVV6sel.js';
-import '../relative-time-YpRTG7YH.js';
+export { PaletteContent, PaletteContextValue, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteListProps, PaletteRoot, PaletteRootProps, PaletteRow, PaletteSection, PaletteTrigger, SearchPalette, SearchPaletteProps, usePaletteContext } from '../react/palette.js';
+export { R as RecentEntry, b as RecentStore, e as createRecentStore, g as groupRows, i as isPaletteShortcut, m as moveActive, r as recentKey, s as shortcutLabel } from '../palette-D7iuQh_T.js';
 
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
 

package/dist/react-router/index.js

@@ -4,7 +4,7 @@ export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
 export { Flag } from '../chunk-XNNQRA35.js';
 export { Toaster } from '../chunk-ZCUFYBPB.js';
 export { useMarquee } from '../chunk-ZWR2EXHQ.js';
-export { useSearch } from '../chunk-WSB655JB.js';
+export { useSearch } from '../chunk-QQFNAKMY.js';
 export { useNetworkState } from '../chunk-S653GLSF.js';
 export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
 export { RelativeTime } from '../chunk-OCMI7R6H.js';
@@ -15,10 +15,11 @@ import '../chunk-UOSSNUSC.js';
 import '../chunk-2QFTRNAZ.js';
 import '../chunk-SNYUBXWQ.js';
 import '../chunk-IXVMRVD4.js';
-export { Input } from '../chunk-IIT6U7LM.js';
+export { Input } from '../chunk-R4ZAEE7V.js';
 import '../chunk-F25CGNQC.js';
-export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel, usePaletteContext } from '../chunk-LKA2UG4P.js';
-import '../chunk-UZFEEFMF.js';
+export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, usePaletteContext } from '../chunk-FWVWX67R.js';
+export { createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel } from '../chunk-DTWZDONY.js';
+import '../chunk-D5A2ZMAG.js';
 import { Button } from '../chunk-6BGBYUSZ.js';
 export { getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
 import '../chunk-MMQPZGSU.js';

package/dist/search/index.d.ts

@@ -1,5 +1,5 @@
-import { c as SearchOptions, S as SearchInstance } from '../search-CsO3L1Lw.js';
-export { b as SearchMatch } from '../search-CsO3L1Lw.js';
+import { c as SearchOptions, S as SearchInstance } from '../search-DXxY8SEH.js';
+export { b as SearchMatch } from '../search-DXxY8SEH.js';
 
 /**
  * Search with Fuse.js already wired: the batteries-included entry point.

package/dist/search/index.js

@@ -1,4 +1,4 @@
-import { createSearch } from '../chunk-UZFEEFMF.js';
+import { createSearch } from '../chunk-D5A2ZMAG.js';
 import Fuse from 'fuse.js';
 
 function createSearch2(options = {}) {

package/dist/{search-CsO3L1Lw.d.ts → search-DXxY8SEH.d.ts}

@@ -63,6 +63,20 @@ interface SearchInstance<T> {
     subscribe(listener: (results: SearchMatch<T>[], query: string) => void): () => void;
     destroy(): void;
 }
+/**
+ * Subsequence ranking: every letter of the query, in order, anywhere in the text.
+ *
+ * This is what a COMMAND palette wants and a substring filter cannot do: "qgate" finds
+ * "Quality gate" and "plyg" finds "Playground", because the letters only have to appear in
+ * order. The score rewards consecutive runs and word starts and penalises gaps, so the
+ * closest thing to what was typed comes first rather than the first thing that happened to
+ * contain the letters.
+ *
+ * Pass it as `matcher`, or take it as the default from the palette. The substring matcher
+ * stays the default for a plain search FIELD, where a typo should fail rather than quietly
+ * match something four words away.
+ */
+declare function subsequenceMatcher<T>(keys?: string[]): NonNullable<SearchOptions<T>["matcher"]>;
 declare function createSearch<T>(options?: SearchOptions<T>): SearchInstance<T>;
 
-export { type FuseConstructor as F, type SearchInstance as S, type FuseLike as a, type SearchMatch as b, type SearchOptions as c, createSearch as d };
+export { type FuseConstructor as F, type SearchInstance as S, type FuseLike as a, type SearchMatch as b, type SearchOptions as c, createSearch as d, subsequenceMatcher as s };

package/dist/{search-P4OHCRXD.js → search-UQEXAPQB.js}

@@ -1,4 +1,4 @@
-import { createSearch } from './chunk-UZFEEFMF.js';
+import { createSearch } from './chunk-D5A2ZMAG.js';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "sideEffects": [
@@ -78,7 +78,8 @@
     "./toast.css": "./recipes/toast/styles.css",
     "./input.css": "./recipes/input/styles.css",
     "./marquee.css": "./recipes/marquee/styles.css",
-    "./logo-marquee.css": "./recipes/logo-marquee/styles.css"
+    "./logo-marquee.css": "./recipes/logo-marquee/styles.css",
+    "./palette.css": "./recipes/palette/styles.css"
   },
   "scripts": {
     "build": "tsup",

package/recipes/input/styles.css

@@ -1,23 +1,64 @@
-/* A starting point for the field, yours to edit. The primitive renders the structure and
-   publishes its state through data-* attributes; every colour below is this file's. */
+/*
+ * A starting point for the field, yours to edit.
+ *
+ * The primitive renders the structure and publishes its state through data-* attributes;
+ * every colour and distance below is this file's. The custom properties at the top are the
+ * whole API - override them on `:root` and you have a different field without touching a
+ * selector, which is the same arrangement the toast and the palette use.
+ */
+
+:root {
+    --enigma-input-bg: #171717;
+    --enigma-input-border: #404040;
+    --enigma-input-border-focus: #a3a3a3;
+    --enigma-input-text: #f5f5f5;
+    --enigma-input-muted: #a3a3a3;
+    --enigma-input-radius: 0.5rem;
+    --enigma-input-font-size: 0.875rem;
+    --enigma-input-padding: 0 0.75rem;
+    --enigma-input-danger: #dc2626;
+    --enigma-input-accent: #fbbf24;
+
+    /* The meter, worst to best. A headless package has no business deciding what "strong"
+       looks like on your brand, so the five bands are here rather than in the component. */
+    --enigma-strength-empty: #262626;
+    --enigma-strength-0: #dc2626;
+    --enigma-strength-1: #ea580c;
+    --enigma-strength-2: #eab308;
+    --enigma-strength-3: #84cc16;
+    --enigma-strength-4: #16a34a;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-input-bg: #ffffff;
+        --enigma-input-border: #d4d4d4;
+        --enigma-input-border-focus: #737373;
+        --enigma-input-text: #171717;
+        --enigma-input-muted: #737373;
+        --enigma-strength-empty: #e5e5e5;
+    }
+}
 
 [data-enigma-input-root] { display: grid; gap: 0.375rem; }
 
 [data-enigma-input-field] {
     display: flex; align-items: center; gap: 0.375rem;
-    padding: 0 0.75rem;
-    background: #171717; border: 1px solid #404040; border-radius: 0.5rem;
+    padding: var(--enigma-input-padding);
+    background: var(--enigma-input-bg);
+    border: 1px solid var(--enigma-input-border);
+    border-radius: var(--enigma-input-radius);
 }
-[data-enigma-input-field]:focus-within { border-color: #a3a3a3; }
+[data-enigma-input-field]:focus-within { border-color: var(--enigma-input-border-focus); }
 
 [data-enigma-input] {
     flex: 1; min-width: 0; padding: 0.625rem 0;
-    font-size: 0.875rem; color: #f5f5f5;
+    font-size: var(--enigma-input-font-size); color: var(--enigma-input-text);
     background: transparent; border: 0; outline: none;
 }
 
 /* A breached password is worth showing on the field itself, not only in the message. */
-[data-enigma-input-root][data-breached] [data-enigma-input-field] { border-color: #dc2626; }
+[data-enigma-input-root][data-breached] [data-enigma-input-field] { border-color: var(--enigma-input-danger); }
 
 [data-enigma-input-actions] { display: inline-flex; gap: 0.125rem; }
 [data-enigma-input-actions][data-position="start"] { order: -1; }
@@ -25,30 +66,29 @@
 [data-enigma-input-action] {
     display: grid; place-items: center;
     width: 1.75rem; height: 1.75rem;
-    color: #a3a3a3; background: none; border: 0; border-radius: 0.375rem;
+    color: var(--enigma-input-muted); background: none; border: 0; border-radius: 0.375rem;
     cursor: pointer; font-size: 0.9375rem;
 }
-[data-enigma-input-action]:hover { color: #f5f5f5; background: #262626; }
-[data-enigma-input-action][aria-pressed="true"] { color: #fbbf24; }
+[data-enigma-input-action]:hover { color: var(--enigma-input-text); background: color-mix(in srgb, var(--enigma-input-border) 45%, transparent); }
+[data-enigma-input-action][aria-pressed="true"] { color: var(--enigma-input-accent); }
 [data-enigma-input-action]:disabled { opacity: 0.5; cursor: default; }
 
-/* The meter. Five bars, one per score, red through green - the palette lives here because
-   a headless package has no business choosing what "strong" looks like on your brand. */
+/* The meter. Five bars, one per score, red through green. */
 [data-enigma-password-strength] { display: grid; gap: 0.25rem; }
 [data-enigma-password-strength-track] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
 
 [data-enigma-password-strength-segment] {
-    height: 0.25rem; border-radius: 999px; background: #262626;
+    height: 0.25rem; border-radius: 999px; background: var(--enigma-strength-empty);
     transition: background-color 120ms ease-out;
 }
 
-[data-score="0"] [data-enigma-password-strength-segment][data-filled] { background: #dc2626; }
-[data-score="1"] [data-enigma-password-strength-segment][data-filled] { background: #ea580c; }
-[data-score="2"] [data-enigma-password-strength-segment][data-filled] { background: #eab308; }
-[data-score="3"] [data-enigma-password-strength-segment][data-filled] { background: #84cc16; }
-[data-score="4"] [data-enigma-password-strength-segment][data-filled] { background: #16a34a; }
+[data-score="0"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-0); }
+[data-score="1"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-1); }
+[data-score="2"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-2); }
+[data-score="3"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-3); }
+[data-score="4"] [data-enigma-password-strength-segment][data-filled] { background: var(--enigma-strength-4); }
 
-[data-enigma-password-strength-label] { margin: 0; font-size: 0.75rem; color: #a3a3a3; }
-[data-enigma-password-strength-warning] { margin: 0; font-size: 0.75rem; color: #fbbf24; }
+[data-enigma-password-strength-label] { margin: 0; font-size: 0.75rem; color: var(--enigma-input-muted); }
+[data-enigma-password-strength-warning] { margin: 0; font-size: 0.75rem; color: var(--enigma-input-accent); }
 /* An empty field is not a bad password: say nothing until there is something to say. */
 [data-enigma-password-strength][data-empty] [data-enigma-password-strength-label] { visibility: hidden; }