@enigmax/primitives 0.22.0 → 0.23.0

package/dist/selection-B_pmzHpy.d.ts

@@ -0,0 +1,150 @@
+import { b as ShortcutSpec, a as ShortcutEvent } from './keys-D2zJs1uB.js';
+
+/**
+ * The parts of a selectable list that are not rendering: what is selected, where the cursor
+ * is, which row the next Shift+click measures from, and which command a key press stands for.
+ *
+ * This is the file-manager selection model, on purpose and in full: a plain click replaces
+ * the selection, Ctrl toggles one row without losing the rest, Shift takes everything between
+ * the anchor and here, Ctrl+Shift adds that range to what was already there, Ctrl+A takes the
+ * lot and Escape drops it. Every one of those is a rule people already know from Explorer,
+ * Finder and every list built on them, and every one of them is a bug when a list re-invents
+ * it - a Shift+click that measures from the last CLICK instead of the anchor, a Ctrl+click
+ * that clears the selection, an Escape that does nothing.
+ *
+ * The commands are DATA. Each one has a default binding, any of them can be rebound, removed
+ * one at a time or turned off altogether, and a binding that is not a built-in command is
+ * still matched and reported - so a list can add "star" on Mod+D without this file knowing
+ * what starring is.
+ */
+
+/**
+ * What a key press means.
+ *
+ * The first group the list PERFORMS - it owns the selection, so it moves it. The second it
+ * only REPORTS, because deleting, renaming and opening are the caller's. Both are reported,
+ * and both can be stopped by the handler, so a list that wants to confirm a delete or animate
+ * its own select-all can.
+ */
+type SelectionCommand = "selectAll" | "clear" | "invert" | "moveUp" | "moveDown" | "moveLeft" | "moveRight" | "moveHome" | "moveEnd" | "movePageUp" | "movePageDown" | "extendUp" | "extendDown" | "extendLeft" | "extendRight" | "extendHome" | "extendEnd" | "extendPageUp" | "extendPageDown" | "cursorUp" | "cursorDown" | "toggleCursor" | "open" | "rename" | "delete" | "deletePermanent" | "copy" | "cut" | "paste";
+/** A command name: one of the built-ins, or anything else the caller binds. */
+type SelectionCommandName = SelectionCommand | (string & {});
+/**
+ * What each command is bound to out of the box.
+ *
+ * `Mod` is Command on an Apple keyboard and Control everywhere else, which is what these
+ * shortcuts mean on both. `invert` ships unbound deliberately: Explorer has the action and no
+ * key for it, and inventing one would take a combination the page may already use.
+ */
+declare const DEFAULT_SELECTION_SHORTCUTS: Readonly<Record<SelectionCommand, ShortcutSpec>>;
+/**
+ * The bindings, as the caller writes them.
+ *
+ * A missing entry keeps the default, `false` removes that one command, and a string or a list
+ * replaces it. `shortcuts: false` on the options removes every one of them at once - for a
+ * list inside an editor, or one whose keyboard belongs to something else.
+ */
+type SelectionShortcuts = Partial<Record<SelectionCommandName, ShortcutSpec>>;
+/** The modifiers a click carried. A real MouseEvent or PointerEvent satisfies it. */
+interface SelectionClickModifiers {
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+}
+interface SelectionCommandEvent<Item> {
+    command: SelectionCommandName;
+    /**
+     * What the command applies to: everything selected, or the row under the cursor when
+     * nothing is. That fallback is the file-manager rule - pressing Delete with one row
+     * focused and none selected deletes that row.
+     */
+    items: Item[];
+    ids: string[];
+    /** The row the cursor is on, selected or not. */
+    cursor: Item | null;
+    cursorIndex: number;
+    /** The press that matched, for a handler that needs the modifiers back. */
+    event: ShortcutEvent;
+    /** Stop what the list would have done - the moves, select-all, clear, invert. */
+    preventDefault(): void;
+    defaultPrevented: boolean;
+}
+interface SelectionOptions<Item> {
+    items?: readonly Item[];
+    /** How a row is identified across reorders and reloads. Default: its index, as a string. */
+    getId?: (item: Item, index: number) => string;
+    /** A row that cannot be selected or landed on. Still rendered, still counted. */
+    disabled?: (item: Item, index: number) => boolean;
+    /** One row at a time: Ctrl and Shift stop meaning anything. Default: many. */
+    multiple?: boolean;
+    /** Columns in a grid, so Left and Right move by one and Up and Down by a row. Default 1. */
+    columns?: number;
+    /** How far PageUp and PageDown jump. Default 10. */
+    page?: number;
+    /** Rebind, remove or extend the commands. `false` removes every binding. */
+    shortcuts?: SelectionShortcuts | false;
+    /** A command matched a press. Fired for built-ins too, before the list acts on them. */
+    onCommand?: (event: SelectionCommandEvent<Item>) => void;
+    /** Every state change. */
+    onChange?: (state: SelectionState<Item>) => void;
+    /** Only the selection, when it actually changed. */
+    onSelectionChange?: (ids: string[], items: Item[]) => void;
+}
+interface SelectionState<Item> {
+    /** Selected ids, in the order the rows appear - not the order they were clicked. */
+    selected: string[];
+    /** The same ids, for a renderer that asks per row. */
+    selectedSet: ReadonlySet<string>;
+    /** The selected rows themselves. */
+    items: Item[];
+    /** Where the keyboard is. -1 when the list has not been touched. */
+    cursor: number;
+    /** Where the next Shift+click or Shift+arrow measures from. */
+    anchor: number;
+    count: number;
+    /** Every selectable row is selected. What a header checkbox reads. */
+    allSelected: boolean;
+    /** Some but not all - the third state of that same checkbox. */
+    partiallySelected: boolean;
+    /** A rubber band is being dragged. */
+    marquee: boolean;
+}
+interface SelectionInstance<Item> {
+    readonly state: SelectionState<Item>;
+    /** A click on a row, with its modifiers. The whole Explorer rule, in one call. */
+    click(index: number, modifiers?: SelectionClickModifiers): void;
+    /** A key press. Returns whether a command matched, so the caller knows to prevent it. */
+    keyDown(event: ShortcutEvent): boolean;
+    select(ids: readonly string[]): void;
+    selectIndex(index: number, additive?: boolean): void;
+    toggle(index: number): void;
+    /** Everything from the anchor to here. `additive` keeps what was already selected. */
+    selectRange(index: number, additive?: boolean): void;
+    selectAll(): void;
+    clear(): void;
+    invert(): void;
+    /** Move the cursor. `extend` takes everything from the anchor, `carry` leaves the selection alone. */
+    moveCursor(delta: number, extend?: boolean, carry?: boolean): void;
+    setCursor(index: number): void;
+    /**
+     * What an action on this row applies to: the selection when the row is part of it, and the
+     * row alone when it is not. The rule every file manager's context menu follows - and the
+     * one that makes right-clicking outside a selection act on what was clicked.
+     */
+    targets(index: number): Item[];
+    /** Start a rubber band. `additive` keeps the current selection as its base. */
+    beginMarquee(additive?: boolean): void;
+    /** The rows the band currently covers. */
+    marqueeTo(indices: readonly number[]): void;
+    endMarquee(): void;
+    /** The resolved bindings, so a menu can print the same shortcut the list listens for. */
+    bindings(): Record<string, ShortcutSpec>;
+    /** What one command is bound to, or false when it has no binding. */
+    binding(command: SelectionCommandName): ShortcutSpec;
+    update(options: Partial<SelectionOptions<Item>>): void;
+    subscribe(listener: (state: SelectionState<Item>) => void): () => void;
+    destroy(): void;
+}
+declare function createSelection<Item>(options?: SelectionOptions<Item>): SelectionInstance<Item>;
+
+export { DEFAULT_SELECTION_SHORTCUTS as D, type SelectionClickModifiers as S, type SelectionCommand as a, type SelectionCommandEvent as b, type SelectionCommandName as c, type SelectionInstance as d, type SelectionOptions as e, type SelectionShortcuts as f, type SelectionState as g, createSelection as h };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.22.0",
+  "version": "0.23.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": [
@@ -25,6 +25,18 @@
       "types": "./dist/react/palette.d.ts",
       "import": "./dist/react/palette.js"
     },
+    "./react/select": {
+      "types": "./dist/react/select.d.ts",
+      "import": "./dist/react/select.js"
+    },
+    "./react/context-menu": {
+      "types": "./dist/react/context-menu.d.ts",
+      "import": "./dist/react/context-menu.js"
+    },
+    "./react/selection": {
+      "types": "./dist/react/selection.d.ts",
+      "import": "./dist/react/selection.js"
+    },
     "./react/button": {
       "types": "./dist/react/button.d.ts",
       "import": "./dist/react/button.js"
@@ -79,7 +91,9 @@
     "./input.css": "./recipes/input/styles.css",
     "./marquee.css": "./recipes/marquee/styles.css",
     "./logo-marquee.css": "./recipes/logo-marquee/styles.css",
-    "./palette.css": "./recipes/palette/styles.css"
+    "./palette.css": "./recipes/palette/styles.css",
+    "./select.css": "./recipes/select/styles.css",
+    "./context-menu.css": "./recipes/context-menu/styles.css"
   },
   "scripts": {
     "build": "tsup",
@@ -143,12 +157,14 @@
   },
   "keywords": [
     "carousel",
+    "context-menu",
     "enigma",
     "flags",
     "fuse",
     "headless",
     "input",
     "marquee",
+    "menu",
     "network",
     "notifications",
     "password",
@@ -156,6 +172,9 @@
     "react",
     "relative-time",
     "search",
+    "select",
+    "selection",
+    "shortcuts",
     "toast",
     "unstyled",
     "vanilla"

package/recipes/context-menu/styles.css

@@ -0,0 +1,177 @@
+/*
+ * The context-menu stylesheet.
+ *
+ * GENERATED from src/react/context-menu/styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because the component injects it,
+ * and this is the same sheet for anyone who would rather import it, copy it with
+ * `enigma add context-menu --copy`, or fork it outright.
+ */
+:root {
+    --enigma-menu-bg: #1c1c1c;
+    --enigma-menu-border: #333333;
+    --enigma-menu-radius: 0.625rem;
+    --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-menu-text: #f5f5f5;
+    --enigma-menu-muted: #a3a3a3;
+    --enigma-menu-font-size: 0.8125rem;
+    --enigma-menu-min-width: 12rem;
+    --enigma-menu-max-height: 20rem;
+
+    --enigma-menu-active-bg: #2a2a2a;
+    --enigma-menu-accent: #fbbf24;
+    --enigma-menu-danger: #f87171;
+    --enigma-menu-danger-bg: rgba(248, 113, 113, 0.12);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-menu-bg: #ffffff;
+        --enigma-menu-border: #e5e5e5;
+        --enigma-menu-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-menu-text: #171717;
+        --enigma-menu-muted: #737373;
+        --enigma-menu-active-bg: #f5f5f5;
+        --enigma-menu-accent: #b45309;
+        --enigma-menu-danger: #b91c1c;
+        --enigma-menu-danger-bg: rgba(185, 28, 28, 0.08);
+    }
+}
+
+/* Every panel is positioned in VIEWPORT coordinates, which is what a pointer event reports
+   and what a menu opened at the pointer needs. Fixed rather than absolute so a scrolling
+   ancestor cannot drag it away from the place it was opened. */
+[data-enigma-menu-panel] {
+    position: fixed; z-index: 60;
+    box-sizing: border-box;
+    min-width: var(--enigma-menu-min-width);
+    max-width: min(22rem, calc(100vw - 1rem));
+    padding: 0.25rem;
+    color: var(--enigma-menu-text);
+    background: var(--enigma-menu-bg);
+    border: 1px solid var(--enigma-menu-border);
+    border-radius: var(--enigma-menu-radius);
+    box-shadow: var(--enigma-menu-shadow);
+    font-size: var(--enigma-menu-font-size);
+    animation: enigma-menu-in 90ms ease-out;
+    /* Measured before it is placed, and placed before it is seen: without this the panel is
+       painted at 0,0 for one frame and jumps to the pointer on the next. */
+    visibility: hidden;
+}
+[data-enigma-menu-panel][data-placed] { visibility: visible; }
+@keyframes enigma-menu-in {
+    from { opacity: 0; transform: scale(0.98); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-menu-panel] { animation: none; }
+}
+
+/* The heading: what the menu is acting ON. A long file name is cut rather than allowed to
+   set the panel's width, and the full one stays reachable through its title attribute. */
+[data-enigma-menu-title] {
+    margin: 0; padding: 0.375rem 0.5rem 0.25rem;
+    font-size: 0.6875rem; font-weight: 600;
+    color: var(--enigma-menu-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-menu-search] {
+    width: 100%; box-sizing: border-box;
+    padding: 0.375rem 0.5rem 0.5rem;
+    font: inherit; font-size: var(--enigma-menu-font-size);
+    color: var(--enigma-menu-text); background: transparent;
+    border: 0; border-bottom: 1px solid var(--enigma-menu-border);
+    outline: none;
+}
+[data-enigma-menu-search]::-webkit-search-cancel-button,
+[data-enigma-menu-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+
+[data-enigma-menu-list] {
+    max-height: var(--enigma-menu-max-height);
+    overflow-y: auto; overscroll-behavior: contain;
+}
+
+[data-enigma-menu-item] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.3125rem 0.5rem; border-radius: 0.375rem;
+    line-height: 1.4;
+    color: var(--enigma-menu-text);
+    /* The hand, not the arrow. A native menu uses the arrow because the whole surface is
+       drawn by the OS and nothing on a page looks like it; here the rows sit on a web page,
+       where the hand is what says "this is a thing you press". */
+    cursor: pointer; user-select: none;
+}
+[data-enigma-menu-item][data-active] { background: var(--enigma-menu-active-bg); }
+[data-enigma-menu-item][data-disabled] { opacity: 0.45; cursor: not-allowed; }
+[data-enigma-menu-item][data-destructive] { color: var(--enigma-menu-danger); }
+[data-enigma-menu-item][data-destructive][data-active] { background: var(--enigma-menu-danger-bg); }
+
+[data-enigma-menu-item-text] { display: grid; min-width: 0; }
+[data-enigma-menu-item-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-enigma-menu-item-description] {
+    font-size: 0.6875rem; color: var(--enigma-menu-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-menu-icon] { display: inline-flex; align-items: center; flex: none; width: 1rem; max-height: 1.25em; line-height: 0; }
+
+/* The shortcut, on the right, the way every desktop menu prints it. margin-left: auto is
+   what pushes it there, and flex: none is what stops a long label squashing it. */
+[data-enigma-menu-shortcut] {
+    display: flex; align-items: center; gap: 0.125rem;
+    flex: none; margin-left: auto; padding-left: 1.5rem;
+    font-size: 0.6875rem; color: var(--enigma-menu-muted);
+    font-variant-numeric: tabular-nums;
+}
+[data-enigma-menu-shortcut] kbd { font: inherit; }
+
+/* The submenu arrow shares the shortcut's slot, so a row never has both pushed apart. */
+[data-enigma-menu-arrow] {
+    flex: none; margin-left: auto;
+    width: 0.35rem; height: 0.35rem;
+    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
+    transform: rotate(45deg);
+    opacity: 0.6;
+}
+[data-enigma-menu-shortcut] + [data-enigma-menu-arrow] { margin-left: 0.5rem; }
+
+/* Check and radio: drawn rather than loaded, and reserving their space either way so
+   choosing a row does not shift the label under the pointer. */
+[data-enigma-menu-check] {
+    flex: none; width: 1rem; height: 1rem;
+    display: grid; place-items: center;
+    color: var(--enigma-menu-accent);
+}
+[data-enigma-menu-check]::after { content: ""; width: 0.35rem; height: 0.6rem; opacity: 0; }
+[data-enigma-menu-item][aria-checked="true"] [data-enigma-menu-check]::after {
+    opacity: 1;
+    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
+    transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+}
+[data-enigma-menu-item][role="menuitemradio"] [data-enigma-menu-check]::after {
+    width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor;
+    transform: none; border: 0;
+}
+
+[data-enigma-menu-separator] {
+    height: 1px; margin: 0.25rem 0.25rem;
+    background: var(--enigma-menu-border);
+}
+
+[data-enigma-menu-label] {
+    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;
+    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--enigma-menu-muted);
+}
+
+[data-enigma-menu-status] {
+    margin: 0; padding: 0.625rem 0.5rem;
+    font-size: var(--enigma-menu-font-size); color: var(--enigma-menu-muted);
+    /* The quoted query is cut in the text as well, but a pasted string with no spaces has no
+       break opportunity at all - so this is what stops it stretching the panel. */
+    overflow-wrap: anywhere;
+}
+[data-enigma-menu-status][data-error] { color: var(--enigma-menu-danger); }
+
+/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */
+[data-enigma-menu-more] { height: 1px; }

package/recipes/input/styles.css

@@ -57,6 +57,15 @@
     background: transparent; border: 0; outline: none;
 }
 
+/* The platform's own clear button, gone. A search field here already renders one - so
+   WebKit draws a SECOND cross next to it, and only in WebKit, which makes it a duplicate
+   half the visitors see and the other half never do. */
+[data-enigma-input]::-webkit-search-cancel-button,
+[data-enigma-input]::-webkit-search-decoration,
+[data-enigma-input]::-webkit-search-results-button {
+    -webkit-appearance: none; appearance: none; display: 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: var(--enigma-input-danger); }
 

package/recipes/palette/styles.css

@@ -214,6 +214,9 @@
     text-align: center;
     color: var(--enigma-palette-muted);
     font-size: 0.875rem;
+    /* It quotes the query, and a pasted string with no spaces in it has no break
+       opportunity: without this it runs out of the panel rather than wrapping. */
+    overflow-wrap: anywhere;
 }
 
 [data-enigma-palette-footer] {

package/recipes/search/tailwind.tsx

@@ -1,6 +1,6 @@
 import Fuse from "fuse.js";
 import type { ReactNode } from "react";
-import { useSearch } from "@enigmax/primitives/react";
+import { useSearch, shortenQuery } from "@enigmax/primitives/react";
 
 /**
  * A styled search field with its result list, yours to edit.
@@ -46,12 +46,13 @@ export function Search<T>({
                     rounded-lg border border-neutral-700 bg-neutral-900 px-3 py-2.5
                     text-sm text-neutral-100 outline-none
                     placeholder:text-neutral-500 focus:border-neutral-400
+                    [&::-webkit-search-cancel-button]:appearance-none
                 "
             />
 
             {query && (
                 <p className="font-mono text-[11px] text-neutral-500">
-                    {results.length} result{results.length === 1 ? "" : "s"} for &quot;{query}&quot;
+                    {results.length} result{results.length === 1 ? "" : "s"} for &quot;{shortenQuery(query)}&quot;
                 </p>
             )}
 

package/recipes/select/styles.css

@@ -0,0 +1,230 @@
+/*
+ * The select stylesheet.
+ *
+ * GENERATED from src/react/select/styles.ts by scripts/sync-recipes.mjs - edit that file, not
+ * this one. It exists as a stylesheet as well as a string because the component injects it,
+ * and this is the same sheet for anyone who would rather import it, copy it with
+ * `enigma add select --copy`, or fork it outright.
+ */
+:root {
+    --enigma-select-bg: #171717;
+    --enigma-select-border: #404040;
+    --enigma-select-border-focus: #a3a3a3;
+    --enigma-select-text: #f5f5f5;
+    --enigma-select-muted: #a3a3a3;
+    --enigma-select-radius: 0.5rem;
+    --enigma-select-font-size: 0.875rem;
+    --enigma-select-padding: 0.5rem 0.75rem;
+
+    --enigma-select-panel-bg: #1c1c1c;
+    --enigma-select-panel-border: #333333;
+    --enigma-select-panel-radius: 0.625rem;
+    --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    --enigma-select-panel-width: 100%;
+    --enigma-select-list-height: 15rem;
+
+    --enigma-select-active-bg: #2a2a2a;
+    --enigma-select-accent: #fbbf24;
+    --enigma-select-tag-bg: #2a2a2a;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --enigma-select-bg: #ffffff;
+        --enigma-select-border: #d4d4d4;
+        --enigma-select-border-focus: #737373;
+        --enigma-select-text: #171717;
+        --enigma-select-muted: #737373;
+        --enigma-select-panel-bg: #ffffff;
+        --enigma-select-panel-border: #e5e5e5;
+        --enigma-select-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        --enigma-select-active-bg: #f5f5f5;
+        --enigma-select-accent: #b45309;
+        --enigma-select-tag-bg: #f0f0f0;
+    }
+}
+
+[data-enigma-select-root] { position: relative; display: inline-block; min-width: 0; }
+
+[data-enigma-select-trigger] {
+    display: flex; align-items: center; gap: 0.5rem;
+    width: 100%; min-width: 0; box-sizing: border-box;
+    padding: var(--enigma-select-padding);
+    font: inherit; font-size: var(--enigma-select-font-size); text-align: left;
+    color: var(--enigma-select-text); background: var(--enigma-select-bg);
+    border: 1px solid var(--enigma-select-border); border-radius: var(--enigma-select-radius);
+    cursor: pointer;
+}
+[data-enigma-select-trigger]:focus-visible { outline: 2px solid var(--enigma-select-border-focus); outline-offset: 1px; }
+[data-enigma-select-trigger][data-open] { border-color: var(--enigma-select-border-focus); }
+[data-enigma-select-trigger]:disabled,
+[data-enigma-select-trigger][aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
+/* Nothing to choose, or nothing yet: the control reads as unavailable and the caret fades,
+   because a caret at full strength promises a panel that will never open. Not the disabled
+   look, which would say the field is off rather than that the list is empty. */
+[data-enigma-select-trigger][data-empty],
+[data-enigma-select-trigger][data-loading] { opacity: 1; cursor: default; }
+[data-enigma-select-trigger][data-empty] [data-enigma-select-caret],
+[data-enigma-select-trigger][data-loading] [data-enigma-select-caret] { opacity: 0.25; }
+
+/* The indicator: one slot, holding the caret and the × stacked in the same cell. Side by
+   side they would be two targets a pixel apart - one of which throws away your choice - and
+   the pair would change the trigger's width the moment a value appeared. */
+[data-enigma-select-indicator] {
+    display: grid; place-items: center; flex: none;
+    margin-left: auto; width: 1rem; height: 1rem;
+}
+[data-enigma-select-indicator] > * { grid-area: 1 / 1; }
+
+/* The caret, drawn rather than loaded: an icon font or an SVG file is a request, and this
+   is two borders. */
+[data-enigma-select-caret] {
+    width: 0.4rem; height: 0.4rem;
+    /* Decoration, and it must not be the hit target: the rotation gives it a stacking
+       context, which paints it OVER the × sharing its cell and swallows the click. */
+    pointer-events: none;
+    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+    transform: translateY(-0.1rem) rotate(45deg);
+    opacity: 0.6; transition: transform 120ms ease-out, opacity 120ms ease-out;
+}
+[data-enigma-select-trigger][data-open] [data-enigma-select-caret] { transform: translateY(0.1rem) rotate(225deg); }
+
+[data-enigma-select-value] {
+    display: flex; align-items: center; gap: 0.375rem;
+    /* min-width: 0 is what lets the ellipsis happen: a flex item's default minimum is its
+       content, so without it a long label pushes the caret out of the button. */
+    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+[data-enigma-select-value][data-placeholder] { color: var(--enigma-select-muted); }
+[data-enigma-select-value][data-tags] { flex-wrap: wrap; white-space: normal; }
+
+[data-enigma-select-tag] {
+    display: inline-flex; align-items: center; gap: 0.25rem;
+    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    font-size: 0.8125rem; line-height: 1.4;
+    background: var(--enigma-select-tag-bg); border-radius: 999px;
+}
+[data-enigma-select-tag][data-rest] { padding: 0.125rem 0.5rem; color: var(--enigma-select-muted); }
+
+[data-enigma-select-tag-remove] {
+    display: grid; place-items: center;
+    width: 1rem; height: 1rem; border-radius: 999px;
+    color: var(--enigma-select-muted); font-size: 0.875rem; line-height: 1; cursor: pointer;
+}
+[data-enigma-select-tag-remove]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }
+
+/* The ×, in the caret's place and only while the control is under the pointer or holds
+   focus. ":focus" and not ":focus-visible": a tap focuses the button, and on a touch screen
+   there is no hover to reveal it with. */
+[data-enigma-select-clear] {
+    display: grid; place-items: center;
+    width: 1rem; height: 1rem; border-radius: 999px;
+    color: var(--enigma-select-muted); font-size: 0.875rem; line-height: 1; cursor: pointer;
+    opacity: 0; pointer-events: none; transition: opacity 120ms ease-out;
+}
+[data-enigma-select-trigger]:hover [data-enigma-select-clear],
+[data-enigma-select-trigger]:focus [data-enigma-select-clear] { opacity: 1; pointer-events: auto; }
+/* Scoped to a trigger that HAS a × - otherwise hovering a select with nothing to clear
+   would hide its caret and leave an empty slot. */
+[data-enigma-select-trigger][data-clearable]:hover [data-enigma-select-caret],
+[data-enigma-select-trigger][data-clearable]:focus [data-enigma-select-caret] { opacity: 0; }
+[data-enigma-select-clear]:hover { color: var(--enigma-select-text); background: var(--enigma-select-active-bg); }
+
+[data-enigma-select-content] {
+    position: absolute; z-index: 50;
+    top: calc(100% + 0.25rem); left: 0;
+    min-width: var(--enigma-select-panel-width); box-sizing: border-box;
+    padding: 0.25rem;
+    background: var(--enigma-select-panel-bg);
+    border: 1px solid var(--enigma-select-panel-border);
+    border-radius: var(--enigma-select-panel-radius);
+    box-shadow: var(--enigma-select-panel-shadow);
+    animation: enigma-select-in 120ms ease-out;
+    /* A bound, because the content is arbitrary: a long option label or a query typed into
+       the filter would otherwise widen the panel with it. min-width still wins for a
+       trigger wider than this, which is what it is for. */
+    max-width: min(28rem, calc(100vw - 2rem));
+}
+/* Opening upwards is not a variant, it is the same panel measured against the window: near
+   the bottom of the screen the list would otherwise be unreachable. */
+[data-enigma-select-content][data-side="top"] { top: auto; bottom: calc(100% + 0.25rem); }
+[data-enigma-select-content][data-state="closed"] { animation: enigma-select-out 120ms ease-in forwards; pointer-events: none; }
+
+@keyframes enigma-select-in {
+    from { opacity: 0; transform: translateY(-0.25rem); }
+    to { opacity: 1; transform: none; }
+}
+@keyframes enigma-select-out {
+    from { opacity: 1; }
+    to { opacity: 0; transform: translateY(-0.125rem); }
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-select-content],
+    [data-enigma-select-content][data-state="closed"] { animation: none; }
+    [data-enigma-select-trigger]::after { transition: none; }
+}
+
+[data-enigma-select-search] {
+    width: 100%; box-sizing: border-box;
+    padding: 0.375rem 0.5rem 0.5rem;
+    font: inherit; font-size: var(--enigma-select-font-size);
+    color: var(--enigma-select-text); background: transparent;
+    border: 0; border-bottom: 1px solid var(--enigma-select-panel-border);
+    outline: none;
+}
+/* WebKit's own clear cross, gone: it is drawn on no other engine, so leaving it in gives
+   half the visitors a control the other half never sees. */
+[data-enigma-select-search]::-webkit-search-cancel-button,
+[data-enigma-select-search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+
+[data-enigma-select-list] {
+    max-height: var(--enigma-select-list-height);
+    margin-top: 0.25rem;
+    overflow-y: auto; overscroll-behavior: contain;
+}
+
+[data-enigma-select-group-label] {
+    margin: 0.375rem 0 0.125rem; padding: 0 0.5rem;
+    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
+    color: var(--enigma-select-muted);
+}
+
+[data-enigma-select-option] {
+    display: flex; align-items: center; gap: 0.5rem;
+    padding: 0.4375rem 0.5rem; border-radius: 0.375rem;
+    font-size: var(--enigma-select-font-size); color: var(--enigma-select-text);
+    cursor: pointer;
+}
+[data-enigma-select-option][data-active] { background: var(--enigma-select-active-bg); }
+[data-enigma-select-option][data-disabled] { opacity: 0.45; cursor: not-allowed; }
+
+[data-enigma-select-option-text] { display: grid; min-width: 0; }
+[data-enigma-select-option-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-enigma-select-option-description] {
+    font-size: 0.75rem; color: var(--enigma-select-muted);
+    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+}
+
+[data-enigma-select-icon] { display: inline-flex; align-items: center; flex: none; max-height: 1.25em; line-height: 0; }
+
+/* The check, drawn with two borders and shown only where it belongs. Reserved space either
+   way, so choosing a row does not shift the label under the pointer. */
+[data-enigma-select-check] {
+    flex: none; margin-left: auto;
+    width: 0.35rem; height: 0.6rem;
+    border-right: 2px solid var(--enigma-select-accent); border-bottom: 2px solid var(--enigma-select-accent);
+    transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+    opacity: 0;
+}
+[data-enigma-select-option][data-selected] [data-enigma-select-check] { opacity: 1; }
+
+/* The end-of-window marker: one pixel, so it has a box to be scrolled into. */
+[data-enigma-select-more] { height: 1px; }
+
+[data-enigma-select-empty] {
+    margin: 0; padding: 0.75rem 0.5rem;
+    font-size: var(--enigma-select-font-size); color: var(--enigma-select-muted);
+    /* The quoted query is cut in the text as well, but a pasted string with no spaces has
+       no break opportunity at all - so this is what stops it stretching the panel. */
+    overflow-wrap: anywhere;
+}