@zeyos/zx 4.1.0 → 4.1.1

package/docs/llms.md

@@ -194,8 +194,8 @@ registerModules({ tickets: '#f04639', 'my-fork': { label: 'My Fork', icon: 'zeyo
 - `moduleIcon(name, {size, label, standard})` → the bare glyph; `standard: true` uses the stock
   Font Awesome fallback, for pages on a kit without the ZeyOS uploads.
 - `moduleChip(name, {size, iconSize, label, title, standard})` → `<span class="zx-module-icon">`
-  with the glyph on the module colour. The glyph colour is whichever of ZeyOS's two foregrounds
-  (`#ffffff`, `#141414`) contrasts better, via `moduleGlyphColor(hex)`.
+  with a centred white glyph on the module colour. `moduleGlyphColor(hex)` remains available as a
+  separate contrast helper for non-AppIcon integrations that deliberately choose their foreground.
 - `moduleInfo`/`moduleColor`/`moduleIconName`/`moduleKeys`/`normalizeModuleName` read the config.
   Module, entity, and API resource names are all accepted, case-insensitively, with dots and
   underscores normalized: `'transactions.billing'`, `'invoices'`, and `'Transactions Billing'` all
@@ -469,7 +469,9 @@ options rather than application globals.
   offline `icon` override; Zx never loads a network asset automatically.
 - **Material** — subtle glass is a CSS border/highlight treatment; strong glass progressively adds
   `backdrop-filter`. `prefers-reduced-transparency` and browsers without support receive a solid
-  tile. The glyph and label semantics do not depend on the visual treatment.
+  tile. Glyphs remain white and geometrically centred in either built-in SVG or Font Awesome form;
+  hover and focus feedback use the same semantic material tokens. The glyph and label semantics do
+  not depend on the visual treatment.
 - **Accessibility** — a non-empty `label` gives the root `role="img"`; otherwise it is decorative.
   The badge is visual supplementary status, so include its meaning in `label` when it matters.
 <!-- /doc -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeyos/zx",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Dependency-free JavaScript implementation of the Xenon Design System.",
   "type": "module",
   "license": "MIT",

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

@@ -11,22 +11,27 @@
   block-size: var(--zx-app-icon-size);
   overflow: hidden;
   border: 1px solid var(--zx-color-glass-border);
-  border-radius: max(var(--zx-radius-md), calc(var(--zx-app-icon-size) * .22));
+  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-text-invert));
+  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"] {
   background:
-    linear-gradient(145deg, var(--zx-color-glass-highlight), transparent 44%),
+    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));
 }
 
 .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));
 }
 
@@ -36,6 +41,7 @@
 }
 
 .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-selected] {
   outline: 2px solid var(--zx-color-bg-page);
@@ -44,34 +50,73 @@
 
 .zx-app-icon__shine {
   position: absolute;
-  z-index: -1;
-  inset: 1px 12% auto;
-  block-size: 42%;
+  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(2px);
+  filter: blur(1px);
+  pointer-events: none;
+}
+
+.zx-app-icon::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--zx-color-glass-highlight);
   pointer-events: none;
 }
 
 .zx-app-icon__glyph {
-  display: inline-grid;
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
   place-items: center;
   inline-size: var(--zx-app-icon-glyph-size);
   block-size: var(--zx-app-icon-glyph-size);
+  margin: 0;
+  padding: 0;
   font-size: var(--zx-app-icon-glyph-size);
   line-height: 1;
   filter: drop-shadow(var(--zx-glass-glyph-shadow));
+  transform: translate(-50%, -50%);
 }
 
 .zx-app-icon__glyph > .zx-icon,
 .zx-app-icon__glyph > svg,
 .zx-app-icon__glyph > i {
+  display: grid;
+  place-items: center;
   inline-size: 1em;
   block-size: 1em;
+  margin: 0;
+  color: inherit;
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.zx-app-icon__glyph > i::before {
+  display: block;
+  line-height: 1;
+}
+
+.zx-app-icon__glyph svg [fill]:not([fill="none"]) {
+  fill: currentColor;
+}
+
+.zx-app-icon__glyph svg [stroke]:not([stroke="none"]) {
+  stroke: currentColor;
 }
 
 .zx-app-icon__badge {
   position: absolute;
+  z-index: 3;
   inset-block-end: 1px;
   inset-inline-end: 1px;
   display: grid;
@@ -88,9 +133,41 @@
   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:focus-visible,
+:is(a, button, [role="button"]):focus-visible > .zx-app-icon {
+  outline: none;
+  box-shadow: var(--zx-focus-ring), var(--zx-app-icon-shadow-hover);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-app-icon {
+    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);
+  }
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .zx-app-icon[data-glass="strong"] {
     background: var(--zx-app-icon-color);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  .zx-app-icon[data-glass="subtle"] {
+    background: var(--zx-app-icon-color);
+    -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 }
@@ -101,5 +178,12 @@
     background: ButtonFace;
     color: ButtonText;
     box-shadow: none;
+    filter: none;
+    transform: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
   }
+
+  .zx-app-icon::after,
+  .zx-app-icon__shine { display: none; }
 }

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

@@ -95,11 +95,14 @@ 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 children = [
       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)
+    ];
+    // 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);
   }
 }
 

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: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+  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;
+  }
+}

package/src/components/card/card.css

@@ -14,9 +14,11 @@
 }
 
 .zx-card[data-variant="raised"] {
-  border: 1px solid transparent;
-  background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-overlay-shadow);
+  border: 1px solid var(--zx-color-glass-border);
+  background: var(--zx-color-glass-surface);
+  -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));
+  box-shadow: var(--zx-glass-raised-shadow);
 }
 
 .zx-card[data-variant="filled"] {
@@ -24,6 +26,26 @@
   background: var(--zx-color-bg-muted);
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-card[data-variant="raised"] {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
+@media (forced-colors: active) {
+  .zx-card[data-variant="raised"] {
+    border-color: ButtonText;
+    background: Canvas;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
 .zx-card[data-linked="true"]:hover {
   background: var(--zx-color-bg-hover);
 }

package/src/components/message/message.css

@@ -59,8 +59,9 @@
 @supports (backdrop-filter: blur(1px)) {
   .zx-message__toast {
     background: color-mix(in srgb, var(--zx-color-info-bg) 38%, var(--zx-color-glass-surface));
-    backdrop-filter: blur(var(--zx-overlay-blur)) saturate(var(--zx-glass-saturation));
-    box-shadow: inset 0 1px 0 var(--zx-color-glass-highlight), var(--zx-overlay-shadow);
+    -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));
+    box-shadow: var(--zx-glass-raised-shadow);
   }
 
   .zx-message__toast[data-kind="success"] {
@@ -77,7 +78,10 @@
 }
 
 @media (prefers-reduced-transparency: reduce) {
-  .zx-message__toast { backdrop-filter: none; }
+  .zx-message__toast {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
   .zx-message__toast[data-kind="info"] { background: var(--zx-color-info-bg); }
   .zx-message__toast[data-kind="success"] { background: var(--zx-color-success-bg); }
   .zx-message__toast[data-kind="warning"] { background: var(--zx-color-warning-bg); }

package/src/zeyos/icons.js

@@ -7,7 +7,7 @@
 import { icon, loadFontAwesome } from '../index.js';
 import { appIcon } from '../components/app-icon/app-icon.js';
 import { isCssColor } from '../core/util.js';
-import { moduleGlyphColor, moduleInfo, normalizeModuleName } from './modules.js';
+import { moduleInfo, normalizeModuleName } from './modules.js';
 
 /**
  * The ZeyOS Font Awesome kit. It carries the licensed Font Awesome styles plus the custom
@@ -65,8 +65,8 @@ export function moduleIcon(name, options = {}) {
 
 /**
  * Creates a module's icon chip: the glyph on the module's identity colour, the way ZeyOS draws
- * module icons in navigation and record headers. The glyph colour is whichever of ZeyOS's two
- * foregrounds contrasts better with the background.
+ * module icons in navigation and record headers. AppIcon identity glyphs stay white across every
+ * module colour; material shading and the glyph shadow preserve their silhouette on light colours.
  * @param {string} name Module, entity, or resource name.
  * @param {ModuleChipOptions} [options={}] Display and accessibility options.
  * @returns {HTMLElement} A `<span class="zx-module-icon">` wrapping the glyph.
@@ -93,8 +93,8 @@ export function moduleChip(name, options = {}) {
   });
   chip.dataset.module = key;
   chip.style.setProperty('--zx-module-color', background);
-  chip.style.setProperty('--zx-module-glyph', moduleGlyphColor(background));
-  chip.style.setProperty('--zx-app-icon-glyph', moduleGlyphColor(background));
+  chip.style.setProperty('--zx-module-glyph', 'var(--zx-color-app-icon-glyph)');
+  chip.style.setProperty('--zx-app-icon-glyph', 'var(--zx-color-app-icon-glyph)');
   if (title) chip.title = info.label;
   return chip;
 }

package/styles/tokens/semantic.css

@@ -27,6 +27,8 @@
   --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-app-icon-glyph: var(--zx-gray-0);
+  --zx-color-app-icon-shade: var(--zx-gray-950);
   --zx-color-accent: var(--zx-accent-600);
   --zx-color-accent-hover: var(--zx-accent-700);
   --zx-color-accent-active: var(--zx-accent-700);
@@ -53,12 +55,18 @@
   --zx-color-glass-border: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight-strong: color-mix(in srgb, var(--zx-gray-0) 38%, transparent);
+  --zx-color-app-icon-depth: color-mix(in srgb, var(--zx-color-app-icon-shade) 26%, transparent);
   --zx-color-glass-surface: color-mix(in srgb, var(--zx-color-bg-raised) 78%, transparent);
+  --zx-color-glass-control: color-mix(in srgb, var(--zx-color-bg-control) 88%, transparent);
+  --zx-color-glass-control-hover: color-mix(in srgb, var(--zx-color-bg-hover) 76%, var(--zx-color-glass-surface));
   --zx-glass-blur: 8px;
   --zx-glass-saturation: 130%;
   --zx-glass-color-strength: 82%;
-  --zx-app-icon-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 28%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 16%, transparent), 0 5px 14px color-mix(in srgb, var(--zx-app-icon-color) 28%, transparent);
-  --zx-glass-glyph-shadow: 0 1px 1px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
+  --zx-app-icon-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 28%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 16%, transparent), 0 5px 14px color-mix(in srgb, var(--zx-color-app-icon-shade) 28%, transparent);
+  --zx-app-icon-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 20%, transparent), 0 9px 22px color-mix(in srgb, var(--zx-color-app-icon-shade) 36%, transparent);
+  --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
+  --zx-glass-raised-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-overlay-shadow);
+  --zx-glass-glyph-shadow: 0 1px 2px color-mix(in srgb, var(--zx-gray-950) 58%, transparent);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }