@zeyos/zx 4.1.0 → 4.2.0

package/dist/zx.css

@@ -143,6 +143,8 @@
   --zx-color-text-muted: var(--zx-gray-500);
   --zx-color-text-placeholder: var(--zx-gray-400);
   --zx-color-text-invert: var(--zx-gray-50);
+  --zx-color-app-icon-glyph: var(--zx-gray-0);
+  --zx-color-app-icon-shade: var(--zx-gray-950);
   --zx-color-accent: var(--zx-accent-600);
   --zx-color-accent-hover: var(--zx-accent-700);
   --zx-color-accent-active: var(--zx-accent-700);
@@ -168,18 +170,82 @@
   --zx-color-glass-border: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
   --zx-color-glass-highlight-strong: color-mix(in srgb, var(--zx-gray-0) 38%, transparent);
+  --zx-color-app-icon-depth: color-mix(in srgb, var(--zx-color-app-icon-shade) 26%, transparent);
+  --zx-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-surface: color-mix(in srgb, var(--zx-color-bg-raised) 88%, transparent);
+  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-bg-raised) 94%, transparent);
+  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-border-strong) 72%, var(--zx-color-glass-highlight));
   --zx-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(12px) saturate(128%);
+  --zx-glass-filter-panel: blur(9px) saturate(120%);
   --zx-app-icon-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 28%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 16%, transparent),
-    0 5px 14px color-mix(in srgb, var(--zx-app-icon-color) 28%, transparent);
-  --zx-glass-glyph-shadow: 0 1px 1px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
+    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) 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-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  :root,
+  [data-zx-theme] {
+    --zx-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-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;
+  }
+}
+@media (forced-colors: active) {
+  :root,
+  [data-zx-theme] {
+    --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-border: CanvasText !important;
+    --zx-glass-control-shadow: none !important;
+    --zx-glass-chrome-shadow: none !important;
+    --zx-glass-raised-shadow: none !important;
+  }
+}
 
 /* styles/tokens/dark.css */
 [data-zx-theme=dark] {
@@ -488,15 +554,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 */
@@ -508,7 +567,7 @@ svg.zx-icon {
   min-block-size: var(--zx-control-height);
   border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-button-radius, var(--zx-control-radius));
-  background: var(--zx-color-bg-control);
+  background: var(--zx-color-glass-control);
   color: var(--zx-color-text);
   padding-inline: var(--zx-control-pad-x);
   font: inherit;
@@ -516,6 +575,9 @@ svg.zx-icon {
   font-weight: var(--zx-control-font-weight);
   line-height: 1;
   cursor: pointer;
+  -webkit-backdrop-filter: var(--zx-glass-filter-control);
+  backdrop-filter: var(--zx-glass-filter-control);
+  box-shadow: var(--zx-glass-control-shadow);
   transition:
     color var(--zx-dur-fast) var(--zx-ease),
     background-color var(--zx-dur-fast) var(--zx-ease),
@@ -523,7 +585,7 @@ svg.zx-icon {
     box-shadow var(--zx-dur-fast) var(--zx-ease);
 }
 .zx-btn:hover:not(:disabled) {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-glass-control-hover);
 }
 .zx-btn:active:not(:disabled) {
   border-color: var(--zx-color-border-strong);
@@ -559,6 +621,9 @@ svg.zx-icon {
 .zx-btn[data-kind=ghost] {
   border-color: transparent;
   background: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  box-shadow: none;
 }
 .zx-btn[data-kind=ghost]:hover:not(:disabled) {
   border-color: transparent;
@@ -587,6 +652,29 @@ svg.zx-icon {
 .zx-btn-group > .zx-btn:focus-visible {
   z-index: 1;
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-btn {
+    background: var(--zx-color-bg-control);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: none;
+  }
+}
+@media (forced-colors: active) {
+  .zx-btn {
+    border-color: ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .zx-btn[data-kind=primary] {
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+}
 
 /* src/components/badge/badge.css */
 .zx-badge {
@@ -1419,14 +1507,34 @@ svg.zx-icon {
   background: var(--zx-color-bg-surface);
 }
 .zx-card[data-variant=raised] {
-  border: 1px solid transparent;
-  background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-overlay-shadow);
+  border: 1px solid var(--zx-color-glass-border);
+  background: var(--zx-color-glass-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-raised);
+  backdrop-filter: var(--zx-glass-filter-raised);
+  box-shadow: var(--zx-glass-raised-shadow);
 }
 .zx-card[data-variant=filled] {
   border: 1px solid transparent;
   background: var(--zx-color-bg-muted);
 }
+@media (prefers-reduced-transparency: reduce) {
+  .zx-card[data-variant=raised] {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+@media (forced-colors: active) {
+  .zx-card[data-variant=raised] {
+    border-color: ButtonText;
+    background: Canvas;
+    box-shadow: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 .zx-card[data-linked=true]:hover {
   background: var(--zx-color-bg-hover);
 }
@@ -1531,20 +1639,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;
@@ -1640,7 +1971,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;
@@ -1648,9 +1979,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 {
@@ -1678,6 +2009,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 {
@@ -1898,11 +2238,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;
@@ -1982,9 +2324,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);
@@ -2068,6 +2419,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;
@@ -2075,71 +2432,133 @@ 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);
-  border-radius: max(var(--zx-radius-md), calc(var(--zx-app-icon-size) * .22));
-  background: var(--zx-app-icon-color);
-  box-shadow: var(--zx-app-icon-shadow);
-  color: var(--zx-app-icon-glyph, var(--zx-color-text-invert));
+  overflow: visible;
+  border-radius: max(var(--zx-radius-sm), calc(var(--zx-app-icon-size) * .12));
+  color: var(--zx-app-icon-glyph, var(--zx-color-app-icon-glyph));
   font-size: var(--zx-app-icon-size);
   vertical-align: middle;
 }
-.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),
-      transparent 44%),
-    color-mix(in srgb, var(--zx-app-icon-color) var(--zx-glass-color-strength), transparent);
+    radial-gradient(
+      112% 92% at 50% 122%,
+      var(--zx-app-icon-bloom),
+      transparent 64%),
+    var(--zx-app-icon-core);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
-.zx-app-icon[data-glass=strong] {
-  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+.zx-app-icon[data-glass=strong] .zx-app-icon__surface {
+  box-shadow: var(--zx-app-icon-shadow-hover), var(--zx-app-icon-halo);
 }
-.zx-app-icon[data-glass=none] {
-  border-color: var(--zx-color-border);
+.zx-app-icon[data-glass=none] .zx-app-icon__surface {
+  border-color: color-mix(in srgb, var(--zx-app-icon-color) 62%, var(--zx-color-border));
+  background: color-mix(in srgb, var(--zx-app-icon-color) 72%, var(--zx-color-app-icon-shade));
   box-shadow: none;
 }
 .zx-app-icon[data-glass=none] .zx-app-icon__shine {
   display: none;
 }
-.zx-app-icon[data-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-glass=none] .zx-app-icon__surface::after {
+  display: none;
+}
+.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 12% auto;
-  block-size: 42%;
-  border-radius: 999px;
+  z-index: 1;
+  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(2px);
+  opacity: .72;
+  pointer-events: none;
+}
+.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 color-mix(in srgb, var(--zx-color-glass-highlight) 56%, transparent);
+  opacity: .56;
   pointer-events: none;
 }
 .zx-app-icon__glyph {
-  display: inline-grid;
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: grid;
   place-items: center;
   inline-size: var(--zx-app-icon-glyph-size);
   block-size: var(--zx-app-icon-glyph-size);
+  margin: 0;
+  padding: 0;
   font-size: var(--zx-app-icon-glyph-size);
   line-height: 1;
-  filter: drop-shadow(var(--zx-glass-glyph-shadow));
+  filter: none;
+  transform: translate(-50%, -50%);
 }
 .zx-app-icon__glyph > .zx-icon,
 .zx-app-icon__glyph > svg,
 .zx-app-icon__glyph > i {
+  display: grid;
+  place-items: center;
   inline-size: 1em;
   block-size: 1em;
+  margin: 0;
+  color: inherit;
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+}
+.zx-app-icon__glyph > i::before {
+  display: block;
+  line-height: 1;
+}
+.zx-app-icon__glyph svg [fill]:not([fill=none]) {
+  fill: currentColor;
+}
+.zx-app-icon__glyph svg [stroke]:not([stroke=none]) {
+  stroke: currentColor;
 }
 .zx-app-icon__badge {
   position: absolute;
-  inset-block-end: 1px;
-  inset-inline-end: 1px;
+  z-index: 3;
+  inset-block-start: -3px;
+  inset-inline-end: -3px;
   display: grid;
   place-items: center;
   min-inline-size: 14px;
@@ -2153,18 +2572,59 @@ button.zx-panel__toggle:focus-visible {
   font-weight: 700;
   line-height: 1;
 }
+.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: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),
+    var(--zx-app-icon-halo);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .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);
+  }
+}
 @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] .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;
     box-shadow: none;
+    filter: none;
+    transform: none;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .zx-app-icon__surface::after,
+  .zx-app-icon__shine {
+    display: none;
+  }
+  .zx-app-icon__badge {
+    border-color: Canvas;
+    background: Highlight;
+    color: HighlightText;
   }
 }
 
@@ -2172,13 +2632,24 @@ button.zx-panel__toggle:focus-visible {
 .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: var(--zx-color-overlay-panel);
+  -webkit-backdrop-filter: var(--zx-glass-filter-panel);
+  backdrop-filter: var(--zx-glass-filter-panel);
+  box-shadow: var(--zx-glass-raised-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);
 }
@@ -2278,7 +2749,8 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-color-bg-hover);
 }
 .zx-launcher__option[aria-current=page] {
-  box-shadow: inset 2px 0 var(--zx-color-accent);
+  background: var(--zx-color-bg-selected);
+  color: var(--zx-color-accent);
 }
 .zx-launcher__option[data-kind=application] {
   display: grid;
@@ -2290,7 +2762,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-bg-selected);
 }
 .zx-launcher__option[data-kind=application] .zx-launcher__icon {
   min-block-size: 36px;
@@ -2420,7 +2892,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;
@@ -2518,8 +2990,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] {
@@ -2675,13 +3148,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] {
@@ -2786,6 +3267,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 {
@@ -2819,11 +3307,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);
 }
@@ -2841,23 +3328,27 @@ button.zx-panel__toggle:focus-visible {
 }
 @supports (backdrop-filter: blur(1px)) {
   .zx-message__toast {
-    background: color-mix(in srgb, var(--zx-color-info-bg) 38%, var(--zx-color-glass-surface));
-    backdrop-filter: blur(var(--zx-overlay-blur)) saturate(var(--zx-glass-saturation));
-    box-shadow: inset 0 1px 0 var(--zx-color-glass-highlight), var(--zx-overlay-shadow);
+    background: color-mix(in srgb, var(--zx-color-info-bg) 34%, var(--zx-color-overlay-surface));
+    -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+    backdrop-filter: var(--zx-glass-filter-overlay);
+    box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
   }
   .zx-message__toast[data-kind=success] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 38%, var(--zx-color-glass-surface));
+    background: color-mix(in srgb, var(--zx-color-success-bg) 34%, var(--zx-color-overlay-surface));
   }
   .zx-message__toast[data-kind=warning] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 38%, var(--zx-color-glass-surface));
+    background: color-mix(in srgb, var(--zx-color-warning-bg) 34%, var(--zx-color-overlay-surface));
   }
   .zx-message__toast[data-kind=error] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 38%, var(--zx-color-glass-surface));
+    background: color-mix(in srgb, var(--zx-color-danger-bg) 34%, var(--zx-color-overlay-surface));
   }
 }
 @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);
@@ -2934,13 +3425,24 @@ 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: var(--zx-color-overlay-panel);
+  -webkit-backdrop-filter: var(--zx-glass-filter-panel);
+  backdrop-filter: var(--zx-glass-filter-panel);
+  box-shadow: var(--zx-glass-raised-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);
 }
@@ -3044,7 +3546,7 @@ body:has(> .zx-modal:modal) {
   border: 0;
   border-radius: 0;
   overflow: hidden;
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: var(--zx-glass-raised-shadow);
 }
 .zx-sheet[data-side=start],
 .zx-sheet[data-side=end] {
@@ -3148,6 +3650,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] {
@@ -3311,13 +3816,24 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-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);
@@ -3333,10 +3849,12 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
@@ -3346,6 +3864,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);
@@ -3677,8 +4204,8 @@ 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;
 }
@@ -3721,8 +4248,8 @@ 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;
 }
@@ -3845,10 +4372,12 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -3887,7 +4416,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-surface);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -3895,6 +4424,18 @@ 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);
@@ -4258,13 +4799,24 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-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;
@@ -4721,12 +5273,23 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-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;
 }
@@ -4998,7 +5561,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] {
@@ -5008,12 +5571,24 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-shadow);
 }
-
-/* src/components/date-picker/date-range-picker.css */
-.zx-date-range-picker {
+@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 */
+.zx-date-range-picker {
   display: block;
   container-type: inline-size;
   inline-size: 100%;
@@ -5317,8 +5892,20 @@ 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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-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 */
@@ -5366,401 +5953,1896 @@ 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-table__column-controls {
-  position: relative;
-  inline-size: max-content;
-  margin: 0 0 var(--zx-space-2) auto;
+.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__reorder-status {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
+.zx-calendar__navigation,
+.zx-calendar__commands,
+.zx-calendar__views {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
 }
-.zx-table__column-controls > summary {
+.zx-calendar__navigation {
+  justify-self: start;
+  gap: var(--zx-space-1);
+}
+.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;
-  min-block-size: 0;
-  place-items: center;
-  padding: 0;
-  border: 0;
+.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;
+  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;
+  place-items: center;
+  border: 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%;
-  min-block-size: 0;
-  block-size: var(--zx-control-height);
-  padding-inline: var(--zx-space-2);
+.zx-calendar__event[data-variant=span] .zx-calendar__event-action,
+.zx-calendar__event[data-variant=month] .zx-calendar__event-action {
+  display: flex;
+  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: start;
   border: 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-table[data-stacked] .zx-table__body td[data-label]::before {
-  content: attr(data-label);
-  flex: none;
+.zx-calendar__agenda-heading[aria-current=date] {
+  color: var(--zx-color-accent);
+}
+.zx-calendar__agenda-empty {
+  margin: 0;
   color: var(--zx-color-text-muted);
-  font-size: var(--zx-text-sm);
+  padding: var(--zx-space-3);
 }
-.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-calendar__agenda-day > .zx-calendar__event {
+  border-block-end: 1px solid var(--zx-color-border);
 }
-.zx-table[data-stacked] .zx-table__body td[data-popin=false]::before {
-  content: none;
+.zx-calendar__agenda-day > .zx-calendar__event:last-child {
+  border-block-end: 0;
 }
-.zx-table[data-stacked] .zx-table__selection-cell {
+.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-weekdays .zx-calendar__month-weekday {
+  grid-row: 1;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(7) {
+  grid-column: 2;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(6) {
+  grid-column: 3;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(5) {
+  grid-column: 4;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(4) {
+  grid-column: 5;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(3) {
+  grid-column: 6;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(2) {
+  grid-column: 7;
+}
+.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(1) {
+  grid-column: 8;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(7) {
+  grid-column: 1;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(6) {
+  grid-column: 2;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(5) {
+  grid-column: 3;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(4) {
+  grid-column: 4;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(3) {
+  grid-column: 5;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(2) {
+  grid-column: 6;
+}
+.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(1) {
+  grid-column: 7;
+}
+.zx-calendar__month-week {
+  min-block-size: 7.5rem;
+  border-block-end: 1px solid var(--zx-color-border);
+}
+.zx-calendar__month-week-number {
+  grid-row: 1 / span 2;
+  border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
+  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;
+}
+.zx-calendar__month-day {
+  min-block-size: var(--zx-control-height);
+  border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
+  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[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;
+  box-shadow: inset 0 2px var(--zx-color-accent);
+}
+.zx-calendar__month-day:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+}
+.zx-calendar__month-events {
+  grid-row: 2;
+  grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2));
+  align-content: start;
+  gap: 2px 0;
+  padding-block: var(--zx-space-1);
+}
+.zx-calendar__more {
+  align-self: center;
+  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-block-end: 1px solid var(--zx-color-border);
+  }
+  .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: var(--zx-color-overlay-surface);
+  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
+  backdrop-filter: var(--zx-glass-filter-overlay);
+  box-shadow: var(--zx-glass-raised-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-bg-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);
+  flex: none;
+  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);
+  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__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-table[data-stacked] .zx-table__empty-row {
-  display: block;
+.zx-record-card__heading {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--zx-text-lg);
+  font-weight: 700;
+  line-height: 1.35;
 }
-.zx-table__more {
-  display: block;
-  inline-size: 100%;
-  margin-block-start: var(--zx-space-2);
-  border: 1px dashed var(--zx-color-border);
-  background: none;
+.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-control-font-size);
+  font-size: var(--zx-text-sm);
+  line-height: 1.45;
 }
-.zx-table__more:hover {
+.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-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-record-card__value > :is(img, svg, video) {
+  max-inline-size: 100%;
+}
+.zx-card-view__group-empty,
+.zx-card-view__empty {
+  color: var(--zx-color-text-muted);
+  text-align: center;
+}
+.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-card-view__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 10rem;
+  border: 1px dashed var(--zx-color-border);
+  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);
+  cursor: pointer;
+}
+.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 {