@zeyos/zx 4.1.1 → 4.3.0

package/dist/zx.css

@@ -171,26 +171,172 @@
   --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-app-icon-core-strength: 52%;
+  --zx-app-icon-rim-strength: 58%;
+  --zx-app-icon-bloom-strength: 64%;
+  --zx-app-icon-specular-strength: 72%;
+  --zx-app-icon-rim-base: var(--zx-color-glass-highlight);
+  --zx-app-icon-halo-size: 14px;
+  --zx-app-icon-halo-strength: 22%;
   --zx-color-glass-surface: color-mix(in srgb, var(--zx-color-bg-raised) 78%, transparent);
+  --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-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%;
+  --zx-glass-filter-icon: blur(4px) saturate(118%);
+  --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(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) 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);
+    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),
+    0 2px 6px color-mix(in srgb, var(--zx-color-app-icon-shade) 24%, 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);
+    inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 20%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 32%, transparent),
+    0 4px 10px color-mix(in srgb, var(--zx-color-app-icon-shade) 30%, 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-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-glyph-shadow: 0 1px 2px color-mix(in srgb, var(--zx-gray-950) 58%, transparent);
+  --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,
+  .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;
+    --zx-app-icon-specular-strength: 0% !important;
+    --zx-app-icon-rim-base: var(--zx-color-border) !important;
+    --zx-app-icon-halo-strength: 0% !important;
+    --zx-glass-filter-icon: none !important;
+    --zx-glass-filter-control: none !important;
+    --zx-glass-filter-raised: none !important;
+    --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,
+  .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;
+  }
+}
 
 /* styles/tokens/dark.css */
 [data-zx-theme=dark] {
@@ -203,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);
@@ -240,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);
@@ -499,15 +649,8 @@ svg.zx-icon {
   vertical-align: middle;
 }
 .zx-module-icon {
-  display: inline-grid;
-  place-items: center;
   flex: none;
-  inline-size: var(--zx-module-icon-size, 1.5rem);
-  block-size: var(--zx-module-icon-size, 1.5rem);
-  border-radius: var(--zx-radius-sm);
-  background: var(--zx-module-color, var(--zx-module-default));
-  color: var(--zx-module-glyph, var(--zx-module-fg-light));
-  font-size: calc(var(--zx-module-icon-size, 1.5rem) * 0.6);
+  color: var(--zx-module-glyph, var(--zx-color-app-icon-glyph));
 }
 
 /* src/components/button/button.css */
@@ -527,8 +670,8 @@ 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));
+  -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),
@@ -1461,8 +1604,8 @@ svg.zx-icon {
 .zx-card[data-variant=raised] {
   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));
+  -webkit-backdrop-filter: var(--zx-glass-filter-raised);
+  backdrop-filter: var(--zx-glass-filter-raised);
   box-shadow: var(--zx-glass-raised-shadow);
 }
 .zx-card[data-variant=filled] {
@@ -1591,20 +1734,243 @@ svg.zx-icon {
   }
 }
 
+/* src/components/aurora/aurora.css */
+.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;
+  }
+}
+
 /* src/components/panel/panel.css */
 .zx-panel {
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: var(--zx-shadow-1);
 }
 .zx-panel__header {
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
-  background: var(--zx-panel-header-bg, var(--zx-color-bg-raised));
+  background: var(--zx-panel-header-bg, var(--zx-color-glass-chrome));
+  box-shadow: var(--zx-glass-chrome-shadow);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-panel__header {
+    background: var(--zx-panel-header-bg, var(--zx-color-bg-raised));
+    box-shadow: none;
+  }
 }
 .zx-panel__toggle {
   display: flex;
@@ -1700,7 +2066,7 @@ button.zx-panel__toggle:focus-visible {
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-surface);
+  background: var(--zx-color-glass-chrome);
 }
 .zx-master-panel__header {
   display: flex;
@@ -1708,9 +2074,9 @@ button.zx-panel__toggle:focus-visible {
   align-items: center;
   gap: var(--zx-space-4);
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
-  border-block-start: 4px solid var(--zx-master-panel-accent, var(--zx-module-default));
   border-block-end: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-glass-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
   padding: var(--zx-space-2) var(--zx-space-4);
 }
 .zx-master-panel__title {
@@ -1738,6 +2104,15 @@ button.zx-panel__toggle:focus-visible {
   padding: var(--zx-space-3) var(--zx-space-4);
   color: var(--zx-color-text-muted);
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-master-panel {
+    background: var(--zx-color-bg-surface);
+  }
+  .zx-master-panel__header {
+    background: var(--zx-color-bg-raised);
+    box-shadow: none;
+  }
+}
 
 /* src/components/tabbox/tabbox.css */
 .zx-tabbox {
@@ -1958,11 +2333,13 @@ button.zx-panel__toggle:focus-visible {
   min-inline-size: 0;
   align-items: center;
   gap: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-glass-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-glass-chrome);
   padding: var(--zx-space-2) var(--zx-space-3);
-  box-shadow: var(--zx-overlay-shadow);
+  -webkit-backdrop-filter: var(--zx-glass-filter-chrome);
+  backdrop-filter: var(--zx-glass-filter-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
 }
 .zx-navigation-bar__brand {
   flex: none;
@@ -2042,9 +2419,18 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-navigation-bar__panels {
   border: 1px solid var(--zx-color-border);
-  border-block-start: 0;
-  border-radius: 0 0 var(--zx-radius-lg) var(--zx-radius-lg);
+  border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
+  margin-block-start: var(--zx-space-2);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-navigation-bar__bar {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 .zx-navigation-bar__panel {
   padding: var(--zx-space-4);
@@ -2128,6 +2514,12 @@ button.zx-panel__toggle:focus-visible {
   --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;
@@ -2135,70 +2527,86 @@ button.zx-panel__toggle:focus-visible {
   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));
-}
-.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));
+    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=none] {
-  border-color: var(--zx-color-border);
+.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] .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 {
+.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;
+  inset: 2px 18% auto;
+  block-size: 1px;
+  border-radius: var(--zx-radius-full);
   background:
     linear-gradient(
-      to bottom,
-      var(--zx-color-glass-highlight-strong),
+      90deg,
+      transparent,
+      var(--zx-app-icon-specular),
       transparent);
-  filter: blur(1px);
+  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;
 }
 .zx-app-icon__glyph {
@@ -2214,7 +2622,7 @@ button.zx-panel__toggle:focus-visible {
   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%);
 }
 .zx-app-icon__glyph > .zx-icon,
@@ -2244,8 +2652,8 @@ button.zx-panel__toggle:focus-visible {
 .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;
@@ -2259,42 +2667,42 @@ 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: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;
@@ -2304,25 +2712,43 @@ button.zx-panel__toggle:focus-visible {
     -webkit-backdrop-filter: none;
     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;
+  }
 }
 
 /* src/components/launcher/launcher.css */
 .zx-launcher {
   inline-size: min(760px, calc(100vw - (2 * var(--zx-space-4))));
   max-block-size: min(720px, calc(100vh - (2 * var(--zx-space-6))));
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-xl);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-launcher {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 .zx-launcher::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 .zx-launcher__surface {
   display: grid;
@@ -2334,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] {
@@ -2417,10 +2843,11 @@ 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] {
-  box-shadow: inset 2px 0 var(--zx-color-accent);
+  background: var(--zx-color-overlay-selected);
+  color: var(--zx-color-accent);
 }
 .zx-launcher__option[data-kind=application] {
   display: grid;
@@ -2432,7 +2859,7 @@ button.zx-panel__toggle:focus-visible {
   text-align: center;
 }
 .zx-launcher__option[data-kind=application][aria-current=page] {
-  box-shadow: inset 0 -2px var(--zx-color-accent);
+  background: var(--zx-color-overlay-selected);
 }
 .zx-launcher__option[data-kind=application] .zx-launcher__icon {
   min-block-size: 36px;
@@ -2486,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);
 }
@@ -2562,7 +2989,7 @@ button.zx-panel__toggle:focus-visible {
   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;
@@ -2648,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 {
@@ -2660,8 +3087,9 @@ button.zx-panel__toggle:focus-visible {
 .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);
 }
 .zx-app-rail[data-orientation=vertical] {
@@ -2797,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 {
@@ -2817,13 +3245,21 @@ button.zx-panel__toggle:focus-visible {
   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;
+  }
+}
 
 /* src/components/app-sidebar/app-sidebar.css */
 .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);
 }
 .zx-app-sidebar[data-orientation=horizontal] {
@@ -2928,6 +3364,13 @@ button.zx-panel__toggle:focus-visible {
   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;
+  }
+}
 
 /* src/components/message/message.css */
 .zx-message {
@@ -2961,11 +3404,10 @@ button.zx-panel__toggle:focus-visible {
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border);
-  border-inline-start: 4px solid var(--zx-message-kind);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
   background: var(--zx-color-info-bg);
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
   padding: var(--zx-space-3);
   color: var(--zx-color-text);
 }
@@ -2981,27 +3423,23 @@ 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) 38%, 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-message__toast[data-kind=success] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 38%, var(--zx-color-glass-surface));
-  }
-  .zx-message__toast[data-kind=warning] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 38%, var(--zx-color-glass-surface));
-  }
-  .zx-message__toast[data-kind=error] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 38%, var(--zx-color-glass-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: var(--zx-glass-overlay-shadow);
   }
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-message__toast {
+    border-color: var(--zx-color-border);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
   }
   .zx-message__toast[data-kind=info] {
     background: var(--zx-color-info-bg);
@@ -3033,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;
@@ -3078,20 +3516,33 @@ button.zx-panel__toggle:focus-visible {
   max-inline-size: calc(100vw - (2 * var(--zx-space-4)));
   max-block-size: calc(100vh - (2 * var(--zx-space-4)));
   overflow: auto;
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-modal {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 .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;
 }
@@ -3120,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,
@@ -3132,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;
@@ -3151,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;
@@ -3188,7 +3640,7 @@ body:has(> .zx-modal:modal) {
   border: 0;
   border-radius: 0;
   overflow: hidden;
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
 }
 .zx-sheet[data-side=start],
 .zx-sheet[data-side=end] {
@@ -3199,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] {
@@ -3223,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%;
@@ -3231,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%;
@@ -3240,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:
@@ -3253,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;
     }
@@ -3292,6 +3758,9 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 0;
   min-block-size: 0;
   border-radius: 0;
+  background: var(--zx-color-bg-raised);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   box-shadow: none;
 }
 .zx-dock[data-orientation=vertical] > .zx-sheet[data-docked] {
@@ -3455,13 +3924,26 @@ body:has(> .zx-modal:modal) {
   max-inline-size: calc(100vw - (2 * var(--zx-space-3)));
   max-block-size: calc(100vh - (2 * var(--zx-space-3)));
   overflow: auto;
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-dropdown {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-dropdown:popover-open {
     animation: zx-dropdown-enter var(--zx-dur-fast) var(--zx-ease);
@@ -3477,10 +3959,14 @@ body:has(> .zx-modal:modal) {
 /* src/components/tooltip/tooltip.css */
 .zx-tooltip {
   max-inline-size: var(--zx-tooltip-max-inline-size, 260px);
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
@@ -3490,6 +3976,15 @@ body:has(> .zx-modal:modal) {
   pointer-events: none;
   user-select: none;
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-tooltip {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-tooltip:popover-open {
     animation: zx-tooltip-enter var(--zx-dur-fast) var(--zx-ease);
@@ -3821,14 +4316,14 @@ body:has(> .zx-modal:modal) {
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: var(--zx-color-bg-raised);
-  background: var(--zx-color-bg-raised);
+  border-color: transparent;
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   text-align: start;
 }
 .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);
@@ -3845,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 */
@@ -3865,14 +4360,14 @@ body:has(> .zx-modal:modal) {
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: var(--zx-color-bg-raised);
-  background: var(--zx-color-bg-raised);
+  border-color: transparent;
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   text-align: start;
 }
 .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);
@@ -3889,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 */
@@ -3989,10 +4484,14 @@ body:has(> .zx-modal:modal) {
   inline-size: max-content;
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -4015,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;
@@ -4031,7 +4530,7 @@ body:has(> .zx-modal:modal) {
   position: sticky;
   z-index: 1;
   inset-block-start: 0;
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -4039,10 +4538,22 @@ body:has(> .zx-modal:modal) {
   padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
   text-transform: uppercase;
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-select__panel,
+  .zx-select__group {
+    background: var(--zx-color-bg-raised);
+  }
+  .zx-select__panel {
+    border-color: var(--zx-color-border-strong);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 .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);
@@ -4402,13 +4913,26 @@ body:has(> .zx-modal:modal) {
   inline-size: max-content;
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-tag-picker__panel {
+    border-color: var(--zx-color-border-strong);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 .zx-tag-picker__list {
   min-inline-size: 0;
   overflow-y: auto;
@@ -4423,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);
@@ -4786,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;
@@ -4825,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] {
@@ -4865,12 +5389,25 @@ body:has(> .zx-modal:modal) {
   position: absolute;
   z-index: 2;
   inset: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   padding: var(--zx-space-3);
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-date-picker__quick {
+    border-color: var(--zx-color-border-strong);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
 .zx-date-picker__quick[hidden] {
   display: none;
 }
@@ -4884,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);
@@ -5142,7 +5683,7 @@ body:has(> .zx-modal:modal) {
   overflow: visible;
   max-inline-size: calc(100vw - var(--zx-space-4));
   border: 0;
-  background: var(--zx-color-bg-raised);
+  background: none;
   padding: 0;
 }
 .zx-datebox__popover:not(:popover-open)[data-state=closed] {
@@ -5152,8 +5693,22 @@ body:has(> .zx-modal:modal) {
   display: block;
 }
 .zx-datebox__popover .zx-date-picker__surface {
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  border-color: var(--zx-color-overlay-border);
+  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-overlay-shadow);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-datebox__popover .zx-date-picker__surface {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 
 /* src/components/date-picker/date-range-picker.css */
@@ -5461,8 +6016,22 @@ body:has(> .zx-modal:modal) {
 }
 .zx-date-range-box__popover .zx-date-range-picker__surface {
   max-inline-size: none;
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  border-color: var(--zx-color-overlay-border);
+  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-overlay-shadow);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-date-range-box__popover .zx-date-range-picker__surface {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 
 /* src/components/timebox/timebox.css */
@@ -5510,362 +6079,1318 @@ body:has(> .zx-modal:modal) {
   color: var(--zx-color-danger);
 }
 
-/* src/components/table/table.css */
-.zx-table {
+/* src/components/calendar/calendar.css */
+.zx-calendar {
+  --zx-calendar-time-axis: 4.75rem;
+  --zx-calendar-slot-height: 24px;
+  --zx-calendar-event-color: var(--zx-color-accent);
+  position: relative;
+  container-type: inline-size;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow: hidden;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-sm);
+}
+.zx-calendar__toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--zx-space-3);
   min-inline-size: 0;
+  padding: var(--zx-space-3);
+  border-block-end: 1px solid var(--zx-color-border);
 }
-.zx-table__column-controls {
-  position: relative;
-  inline-size: max-content;
-  margin: 0 0 var(--zx-space-2) auto;
+.zx-calendar__navigation,
+.zx-calendar__commands,
+.zx-calendar__views {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
 }
-.zx-table__reorder-status {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
+.zx-calendar__navigation {
+  justify-self: start;
+  gap: var(--zx-space-1);
 }
-.zx-table__column-controls > summary {
+.zx-calendar__commands {
+  justify-self: end;
+  gap: var(--zx-space-3);
+}
+.zx-calendar__views {
+  overflow-x: auto;
+}
+.zx-calendar__toolbar-button,
+.zx-calendar__view-button,
+.zx-calendar__new {
   display: inline-flex;
+  min-block-size: var(--zx-control-height);
   align-items: center;
-  gap: var(--zx-space-2);
-  list-style: none;
+  justify-content: center;
+  border: 1px solid var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+  color: var(--zx-color-text);
+  font: inherit;
+  font-size: var(--zx-text-sm);
   cursor: pointer;
 }
-.zx-table__column-controls > summary::-webkit-details-marker {
-  display: none;
-}
-.zx-table__column-list {
-  position: absolute;
-  z-index: 4;
-  inset-block-start: calc(100% + var(--zx-space-1));
-  inset-inline-end: 0;
-  display: grid;
-  min-inline-size: 190px;
-  border: 1px solid var(--zx-color-border-strong);
-  border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
-  padding: var(--zx-space-2);
+.zx-calendar__toolbar-button {
+  min-inline-size: var(--zx-control-height);
+  border-radius: var(--zx-control-radius);
+  padding-inline: var(--zx-space-3);
 }
-.zx-table__column-option {
-  display: flex;
-  align-items: center;
-  gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
-  border-radius: var(--zx-radius-sm);
+.zx-calendar__toolbar-button:has(.zx-icon) {
   padding-inline: var(--zx-space-2);
 }
-.zx-table__column-option:hover {
-  background: var(--zx-color-bg-hover);
+.zx-calendar__view-button {
+  border-inline-end-width: 0;
+  padding-inline: var(--zx-space-3);
 }
-.zx-table__reorder-column,
-.zx-table__reorder-header,
-.zx-table__reorder-cell {
-  inline-size: var(--zx-control-height);
-  text-align: center;
+.zx-calendar__view-button:first-child {
+  border-start-start-radius: var(--zx-control-radius);
+  border-end-start-radius: var(--zx-control-radius);
 }
-.zx-table__row-handle {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 26px;
-  block-size: 26px;
-  min-block-size: 0;
-  border: 0;
-  border-radius: var(--zx-radius-sm);
-  background: transparent;
-  padding: 0;
-  color: var(--zx-color-text-muted);
-  cursor: grab;
+.zx-calendar__view-button:last-child {
+  border-inline-end-width: 1px;
+  border-start-end-radius: var(--zx-control-radius);
+  border-end-end-radius: var(--zx-control-radius);
 }
-.zx-table__row-handle:hover,
-.zx-table__row-handle[aria-pressed=true] {
+.zx-calendar__view-button[aria-pressed=true] {
+  position: relative;
+  z-index: 1;
+  border-color: var(--zx-color-accent);
+  background: var(--zx-color-bg-selected);
+  color: var(--zx-color-accent);
+}
+.zx-calendar__new {
+  gap: var(--zx-space-2);
+  border-color: var(--zx-color-accent);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-accent);
+  color: var(--zx-color-on-accent);
+  padding-inline: var(--zx-space-3);
+  font-weight: 650;
+}
+.zx-calendar__toolbar-button:hover:not(:disabled),
+.zx-calendar__view-button:hover:not(:disabled) {
   background: var(--zx-color-bg-hover);
-  color: var(--zx-color-text);
 }
-.zx-table__row-handle:active {
-  cursor: grabbing;
+.zx-calendar__new:hover:not(:disabled) {
+  background: var(--zx-color-accent-hover);
 }
-.zx-table__body tr[data-dragging] {
+.zx-calendar button:disabled {
+  cursor: default;
   opacity: .55;
 }
-.zx-table__body tr[data-drop=before] {
-  box-shadow: inset 0 2px 0 var(--zx-color-accent);
+.zx-calendar__toolbar-button:focus-visible,
+.zx-calendar__view-button:focus-visible,
+.zx-calendar__new:focus-visible,
+.zx-calendar__event-action:focus-visible,
+.zx-calendar__event-resize:focus-visible,
+.zx-calendar__slot:focus-visible,
+.zx-calendar__day-heading:focus-visible,
+.zx-calendar__month-day:focus-visible,
+.zx-calendar__year-day:focus-visible,
+.zx-calendar__agenda-heading:focus-visible,
+.zx-calendar__more:focus-visible,
+.zx-calendar__month-week-number:focus-visible {
+  z-index: 4;
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
 }
-.zx-table__body tr[data-drop=after] {
-  box-shadow: inset 0 -2px 0 var(--zx-color-accent);
+.zx-calendar__heading {
+  min-inline-size: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-lg);
+  font-weight: 700;
+  line-height: 1.25;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.zx-table__scroll {
-  position: relative;
-  max-inline-size: 100%;
-  overflow: auto;
-  border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-surface);
-  scrollbar-gutter: stable;
+.zx-calendar__body {
+  min-inline-size: 0;
+  overflow-x: auto;
 }
-.zx-table[data-loading=true] .zx-table__body {
-  opacity: 0.5;
+.zx-calendar__time-surface {
+  display: grid;
+  min-inline-size: 42rem;
 }
-.zx-table[data-loading=true] .zx-table__scroll::after {
-  content: "";
-  position: sticky;
-  inset-block-start: 0;
-  inset-inline: 0;
-  display: block;
-  block-size: 2px;
-  margin-block-end: -2px;
-  background: var(--zx-color-accent);
-  opacity: 0.85;
-  z-index: 2;
+.zx-calendar__time-header,
+.zx-calendar__all-day,
+.zx-calendar__time-scroller {
+  display: grid;
+  grid-template-columns: var(--zx-calendar-time-axis) minmax(0, 1fr);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .zx-table[data-loading=true] .zx-table__scroll::after {
-    background:
-      linear-gradient(
-        90deg,
-        transparent 0%,
-        var(--zx-color-accent) 50%,
-        transparent 100%);
-    background-size: 40% 100%;
-    background-repeat: no-repeat;
-    animation: zx-table-loading 1.1s var(--zx-ease) infinite;
-  }
+.zx-calendar__time-header,
+.zx-calendar__all-day {
+  border-block-end: 1px solid var(--zx-color-border);
 }
-@keyframes zx-table-loading {
-  from {
-    background-position: -40% 0;
-  }
-  to {
-    background-position: 140% 0;
-  }
+.zx-calendar__time-corner,
+.zx-calendar__all-day-label {
+  border-inline-end: 1px solid var(--zx-color-border);
+  color: var(--zx-color-text-muted);
 }
-.zx-table__table {
-  inline-size: 100%;
-  border-spacing: 0;
+.zx-calendar__day-headings {
+  display: grid;
+  grid-template-columns: repeat(var(--zx-calendar-day-count), minmax(0, 1fr));
+}
+.zx-calendar__day-heading {
+  display: grid;
+  gap: 1px;
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
+  place-content: center;
+  border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
+  font: inherit;
+  cursor: pointer;
 }
-.zx-table__table[data-layout=auto] {
-  min-inline-size: max-content;
-}
-.zx-table__table[data-layout=fixed] {
-  table-layout: fixed;
+.zx-calendar__day-heading:last-child {
+  border-inline-end: 0;
 }
-.zx-table__selection-column {
-  inline-size: var(--zx-control-height);
+.zx-calendar__day-heading:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
 }
-.zx-table th,
-.zx-table td {
-  border-block-end: 1px solid var(--zx-table-border-color, var(--zx-color-border));
-  padding: var(--zx-space-2) var(--zx-space-3);
-  text-align: start;
-  vertical-align: middle;
+.zx-calendar__day-heading[aria-current=date] .zx-calendar__day-number {
+  color: var(--zx-color-accent);
+  font-weight: 750;
 }
-.zx-table th {
-  background: var(--zx-table-header-bg, var(--zx-color-bg-raised));
+.zx-calendar__day-weekday {
   color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+.zx-calendar__day-number {
   font-size: var(--zx-text-sm);
-  font-weight: 650;
 }
-.zx-table__scroll[data-sticky-header=true] th {
-  position: sticky;
-  z-index: 1;
-  inset-block-start: 0;
+.zx-calendar__all-day {
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
 }
-.zx-table th[data-align=center],
-.zx-table td[data-align=center] {
-  text-align: center;
+.zx-calendar__all-day-label {
+  display: grid;
+  place-items: center end;
+  padding-inline: var(--zx-space-2);
+  font-size: var(--zx-text-xs);
 }
-.zx-table th[data-align=end],
-.zx-table td[data-align=end],
-.zx-table th[data-align=right],
-.zx-table td[data-align=right] {
-  text-align: end;
+.zx-calendar__all-day-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--zx-calendar-day-count), minmax(0, 1fr));
+  grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2));
+  gap: 2px 0;
+  min-block-size: var(--zx-control-height);
+  padding-block: var(--zx-space-1);
+  overflow: hidden;
 }
-.zx-table th[data-align=left],
-.zx-table td[data-align=left] {
-  text-align: left;
+.zx-calendar__all-day-cell {
+  border-inline-end: 1px solid var(--zx-color-border);
 }
-.zx-table__sort-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--zx-space-2);
-  inline-size: 100%;
-  min-block-size: auto;
-  border: 0;
-  border-radius: var(--zx-radius-sm);
-  background: inherit;
-  color: inherit;
-  padding: 0;
-  text-align: inherit;
+.zx-calendar__all-day-cell:last-of-type {
+  border-inline-end: 0;
 }
-.zx-table__sort-button:hover {
-  background: var(--zx-table-row-hover-bg, var(--zx-color-bg-hover));
-  color: var(--zx-color-text);
+.zx-calendar__time-scroller {
+  position: relative;
+  max-block-size: min(68vh, 46rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
-.zx-table__sort-button:focus-visible {
-  box-shadow: var(--zx-focus-ring);
+.zx-calendar__time-axis {
+  position: relative;
+  z-index: 2;
+  border-inline-end: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
 }
-.zx-table th[aria-sort=ascending] .zx-table__sort-button::after {
-  content: "\2191";
-  color: var(--zx-color-accent);
+.zx-calendar__time-label {
+  display: block;
+  block-size: var(--zx-calendar-slot-height);
+  padding-block-start: var(--zx-space-1);
+  padding-inline-end: var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: end;
+  transform: translateY(-.65em);
 }
-.zx-table th[aria-sort=descending] .zx-table__sort-button::after {
-  content: "\2193";
-  color: var(--zx-color-accent);
+.zx-calendar__time-label:first-child {
+  transform: none;
 }
-.zx-table__body tr:last-child td {
-  border-block-end: 0;
+.zx-calendar__time-grid {
+  position: relative;
+  block-size: calc(var(--zx-calendar-slot-count) * var(--zx-calendar-slot-height));
+  min-inline-size: 0;
 }
-.zx-table__scroll[data-zebra=true] .zx-table__body tr:nth-child(even):not([aria-selected=true]) {
-  background: var(--zx-color-bg-page);
+.zx-calendar__slots {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--zx-calendar-day-count), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--zx-calendar-slot-count), var(--zx-calendar-slot-height));
 }
-.zx-table__body tr[aria-selected=true] {
-  background: var(--zx-table-row-selected-bg, var(--zx-color-bg-selected));
+.zx-calendar__slot {
+  min-inline-size: 0;
+  border: 0;
+  border-block-start: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
+  padding: 0;
+  cursor: crosshair;
 }
-.zx-table__body tr[data-row]:hover {
-  background: var(--zx-color-bg-hover);
+.zx-calendar__slot:not([data-major=true]) {
+  border-block-start-style: dotted;
 }
-.zx-table__checkbox {
-  inline-size: var(--zx-space-4);
-  min-block-size: auto;
-  block-size: var(--zx-space-4);
-  margin: 0;
-  accent-color: var(--zx-color-accent);
+.zx-calendar__slot[aria-selected=true] {
+  background: var(--zx-color-bg-selected);
 }
-.zx-table__selection-header,
-.zx-table__selection-cell {
-  inline-size: var(--zx-control-height);
-  text-align: center;
+.zx-calendar__slot:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
 }
-.zx-table__empty {
-  padding-block: var(--zx-space-6);
-  color: var(--zx-color-text-muted);
-  text-align: center;
+.zx-calendar__timed-events {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
 }
-.zx-table__tree-cell {
-  display: flex;
+.zx-calendar__event {
+  --zx-calendar-event-color: var(--zx-color-accent);
+  position: relative;
+  z-index: 2;
   min-inline-size: 0;
-  align-items: center;
-  gap: var(--zx-space-1);
-  padding-inline-start: calc(var(--zx-table-depth, 0) * var(--zx-space-4));
+  pointer-events: auto;
 }
-.zx-table__tree-toggle,
-.zx-table__tree-spacer {
-  inline-size: 24px;
-  block-size: 24px;
-  flex: 0 0 24px;
+.zx-calendar__event[data-variant=timed] {
+  position: absolute;
+  min-block-size: calc(var(--zx-calendar-slot-height) - 2px);
+  padding: 1px 2px;
 }
-.zx-table__tree-toggle {
-  display: inline-grid;
+.zx-calendar__event-action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: 1px;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
   min-block-size: 0;
-  place-items: center;
-  padding: 0;
-  border: 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);
   border-radius: var(--zx-radius-sm);
-  background: transparent;
-  color: var(--zx-color-text-muted);
+  background: color-mix(in srgb, var(--zx-calendar-event-color) 11%, var(--zx-color-bg-surface));
+  color: var(--zx-color-text);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  font: inherit;
+  font-size: var(--zx-text-xs);
+  line-height: 1.25;
+  text-align: start;
   cursor: pointer;
 }
-.zx-table__tree-toggle:hover {
-  background: var(--zx-color-bg-hover);
-  color: var(--zx-color-text);
+.zx-calendar__event[data-draggable=true] > .zx-calendar__event-action {
+  cursor: grab;
+  touch-action: none;
 }
-.zx-table__tree-toggle:focus-visible {
-  outline: 0;
+.zx-calendar__event[data-state=dragging] > .zx-calendar__event-action,
+.zx-calendar__event[data-state=grabbed] > .zx-calendar__event-action {
+  border-color: var(--zx-color-accent);
   box-shadow: var(--zx-focus-ring);
+  cursor: grabbing;
 }
-.zx-table__cell-content {
-  min-inline-size: 0;
-}
-.zx-table[data-edit-mode] .zx-table__body td {
-  block-size: var(--zx-control-height);
-}
-.zx-table__body td[data-editable=true] {
-  cursor: cell;
+.zx-calendar__event[data-preview]::after {
+  position: absolute;
+  inset-inline: var(--zx-space-1);
+  inset-block-end: var(--zx-space-1);
+  z-index: 5;
+  overflow: hidden;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-raised);
+  color: var(--zx-color-text);
+  content: attr(data-preview);
+  font-size: var(--zx-text-xs);
+  padding: 1px var(--zx-space-1);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.zx-table__body td[data-editable=true]:focus-visible {
-  outline: 0;
-  box-shadow: inset var(--zx-focus-ring);
+.zx-calendar__event-time {
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.zx-table__body td[data-editing=true] {
-  position: relative;
+.zx-calendar__event-title {
+  overflow: hidden;
+  font-weight: 680;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.zx-table__cell-shadow {
-  visibility: hidden;
+.zx-calendar__event-location {
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.zx-table__editor {
+.zx-calendar__event-resize {
   position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--zx-space-1);
-  padding-inline: var(--zx-space-1);
-  background: var(--zx-color-bg-surface);
+  inset-inline: var(--zx-space-2);
+  inset-block-end: 1px;
+  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;
+  touch-action: none;
 }
-.zx-table__editor > * {
-  inline-size: 100%;
+.zx-calendar__event-resize > span {
+  inline-size: 1.5rem;
+  border-block-start: 2px solid var(--zx-calendar-event-color);
 }
-.zx-table__editor[data-editor=checkbox] {
-  justify-content: center;
+.zx-calendar__event[data-variant=span],
+.zx-calendar__event[data-variant=month] {
+  min-inline-size: 0;
+  padding-inline: 2px;
 }
-.zx-table__editor[data-editor=checkbox] > * {
-  inline-size: auto;
+.zx-calendar__event[data-variant=span] {
+  z-index: 2;
 }
-.zx-table__editor-input {
-  inline-size: 100%;
+.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;
-  block-size: var(--zx-control-height);
-  padding-inline: var(--zx-space-2);
+  align-items: center;
+  gap: var(--zx-space-1);
+  padding-block: 2px;
+  white-space: nowrap;
 }
-.zx-table__editor-textarea {
-  block-size: 100%;
-  padding-block: var(--zx-space-1);
-  resize: none;
+.zx-calendar__event[data-variant=span] .zx-calendar__event-location,
+.zx-calendar__event[data-variant=month] .zx-calendar__event-location {
+  display: none;
 }
-.zx-table__body td[data-invalid=true] .zx-table__editor {
-  box-shadow: inset 0 0 0 1px var(--zx-color-danger);
+.zx-calendar__event[data-variant=month] .zx-calendar__event-time {
+  flex: 0 0 auto;
 }
-.zx-table__body td[data-invalid=true] .zx-table__editor-input {
-  border-color: var(--zx-color-danger);
+.zx-calendar__event[data-variant=month] .zx-calendar__event-title {
+  flex: 1 1 auto;
 }
-.zx-table__message {
-  padding: var(--zx-space-2) var(--zx-space-3);
-  color: var(--zx-color-danger);
-  font-size: var(--zx-text-sm);
+.zx-calendar__now {
+  position: absolute;
+  inset-inline: 0;
+  z-index: 3;
+  border-block-start: 1px solid var(--zx-color-danger);
+  pointer-events: none;
 }
-.zx-table__message:empty {
+.zx-calendar__now[hidden] {
   display: none;
 }
-.zx-table[data-stacked] .zx-table__table,
-.zx-table[data-stacked] .zx-table__body,
-.zx-table[data-stacked] .zx-table__body > tr {
-  display: block;
-  inline-size: 100%;
+.zx-calendar__now-time {
+  position: absolute;
+  inset-inline-start: var(--zx-space-1);
+  color: var(--zx-color-danger);
+  font-size: var(--zx-text-xs);
+  font-weight: 700;
+  transform: translateY(-100%);
 }
-.zx-table[data-stacked] .zx-table__head,
-.zx-table[data-stacked] .zx-table__columns {
-  display: none;
+.zx-calendar__agenda {
+  display: grid;
 }
-.zx-table[data-stacked] .zx-table__body > tr {
-  padding-block: var(--zx-space-3);
-  padding-inline: var(--zx-space-4);
+.zx-calendar__agenda-day {
+  display: grid;
+  grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr);
   border-block-end: 1px solid var(--zx-color-border);
 }
-.zx-table[data-stacked] .zx-table__body td {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: var(--zx-space-4);
-  inline-size: auto;
-  padding-block: var(--zx-space-1);
-  padding-inline: 0;
+.zx-calendar__agenda-heading {
+  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);
+  font: inherit;
+  font-weight: 700;
   text-align: start;
-  white-space: normal;
+  cursor: pointer;
+}
+.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-events > .zx-calendar__event {
+  border-block-end: 1px solid var(--zx-color-border);
+}
+.zx-calendar__agenda-events > .zx-calendar__event:last-child {
+  border-block-end: 0;
+}
+.zx-calendar__event[data-variant=agenda] .zx-calendar__event-action {
+  grid-template-columns: minmax(6rem, 18%) minmax(0, 1fr);
+  grid-template-areas: "time title" "time location";
+  min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
+  border: 0;
+  border-inline-start: 4px solid var(--zx-calendar-event-color);
+  border-radius: 0;
+  background: var(--zx-color-bg-surface);
+  padding: var(--zx-space-3);
+}
+.zx-calendar__event[data-variant=agenda] .zx-calendar__event-time {
+  grid-area: time;
+  align-self: center;
+}
+.zx-calendar__event[data-variant=agenda] .zx-calendar__event-title {
+  grid-area: title;
+  align-self: end;
+  font-size: var(--zx-text-sm);
+}
+.zx-calendar__event[data-variant=agenda] .zx-calendar__event-location {
+  grid-area: location;
+  align-self: start;
+}
+.zx-calendar__event[data-variant=agenda] .zx-calendar__event-action:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+}
+.zx-calendar__month {
+  display: grid;
+  min-inline-size: 42rem;
+}
+.zx-calendar__month-weekdays {
+  display: grid;
+  grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr));
+}
+.zx-calendar__month-week {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+.zx-calendar__month-weekdays {
+  border-block-end: 1px solid var(--zx-color-border);
+}
+.zx-calendar__month-week-gutter,
+.zx-calendar__month-week-number {
+  inline-size: 2.5rem;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.zx-calendar__month-weekday {
+  padding: var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 650;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+.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;
+  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;
+  font-size: var(--zx-text-xs);
+  cursor: pointer;
+}
+.zx-calendar__month-days,
+.zx-calendar__month-events {
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) .zx-calendar__month-days,
+.zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) .zx-calendar__month-events {
+  grid-column: 1;
+}
+.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);
+  font: inherit;
+  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);
+}
+.zx-calendar__month-day[aria-current=date] {
+  color: var(--zx-color-accent);
+  font-weight: 750;
+}
+.zx-calendar__month-day:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+}
+.zx-calendar__month-events {
+  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: 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;
+  color: var(--zx-color-accent);
+  padding-inline: var(--zx-space-2);
+  font: inherit;
+  font-size: var(--zx-text-xs);
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.zx-calendar__year {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+  gap: var(--zx-space-5);
+  padding: var(--zx-space-5);
+}
+.zx-calendar__year-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 2px;
+  align-content: start;
+}
+.zx-calendar__year-heading {
+  grid-column: 1 / -1;
+  margin: 0 0 var(--zx-space-2);
+  font-size: var(--zx-text-md);
+}
+.zx-calendar__year-weekday {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 650;
+  text-align: center;
+}
+.zx-calendar__year-day,
+.zx-calendar__year-blank {
+  aspect-ratio: 1;
+}
+.zx-calendar__year-day {
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text);
+  font: inherit;
+  font-size: var(--zx-text-xs);
+  cursor: pointer;
+}
+.zx-calendar__year-day[data-activity="1"] {
+  background: color-mix(in srgb, var(--zx-color-accent) 10%, var(--zx-color-bg-surface));
+}
+.zx-calendar__year-day[data-activity="2"] {
+  background: color-mix(in srgb, var(--zx-color-accent) 20%, var(--zx-color-bg-surface));
+}
+.zx-calendar__year-day[data-activity="3"] {
+  background: color-mix(in srgb, var(--zx-color-accent) 32%, var(--zx-color-bg-surface));
+  font-weight: 700;
+}
+.zx-calendar__year-day[aria-current=date] {
+  outline: 2px solid var(--zx-color-accent);
+  outline-offset: -2px;
+}
+.zx-calendar__year-day:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+}
+.zx-calendar__loading {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--zx-color-bg-surface) 82%, transparent);
+  color: var(--zx-color-text);
+  font-weight: 650;
+}
+.zx-calendar__loading[hidden] {
+  display: none;
+}
+.zx-calendar[data-state=loading] .zx-calendar__body {
+  opacity: .55;
+}
+.zx-calendar__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@container (max-width: 44rem) {
+  .zx-calendar__toolbar {
+    grid-template-columns: 1fr auto;
+    align-items: start;
+  }
+  .zx-calendar__navigation {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .zx-calendar__heading {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: start;
+    max-inline-size: 100%;
+    text-align: start;
+  }
+  .zx-calendar__commands {
+    display: contents;
+  }
+  .zx-calendar__views {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    max-inline-size: 100%;
+  }
+  .zx-calendar__new {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: end;
+  }
+  .zx-calendar__view-button {
+    flex: 1 0 auto;
+  }
+  .zx-calendar__new span {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  .zx-calendar__agenda-day {
+    grid-template-columns: 1fr;
+  }
+  .zx-calendar__agenda-heading {
+    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);
+  }
+  .zx-calendar__year {
+    grid-template-columns: 1fr;
+    padding: var(--zx-space-3);
+  }
+}
+[data-zx-density=compact] .zx-calendar {
+  --zx-calendar-slot-height: 20px;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-calendar__event {
+    transition: transform var(--zx-dur-fast) var(--zx-ease), opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+  .zx-calendar__toolbar-button,
+  .zx-calendar__view-button,
+  .zx-calendar__new {
+    transition: background var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+@media (forced-colors: active) {
+  .zx-calendar__event-action {
+    border: 1px solid CanvasText;
+    border-inline-start-width: 4px;
+  }
+  .zx-calendar__now {
+    border-color: Highlight;
+  }
+  .zx-calendar__year-day[data-activity] {
+    outline: 1px solid CanvasText;
+  }
+}
+
+/* src/components/view/record-view.css */
+.zx-record-view {
+  min-inline-size: 0;
+  color: var(--zx-color-text);
+}
+.zx-record-view__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--zx-space-2);
+  margin-block-end: var(--zx-space-2);
+}
+.zx-record-view__field-controls {
+  position: relative;
+  inline-size: max-content;
+  margin-inline-start: auto;
+}
+.zx-record-view__field-controls > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  cursor: pointer;
+  list-style: none;
+}
+.zx-record-view__field-controls > summary::-webkit-details-marker {
+  display: none;
+}
+.zx-record-view__field-list {
+  position: absolute;
+  z-index: 4;
+  inset-block-start: calc(100% + var(--zx-space-1));
+  inset-inline-end: 0;
+  display: grid;
+  min-inline-size: 230px;
+  max-block-size: min(360px, 70vh);
+  overflow: auto;
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-raised);
+  box-shadow: var(--zx-overlay-shadow);
+  padding: var(--zx-space-2);
+}
+.zx-record-view__field-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: var(--zx-control-height);
+}
+.zx-record-view__field-option > label {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-record-view__field-option > label > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-record-view__field-order {
+  display: inline-flex;
+}
+.zx-record-view__field-move {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 26px;
+  block-size: 26px;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+.zx-record-view__field-move:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-record-view__field-move:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-record-view__field-move:disabled {
+  opacity: .35;
+  cursor: not-allowed;
+}
+.zx-record-view[data-loading=true] {
+  cursor: progress;
+}
+.zx-record-view[data-loading=true] > :not(.zx-record-view__toolbar) {
+  opacity: .62;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-record-view__field-move,
+  .zx-record-view[data-loading=true] > :not(.zx-record-view__toolbar) {
+    transition:
+      color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease),
+      opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
+/* src/components/table/table.css */
+.zx-table {
+  min-inline-size: 0;
+}
+.zx-table__column-controls {
+  position: relative;
+  inline-size: max-content;
+  margin: 0 0 var(--zx-space-2) auto;
+}
+.zx-table__reorder-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.zx-table__column-controls > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  list-style: none;
+  cursor: pointer;
+}
+.zx-table__column-controls > summary::-webkit-details-marker {
+  display: none;
+}
+.zx-table__column-list {
+  position: absolute;
+  z-index: 4;
+  inset-block-start: calc(100% + var(--zx-space-1));
+  inset-inline-end: 0;
+  display: grid;
+  min-inline-size: 190px;
+  border: 1px solid var(--zx-color-overlay-border);
+  border-radius: var(--zx-radius-md);
+  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-overlay-shadow);
+  padding: var(--zx-space-2);
+  max-block-size: min(360px, 70vh);
+  overflow: auto;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-table__column-list {
+    border-color: var(--zx-color-border-strong);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+.zx-table__column-option {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: var(--zx-control-height);
+  border-radius: var(--zx-radius-sm);
+  padding-inline: var(--zx-space-2);
+}
+.zx-table__column-option:hover {
+  background: var(--zx-color-overlay-hover);
+}
+.zx-table__column-option > label,
+.zx-table__column-label {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-table__column-option > label > span,
+.zx-table__column-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-table__column-order {
+  display: inline-flex;
+}
+.zx-table__column-move {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 26px;
+  block-size: 26px;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+.zx-table__column-move:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-table__column-move:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-table__column-move:disabled {
+  opacity: .35;
+  cursor: not-allowed;
+}
+.zx-table__column-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-table__column-move {
+    transition:
+      color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease),
+      opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+.zx-table__reorder-column,
+.zx-table__reorder-header,
+.zx-table__reorder-cell {
+  inline-size: var(--zx-control-height);
+  text-align: center;
+}
+.zx-table__row-handle {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 26px;
+  block-size: 26px;
+  min-block-size: 0;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  padding: 0;
+  color: var(--zx-color-text-muted);
+  cursor: grab;
+}
+.zx-table__row-handle:hover,
+.zx-table__row-handle[aria-pressed=true] {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-table__row-handle:active {
+  cursor: grabbing;
+}
+.zx-table__body tr[data-dragging] {
+  opacity: .55;
+}
+.zx-table__body tr[data-drop=before] {
+  box-shadow: inset 0 2px 0 var(--zx-color-accent);
+}
+.zx-table__body tr[data-drop=after] {
+  box-shadow: inset 0 -2px 0 var(--zx-color-accent);
+}
+.zx-table__scroll {
+  position: relative;
+  max-inline-size: 100%;
+  overflow: auto;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-surface);
+  scrollbar-gutter: stable;
+}
+.zx-table[data-loading=true] .zx-table__body {
+  opacity: 0.5;
+}
+.zx-table[data-loading=true] .zx-table__scroll::after {
+  content: "";
+  position: sticky;
+  inset-block-start: 0;
+  inset-inline: 0;
+  display: block;
+  block-size: 2px;
+  margin-block-end: -2px;
+  background: var(--zx-color-accent);
+  opacity: 0.85;
+  z-index: 2;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-table[data-loading=true] .zx-table__scroll::after {
+    background:
+      linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--zx-color-accent) 50%,
+        transparent 100%);
+    background-size: 40% 100%;
+    background-repeat: no-repeat;
+    animation: zx-table-loading 1.1s var(--zx-ease) infinite;
+  }
+}
+@keyframes zx-table-loading {
+  from {
+    background-position: -40% 0;
+  }
+  to {
+    background-position: 140% 0;
+  }
+}
+.zx-table__table {
+  inline-size: 100%;
+  border-spacing: 0;
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+}
+.zx-table__table[data-layout=auto] {
+  min-inline-size: max-content;
+}
+.zx-table__table[data-layout=fixed] {
+  table-layout: fixed;
+}
+.zx-table__selection-column {
+  inline-size: var(--zx-control-height);
+}
+.zx-table th,
+.zx-table td {
+  border-block-end: 1px solid var(--zx-table-border-color, var(--zx-color-border));
+  padding: var(--zx-space-2) var(--zx-space-3);
+  text-align: start;
+  vertical-align: middle;
+}
+.zx-table th {
+  background: var(--zx-table-header-bg, var(--zx-color-bg-raised));
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: 650;
+}
+.zx-table__scroll[data-sticky-header=true] th {
+  position: sticky;
+  z-index: 1;
+  inset-block-start: 0;
+}
+.zx-table th[data-align=center],
+.zx-table td[data-align=center] {
+  text-align: center;
+}
+.zx-table th[data-align=end],
+.zx-table td[data-align=end],
+.zx-table th[data-align=right],
+.zx-table td[data-align=right] {
+  text-align: end;
+}
+.zx-table th[data-align=left],
+.zx-table td[data-align=left] {
+  text-align: left;
+}
+.zx-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zx-space-2);
+  inline-size: 100%;
+  min-block-size: auto;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: inherit;
+  color: inherit;
+  padding: 0;
+  text-align: inherit;
+}
+.zx-table__sort-button:hover {
+  background: var(--zx-table-row-hover-bg, var(--zx-color-bg-hover));
+  color: var(--zx-color-text);
+}
+.zx-table__sort-button:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-table th[aria-sort=ascending] .zx-table__sort-button::after {
+  content: "\2191";
+  color: var(--zx-color-accent);
+}
+.zx-table th[aria-sort=descending] .zx-table__sort-button::after {
+  content: "\2193";
+  color: var(--zx-color-accent);
+}
+.zx-table__body tr:last-child td {
+  border-block-end: 0;
+}
+.zx-table__scroll[data-zebra=true] .zx-table__body tr:nth-child(even):not([aria-selected=true]) {
+  background: var(--zx-color-bg-page);
+}
+.zx-table__body tr[aria-selected=true] {
+  background: var(--zx-table-row-selected-bg, var(--zx-color-bg-selected));
+}
+.zx-table__body tr[data-row]:hover {
+  background: var(--zx-color-bg-hover);
+}
+.zx-table__checkbox {
+  inline-size: var(--zx-space-4);
+  min-block-size: auto;
+  block-size: var(--zx-space-4);
+  margin: 0;
+  accent-color: var(--zx-color-accent);
+}
+.zx-table__selection-header,
+.zx-table__selection-cell {
+  inline-size: var(--zx-control-height);
+  text-align: center;
+}
+.zx-table__empty {
+  padding-block: var(--zx-space-6);
+  color: var(--zx-color-text-muted);
+  text-align: center;
+}
+.zx-table__tree-cell {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: var(--zx-space-1);
+  padding-inline-start: calc(var(--zx-table-depth, 0) * var(--zx-space-4));
+}
+.zx-table__tree-toggle,
+.zx-table__tree-spacer {
+  inline-size: 24px;
+  block-size: 24px;
+  flex: 0 0 24px;
+}
+.zx-table__tree-toggle {
+  display: inline-grid;
+  min-block-size: 0;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+.zx-table__tree-toggle:hover {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-table__tree-toggle:focus-visible {
+  outline: 0;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-table__cell-content {
+  min-inline-size: 0;
+}
+.zx-table[data-edit-mode] .zx-table__body td {
+  block-size: var(--zx-control-height);
+}
+.zx-table__body td[data-editable=true] {
+  cursor: cell;
+}
+.zx-table__body td[data-editable=true]:focus-visible {
+  outline: 0;
+  box-shadow: inset var(--zx-focus-ring);
+}
+.zx-table__body td[data-editing=true] {
+  position: relative;
+}
+.zx-table__cell-shadow {
+  visibility: hidden;
+}
+.zx-table__editor {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  padding-inline: var(--zx-space-1);
+  background: var(--zx-color-bg-surface);
+}
+.zx-table__editor > * {
+  inline-size: 100%;
+}
+.zx-table__editor[data-editor=checkbox] {
+  justify-content: center;
+}
+.zx-table__editor[data-editor=checkbox] > * {
+  inline-size: auto;
+}
+.zx-table__editor-input {
+  inline-size: 100%;
+  min-block-size: 0;
+  block-size: var(--zx-control-height);
+  padding-inline: var(--zx-space-2);
+}
+.zx-table__editor-textarea {
+  block-size: 100%;
+  padding-block: var(--zx-space-1);
+  resize: none;
+}
+.zx-table__body td[data-invalid=true] .zx-table__editor {
+  box-shadow: inset 0 0 0 1px var(--zx-color-danger);
+}
+.zx-table__body td[data-invalid=true] .zx-table__editor-input {
+  border-color: var(--zx-color-danger);
+}
+.zx-table__message {
+  padding: var(--zx-space-2) var(--zx-space-3);
+  color: var(--zx-color-danger);
+  font-size: var(--zx-text-sm);
+}
+.zx-table__message:empty {
+  display: none;
+}
+.zx-table[data-stacked] .zx-table__table,
+.zx-table[data-stacked] .zx-table__body,
+.zx-table[data-stacked] .zx-table__body > tr {
+  display: block;
+  inline-size: 100%;
+}
+.zx-table[data-stacked] .zx-table__head,
+.zx-table[data-stacked] .zx-table__columns {
+  display: none;
+}
+.zx-table[data-stacked] .zx-table__body > tr {
+  padding-block: var(--zx-space-3);
+  padding-inline: var(--zx-space-4);
+  border-block-end: 1px solid var(--zx-color-border);
+}
+.zx-table[data-stacked] .zx-table__body td {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--zx-space-4);
+  inline-size: auto;
+  padding-block: var(--zx-space-1);
+  padding-inline: 0;
+  border: 0;
+  text-align: start;
+  white-space: normal;
 }
 .zx-table[data-stacked] .zx-table__body td[data-label]::before {
   content: attr(data-label);
@@ -5873,38 +7398,578 @@ body:has(> .zx-modal:modal) {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
 }
-.zx-table[data-stacked] .zx-table__body td[data-popin=false] {
-  display: block;
-  padding-block-end: var(--zx-space-2);
-  font-size: var(--zx-text-lg);
+.zx-table[data-stacked] .zx-table__body td[data-popin=false] {
+  display: block;
+  padding-block-end: var(--zx-space-2);
+  font-size: var(--zx-text-lg);
+  font-weight: 600;
+}
+.zx-table[data-stacked] .zx-table__body td[data-popin=false]::before {
+  content: none;
+}
+.zx-table[data-stacked] .zx-table__selection-cell {
+  justify-content: flex-start;
+}
+.zx-table[data-stacked] .zx-table__reorder-cell {
+  justify-content: flex-start;
+}
+.zx-table[data-stacked] .zx-table__empty-row {
+  display: block;
+}
+.zx-table__more {
+  display: block;
+  inline-size: 100%;
+  margin-block-start: var(--zx-space-2);
+  border: 1px dashed var(--zx-color-border);
+  background: none;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-control-font-size);
+}
+.zx-table__more:hover {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+/* src/components/table-view/table-view.css */
+.zx-table-view {
+  min-inline-size: 0;
+}
+.zx-table-view__table {
+  min-inline-size: 0;
+}
+.zx-table-view[data-loading=true] .zx-table__column-controls {
+  pointer-events: none;
+  opacity: .62;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-table-view .zx-table__column-controls {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
+/* src/components/card-view/card-view.css */
+.zx-card-view {
+  --zx-card-view-min-card-width: 18rem;
+  --zx-card-view-column-basis: 0%;
+  inline-size: 100%;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.zx-card-view__toolbar {
+  flex-wrap: wrap;
+}
+.zx-card-view__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+.zx-card-view__sort[hidden] {
+  display: none;
+}
+.zx-card-view__sort select {
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  max-inline-size: min(18rem, 65vw);
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+  padding-inline: var(--zx-space-2);
+  font: inherit;
+}
+.zx-card-view__sort select:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-card-view__content,
+.zx-card-view__group {
+  min-inline-size: 0;
+}
+.zx-card-view__group + .zx-card-view__group {
+  margin-block-start: var(--zx-space-6);
+}
+.zx-card-view__group-heading {
+  margin: 0 0 var(--zx-space-3);
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-lg);
+  line-height: 1.35;
+}
+.zx-card-view__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--zx-card-view-min-card-width), calc(var(--zx-card-view-column-basis) - var(--zx-space-4)))), 1fr));
+  gap: var(--zx-space-4);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.zx-record-card {
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  overflow: hidden;
+  border-radius: var(--zx-radius-lg);
+  color: var(--zx-color-text);
+}
+.zx-record-card[data-variant=outlined] {
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
+}
+.zx-record-card[data-variant=raised] {
+  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-record-card[data-variant=filled] {
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-muted);
+}
+.zx-record-card:hover {
+  border-color: var(--zx-color-border-strong);
+}
+.zx-record-card:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-record-card[aria-selected=true] {
+  border-color: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+}
+.zx-record-card__preview {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-inline-size: 0;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-block-end: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-muted);
+  color: var(--zx-color-text-placeholder);
+}
+.zx-record-card__preview > :not(.zx-record-card__preview-fallback) {
+  position: relative;
+  z-index: 1;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.zx-record-card__preview-image {
+  display: block;
+}
+.zx-record-card__preview-image[hidden] {
+  display: none;
+}
+.zx-record-card__preview-fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.zx-record-card__body {
+  display: grid;
+  align-content: start;
+  gap: var(--zx-space-4);
+  min-inline-size: 0;
+  padding: var(--zx-space-4);
+}
+.zx-record-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-3);
+  min-inline-size: 0;
+}
+.zx-record-card__selection {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  min-block-size: 1.5rem;
+  cursor: pointer;
+}
+.zx-record-card__selection input {
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin: 0;
+  accent-color: var(--zx-color-accent);
+}
+.zx-record-card__selection input:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-record-card__titles {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+.zx-record-card__heading {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--zx-text-lg);
+  font-weight: 700;
+  line-height: 1.35;
+}
+.zx-record-card__primary,
+.zx-record-card__title {
+  color: inherit;
+}
+.zx-record-card__primary {
+  text-decoration: none;
+}
+.zx-record-card__primary:hover {
+  color: var(--zx-color-accent-hover);
+  text-decoration: underline;
+}
+.zx-record-card__primary:focus-visible {
+  border-radius: var(--zx-radius-sm);
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-record-card__subtitle {
+  margin: var(--zx-space-1) 0 0;
+  overflow-wrap: anywhere;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  line-height: 1.45;
+}
+.zx-record-card__actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--zx-space-1);
+}
+.zx-record-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-space-1);
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+  padding-inline: var(--zx-space-2);
+  font: inherit;
+  font-size: var(--zx-text-sm);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+}
+.zx-record-card__action:hover:not(:disabled) {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-hover);
+}
+.zx-record-card__action:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-record-card__action:disabled {
+  color: var(--zx-color-text-placeholder);
+  cursor: not-allowed;
+}
+.zx-record-card__metadata {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--zx-space-3) var(--zx-space-4);
+  min-inline-size: 0;
+  margin: 0;
+}
+.zx-record-card__field {
+  display: grid;
+  align-content: start;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+.zx-record-card__label {
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
   font-weight: 600;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.zx-table[data-stacked] .zx-table__body td[data-popin=false]::before {
-  content: none;
+.zx-record-card__value {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-sm);
+  line-height: 1.45;
 }
-.zx-table[data-stacked] .zx-table__selection-cell {
-  justify-content: flex-start;
+.zx-record-card__value > :is(img, svg, video) {
+  max-inline-size: 100%;
 }
-.zx-table[data-stacked] .zx-table__reorder-cell {
-  justify-content: flex-start;
+.zx-card-view__group-empty,
+.zx-card-view__empty {
+  color: var(--zx-color-text-muted);
+  text-align: center;
 }
-.zx-table[data-stacked] .zx-table__empty-row {
-  display: block;
+.zx-card-view__group-empty {
+  grid-column: 1 / -1;
+  border: 1px dashed var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  padding: var(--zx-space-5);
 }
-.zx-table__more {
-  display: block;
-  inline-size: 100%;
-  margin-block-start: var(--zx-space-2);
+.zx-card-view__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 10rem;
   border: 1px dashed var(--zx-color-border);
-  background: none;
+  border-radius: var(--zx-radius-lg);
+  padding: var(--zx-space-6);
+}
+.zx-card-view__skeleton {
+  align-content: start;
+  gap: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
+  padding: var(--zx-space-4);
+}
+.zx-card-view__skeleton-preview {
+  aspect-ratio: 16 / 9;
+  inline-size: calc(100% + var(--zx-space-4) + var(--zx-space-4));
+  margin: calc(-1 * var(--zx-space-4)) calc(-1 * var(--zx-space-4)) var(--zx-space-2);
+}
+.zx-card-view__skeleton-line {
+  block-size: .8rem;
+}
+.zx-card-view__skeleton-line:nth-child(3) {
+  inline-size: 72%;
+}
+.zx-card-view__skeleton-line:nth-child(4) {
+  inline-size: 48%;
+}
+@container (max-width: 28rem) {
+  .zx-card-view__sort-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  .zx-record-card__metadata {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .zx-record-card__action-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .zx-record-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 (prefers-reduced-motion: no-preference) {
+  .zx-record-card,
+  .zx-record-card__action,
+  .zx-record-card__primary {
+    transition:
+      border-color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease),
+      color var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
+/* src/components/kanban-view/kanban-view.css */
+.zx-kanban-view {
+  inline-size: 100%;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.zx-kanban-view__toolbar:empty {
+  display: none;
+}
+.zx-kanban-view__board {
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-color-bg-muted);
+  padding: var(--zx-space-3);
+  scrollbar-gutter: stable;
+}
+.zx-kanban-view__lane + .zx-kanban-view__lane {
+  margin-block-start: var(--zx-space-4);
+  border-block-start: 1px solid var(--zx-color-border);
+  padding-block-start: var(--zx-space-3);
+}
+.zx-kanban-view__lane-heading,
+.zx-kanban-view__column-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  margin: 0;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+  font-weight: var(--zx-control-font-weight);
+  line-height: 1.3;
+}
+.zx-kanban-view__lane-heading {
+  margin-block-end: var(--zx-space-2);
+}
+.zx-kanban-view__columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(260px, min(82vw, 340px));
+  align-items: start;
+  gap: var(--zx-space-3);
+  min-inline-size: max-content;
+}
+.zx-kanban-view__column {
+  display: grid;
+  grid-template-rows: auto minmax(64px, auto);
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-surface);
+  padding: var(--zx-space-2);
+}
+.zx-kanban-view__column[data-collapsed=true] {
+  grid-template-rows: auto;
+}
+.zx-kanban-view__column-label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-kanban-view__collapse,
+.zx-kanban-view__move-handle {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
   color: var(--zx-color-text-muted);
-  font-size: var(--zx-control-font-size);
+  cursor: pointer;
 }
-.zx-table__more:hover {
-  border-color: var(--zx-color-border-strong);
+.zx-kanban-view__collapse {
+  inline-size: 26px;
+  block-size: 26px;
+}
+.zx-kanban-view__move-handle {
+  inline-size: 28px;
+  block-size: 28px;
+  cursor: grab;
+  touch-action: none;
+}
+.zx-kanban-view__move-handle[aria-pressed=true] {
+  background: var(--zx-color-accent-subtle);
+  color: var(--zx-color-accent);
+  cursor: grabbing;
+}
+.zx-kanban-view__collapse:hover,
+.zx-kanban-view__move-handle:hover {
   background: var(--zx-color-bg-hover);
   color: var(--zx-color-text);
 }
+.zx-kanban-view__collapse:focus-visible,
+.zx-kanban-view__move-handle:focus-visible,
+.zx-kanban-view .zx-record-card:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-kanban-view__count {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-muted);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
+  white-space: nowrap;
+}
+.zx-kanban-view__column[data-wip=limit] .zx-kanban-view__count {
+  background: var(--zx-color-warning-bg);
+  color: var(--zx-color-warning);
+}
+.zx-kanban-view__column[data-wip=exceeded] .zx-kanban-view__count {
+  background: var(--zx-color-danger-bg);
+  color: var(--zx-color-danger);
+}
+.zx-kanban-view__cards {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--zx-space-2);
+  min-block-size: 64px;
+  margin: 0;
+  border-radius: var(--zx-radius-sm);
+  padding: var(--zx-space-1);
+  list-style: none;
+}
+.zx-kanban-view__cards > .zx-record-card {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+.zx-kanban-view__cards[data-drop=append],
+.zx-kanban-view__cards[data-keyboard-target=append] {
+  box-shadow: inset 0 -3px 0 var(--zx-color-accent);
+}
+.zx-kanban-view .zx-record-card[data-drop=before],
+.zx-kanban-view .zx-record-card[data-keyboard-target=before] {
+  box-shadow: 0 -3px 0 var(--zx-color-accent);
+}
+.zx-kanban-view .zx-record-card[data-drop=after] {
+  box-shadow: 0 3px 0 var(--zx-color-accent);
+}
+.zx-kanban-view .zx-record-card[data-dragging=true] {
+  opacity: .5;
+}
+.zx-kanban-view .zx-record-card[data-grabbed=true] {
+  outline: 2px solid var(--zx-color-accent);
+  outline-offset: 2px;
+}
+.zx-kanban-view__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 160px;
+  color: var(--zx-color-text-muted);
+  text-align: center;
+}
+.zx-kanban-view__live {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.zx-kanban-view[data-loading=true] .zx-kanban-view__board {
+  pointer-events: none;
+}
+@container (max-width: 420px) {
+  .zx-kanban-view__columns {
+    grid-auto-columns: minmax(240px, 88vw);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .zx-kanban-view__collapse,
+  .zx-kanban-view__move-handle,
+  .zx-kanban-view .zx-record-card {
+    transition:
+      color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease),
+      opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 /* src/components/grid/grid.css */
 .zx-table[data-preset=billing-items] tr.zx-grid-billing__summary > td {