@zeyos/zx 4.1.0 → 4.1.1

package/dist/zx.css

@@ -143,6 +143,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);
@@ -168,15 +170,24 @@
   --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);
+    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);
 }
@@ -508,7 +519,7 @@ svg.zx-icon {
   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;
@@ -516,6 +527,9 @@ svg.zx-icon {
   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),
@@ -523,7 +537,7 @@ svg.zx-icon {
     box-shadow var(--zx-dur-fast) var(--zx-ease);
 }
 .zx-btn:hover:not(:disabled) {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-glass-control-hover);
 }
 .zx-btn:active:not(:disabled) {
   border-color: var(--zx-color-border-strong);
@@ -559,6 +573,9 @@ svg.zx-icon {
 .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) {
   border-color: transparent;
@@ -587,6 +604,29 @@ svg.zx-icon {
 .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;
+  }
+}
 
 /* src/components/badge/badge.css */
 .zx-badge {
@@ -1419,14 +1459,34 @@ svg.zx-icon {
   background: var(--zx-color-bg-surface);
 }
 .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] {
   border: 1px solid transparent;
   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);
 }
@@ -2077,23 +2137,31 @@ button.zx-panel__toggle:focus-visible {
   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%),
+      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));
 }
 .zx-app-icon[data-glass=none] {
@@ -2103,41 +2171,79 @@ button.zx-panel__toggle:focus-visible {
 .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);
   box-shadow: 0 0 0 3px var(--zx-color-ring), var(--zx-overlay-shadow);
 }
 .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;
@@ -2153,9 +2259,37 @@ button.zx-panel__toggle:focus-visible {
   font-weight: 700;
   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;
   }
 }
@@ -2165,6 +2299,14 @@ button.zx-panel__toggle:focus-visible {
     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;
   }
 }
 
@@ -2842,8 +2984,9 @@ button.zx-panel__toggle:focus-visible {
 @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] {
     background: color-mix(in srgb, var(--zx-color-success-bg) 38%, var(--zx-color-glass-surface));
@@ -2857,6 +3000,7 @@ button.zx-panel__toggle:focus-visible {
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-message__toast {
+    -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
   .zx-message__toast[data-kind=info] {

package/dist/zx.esm.js

@@ -19646,11 +19646,12 @@ var AppIcon = class extends Component {
       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),
-      badge2
-    );
+      h("span", { class: "zx-app-icon__glyph", ariaHidden: "true" }, visual)
+    ];
+    if (badge2) children.push(badge2);
+    this.el.replaceChildren(...children);
   }
 };
 function appIcon(options = {}) {