@zeyos/zx 4.2.0 → 4.3.0

package/dist/zx.css

@@ -182,9 +182,45 @@
   --zx-color-glass-chrome: color-mix(in srgb, var(--zx-color-bg-surface) 90%, 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-color-overlay-surface: color-mix(in srgb, var(--zx-color-bg-raised) 88%, transparent);
-  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-bg-raised) 94%, transparent);
-  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-border-strong) 72%, var(--zx-color-glass-highlight));
+  --zx-color-overlay-base: var(--zx-color-bg-raised);
+  --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-overlay-base) 72%, transparent);
+  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-overlay-base) 80%, transparent);
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
+  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
+  --zx-color-overlay-hover: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
+  --zx-color-overlay-selected: color-mix(in srgb, var(--zx-color-accent) 18%, transparent);
+  --zx-color-overlay-divider: color-mix(in srgb, var(--zx-color-text) 11%, transparent);
+  --zx-color-overlay-scrim: color-mix(in srgb, var(--zx-color-overlay-base) 28%, transparent);
+  --zx-overlay-specular-strength: 48%;
+  --zx-overlay-surface-image:
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
+      color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 28%,
+      transparent 54%),
+    radial-gradient(
+      120% 100% at 8% -12%,
+      color-mix(in srgb, var(--zx-color-accent) 8%, transparent),
+      transparent 58%);
+  --zx-overlay-toast-image:
+    radial-gradient(
+      120% 160% at 0% 0%,
+      color-mix(in srgb, var(--zx-message-kind, var(--zx-color-info)) 18%, transparent),
+      transparent 62%),
+    var(--zx-overlay-surface-image);
+  --zx-overlay-panel-image:
+    radial-gradient(
+      140% 100% at 0% 0%,
+      color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
+      transparent 58%),
+    radial-gradient(
+      100% 70% at 100% 0%,
+      color-mix(in srgb, var(--zx-color-accent) 5%, transparent),
+      transparent 64%),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 0%,
+      transparent 28%);
   --zx-glass-blur: 8px;
   --zx-glass-saturation: 130%;
   --zx-glass-color-strength: 82%;
@@ -192,8 +228,8 @@
   --zx-glass-filter-control: blur(6px) saturate(116%);
   --zx-glass-filter-raised: blur(8px) saturate(120%);
   --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(12px) saturate(128%);
-  --zx-glass-filter-panel: blur(9px) saturate(120%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-app-icon-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 14%, transparent),
     inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 28%, transparent),
@@ -205,18 +241,38 @@
   --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
   --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, 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-overlay-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 42%, transparent),
+    inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 20%, transparent),
+    var(--zx-overlay-shadow);
+  --zx-glass-panel-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 34%, transparent),
+    inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 14%, transparent),
+    var(--zx-overlay-shadow);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
 @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
   :root,
-  [data-zx-theme] {
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
     --zx-color-glass-chrome: var(--zx-color-bg-surface) !important;
     --zx-color-glass-surface: var(--zx-color-bg-raised) !important;
     --zx-color-glass-control: var(--zx-color-bg-control) !important;
     --zx-color-glass-control-hover: var(--zx-color-bg-hover) !important;
     --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
     --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
+    --zx-color-overlay-hover: var(--zx-color-bg-hover) !important;
+    --zx-color-overlay-selected: var(--zx-color-bg-selected) !important;
+    --zx-color-overlay-divider: var(--zx-color-border) !important;
+    --zx-color-overlay-scrim: var(--zx-color-bg-raised) !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
     --zx-app-icon-core-strength: 68% !important;
     --zx-app-icon-rim-strength: 62% !important;
     --zx-app-icon-bloom-strength: 0% !important;
@@ -229,21 +285,56 @@
     --zx-glass-filter-chrome: none !important;
     --zx-glass-filter-overlay: none !important;
     --zx-glass-filter-panel: none !important;
+    --zx-glass-overlay-shadow: var(--zx-overlay-shadow) !important;
+    --zx-glass-panel-shadow: var(--zx-overlay-shadow) !important;
   }
 }
 @media (forced-colors: active) {
   :root,
-  [data-zx-theme] {
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
     --zx-color-glass-chrome: Canvas !important;
     --zx-color-glass-surface: Canvas !important;
     --zx-color-glass-control: ButtonFace !important;
     --zx-color-glass-control-hover: Highlight !important;
     --zx-color-overlay-surface: Canvas !important;
     --zx-color-overlay-panel: Canvas !important;
+    --zx-color-overlay-backdrop: transparent !important;
     --zx-color-overlay-border: CanvasText !important;
+    --zx-color-overlay-hover: Highlight !important;
+    --zx-color-overlay-selected: Highlight !important;
+    --zx-color-overlay-divider: CanvasText !important;
+    --zx-color-overlay-scrim: Canvas !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
     --zx-glass-control-shadow: none !important;
     --zx-glass-chrome-shadow: none !important;
     --zx-glass-raised-shadow: none !important;
+    --zx-glass-filter-overlay: none !important;
+    --zx-glass-filter-panel: none !important;
+    --zx-glass-overlay-shadow: none !important;
+    --zx-glass-panel-shadow: none !important;
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root,
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
+    --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
+    --zx-glass-filter-overlay: none !important;
+    --zx-glass-filter-panel: none !important;
   }
 }
 
@@ -258,6 +349,8 @@
   --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
   --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-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, 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);
   --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
@@ -295,6 +388,8 @@
     --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
     --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-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+    --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, 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);
     --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
@@ -2634,10 +2729,12 @@ button.zx-panel__toggle:focus-visible {
   max-block-size: min(720px, calc(100vh - (2 * var(--zx-space-6))));
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-xl);
-  background: var(--zx-color-overlay-panel);
+  background-color: var(--zx-color-overlay-panel);
+  background-image: var(--zx-overlay-panel-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-panel);
   backdrop-filter: var(--zx-glass-filter-panel);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
@@ -2651,7 +2748,7 @@ button.zx-panel__toggle:focus-visible {
   }
 }
 .zx-launcher::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 .zx-launcher__surface {
   display: grid;
@@ -2663,7 +2760,7 @@ button.zx-panel__toggle:focus-visible {
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   gap: var(--zx-space-3);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
   padding: var(--zx-space-3) var(--zx-space-4);
 }
 .zx-launcher__search[data-shortcut=false] {
@@ -2746,10 +2843,10 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-launcher__option[aria-selected=true],
 .zx-launcher__option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-launcher__option[aria-current=page] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
   color: var(--zx-color-accent);
 }
 .zx-launcher__option[data-kind=application] {
@@ -2762,7 +2859,7 @@ button.zx-panel__toggle:focus-visible {
   text-align: center;
 }
 .zx-launcher__option[data-kind=application][aria-current=page] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
 }
 .zx-launcher__option[data-kind=application] .zx-launcher__icon {
   min-block-size: 36px;
@@ -2816,7 +2913,7 @@ button.zx-panel__toggle:focus-visible {
   justify-content: end;
   gap: var(--zx-space-4);
   padding: var(--zx-space-2) var(--zx-space-4);
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-divider);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
@@ -2978,7 +3075,7 @@ button.zx-panel__toggle:focus-visible {
   min-inline-size: 220px;
   gap: 2px;
   margin: calc(-1 * var(--zx-space-1)) calc(-1 * var(--zx-space-1)) var(--zx-space-1);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
   padding: var(--zx-space-3);
 }
 .zx-account-menu__panel-identity span {
@@ -3128,7 +3225,7 @@ button.zx-panel__toggle:focus-visible {
 .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);
+  background: var(--zx-color-overlay-hover);
   color: var(--zx-color-accent);
 }
 .zx-app-rail__flyout-item-icon {
@@ -3326,21 +3423,15 @@ button.zx-panel__toggle:focus-visible {
   --zx-message-kind: var(--zx-color-danger);
   background: var(--zx-color-danger-bg);
 }
-@supports (backdrop-filter: blur(1px)) {
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .zx-message__toast {
-    background: color-mix(in srgb, var(--zx-color-info-bg) 34%, var(--zx-color-overlay-surface));
+    border-color: color-mix(in srgb, var(--zx-message-kind) 28%, var(--zx-color-overlay-border));
+    background-color: var(--zx-color-overlay-surface);
+    background-image: var(--zx-overlay-toast-image);
+    background-clip: padding-box;
     -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
     backdrop-filter: var(--zx-glass-filter-overlay);
-    box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
-  }
-  .zx-message__toast[data-kind=success] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 34%, var(--zx-color-overlay-surface));
-  }
-  .zx-message__toast[data-kind=warning] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 34%, var(--zx-color-overlay-surface));
-  }
-  .zx-message__toast[data-kind=error] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 34%, var(--zx-color-overlay-surface));
+    box-shadow: var(--zx-glass-overlay-shadow);
   }
 }
 @media (prefers-reduced-transparency: reduce) {
@@ -3380,7 +3471,7 @@ button.zx-panel__toggle:focus-visible {
   block-size: 4px;
   margin-block-start: var(--zx-space-2);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 .zx-message__progress-fill {
   display: block;
@@ -3427,10 +3518,12 @@ button.zx-panel__toggle:focus-visible {
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-overlay-panel);
+  background-color: var(--zx-color-overlay-panel);
+  background-image: var(--zx-overlay-panel-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-panel);
   backdrop-filter: var(--zx-glass-filter-panel);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
@@ -3444,12 +3537,12 @@ button.zx-panel__toggle:focus-visible {
   }
 }
 .zx-modal::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 .zx-modal__content {
   padding: var(--zx-space-5);
 }
-body:has(> .zx-modal:modal) {
+body:has(.zx-modal:modal) {
   overflow: hidden;
   overscroll-behavior: none;
 }
@@ -3478,7 +3571,8 @@ body:has(> .zx-modal:modal) {
   grid-template-rows: auto minmax(0, 1fr) auto;
   padding: 0;
 }
-.zx-dialog[open] {
+.zx-dialog[open],
+.zx-dialog:popover-open {
   display: grid;
 }
 .zx-dialog__header,
@@ -3490,7 +3584,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-dialog__header {
   justify-content: space-between;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
 }
 .zx-dialog__title {
   margin: 0;
@@ -3509,7 +3603,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-dialog__footer {
   justify-content: flex-end;
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-divider);
 }
 .zx-dialog__footer[hidden] {
   display: none;
@@ -3546,7 +3640,7 @@ body:has(> .zx-modal:modal) {
   border: 0;
   border-radius: 0;
   overflow: hidden;
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
 }
 .zx-sheet[data-side=start],
 .zx-sheet[data-side=end] {
@@ -3557,13 +3651,13 @@ body:has(> .zx-modal:modal) {
 .zx-sheet[data-side=start] {
   inset-inline-start: 0;
   inset-inline-end: auto;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-overlay-border);
   --zx-sheet-enter: -100% 0;
 }
 .zx-sheet[data-side=end] {
   inset-inline-start: auto;
   inset-inline-end: 0;
-  border-inline-start: 1px solid var(--zx-color-border);
+  border-inline-start: 1px solid var(--zx-color-overlay-border);
   --zx-sheet-enter: 100% 0;
 }
 [dir=rtl] .zx-sheet[data-side=start] {
@@ -3581,7 +3675,7 @@ body:has(> .zx-modal:modal) {
 .zx-sheet[data-side=top] {
   inset-block-start: 0;
   inset-block-end: auto;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-border);
   border-end-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   border-end-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   --zx-sheet-enter: 0 -100%;
@@ -3589,7 +3683,7 @@ body:has(> .zx-modal:modal) {
 .zx-sheet[data-side=bottom] {
   inset-block-start: auto;
   inset-block-end: 0;
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-border);
   border-start-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   border-start-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   --zx-sheet-enter: 0 100%;
@@ -3598,8 +3692,21 @@ body:has(> .zx-modal:modal) {
   background: transparent;
 }
 .zx-sheet[data-backdrop=blur]::backdrop {
+  -webkit-backdrop-filter: blur(var(--zx-overlay-blur));
   backdrop-filter: blur(var(--zx-overlay-blur));
 }
+.zx-sheet[data-modality=none]::backdrop,
+.zx-sheet[data-modality=trap-focus]::backdrop {
+  background: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+  .zx-sheet[data-backdrop=blur]::backdrop {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet {
     transition:
@@ -3611,12 +3718,13 @@ body:has(> .zx-modal:modal) {
   .zx-sheet[data-state=open] {
     animation: none;
   }
-  .zx-sheet:not([open]) {
+  .zx-sheet:not([open]):not(:popover-open) {
     translate: var(--zx-sheet-enter, 0 0);
     opacity: 0;
   }
   @starting-style {
-    .zx-sheet[open] {
+    .zx-sheet[open],
+    .zx-sheet:popover-open {
       translate: var(--zx-sheet-enter, 0 0);
       opacity: 0;
     }
@@ -3818,10 +3926,12 @@ body:has(> .zx-modal:modal) {
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
 }
@@ -3851,10 +3961,12 @@ body:has(> .zx-modal:modal) {
   max-inline-size: var(--zx-tooltip-max-inline-size, 260px);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
@@ -4211,7 +4323,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-menu-button__item:hover,
 .zx-menu-button__item:focus-visible {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-menu-button__item[data-danger=true] {
   color: var(--zx-color-danger);
@@ -4228,7 +4340,7 @@ body:has(> .zx-modal:modal) {
 .zx-menu-button__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 
 /* src/components/context-menu/context-menu.css */
@@ -4255,7 +4367,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-context-menu__item:hover,
 .zx-context-menu__item:focus-visible {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-context-menu__item[data-danger=true] {
   color: var(--zx-color-danger);
@@ -4272,7 +4384,7 @@ body:has(> .zx-modal:modal) {
 .zx-context-menu__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 
 /* src/components/select/select.css */
@@ -4374,10 +4486,12 @@ body:has(> .zx-modal:modal) {
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -4400,13 +4514,13 @@ body:has(> .zx-modal:modal) {
   flex: 1;
 }
 .zx-select__option[data-active=true] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-select__option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-select__option[aria-selected=true] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
 }
 .zx-select__option > .zx-icon {
   flex: none;
@@ -4416,7 +4530,7 @@ body:has(> .zx-modal:modal) {
   position: sticky;
   z-index: 1;
   inset-block-start: 0;
-  background: var(--zx-color-overlay-surface);
+  background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -4439,7 +4553,7 @@ body:has(> .zx-modal:modal) {
 .zx-select__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-control-pad-x);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 .zx-select__empty {
   color: var(--zx-color-text-muted);
@@ -4801,10 +4915,12 @@ body:has(> .zx-modal:modal) {
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -4831,7 +4947,7 @@ body:has(> .zx-modal:modal) {
   cursor: pointer;
 }
 .zx-tag-picker__option[data-active] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-tag-picker__option[aria-selected=true] {
   color: var(--zx-color-accent);
@@ -5194,13 +5310,13 @@ body:has(> .zx-modal:modal) {
   place-items: center;
   min-inline-size: var(--zx-control-height);
   padding: 0;
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
 }
 .zx-date-picker__heading {
   overflow: hidden;
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
   font-weight: 650;
   text-overflow: ellipsis;
   text-wrap: nowrap;
@@ -5233,9 +5349,9 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 0;
   min-block-size: var(--zx-control-height);
   padding: 0;
-  border-color: var(--zx-color-bg-surface);
+  border-color: transparent;
   border-radius: var(--zx-radius-md);
-  background: inherit;
+  background: transparent;
   font-variant-numeric: tabular-nums;
 }
 .zx-date-picker__day[data-other-month=true] {
@@ -5275,10 +5391,12 @@ body:has(> .zx-modal:modal) {
   inset: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-3);
 }
 @media (prefers-reduced-transparency: reduce) {
@@ -5303,10 +5421,14 @@ body:has(> .zx-modal:modal) {
 .zx-month-picker__month {
   min-inline-size: 0;
   padding-inline: var(--zx-space-1);
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
+}
+.zx-date-picker__quick-month[aria-selected=true] {
+  background: var(--zx-color-overlay-selected);
+  color: var(--zx-color-accent);
+  font-weight: 700;
 }
-.zx-date-picker__quick-month[aria-selected=true],
 .zx-month-picker__month[aria-selected=true] {
   background: var(--zx-color-bg-selected);
   color: var(--zx-color-accent);
@@ -5572,10 +5694,12 @@ body:has(> .zx-modal:modal) {
 }
 .zx-datebox__popover .zx-date-picker__surface {
   border-color: var(--zx-color-overlay-border);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-datebox__popover .zx-date-picker__surface {
@@ -5893,10 +6017,12 @@ body:has(> .zx-modal:modal) {
 .zx-date-range-box__popover .zx-date-range-picker__surface {
   max-inline-size: none;
   border-color: var(--zx-color-overlay-border);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-date-range-box__popover .zx-date-range-picker__surface {
@@ -6250,6 +6376,7 @@ body:has(> .zx-modal:modal) {
   inline-size: 100%;
   block-size: 100%;
   min-inline-size: 0;
+  min-block-size: 0;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--zx-calendar-event-color) 65%, var(--zx-color-border));
   border-inline-start: 3px solid var(--zx-calendar-event-color);
@@ -6313,8 +6440,11 @@ body:has(> .zx-modal:modal) {
   z-index: 3;
   display: grid;
   block-size: 8px;
+  min-block-size: 0;
   place-items: center;
+  appearance: none;
   border: 0;
+  border-radius: 0;
   background: transparent;
   padding: 0;
   cursor: ns-resize;
@@ -6335,6 +6465,7 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__event[data-variant=span] .zx-calendar__event-action,
 .zx-calendar__event[data-variant=month] .zx-calendar__event-action {
   display: flex;
+  min-block-size: 0;
   align-items: center;
   gap: var(--zx-space-1);
   padding-block: 2px;
@@ -6377,8 +6508,11 @@ body:has(> .zx-modal:modal) {
   border-block-end: 1px solid var(--zx-color-border);
 }
 .zx-calendar__agenda-heading {
-  align-self: start;
+  align-self: stretch;
+  appearance: none;
   border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
@@ -6390,15 +6524,19 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__agenda-heading[aria-current=date] {
   color: var(--zx-color-accent);
 }
+.zx-calendar__agenda-events {
+  display: grid;
+  min-inline-size: 0;
+}
 .zx-calendar__agenda-empty {
   margin: 0;
   color: var(--zx-color-text-muted);
   padding: var(--zx-space-3);
 }
-.zx-calendar__agenda-day > .zx-calendar__event {
+.zx-calendar__agenda-events > .zx-calendar__event {
   border-block-end: 1px solid var(--zx-color-border);
 }
-.zx-calendar__agenda-day > .zx-calendar__event:last-child {
+.zx-calendar__agenda-events > .zx-calendar__event:last-child {
   border-block-end: 0;
 }
 .zx-calendar__event[data-variant=agenda] .zx-calendar__event-action {
@@ -6461,59 +6599,16 @@ body:has(> .zx-modal:modal) {
   text-transform: uppercase;
   letter-spacing: .04em;
 }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday {
-  grid-row: 1;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(7) {
-  grid-column: 2;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(6) {
-  grid-column: 3;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(5) {
-  grid-column: 4;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(4) {
-  grid-column: 5;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(3) {
-  grid-column: 6;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(2) {
-  grid-column: 7;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(1) {
-  grid-column: 8;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(7) {
-  grid-column: 1;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(6) {
-  grid-column: 2;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(5) {
-  grid-column: 3;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(4) {
-  grid-column: 4;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(3) {
-  grid-column: 5;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(2) {
-  grid-column: 6;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(1) {
-  grid-column: 7;
-}
 .zx-calendar__month-week {
   min-block-size: 7.5rem;
   border-block-end: 1px solid var(--zx-color-border);
 }
 .zx-calendar__month-week-number {
-  grid-row: 1 / span 2;
+  grid-row: 1;
+  appearance: none;
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font: inherit;
@@ -6532,11 +6627,19 @@ body:has(> .zx-modal:modal) {
 }
 .zx-calendar__month-days {
   grid-row: 1;
+  min-block-size: 7.5rem;
+  align-items: stretch;
 }
 .zx-calendar__month-day {
+  display: flex;
+  block-size: 100%;
+  appearance: none;
+  align-items: flex-start;
+  justify-content: flex-end;
   min-block-size: var(--zx-control-height);
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   padding: var(--zx-space-2);
@@ -6544,6 +6647,9 @@ body:has(> .zx-modal:modal) {
   text-align: end;
   cursor: pointer;
 }
+.zx-calendar__month-day:last-child {
+  border-inline-end: 0;
+}
 .zx-calendar__month-day[data-other-month=true] {
   color: var(--zx-color-text-muted);
   background: var(--zx-color-bg-muted);
@@ -6551,20 +6657,35 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__month-day[aria-current=date] {
   color: var(--zx-color-accent);
   font-weight: 750;
-  box-shadow: inset 0 2px var(--zx-color-accent);
 }
 .zx-calendar__month-day:hover:not(:disabled) {
   background: var(--zx-color-bg-hover);
 }
 .zx-calendar__month-events {
-  grid-row: 2;
+  grid-row: 1;
+  z-index: 2;
   grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2));
   align-content: start;
   gap: 2px 0;
-  padding-block: var(--zx-space-1);
+  padding-block: calc(var(--zx-control-height) + var(--zx-space-1)) var(--zx-space-1);
+  pointer-events: none;
+}
+.zx-calendar__month-events > .zx-calendar__event,
+.zx-calendar__month-events > .zx-calendar__more {
+  pointer-events: auto;
+}
+.zx-calendar__event[data-variant=month] .zx-calendar__event-action {
+  border-color: color-mix(in srgb, var(--zx-calendar-event-color) 55%, var(--zx-color-border));
+  border-inline-start-width: 1px;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--zx-calendar-event-color) 13%, var(--zx-color-bg-surface));
+}
+.zx-calendar__event[data-variant=month][data-all-day=true] .zx-calendar__event-time {
+  display: none;
 }
 .zx-calendar__more {
   align-self: center;
+  min-block-size: 0;
   overflow: hidden;
   border: 0;
   background: transparent;
@@ -6702,8 +6823,12 @@ body:has(> .zx-modal:modal) {
     position: sticky;
     inset-block-start: 0;
     z-index: 3;
+    border-inline-end: 0;
     border-block-end: 1px solid var(--zx-color-border);
   }
+  .zx-calendar__agenda-events {
+    grid-column: 1;
+  }
   .zx-calendar__event[data-variant=agenda] .zx-calendar__event-action {
     grid-template-columns: 5.5rem minmax(0, 1fr);
   }
@@ -6875,10 +7000,12 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 190px;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-2);
   max-block-size: min(360px, 70vh);
   overflow: auto;
@@ -6902,7 +7029,7 @@ body:has(> .zx-modal:modal) {
   padding-inline: var(--zx-space-2);
 }
 .zx-table__column-option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-table__column-option > label,
 .zx-table__column-label {