@zeyos/zx 4.1.1 → 4.3.0

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

@@ -2,6 +2,12 @@
   --zx-app-icon-size: 36px;
   --zx-app-icon-glyph-size: 52%;
   --zx-app-icon-color: var(--zx-color-accent);
+  --zx-app-icon-core: color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-core-strength), var(--zx-color-app-icon-shade));
+  --zx-app-icon-rim: color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-rim-strength), var(--zx-app-icon-rim-base));
+  --zx-app-icon-bloom: color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-bloom-strength), transparent);
+  --zx-app-icon-specular: color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-app-icon-specular-strength), transparent);
+  --zx-app-icon-halo: 0 0 var(--zx-app-icon-halo-size) color-mix(in srgb, var(--zx-app-icon-color) var(--zx-app-icon-halo-strength), transparent);
+  --zx-app-icon-selected-ring: color-mix(in srgb, var(--zx-app-icon-color) 54%, transparent);
   position: relative;
   isolation: isolate;
   display: inline-grid;
@@ -9,63 +15,81 @@
   flex: none;
   inline-size: var(--zx-app-icon-size);
   block-size: var(--zx-app-icon-size);
-  overflow: hidden;
-  border: 1px solid var(--zx-color-glass-border);
+  overflow: visible;
   border-radius: max(var(--zx-radius-sm), calc(var(--zx-app-icon-size) * .12));
-  background: var(--zx-app-icon-color);
-  box-shadow: var(--zx-app-icon-shadow);
   color: var(--zx-app-icon-glyph, var(--zx-color-app-icon-glyph));
   font-size: var(--zx-app-icon-size);
   vertical-align: middle;
-  transform: translateZ(0);
 }
 
-.zx-app-icon[data-glass="subtle"],
-.zx-app-icon[data-glass="strong"] {
+.zx-app-icon[data-shape="circle"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-app-icon__surface {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  display: grid;
+  overflow: hidden;
+  place-items: center;
+  border: 1px solid var(--zx-app-icon-rim);
+  border-radius: inherit;
+  background: var(--zx-app-icon-core);
+  box-shadow: var(--zx-app-icon-shadow);
+}
+
+.zx-app-icon[data-glass="subtle"] .zx-app-icon__surface,
+.zx-app-icon[data-glass="strong"] .zx-app-icon__surface {
   background:
-    linear-gradient(145deg, var(--zx-color-glass-highlight-strong), transparent 38%),
-    linear-gradient(to bottom right, transparent 42%, var(--zx-color-app-icon-depth)),
-    color-mix(in srgb, var(--zx-app-icon-color) var(--zx-glass-color-strength), transparent);
-  -webkit-backdrop-filter: blur(calc(var(--zx-glass-blur) * .55)) saturate(var(--zx-glass-saturation));
-  backdrop-filter: blur(calc(var(--zx-glass-blur) * .55)) saturate(var(--zx-glass-saturation));
+    radial-gradient(112% 92% at 50% 122%, var(--zx-app-icon-bloom), transparent 64%),
+    var(--zx-app-icon-core);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 
-.zx-app-icon[data-glass="strong"] {
-  -webkit-backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
-  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+.zx-app-icon[data-glass="strong"] .zx-app-icon__surface {
+  box-shadow: var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
 }
 
-.zx-app-icon[data-glass="none"] {
-  border-color: var(--zx-color-border);
+.zx-app-icon[data-glass="none"] .zx-app-icon__surface {
+  border-color: color-mix(in srgb, var(--zx-app-icon-color) 62%, var(--zx-color-border));
+  background: color-mix(in srgb, var(--zx-app-icon-color) 72%, var(--zx-color-app-icon-shade));
   box-shadow: none;
 }
 
 .zx-app-icon[data-glass="none"] .zx-app-icon__shine { display: none; }
-.zx-app-icon[data-glass="none"]::after { display: none; }
+.zx-app-icon[data-glass="none"] .zx-app-icon__surface::after { display: none; }
 
-.zx-app-icon[data-selected] {
-  outline: 2px solid var(--zx-color-bg-page);
-  box-shadow: 0 0 0 3px var(--zx-color-ring), var(--zx-overlay-shadow);
+.zx-app-icon[data-selected] .zx-app-icon__surface {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--zx-color-bg-page),
+    0 0 0 3px var(--zx-app-icon-selected-ring),
+    var(--zx-app-icon-shadow-hover),
+    var(--zx-app-icon-halo);
 }
 
 .zx-app-icon__shine {
   position: absolute;
   z-index: 1;
-  inset: 1px 13% auto;
-  block-size: 38%;
-  border-radius: 999px;
-  background: linear-gradient(to bottom, var(--zx-color-glass-highlight-strong), transparent);
-  filter: blur(1px);
+  inset: 2px 18% auto;
+  block-size: 1px;
+  border-radius: var(--zx-radius-full);
+  background: linear-gradient(90deg, transparent, var(--zx-app-icon-specular), transparent);
+  opacity: .72;
   pointer-events: none;
 }
 
-.zx-app-icon::after {
+.zx-app-icon[data-glass="strong"] .zx-app-icon__shine { opacity: .9; }
+
+.zx-app-icon__surface::after {
   content: "";
   position: absolute;
   z-index: 1;
   inset: 0;
   border-radius: inherit;
-  box-shadow: inset 0 0 0 1px var(--zx-color-glass-highlight);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 56%, transparent);
+  opacity: .56;
   pointer-events: none;
 }
 
@@ -82,7 +106,7 @@
   padding: 0;
   font-size: var(--zx-app-icon-glyph-size);
   line-height: 1;
-  filter: drop-shadow(var(--zx-glass-glyph-shadow));
+  filter: none;
   transform: translate(-50%, -50%);
 }
 
@@ -117,8 +141,8 @@
 .zx-app-icon__badge {
   position: absolute;
   z-index: 3;
-  inset-block-end: 1px;
-  inset-inline-end: 1px;
+  inset-block-start: -3px;
+  inset-inline-end: -3px;
   display: grid;
   place-items: center;
   min-inline-size: 14px;
@@ -133,47 +157,43 @@
   line-height: 1;
 }
 
-.zx-app-icon:hover {
-  border-color: var(--zx-color-glass-highlight-strong);
-  box-shadow: var(--zx-app-icon-shadow-hover);
-  filter: brightness(1.06) saturate(1.08);
+.zx-app-icon:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover .zx-app-icon__surface,
+:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover .zx-app-icon__surface {
+  border-color: color-mix(in srgb, var(--zx-app-icon-color) 76%, var(--zx-color-glass-highlight-strong));
+  box-shadow: var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
+  filter: brightness(1.06) saturate(1.04);
 }
 
-.zx-app-icon:focus-visible,
-:is(a, button, [role="button"]):focus-visible > .zx-app-icon {
+.zx-app-icon:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):focus-visible .zx-app-icon__surface,
+:is(a, button, [role="button"]):not(:disabled):not([aria-disabled="true"]):focus-visible .zx-app-icon__surface {
   outline: none;
-  box-shadow: var(--zx-focus-ring), var(--zx-app-icon-shadow-hover);
+  box-shadow: var(--zx-focus-ring), var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .zx-app-icon {
+  .zx-app-icon__surface {
     transition: border-color var(--zx-dur-fast) var(--zx-ease),
       box-shadow var(--zx-dur-fast) var(--zx-ease),
-      filter var(--zx-dur-fast) var(--zx-ease),
-      transform var(--zx-dur-fast) var(--zx-ease);
-  }
-
-  .zx-app-icon:hover {
-    transform: translateY(-2px) scale(1.035);
+      filter var(--zx-dur-fast) var(--zx-ease);
   }
 }
 
 @media (prefers-reduced-transparency: reduce) {
-  .zx-app-icon[data-glass="strong"] {
-    background: var(--zx-app-icon-color);
+  .zx-app-icon[data-glass="strong"] .zx-app-icon__surface {
+    background: var(--zx-app-icon-core);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 
-  .zx-app-icon[data-glass="subtle"] {
-    background: var(--zx-app-icon-color);
+  .zx-app-icon[data-glass="subtle"] .zx-app-icon__surface {
+    background: var(--zx-app-icon-core);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 }
 
 @media (forced-colors: active) {
-  .zx-app-icon {
+  .zx-app-icon__surface {
     border-color: ButtonText;
     background: ButtonFace;
     color: ButtonText;
@@ -184,6 +204,12 @@
     backdrop-filter: none;
   }
 
-  .zx-app-icon::after,
+  .zx-app-icon__surface::after,
   .zx-app-icon__shine { display: none; }
+
+  .zx-app-icon__badge {
+    border-color: Canvas;
+    background: Highlight;
+    color: HighlightText;
+  }
 }

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,10 +108,11 @@ 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));
-    const children = [
+    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)
-    ];
+    );
+    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);
@@ -135,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);
 }
 
@@ -100,8 +101,16 @@
 }
 .zx-app-rail__flyout-item:hover,
 .zx-app-rail__flyout-item:focus-visible,
-.zx-app-rail__flyout-item[aria-current="page"] { background: var(--zx-color-bg-hover); color: var(--zx-color-accent); }
+.zx-app-rail__flyout-item[aria-current="page"] { background: var(--zx-color-overlay-hover); color: var(--zx-color-accent); }
 .zx-app-rail__flyout-item-icon { display: inline-flex; grid-column: 1; }
 .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

@@ -14,8 +14,8 @@
   font-weight: var(--zx-control-font-weight);
   line-height: 1;
   cursor: pointer;
-  -webkit-backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
-  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+  -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),