@zeyos/zx 4.1.0 → 4.2.0

package/src/components/app-icon/app-icon.js

@@ -12,12 +12,13 @@ import { isCssColor } from '../../core/util.js';
  * @property {string|null} [label=null] Accessible image label; null makes the icon decorative.
  * @property {string|number|null} [badge=null] Optional corner badge.
  * @property {boolean} [selected=false] Whether the icon represents the active application.
+ * @property {'tile'|'circle'} [shape='tile'] Identity vessel geometry.
  * @property {false|'subtle'|'strong'} [glass='subtle'] CSS-first glass treatment.
  * @property {string|string[]} [class] Additional class names.
  */
 
 /**
- * Stable application-identity tile with progressive CSS glass treatment.
+ * Stable application-identity surface with progressive CSS glass treatment.
  * @extends {Component<AppIconOptions>}
  */
 export class AppIcon extends Component {
@@ -32,6 +33,7 @@ export class AppIcon extends Component {
     label: null,
     badge: null,
     selected: false,
+    shape: 'tile',
     glass: 'subtle',
     class: []
   };
@@ -42,6 +44,7 @@ export class AppIcon extends Component {
     const root = /** @type {HTMLElement} */ (this.el ?? h('span'));
     this.el = root;
     this._snapshot = this._createdRoot ? null : snapshotTarget(root);
+    this._interactiveRoot = root.matches('a[href], button, input, select, textarea, [role="button"], [role="link"]');
     this._state = { ...this.options };
     this._appliedClasses = [];
     this._sync();
@@ -78,10 +81,20 @@ export class AppIcon extends Component {
     if (isCssColor(state.color)) this.el.style.setProperty('--zx-app-icon-color', String(state.color));
     else this.el.style.removeProperty('--zx-app-icon-color');
     this.el.dataset.glass = normalizeGlass(state.glass);
+    this.el.dataset.shape = normalizeShape(state.shape);
     this.el.toggleAttribute('data-selected', Boolean(state.selected));
 
     const label = state.label == null ? '' : String(state.label).trim();
-    if (label) {
+    if (this._interactiveRoot) {
+      const originalRole = originalAttribute(this._snapshot, 'role');
+      const originalLabel = originalAttribute(this._snapshot, 'aria-label');
+      if (originalRole === null) this.el.removeAttribute('role');
+      else this.el.setAttribute('role', originalRole);
+      if (label) this.el.setAttribute('aria-label', label);
+      else if (originalLabel === null) this.el.removeAttribute('aria-label');
+      else this.el.setAttribute('aria-label', originalLabel);
+      this.el.removeAttribute('aria-hidden');
+    } else if (label) {
       this.el.setAttribute('role', 'img');
       this.el.setAttribute('aria-label', label);
       this.el.removeAttribute('aria-hidden');
@@ -95,11 +108,15 @@ export class AppIcon extends Component {
     const badge = state.badge == null || state.badge === '' ? null : h('span', {
       class: 'zx-app-icon__badge', ariaHidden: 'true'
     }, String(state.badge));
-    this.el.replaceChildren(
+    const surface = h('span', { class: 'zx-app-icon__surface', ariaHidden: 'true' },
       h('span', { class: 'zx-app-icon__shine', ariaHidden: 'true' }),
-      h('span', { class: 'zx-app-icon__glyph', ariaHidden: 'true' }, visual),
-      badge
+      h('span', { class: 'zx-app-icon__glyph', ariaHidden: 'true' }, visual)
     );
+    const children = [surface];
+    // Native replaceChildren() stringifies nullish arguments. Only append a badge when it exists,
+    // otherwise the icon gets a visible "null" text node that can also disturb optical centring.
+    if (badge) children.push(badge);
+    this.el.replaceChildren(...children);
   }
 }
 
@@ -132,3 +149,13 @@ function normalizeGlass(value) {
   if (value === false || value === 'none') return 'none';
   return value === 'strong' ? 'strong' : 'subtle';
 }
+
+/** @param {unknown} value @returns {'tile'|'circle'} */
+function normalizeShape(value) {
+  return value === 'circle' ? 'circle' : 'tile';
+}
+
+/** @param {{attributes: [string, string][]}|null} snapshot @param {string} name @returns {string|null} */
+function originalAttribute(snapshot, name) {
+  return snapshot?.attributes.find(([attribute]) => attribute === name)?.[1] ?? null;
+}

package/src/components/app-rail/app-rail.css

@@ -1,8 +1,9 @@
 .zx-app-rail {
   display: flex;
   min-inline-size: 0;
-  border: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-raised);
+  border: 1px solid var(--zx-color-glass-border);
+  background: var(--zx-color-glass-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
   color: var(--zx-color-text);
 }
 
@@ -105,3 +106,11 @@
 .zx-app-rail__flyout-item-label { grid-column: 2; }
 .zx-app-rail__flyout-item-badge { grid-column: 3; color: var(--zx-color-text-muted); font-size: var(--zx-text-xs); }
 .zx-app-rail__flyout-item-disclosure { display: inline-flex; grid-column: 4; color: var(--zx-color-text-muted); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-app-rail {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-surface);
+    box-shadow: none;
+  }
+}

package/src/components/app-sidebar/app-sidebar.css

@@ -1,8 +1,9 @@
 .zx-app-sidebar {
   display: flex;
   min-block-size: 0;
-  border: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-raised);
+  border: 1px solid var(--zx-color-glass-border);
+  background: var(--zx-color-glass-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
   color: var(--zx-color-text);
 }
 
@@ -78,3 +79,11 @@
 }
 .zx-app-sidebar__footer[hidden] { display: none; }
 .zx-app-sidebar__rail-header { display: grid; gap: var(--zx-space-1); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-app-sidebar {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-surface);
+    box-shadow: none;
+  }
+}

package/src/components/aurora/aurora.css

@@ -0,0 +1,143 @@
+.zx-aurora {
+  --zx-aurora-color-1: var(--zx-color-accent);
+  --zx-aurora-color-2: var(--zx-color-info);
+  --zx-aurora-color-3: var(--zx-color-success);
+  --zx-aurora-color-4: var(--zx-color-warning);
+  --zx-aurora-core: 7%;
+  --zx-aurora-wash: 4%;
+  --zx-aurora-faint: 2%;
+  --zx-aurora-core-1: color-mix(in srgb, var(--zx-aurora-color-1) var(--zx-aurora-core), transparent);
+  --zx-aurora-core-2: color-mix(in srgb, var(--zx-aurora-color-2) var(--zx-aurora-core), transparent);
+  --zx-aurora-core-3: color-mix(in srgb, var(--zx-aurora-color-3) var(--zx-aurora-core), transparent);
+  --zx-aurora-core-4: color-mix(in srgb, var(--zx-aurora-color-4) var(--zx-aurora-core), transparent);
+  --zx-aurora-wash-1: color-mix(in srgb, var(--zx-aurora-color-1) var(--zx-aurora-wash), transparent);
+  --zx-aurora-wash-2: color-mix(in srgb, var(--zx-aurora-color-2) var(--zx-aurora-wash), transparent);
+  --zx-aurora-wash-3: color-mix(in srgb, var(--zx-aurora-color-3) var(--zx-aurora-wash), transparent);
+  --zx-aurora-wash-4: color-mix(in srgb, var(--zx-aurora-color-4) var(--zx-aurora-wash), transparent);
+  --zx-aurora-faint-1: color-mix(in srgb, var(--zx-aurora-color-1) var(--zx-aurora-faint), transparent);
+  --zx-aurora-faint-2: color-mix(in srgb, var(--zx-aurora-color-2) var(--zx-aurora-faint), transparent);
+  --zx-aurora-faint-3: color-mix(in srgb, var(--zx-aurora-color-3) var(--zx-aurora-faint), transparent);
+  --zx-aurora-faint-4: color-mix(in srgb, var(--zx-aurora-color-4) var(--zx-aurora-faint), transparent);
+  position: relative;
+  isolation: isolate;
+}
+
+.zx-aurora[data-intensity="balanced"] {
+  --zx-aurora-core: 11%;
+  --zx-aurora-wash: 6.5%;
+  --zx-aurora-faint: 3%;
+}
+
+.zx-aurora[data-intensity="vivid"] {
+  --zx-aurora-core: 16%;
+  --zx-aurora-wash: 9%;
+  --zx-aurora-faint: 4.5%;
+}
+
+:is([data-zx-theme="dark"] .zx-aurora, .zx-aurora[data-zx-theme="dark"]) {
+  --zx-aurora-core: 12%;
+  --zx-aurora-wash: 7%;
+  --zx-aurora-faint: 3%;
+}
+
+:is([data-zx-theme="dark"] .zx-aurora, .zx-aurora[data-zx-theme="dark"])[data-intensity="balanced"] {
+  --zx-aurora-core: 17%;
+  --zx-aurora-wash: 10%;
+  --zx-aurora-faint: 5%;
+}
+
+:is([data-zx-theme="dark"] .zx-aurora, .zx-aurora[data-zx-theme="dark"])[data-intensity="vivid"] {
+  --zx-aurora-core: 24%;
+  --zx-aurora-wash: 14%;
+  --zx-aurora-faint: 7%;
+}
+
+.zx-aurora::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-repeat: no-repeat;
+  pointer-events: none;
+}
+
+.zx-aurora[data-preset="source"]::before {
+  background-image:
+    radial-gradient(94% 78% at 0% 0%, var(--zx-aurora-core-1) 0%, var(--zx-aurora-wash-1) 34%, transparent 72%),
+    radial-gradient(68% 54% at 72% 0%, var(--zx-aurora-wash-2) 0%, var(--zx-aurora-faint-2) 42%, transparent 74%),
+    radial-gradient(62% 74% at 100% 82%, var(--zx-aurora-wash-3) 0%, transparent 68%),
+    radial-gradient(58% 42% at 38% 100%, var(--zx-aurora-faint-4) 0%, transparent 72%);
+}
+
+.zx-aurora[data-preset="confluence"]::before {
+  background-image:
+    radial-gradient(108% 84% at 0% 0%, var(--zx-aurora-core-1) 0%, var(--zx-aurora-wash-1) 34%, transparent 70%),
+    radial-gradient(92% 72% at 100% 0%, var(--zx-aurora-core-2) 0%, var(--zx-aurora-wash-2) 36%, transparent 72%),
+    radial-gradient(78% 62% at 0% 100%, var(--zx-aurora-wash-3) 0%, transparent 70%),
+    radial-gradient(72% 64% at 100% 100%, var(--zx-aurora-wash-4) 0%, transparent 72%);
+}
+
+.zx-aurora[data-preset="horizon"]::before {
+  background-image:
+    radial-gradient(72% 28% at 8% 19%, var(--zx-aurora-core-1) 0%, var(--zx-aurora-wash-1) 48%, transparent 78%),
+    radial-gradient(68% 24% at 42% 23%, var(--zx-aurora-core-2) 0%, var(--zx-aurora-wash-2) 44%, transparent 78%),
+    radial-gradient(72% 26% at 76% 18%, var(--zx-aurora-core-3) 0%, var(--zx-aurora-wash-3) 46%, transparent 80%),
+    radial-gradient(54% 22% at 100% 26%, var(--zx-aurora-wash-4) 0%, transparent 78%);
+}
+
+.zx-aurora[data-preset="diagonal"]::before {
+  background-image:
+    linear-gradient(126deg, var(--zx-aurora-core-1) 0%, var(--zx-aurora-wash-1) 18%, transparent 44%),
+    linear-gradient(126deg, transparent 18%, var(--zx-aurora-wash-2) 42%, transparent 63%),
+    linear-gradient(126deg, transparent 44%, var(--zx-aurora-wash-3) 67%, transparent 84%),
+    linear-gradient(126deg, transparent 68%, var(--zx-aurora-wash-4) 90%, transparent 100%);
+}
+
+.zx-aurora[data-preset="edge"]::before {
+  background-image:
+    radial-gradient(38% 108% at 0% 18%, var(--zx-aurora-core-1) 0%, var(--zx-aurora-faint-1) 52%, transparent 78%),
+    radial-gradient(72% 34% at 72% 0%, var(--zx-aurora-wash-2) 0%, transparent 74%),
+    radial-gradient(38% 106% at 100% 84%, var(--zx-aurora-wash-3) 0%, transparent 74%),
+    radial-gradient(76% 32% at 32% 100%, var(--zx-aurora-wash-4) 0%, transparent 76%);
+}
+
+.zx-aurora[data-preset="curtain"]::before {
+  background-image:
+    radial-gradient(28% 112% at 10% 0%, var(--zx-aurora-core-1) 0%, var(--zx-aurora-faint-1) 52%, transparent 78%),
+    radial-gradient(26% 104% at 38% 0%, var(--zx-aurora-core-2) 0%, var(--zx-aurora-faint-2) 48%, transparent 76%),
+    radial-gradient(28% 110% at 67% 0%, var(--zx-aurora-core-3) 0%, var(--zx-aurora-faint-3) 50%, transparent 78%),
+    radial-gradient(26% 106% at 92% 0%, var(--zx-aurora-core-4) 0%, var(--zx-aurora-faint-4) 48%, transparent 76%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :is([data-zx-theme="auto"] .zx-aurora, .zx-aurora[data-zx-theme="auto"]) {
+    --zx-aurora-core: 12%;
+    --zx-aurora-wash: 7%;
+    --zx-aurora-faint: 3%;
+  }
+
+  :is([data-zx-theme="auto"] .zx-aurora, .zx-aurora[data-zx-theme="auto"])[data-intensity="balanced"] {
+    --zx-aurora-core: 17%;
+    --zx-aurora-wash: 10%;
+    --zx-aurora-faint: 5%;
+  }
+
+  :is([data-zx-theme="auto"] .zx-aurora, .zx-aurora[data-zx-theme="auto"])[data-intensity="vivid"] {
+    --zx-aurora-core: 24%;
+    --zx-aurora-wash: 14%;
+    --zx-aurora-faint: 7%;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+  .zx-aurora::before {
+    display: none;
+  }
+}
+
+@media (prefers-contrast: more) {
+  .zx-aurora::before {
+    opacity: .35;
+  }
+}

package/src/components/aurora/aurora.js

@@ -0,0 +1,146 @@
+import { Component } from '../../core/component.js';
+import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
+import { isCssColor } from '../../core/util.js';
+
+const PRESETS = Object.freeze(['source', 'confluence', 'horizon', 'diagonal', 'edge', 'curtain']);
+const INTENSITIES = Object.freeze(['subtle', 'balanced', 'vivid']);
+const COLOR_PROPERTIES = Object.freeze([
+  '--zx-aurora-color-1', '--zx-aurora-color-2',
+  '--zx-aurora-color-3', '--zx-aurora-color-4'
+]);
+
+/**
+ * @typedef {Object} AuroraOptions
+ * @property {'source'|'confluence'|'horizon'|'diagonal'|'edge'|'curtain'} [preset='source']
+ *   Geometry of the ambient light field.
+ * @property {string[]} [colors=[]] Zero to four concrete CSS colours. An empty list uses semantic
+ *   Zx colours; shorter palettes repeat across the four gradient fields.
+ * @property {'subtle'|'balanced'|'vivid'} [intensity='subtle'] Strength of the light field.
+ */
+
+/**
+ * Decorative multicolour ambient light for an existing application surface.
+ * Aurora owns no application content or interaction: it enhances the target in place and renders
+ * its pointer-transparent light field behind the target's existing children.
+ * @extends {Component<AuroraOptions>}
+ */
+export class Aurora extends Component {
+  static cssName = 'aurora';
+
+  /** @type {Readonly<AuroraOptions>} */
+  static defaults = {
+    preset: 'source',
+    colors: [],
+    intensity: 'subtle'
+  };
+
+  /**
+   * Creates or enhances an Aurora surface.
+   * @param {Element|string|null} [target=null] Existing surface, selector, or null.
+   * @param {AuroraOptions} [options={}] Aurora options.
+   */
+  constructor(target = null, options = {}) {
+    super(target, options);
+  }
+
+  /** @returns {HTMLElement} */
+  render() {
+    const created = !this.el;
+    const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
+    this.el = root;
+    this._createdRoot = created;
+    this._original = created ? null : snapshotTarget(root);
+    this._cleaned = false;
+    this._initialColors = COLOR_PROPERTIES.map((property) => ({
+      property,
+      value: root.style.getPropertyValue(property),
+      priority: root.style.getPropertyPriority(property)
+    }));
+    this._colors = [];
+
+    this.setPreset(this.options.preset);
+    this.setIntensity(this.options.intensity);
+    this.setColors(this.options.colors);
+    return root;
+  }
+
+  /** Sets the light-field geometry without replacing surface content. @param {string} preset @returns {this} */
+  setPreset(preset) {
+    this.el.dataset.preset = normalizeAuroraPreset(preset);
+    return this;
+  }
+
+  /** Sets zero to four concrete colours without replacing surface content. @param {string[]|null} colors @returns {this} */
+  setColors(colors) {
+    const palette = normalizeAuroraColors(colors);
+    const fields = expandAuroraColors(palette);
+    this._colors = [...palette];
+    this.el.dataset.colors = palette.length === 0 ? 'semantic' : String(palette.length);
+
+    if (fields.length === 0) {
+      for (const initial of this._initialColors) {
+        if (initial.value) this.el.style.setProperty(initial.property, initial.value, initial.priority);
+        else this.el.style.removeProperty(initial.property);
+      }
+      return this;
+    }
+    for (let index = 0; index < COLOR_PROPERTIES.length; index += 1) {
+      this.el.style.setProperty(COLOR_PROPERTIES[index], fields[index]);
+    }
+    return this;
+  }
+
+  /** Sets the light-field strength without replacing surface content. @param {string} intensity @returns {this} */
+  setIntensity(intensity) {
+    this.el.dataset.intensity = normalizeAuroraIntensity(intensity);
+    return this;
+  }
+
+  /** Restores an enhanced target exactly, or removes an owned surface. @returns {void} */
+  destroy() {
+    if (this._cleaned) return;
+    this._cleaned = true;
+    super.destroy();
+    if (!this._createdRoot) restoreTarget(this.el, this._original);
+  }
+}
+
+/** @param {unknown} value @returns {'source'|'confluence'|'horizon'|'diagonal'|'edge'|'curtain'} */
+export function normalizeAuroraPreset(value) {
+  const preset = String(value ?? '').trim().toLowerCase();
+  if (!PRESETS.includes(preset)) throw new TypeError(`Unknown Aurora preset: ${value}`);
+  return /** @type {'source'|'confluence'|'horizon'|'diagonal'|'edge'|'curtain'} */ (preset);
+}
+
+/** @param {unknown} value @returns {'subtle'|'balanced'|'vivid'} */
+export function normalizeAuroraIntensity(value) {
+  const intensity = String(value ?? '').trim().toLowerCase();
+  if (!INTENSITIES.includes(intensity)) throw new TypeError(`Unknown Aurora intensity: ${value}`);
+  return /** @type {'subtle'|'balanced'|'vivid'} */ (intensity);
+}
+
+/** @param {unknown} value @returns {string[]} */
+export function normalizeAuroraColors(value) {
+  if (value == null) return [];
+  if (!Array.isArray(value)) throw new TypeError('Aurora colors must be an array');
+  if (value.length > COLOR_PROPERTIES.length) {
+    throw new TypeError('Aurora accepts at most four colors');
+  }
+  return value.map((color) => {
+    if (!isCssColor(color)) throw new TypeError(`Invalid Aurora color: ${color}`);
+    return color.trim();
+  });
+}
+
+/**
+ * Repeats a one-to-three-colour palette deterministically across four gradient fields.
+ * @param {string[]} colors
+ * @returns {string[]}
+ */
+export function expandAuroraColors(colors) {
+  if (colors.length === 0) return [];
+  if (colors.length === 1) return [colors[0], colors[0], colors[0], colors[0]];
+  if (colors.length === 2) return [colors[0], colors[1], colors[0], colors[1]];
+  if (colors.length === 3) return [colors[0], colors[1], colors[2], colors[1]];
+  return [...colors];
+}

package/src/components/avatar/avatar.css

@@ -39,7 +39,7 @@
   display: grid;
   place-items: center;
   border: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
   font-size: calc(var(--zx-avatar-size) * .34);
   font-weight: 700;
   line-height: 1;

package/src/components/button/button.css

@@ -6,7 +6,7 @@
   min-block-size: var(--zx-control-height);
   border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-button-radius, var(--zx-control-radius));
-  background: var(--zx-color-bg-control);
+  background: var(--zx-color-glass-control);
   color: var(--zx-color-text);
   padding-inline: var(--zx-control-pad-x);
   font: inherit;
@@ -14,6 +14,9 @@
   font-weight: var(--zx-control-font-weight);
   line-height: 1;
   cursor: pointer;
+  -webkit-backdrop-filter: var(--zx-glass-filter-control);
+  backdrop-filter: var(--zx-glass-filter-control);
+  box-shadow: var(--zx-glass-control-shadow);
   transition: color var(--zx-dur-fast) var(--zx-ease),
     background-color var(--zx-dur-fast) var(--zx-ease),
     border-color var(--zx-dur-fast) var(--zx-ease),
@@ -21,7 +24,7 @@
 }
 
 .zx-btn:hover:not(:disabled) {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-glass-control-hover);
 }
 
 .zx-btn:active:not(:disabled) {
@@ -66,6 +69,9 @@
 .zx-btn[data-kind="ghost"] {
   border-color: transparent;
   background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  box-shadow: none;
 }
 
 .zx-btn[data-kind="ghost"]:hover:not(:disabled) {
@@ -101,3 +107,29 @@
 .zx-btn-group > .zx-btn:focus-visible {
   z-index: 1;
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-btn {
+    background: var(--zx-color-bg-control);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .zx-btn {
+    border-color: ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .zx-btn[data-kind="primary"] {
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+}