@zeyos/zx 2.2.1 → 2.3.0

package/docs/llms.md

@@ -53,8 +53,27 @@ Load `zx.css`, then set theme/density on any ancestor (usually `<html>`):
 <html data-zx-theme="dark" data-zx-density="compact">
 ```
 
-Themes: `light` | `dark` | `auto` (follows OS). Density: `cozy` | `compact`. Define a product theme
-by overriding **semantic** tokens under a `[data-zx-theme="name"]` selector:
+Themes: `light` | `dark` | `auto` (follows OS). Density: `cozy` | `compact`.
+
+**Accent presets.** A second, orthogonal attribute picks the accent ramp:
+`data-zx-preset="zx" | "zeyos" | "ocean" | "violet" | "rose" | "slate"` (`zx` is the default and
+need not be set). A preset repoints five tier-1 tokens — `--zx-accent-300` … `--zx-accent-700` —
+and the semantic tier takes its own stop per polarity (600/700 on light surfaces, 300/400/500 on
+dark), so one five-line block rethemes light, dark, and auto together. Status colours are not part
+of a preset. Define your own the same way, or build one at `/theme.html` (the theme studio, which
+renders every component live and exports the CSS):
+
+```css
+:root {
+  --zx-accent-300: #c4b4ff; --zx-accent-400: #a684ff; --zx-accent-500: #8e51ff;
+  --zx-accent-600: #7f22fe; --zx-accent-700: #7008e7;
+}
+```
+
+Keep the 600 stop at 4.5:1 or better against white and the 400 stop at 4.5:1 against the dark page
+— that is what makes `--zx-color-on-accent` legible without being restated per theme.
+
+Define a product theme by overriding **semantic** tokens under a `[data-zx-theme="name"]` selector:
 `--zx-color-bg-page/surface/raised/control/hover/selected`, `--zx-color-border(-strong/-control)`,
 `--zx-color-text(-muted/-placeholder)`, `--zx-color-accent(-hover)/on-accent`,
 `--zx-color-danger/warning/success/info(+ -bg)`, `--zx-focus-ring`, `--zx-control-height/-radius`,
@@ -404,16 +423,26 @@ Search input with embedded search and clear buttons (`role="search"`).
 
 Unifies single-select, local filtering, and async loading.
 
-- **Options** — `items: []`, `valueKey: 'ID'` (string key or `(item)=>id`), `labelKey: 'name'`
-  (string or `(item)=>string`), `renderItem`, `renderValue`, `value`, `disabled`, `placeholder`,
-  `clearable: false`, `filter: false | 'local' | async (query)=>items`, `searchKeys`,
-  `minQuery: 0`, `debounce: 200`, `listHeight: 280`, `groupKey`.
+- **Options** — `items: []`, `fixedItems: []`, `valueKey: 'ID'` (string key or `(item)=>id`),
+  `labelKey: 'name'` (string or `(item)=>string`), `renderItem`, `renderValue`, `value`,
+  `disabled`, `placeholder`, `clearable: false`, `filter: false | 'local' | async (query)=>items`,
+  `searchKeys`, `minQuery: 0`, `debounce: 200`, `listHeight: 280`, `groupKey`.
 - **Getters** — `.value`, `.selected`.
-- **Methods** — `set(id, {silent})`, `setItems()`, `reset()`, `open()`/`close()`,
+- **Methods** — `set(id, {silent})`, `setItems()`, `setFixedItems()`, `reset()`, `open()`/`close()`,
   `enable()`/`disable()`, `focus()`.
 - **Events** — `change {value, item}` (`item` is null on clear), `open`, `close`, `query {query}`,
   `loaded {items}`.
-- **Preset** — `Select.priority(target, opts)`, a 5-level priority picker.
+- **Fixed choices** — `fixedItems` pins entries to the top of the list, separated by a rule (the
+  rule is dropped when `groupKey` is on, since a heading already divides them). They belong to the
+  control, not to its data: a `filter` function replaces `items` on every query, while the pinned
+  entries are narrowed locally against the same query and stay resolvable by `set()`. They survive
+  `setItems()` and are shown below `minQuery`. Use them for choices with no row in the source —
+  "Unassigned", "Everyone", "Private".
+- **Presets** — `Select.priority(target, opts)`, a 5-level priority picker;
+  `Select.permission(target, {groups, value})`, the record-access picker with Private and Public
+  pinned above the groups. Its value is the tri-state ZeyOS stores (`false` private, `true` public,
+  or a group ID), `groups` takes an array or a loader `(query)=>items`, and the labels come from
+  `msg` (`permission.private`, `permission.public`). Replaces the deprecated `Permission`.
 - **Keyboard** (APG combobox) — ArrowDown/Alt+ArrowDown open; arrows navigate and wrap; Home/End;
   Enter selects; Esc closes; Tab closes; printable characters filter (editable) or run a typeahead
   (readonly). `aria-activedescendant` tracks the active option.
@@ -917,9 +946,13 @@ or Ctrl+Arrow reorders.
 Ordered value editor with explicit rows (add / remove / move).
 
 - **Options** — `values`, `options` (allowed values, which turns the rows into selects),
-  `addLabel`.
+  `addLabel`, `reorder: 'both'` (`'both'` | `'buttons'` | `'drag'` | `'none'` — a drag handle, the
+  up/down buttons, both, or neither).
 - **Methods** — `getValues()`, `setValues()`.
 - **Events** — `change {values}`.
+- Dragging goes through a dedicated handle, so text selection inside a row's input still works. The
+  handle is also a keyboard control (Arrow keys, Home, End), which is what keeps `reorder: 'drag'`
+  operable without a pointer.
 <!-- /doc -->
 
 <!-- doc:field-upload -->
@@ -961,7 +994,9 @@ yet. Field type: `tagpicker`.
 <!-- doc:permission -->
 ### Permission
 
-Private / public / group record-permission selector.
+Private / public / group record-permission selector. **Deprecated** — use
+`Select.permission(target, {groups})`, which carries the same tri-state value in one control and
+can query the groups remotely. This class stays for `gx.zeyos.Permission` and is removed in 3.0.
 
 - **Options** — `value: true|false|groupId`, `groups: []`, `groupsValueKey: 'ID'`,
   `groupsLabelKey: 'name'`.
@@ -1058,8 +1093,13 @@ restores rounded corners without forking the stylesheet.
 - **Methods** — `addTab()`, `removeTab()`, `openTab(name)`, `getActive()`, `setTitle()`,
   `setBadge(name, text|null)`, `enableTab()`/`disableTab()`.
 - **Events** — `change {name, previous}` (preventable), `close {name}`.
+- **Behaviour** — a `closable` tab renders a × that closes it on click, and `close` fires for that
+  gesture just as it does for Delete. `removeTab()` is the silent programmatic path. Closing the
+  active tab activates its neighbour through the usual `change` event, so a `preventDefault()` on
+  that change also vetoes the close.
 - **Keyboard** — ArrowLeft/Right and Home/End move focus, Enter/Space activate, Delete closes a
-  closable tab.
+  closable tab. The × is a plain glyph rather than a nested button (buttons cannot nest), so
+  keyboard and screen-reader users close through Delete; focus lands on the neighbouring tab.
 <!-- /doc -->
 
 <!-- doc:stepper -->
@@ -1068,7 +1108,9 @@ restores rounded corners without forking the stylesheet.
 Linear progress through a multi-step flow: a numbered `<ol>` where each step is upcoming, active,
 complete, or errored. It promotes the markup the checkout and record wizards used to hand-roll.
 Advancing past a step marks it complete automatically, and only steps the `clickable` policy allows
-are rendered as real buttons — the rest are not focusable at all.
+are rendered as real buttons — the rest are not focusable at all. A horizontal rail fills the width
+it is given: the labels keep their own width and the connectors stretch to take the slack, wrapping
+onto more lines only when the container is too narrow to hold them.
 
 - **Options** — `steps: [{name, title, description?, optional?, disabled?}]`, `active` (defaults to
   the first enabled step), `orientation: 'horizontal'|'vertical'`, `clickable:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeyos/zx",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Dependency-free, accessible UI component library for ZeyOS business applications.",
   "type": "module",
   "license": "MIT",

package/src/components/date-picker/date-range-picker.css

@@ -3,6 +3,13 @@
 .zx-date-range-picker {
   display: block;
   container-type: inline-size;
+  /* A size container takes no width from its own contents, so in a shrink-to-fit host — a flex
+     row, an inline-block, a grid `auto` track — it would collapse to nothing and spill. Only the
+     host can size it, so it always fills the host. That covers every host with a width of its
+     own; a host that shrink-wraps *its* contents still collapses, because 100% then resolves
+     against a containing block this element's own containment zeroed. Dropping containment is the
+     only fix for that — see multi-value-editor.css. */
+  inline-size: 100%;
   color: var(--zx-color-text);
   font-size: var(--zx-control-font-size);
 }

package/src/components/fieldset/fieldset.css

@@ -6,6 +6,13 @@
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
   container-type: inline-size;
+  /* A size container takes no width from its own contents, so in a shrink-to-fit host — a flex
+     row, an inline-block, a grid `auto` track — it would collapse to nothing and spill. Only the
+     host can size it, so it always fills the host. That covers every host with a width of its
+     own; a host that shrink-wraps *its* contents still collapses, because 100% then resolves
+     against a containing block this element's own containment zeroed. Dropping containment is the
+     only fix for that — see multi-value-editor.css. */
+  inline-size: 100%;
 }
 
 .zx-fieldset__legend {

package/src/components/form/form.css

@@ -5,6 +5,13 @@
   min-inline-size: 0;
 }
 
+/* Fieldsets are size containers, and a contained descendant contributes nothing to its ancestors'
+   intrinsic width either — so a form in a shrink-to-fit host would shrink-wrap to its action
+   buttons and leave the fields spilling out of a sliver. The form fills its host instead. */
+.zx-form {
+  inline-size: 100%;
+}
+
 .zx-form__actions {
   display: flex;
   flex-wrap: wrap;

package/src/components/multi-value-editor/multi-value-editor.css

@@ -1,12 +1,22 @@
+/* Deliberately not a size container. Inline-size containment removes an element's own intrinsic
+   width, so every host that sizes to its contents — a flex row, an inline-block, a grid `auto`
+   track, a table cell — measured this editor as nothing and the rows spilled out of a 26px sliver.
+   `inline-size: 100%` does not rescue it either: the percentage resolves against a containing
+   block that was itself measured from the contribution containment had already zeroed. The row
+   below reflows on its own instead, which reads the width that actually matters — the row's.
+
+   Without containment `inline-size: 100%` does work: a percentage that has no definite containing
+   block to resolve against counts as `auto` while the host measures its contents, so the editor
+   contributes its real width and then fills whatever the host settled on. */
 .zx-multi-value-editor {
   display: grid;
   gap: var(--zx-space-3);
   min-inline-size: 0;
+  inline-size: 100%;
   padding: var(--zx-space-3);
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  container-type: inline-size;
 }
 
 .zx-multi-value-editor__rows {
@@ -15,19 +25,32 @@
 }
 
 .zx-multi-value-editor__row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  /* A grid item refuses to go under its min-content width unless told to, which in a pane narrower
+     than the control cluster pushed the whole row back out through the editor's side. */
+  min-inline-size: 0;
   gap: var(--zx-space-2);
   align-items: center;
 }
 
+/* Below roughly this basis the controls wrap onto a line of their own, which is what the container
+   query used to do — except a row measures the space the row actually has. */
 .zx-multi-value-editor__value {
-  inline-size: 100%;
+  flex: 1 1 11rem;
+  min-inline-size: 0;
 }
 
+/* Wide enough and this keeps its natural size at the end of the row; narrower than the buttons it
+   holds, and they wrap among themselves rather than out through the side. */
 .zx-multi-value-editor__controls {
   display: inline-flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-inline-size: 0;
   gap: var(--zx-space-1);
+  margin-inline-start: auto;
 }
 
 .zx-multi-value-editor__controls .zx-btn {
@@ -35,22 +58,83 @@
   padding-inline: var(--zx-space-2);
 }
 
-.zx-multi-value-editor__controls .zx-btn:last-child {
+.zx-multi-value-editor__controls .zx-btn[data-action="remove"] {
   color: var(--zx-color-danger);
 }
 
+/* A row at either end keeps its move button focusable and merely announces that it cannot go
+   further, so pressing it repeatedly never drops focus to the document. */
+.zx-multi-value-editor__controls .zx-btn[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.zx-multi-value-editor__controls .zx-btn[aria-disabled="true"]:hover {
+  background: var(--zx-color-bg-control);
+}
+
+.zx-multi-value-editor__handle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--zx-control-height);
+  min-inline-size: var(--zx-space-6);
+  padding: 0;
+  border: 0;
+  border-radius: var(--zx-control-radius);
+  background: none;
+  color: var(--zx-color-text-muted);
+  cursor: grab;
+  touch-action: none;
+  transition: color var(--zx-dur-fast) var(--zx-ease),
+    background-color var(--zx-dur-fast) var(--zx-ease);
+}
+
+.zx-multi-value-editor__handle:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-multi-value-editor__handle:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-multi-value-editor__handle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.zx-multi-value-editor[data-state="dragging"] .zx-multi-value-editor__handle {
+  cursor: grabbing;
+}
+
+.zx-multi-value-editor__row[data-dragging="true"] {
+  opacity: 0.45;
+}
+
+/* The line sits in the gap between two rows, so it reads as "it lands here", not "it replaces
+   this row". */
+.zx-multi-value-editor__row[data-drop]::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  block-size: 2px;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+}
+
+.zx-multi-value-editor__row[data-drop="before"]::after {
+  inset-block-start: calc(var(--zx-space-2) / -2 - 1px);
+}
+
+.zx-multi-value-editor__row[data-drop="after"]::after {
+  inset-block-end: calc(var(--zx-space-2) / -2 - 1px);
+}
+
 .zx-multi-value-editor__add {
   justify-self: start;
   border-color: var(--zx-color-accent);
   color: var(--zx-color-accent);
 }
-
-@container (max-width: 24rem) {
-  .zx-multi-value-editor__row {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .zx-multi-value-editor__controls {
-    justify-self: end;
-  }
-}