@zeyos/zx 2.2.1 → 2.3.0

package/src/components/tabbox/tabbox.css

@@ -249,9 +249,19 @@
   text-align: center;
 }
 
-.zx-tabbox__close {
-  margin-inline-start: calc(-1 * var(--zx-space-1));
-  color: var(--zx-color-text-muted);
+/* Chrome comes from the shared .zx-icon-btn ghost utility; only the box is reset here, because
+   a full control-height square would widen every closable tab. The extra .zx-tabbox raises the
+   specificity to match `.zx-scope .zx-icon-btn` in base.css, which sets the size. */
+.zx-tabbox .zx-tabbox__close {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  margin-inline: calc(-1 * var(--zx-space-1));
+}
+
+/* The tab under the pointer is already filled with bg-hover, so the close control needs a tint
+   that still reads on top of it — in both themes, over any variant's tab background. */
+.zx-tabbox .zx-tabbox__close:hover {
+  background: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
 }
 
 /* ----------------------------------------------------------------------- panels -- */

package/src/components/tabbox/tabbox.js

@@ -11,7 +11,7 @@ import { uid } from '../../core/util.js';
  * @property {string} title Visible tab label.
  * @property {TabContent} content Panel content or a lazy content factory.
  * @property {string} [icon] Icon name passed to `icon()`, shown before the title.
- * @property {boolean} [closable=false] Whether Delete can close the tab.
+ * @property {boolean} [closable=false] Whether the tab shows a close control and Delete closes it.
  * @property {boolean} [disabled=false] Whether the tab is unavailable.
  */
 
@@ -38,7 +38,8 @@ const VARIANTS = new Set(['divided', 'bracket', 'line', 'segmented']);
  *   control, for a toolbar or card header.
  * @property {boolean} [keepAlive=true] Keep inactive panel elements mounted.
  * @property {(event: CustomEvent<{name: string, previous: string|null}>) => void} [onchange] Change callback.
- * @property {(event: CustomEvent<{name: string}>) => void} [onclose] Close callback.
+ * @property {(event: CustomEvent<{name: string}>) => void} [onclose] Close callback, fired when the
+ *   user dismisses a closable tab.
  */
 
 /**
@@ -121,6 +122,10 @@ export class Tabbox extends Component {
       if (!tab || !tablist.contains(tab)) return;
       const record = this._recordForTab(tab);
       if (!record || record.definition.disabled) return;
+      if (event.target.closest?.('.zx-tabbox__close')) {
+        this._closeTab(record);
+        return;
+      }
       this._setFocused(record);
       this.openTab(record.definition.name);
     });
@@ -168,9 +173,13 @@ export class Tabbox extends Component {
     }
     children.push(title, badge);
     if (normalized.closable) {
+      // Deliberately a span and not a nested <button>: the tab itself is a button, and buttons
+      // cannot nest. The tablist click handler routes clicks that land in here to _closeTab(),
+      // and it stays out of the accessibility tree because Delete is the keyboard equivalent.
       children.push(h('span', {
-        class: 'zx-tabbox__close',
-        ariaHidden: 'true'
+        class: 'zx-tabbox__close zx-icon-btn',
+        ariaHidden: 'true',
+        title: 'Close'
       }, icon('x', { size: 14 })));
     }
     const tab = /** @type {HTMLButtonElement} */ (h('button', {
@@ -353,14 +362,28 @@ export class Tabbox extends Component {
     }
     if (event.key === 'Delete' && current.definition.closable) {
       event.preventDefault();
-      const index = this._tabs.indexOf(current);
-      if (!this._removeTab(current.definition.name, true)) return;
-      const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
-      const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
-      if (focusTarget) this._setFocused(focusTarget);
+      this._closeTab(current);
     }
   }
 
+  /**
+   * Closes a tab on a user gesture, keeping roving focus inside the tablist.
+   * @param {TabRecord} record Tab to close.
+   * @returns {void}
+   * @fires Tabbox#close
+   */
+  _closeTab(record) {
+    const index = this._tabs.indexOf(record);
+    // Clicking the close control focuses its tab first in most browsers, so the element about to
+    // be removed holds the focus; left alone, focus would fall back to <body>.
+    const held = record.tab.contains(document.activeElement);
+    if (!this._removeTab(record.definition.name, true)) return;
+    const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
+    const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
+    // Roving tabindex has to move even for a mouse close, or Tab has no entry point left.
+    if (focusTarget) this._setFocused(focusTarget, held);
+  }
+
   /** @param {string} name @param {boolean} emitClose @returns {boolean} */
   _removeTab(name, emitClose) {
     const record = this._find(name);
@@ -453,7 +476,8 @@ export class Tabbox extends Component {
  */
 
 /**
- * Fired after a closable tab is removed through the keyboard.
+ * Fired after the user removes a closable tab, through its close control or Delete.
+ * `removeTab()` is silent.
  * @event Tabbox#close
  * @type {CustomEvent<{name: string}>}
  */

package/styles/tokens/dark.css

@@ -3,6 +3,9 @@
  * Zinc-950 page, Zinc-900 cards and popovers, Zinc-800 muted fills, translucent white borders
  * (10%) and inputs (15%), Zinc-400 muted text.
  *
+ * The accent roles take the light end of the `--zx-accent-*` ramp (300/400/500) where the light
+ * theme takes the dark end, so a preset that repoints the ramp lands correctly in both.
+ *
  * The `[data-zx-theme="auto"]` block below repeats these assignments under a
  * `prefers-color-scheme` query; CSS has no way to share a declaration block across a media
  * boundary, so the two lists must be kept in sync.
@@ -15,7 +18,7 @@
   --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
   --zx-color-bg-muted: var(--zx-gray-800);
   --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-  --zx-color-bg-selected: color-mix(in srgb, var(--zx-green-400) 18%, var(--zx-gray-900));
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
   --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
   --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
@@ -24,10 +27,10 @@
   --zx-color-text-muted: var(--zx-gray-400);
   --zx-color-text-placeholder: var(--zx-gray-500);
   --zx-color-text-invert: var(--zx-gray-950);
-  --zx-color-accent: var(--zx-green-400);
-  --zx-color-accent-hover: var(--zx-green-300);
-  --zx-color-accent-active: var(--zx-green-500);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+  --zx-color-accent: var(--zx-accent-400);
+  --zx-color-accent-hover: var(--zx-accent-300);
+  --zx-color-accent-active: var(--zx-accent-500);
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
   --zx-color-on-accent: var(--zx-gray-950);
   --zx-color-danger: var(--zx-red-400);
   --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
@@ -53,7 +56,7 @@
     --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
     --zx-color-bg-muted: var(--zx-gray-800);
     --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
-    --zx-color-bg-selected: color-mix(in srgb, var(--zx-green-400) 18%, var(--zx-gray-900));
+    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
     --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
     --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
     --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
@@ -62,10 +65,10 @@
     --zx-color-text-muted: var(--zx-gray-400);
     --zx-color-text-placeholder: var(--zx-gray-500);
     --zx-color-text-invert: var(--zx-gray-950);
-    --zx-color-accent: var(--zx-green-400);
-    --zx-color-accent-hover: var(--zx-green-300);
-    --zx-color-accent-active: var(--zx-green-500);
-    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+    --zx-color-accent: var(--zx-accent-400);
+    --zx-color-accent-hover: var(--zx-accent-300);
+    --zx-color-accent-active: var(--zx-accent-500);
+    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
     --zx-color-on-accent: var(--zx-gray-950);
     --zx-color-danger: var(--zx-red-400);
     --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));

package/styles/tokens/global.css

@@ -31,6 +31,18 @@
   --zx-green-600: #007a55;
   --zx-green-700: #006045;
 
+  /*
+   * Accent ramp — the indirection the semantic tier reads. It defaults to the Emerald ramp
+   * above, which is what makes a theme preset five declarations rather than a second copy of
+   * every semantic mapping: `tokens/themes.css` repoints these, and light, dark, and auto all
+   * follow because each of them picks its own stop off the ramp.
+   */
+  --zx-accent-300: var(--zx-green-300);
+  --zx-accent-400: var(--zx-green-400);
+  --zx-accent-500: var(--zx-green-500);
+  --zx-accent-600: var(--zx-green-600);
+  --zx-accent-700: var(--zx-green-700);
+
   /* Status */
   --zx-red-400: #ff6467;
   --zx-red-500: #e7000b;

package/styles/tokens/semantic.css

@@ -4,6 +4,10 @@
  * The mapping follows the shadcn/ui preset `b2BVl11e4`: white surfaces, Zinc-100 hover/muted
  * fills, Zinc-200 borders and inputs, Zinc-500 muted text, Zinc-950 body text, and the Nova
  * control geometry (32px controls, `--radius` corners, a 3px translucent focus ring).
+ *
+ * The accent roles read `--zx-accent-*` rather than the green ramp directly, which is what lets
+ * `tokens/themes.css` retheme them. Status colours keep their own ramps on purpose — see the note
+ * in that file.
  */
 :root,
 [data-zx-theme="light"] {
@@ -14,7 +18,7 @@
   --zx-color-bg-control: var(--zx-gray-0);
   --zx-color-bg-muted: var(--zx-gray-100);
   --zx-color-bg-hover: var(--zx-gray-100);
-  --zx-color-bg-selected: color-mix(in srgb, var(--zx-green-600) 10%, var(--zx-gray-0));
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 50%, transparent);
   --zx-color-border: var(--zx-gray-200);
   --zx-color-border-strong: var(--zx-gray-300);
@@ -23,10 +27,10 @@
   --zx-color-text-muted: var(--zx-gray-500);
   --zx-color-text-placeholder: var(--zx-gray-400);
   --zx-color-text-invert: var(--zx-gray-50);
-  --zx-color-accent: var(--zx-green-600);
-  --zx-color-accent-hover: var(--zx-green-700);
-  --zx-color-accent-active: var(--zx-green-700);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-green-600) 10%, var(--zx-gray-0));
+  --zx-color-accent: var(--zx-accent-600);
+  --zx-color-accent-hover: var(--zx-accent-700);
+  --zx-color-accent-active: var(--zx-accent-700);
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-on-accent: var(--zx-gray-0);
   --zx-color-danger: var(--zx-red-500);
   --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-500) 10%, var(--zx-gray-0));

package/styles/tokens/themes.css

@@ -0,0 +1,72 @@
+/*
+ * Standard theme presets.
+ *
+ * A preset repoints the tier-1 accent ramp — nothing else. The semantic tier picks its own stop
+ * off that ramp per polarity (600/700 on light surfaces, 300/400/500 on dark ones), so five
+ * declarations retheme light, dark, and auto at once, and every component follows without a
+ * second mapping to keep in sync.
+ *
+ * Set the preset alongside the theme: `<html data-zx-theme="dark" data-zx-preset="ocean">`.
+ * `zx` is the default and never needs stating; the attribute exists so an application can pin it.
+ *
+ * Status colours are deliberately not part of a preset. Danger, warning, and success mean the
+ * same thing whatever a product's brand colour is, and a preset that repainted them would leave
+ * an application with no reliable way to say "this failed".
+ *
+ * Every 600 clears 4.5:1 against white and against the light page, and every 400 clears it
+ * against the dark page, which is what keeps `--zx-color-on-accent` correct in both polarities.
+ */
+
+/* Zx — the ZeyOS brand green on the shadcn Emerald ramp. The default. */
+[data-zx-preset="zx"] {
+  --zx-accent-300: #5ee9b5;
+  --zx-accent-400: #21cc75;
+  --zx-accent-500: #009966;
+  --zx-accent-600: #007a55;
+  --zx-accent-700: #006045;
+}
+
+/* ZeyOS — the gold of the ZeyOS product marque, anchored at 400. */
+[data-zx-preset="zeyos"] {
+  --zx-accent-300: #ffd9a8;
+  --zx-accent-400: #f7bc60;
+  --zx-accent-500: #d0952f;
+  --zx-accent-600: #96690f;
+  --zx-accent-700: #6f4e0b;
+}
+
+/* Ocean — the palette's own blue ramp, for products that read as utilities rather than brands. */
+[data-zx-preset="ocean"] {
+  --zx-accent-300: #8ec5ff;
+  --zx-accent-400: #51a2ff;
+  --zx-accent-500: #2b7fff;
+  --zx-accent-600: #155dfc;
+  --zx-accent-700: #1447e6;
+}
+
+/* Violet */
+[data-zx-preset="violet"] {
+  --zx-accent-300: #c4b4ff;
+  --zx-accent-400: #a684ff;
+  --zx-accent-500: #8e51ff;
+  --zx-accent-600: #7f22fe;
+  --zx-accent-700: #7008e7;
+}
+
+/* Rose */
+[data-zx-preset="rose"] {
+  --zx-accent-300: #ffa1ad;
+  --zx-accent-400: #ff637e;
+  --zx-accent-500: #ff2056;
+  --zx-accent-600: #dc0039;
+  --zx-accent-700: #a80030;
+}
+
+/* Slate — a near-neutral accent, for screens where the data should carry the colour. */
+[data-zx-preset="slate"] {
+  --zx-accent-300: #cad5e2;
+  --zx-accent-400: #90a1b9;
+  --zx-accent-500: #62748e;
+  --zx-accent-600: #45556c;
+  --zx-accent-700: #314158;
+}

package/styles/zx.css

@@ -1,4 +1,5 @@
 @import url("./tokens/global.css");
+@import url("./tokens/themes.css");
 @import url("./tokens/semantic.css");
 @import url("./tokens/dark.css");
 @import url("./tokens/density.css");