@zeyos/zx 4.2.0 → 4.3.4

package/dist/zx.css

@@ -182,9 +182,45 @@
   --zx-color-glass-chrome: color-mix(in srgb, var(--zx-color-bg-surface) 90%, transparent);
   --zx-color-glass-control: color-mix(in srgb, var(--zx-color-bg-control) 88%, transparent);
   --zx-color-glass-control-hover: color-mix(in srgb, var(--zx-color-bg-hover) 76%, var(--zx-color-glass-surface));
-  --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-bg-raised) 88%, transparent);
-  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-bg-raised) 94%, transparent);
-  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-border-strong) 72%, var(--zx-color-glass-highlight));
+  --zx-color-overlay-base: var(--zx-color-bg-raised);
+  --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-overlay-base) 72%, transparent);
+  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-overlay-base) 80%, transparent);
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
+  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
+  --zx-color-overlay-hover: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
+  --zx-color-overlay-selected: color-mix(in srgb, var(--zx-color-accent) 18%, transparent);
+  --zx-color-overlay-divider: color-mix(in srgb, var(--zx-color-text) 11%, transparent);
+  --zx-color-overlay-scrim: color-mix(in srgb, var(--zx-color-overlay-base) 28%, transparent);
+  --zx-overlay-specular-strength: 48%;
+  --zx-overlay-surface-image:
+    linear-gradient(
+      145deg,
+      color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
+      color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 28%,
+      transparent 54%),
+    radial-gradient(
+      120% 100% at 8% -12%,
+      color-mix(in srgb, var(--zx-color-accent) 8%, transparent),
+      transparent 58%);
+  --zx-overlay-toast-image:
+    radial-gradient(
+      120% 160% at 0% 0%,
+      color-mix(in srgb, var(--zx-message-kind, var(--zx-color-info)) 18%, transparent),
+      transparent 62%),
+    var(--zx-overlay-surface-image);
+  --zx-overlay-panel-image:
+    radial-gradient(
+      140% 100% at 0% 0%,
+      color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
+      transparent 58%),
+    radial-gradient(
+      100% 70% at 100% 0%,
+      color-mix(in srgb, var(--zx-color-accent) 5%, transparent),
+      transparent 64%),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 0%,
+      transparent 28%);
   --zx-glass-blur: 8px;
   --zx-glass-saturation: 130%;
   --zx-glass-color-strength: 82%;
@@ -192,8 +228,8 @@
   --zx-glass-filter-control: blur(6px) saturate(116%);
   --zx-glass-filter-raised: blur(8px) saturate(120%);
   --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(12px) saturate(128%);
-  --zx-glass-filter-panel: blur(9px) saturate(120%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-app-icon-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 14%, transparent),
     inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 28%, transparent),
@@ -205,18 +241,38 @@
   --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
   --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
   --zx-glass-raised-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-overlay-shadow);
+  --zx-glass-overlay-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 42%, transparent),
+    inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 20%, transparent),
+    var(--zx-overlay-shadow);
+  --zx-glass-panel-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 34%, transparent),
+    inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 14%, transparent),
+    var(--zx-overlay-shadow);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
 @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
   :root,
-  [data-zx-theme] {
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
     --zx-color-glass-chrome: var(--zx-color-bg-surface) !important;
     --zx-color-glass-surface: var(--zx-color-bg-raised) !important;
     --zx-color-glass-control: var(--zx-color-bg-control) !important;
     --zx-color-glass-control-hover: var(--zx-color-bg-hover) !important;
     --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
     --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
+    --zx-color-overlay-hover: var(--zx-color-bg-hover) !important;
+    --zx-color-overlay-selected: var(--zx-color-bg-selected) !important;
+    --zx-color-overlay-divider: var(--zx-color-border) !important;
+    --zx-color-overlay-scrim: var(--zx-color-bg-raised) !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
     --zx-app-icon-core-strength: 68% !important;
     --zx-app-icon-rim-strength: 62% !important;
     --zx-app-icon-bloom-strength: 0% !important;
@@ -229,21 +285,56 @@
     --zx-glass-filter-chrome: none !important;
     --zx-glass-filter-overlay: none !important;
     --zx-glass-filter-panel: none !important;
+    --zx-glass-overlay-shadow: var(--zx-overlay-shadow) !important;
+    --zx-glass-panel-shadow: var(--zx-overlay-shadow) !important;
   }
 }
 @media (forced-colors: active) {
   :root,
-  [data-zx-theme] {
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
     --zx-color-glass-chrome: Canvas !important;
     --zx-color-glass-surface: Canvas !important;
     --zx-color-glass-control: ButtonFace !important;
     --zx-color-glass-control-hover: Highlight !important;
     --zx-color-overlay-surface: Canvas !important;
     --zx-color-overlay-panel: Canvas !important;
+    --zx-color-overlay-backdrop: transparent !important;
     --zx-color-overlay-border: CanvasText !important;
+    --zx-color-overlay-hover: Highlight !important;
+    --zx-color-overlay-selected: Highlight !important;
+    --zx-color-overlay-divider: CanvasText !important;
+    --zx-color-overlay-scrim: Canvas !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
     --zx-glass-control-shadow: none !important;
     --zx-glass-chrome-shadow: none !important;
     --zx-glass-raised-shadow: none !important;
+    --zx-glass-filter-overlay: none !important;
+    --zx-glass-filter-panel: none !important;
+    --zx-glass-overlay-shadow: none !important;
+    --zx-glass-panel-shadow: none !important;
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root,
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
+    --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
+    --zx-glass-filter-overlay: none !important;
+    --zx-glass-filter-panel: none !important;
   }
 }
 
@@ -258,6 +349,8 @@
   --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
   --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
+  --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
   --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
   --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
   --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
@@ -295,6 +388,8 @@
     --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
     --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
     --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
+    --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+    --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
     --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
     --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
     --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
@@ -2634,10 +2729,12 @@ button.zx-panel__toggle:focus-visible {
   max-block-size: min(720px, calc(100vh - (2 * var(--zx-space-6))));
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-xl);
-  background: var(--zx-color-overlay-panel);
+  background-color: var(--zx-color-overlay-panel);
+  background-image: var(--zx-overlay-panel-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-panel);
   backdrop-filter: var(--zx-glass-filter-panel);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
@@ -2651,7 +2748,7 @@ button.zx-panel__toggle:focus-visible {
   }
 }
 .zx-launcher::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 .zx-launcher__surface {
   display: grid;
@@ -2663,7 +2760,7 @@ button.zx-panel__toggle:focus-visible {
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   gap: var(--zx-space-3);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
   padding: var(--zx-space-3) var(--zx-space-4);
 }
 .zx-launcher__search[data-shortcut=false] {
@@ -2746,10 +2843,10 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-launcher__option[aria-selected=true],
 .zx-launcher__option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-launcher__option[aria-current=page] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
   color: var(--zx-color-accent);
 }
 .zx-launcher__option[data-kind=application] {
@@ -2762,7 +2859,7 @@ button.zx-panel__toggle:focus-visible {
   text-align: center;
 }
 .zx-launcher__option[data-kind=application][aria-current=page] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
 }
 .zx-launcher__option[data-kind=application] .zx-launcher__icon {
   min-block-size: 36px;
@@ -2816,7 +2913,7 @@ button.zx-panel__toggle:focus-visible {
   justify-content: end;
   gap: var(--zx-space-4);
   padding: var(--zx-space-2) var(--zx-space-4);
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-divider);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
@@ -2978,7 +3075,7 @@ button.zx-panel__toggle:focus-visible {
   min-inline-size: 220px;
   gap: 2px;
   margin: calc(-1 * var(--zx-space-1)) calc(-1 * var(--zx-space-1)) var(--zx-space-1);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
   padding: var(--zx-space-3);
 }
 .zx-account-menu__panel-identity span {
@@ -3128,7 +3225,7 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-rail__flyout-item:hover,
 .zx-app-rail__flyout-item:focus-visible,
 .zx-app-rail__flyout-item[aria-current=page] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
   color: var(--zx-color-accent);
 }
 .zx-app-rail__flyout-item-icon {
@@ -3302,66 +3399,50 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-message__toast {
   --zx-message-kind: var(--zx-color-info);
+  --zx-message-fallback-bg: var(--zx-color-info-bg);
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
-  background: var(--zx-color-info-bg);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-message-fallback-bg);
   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);
 }
 .zx-message__toast[data-kind=success] {
   --zx-message-kind: var(--zx-color-success);
-  background: var(--zx-color-success-bg);
+  --zx-message-fallback-bg: var(--zx-color-success-bg);
 }
 .zx-message__toast[data-kind=warning] {
   --zx-message-kind: var(--zx-color-warning);
-  background: var(--zx-color-warning-bg);
+  --zx-message-fallback-bg: var(--zx-color-warning-bg);
 }
 .zx-message__toast[data-kind=error] {
   --zx-message-kind: var(--zx-color-danger);
-  background: var(--zx-color-danger-bg);
+  --zx-message-fallback-bg: var(--zx-color-danger-bg);
 }
-@supports (backdrop-filter: blur(1px)) {
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .zx-message__toast {
-    background: color-mix(in srgb, var(--zx-color-info-bg) 34%, var(--zx-color-overlay-surface));
+    border-color: color-mix(in srgb, var(--zx-message-kind) 28%, var(--zx-color-overlay-border));
+    background-color: var(--zx-color-overlay-surface);
+    background-image: var(--zx-overlay-toast-image);
+    background-clip: padding-box;
     -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
     backdrop-filter: var(--zx-glass-filter-overlay);
-    box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
-  }
-  .zx-message__toast[data-kind=success] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 34%, var(--zx-color-overlay-surface));
-  }
-  .zx-message__toast[data-kind=warning] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 34%, var(--zx-color-overlay-surface));
-  }
-  .zx-message__toast[data-kind=error] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 34%, var(--zx-color-overlay-surface));
+    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zx-message-kind) 72%, var(--zx-color-glass-highlight-strong)), var(--zx-glass-overlay-shadow);
   }
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-message__toast {
     border-color: var(--zx-color-border);
+    background: var(--zx-message-fallback-bg);
     -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);
-  }
-  .zx-message__toast[data-kind=success] {
-    background: var(--zx-color-success-bg);
-  }
-  .zx-message__toast[data-kind=warning] {
-    background: var(--zx-color-warning-bg);
-  }
-  .zx-message__toast[data-kind=error] {
-    background: var(--zx-color-danger-bg);
-  }
 }
 .zx-message__icon {
   display: inline-grid;
@@ -3380,7 +3461,7 @@ button.zx-panel__toggle:focus-visible {
   block-size: 4px;
   margin-block-start: var(--zx-space-2);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 .zx-message__progress-fill {
   display: block;
@@ -3427,10 +3508,12 @@ button.zx-panel__toggle:focus-visible {
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-overlay-panel);
+  background-color: var(--zx-color-overlay-panel);
+  background-image: var(--zx-overlay-panel-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-panel);
   backdrop-filter: var(--zx-glass-filter-panel);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
@@ -3444,12 +3527,12 @@ button.zx-panel__toggle:focus-visible {
   }
 }
 .zx-modal::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 .zx-modal__content {
   padding: var(--zx-space-5);
 }
-body:has(> .zx-modal:modal) {
+body:has(.zx-modal:modal) {
   overflow: hidden;
   overscroll-behavior: none;
 }
@@ -3478,7 +3561,8 @@ body:has(> .zx-modal:modal) {
   grid-template-rows: auto minmax(0, 1fr) auto;
   padding: 0;
 }
-.zx-dialog[open] {
+.zx-dialog[open],
+.zx-dialog:popover-open {
   display: grid;
 }
 .zx-dialog__header,
@@ -3490,7 +3574,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-dialog__header {
   justify-content: space-between;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
 }
 .zx-dialog__title {
   margin: 0;
@@ -3509,7 +3593,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-dialog__footer {
   justify-content: flex-end;
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-divider);
 }
 .zx-dialog__footer[hidden] {
   display: none;
@@ -3546,7 +3630,7 @@ body:has(> .zx-modal:modal) {
   border: 0;
   border-radius: 0;
   overflow: hidden;
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
 }
 .zx-sheet[data-side=start],
 .zx-sheet[data-side=end] {
@@ -3557,13 +3641,13 @@ body:has(> .zx-modal:modal) {
 .zx-sheet[data-side=start] {
   inset-inline-start: 0;
   inset-inline-end: auto;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-overlay-border);
   --zx-sheet-enter: -100% 0;
 }
 .zx-sheet[data-side=end] {
   inset-inline-start: auto;
   inset-inline-end: 0;
-  border-inline-start: 1px solid var(--zx-color-border);
+  border-inline-start: 1px solid var(--zx-color-overlay-border);
   --zx-sheet-enter: 100% 0;
 }
 [dir=rtl] .zx-sheet[data-side=start] {
@@ -3581,7 +3665,7 @@ body:has(> .zx-modal:modal) {
 .zx-sheet[data-side=top] {
   inset-block-start: 0;
   inset-block-end: auto;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-border);
   border-end-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   border-end-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   --zx-sheet-enter: 0 -100%;
@@ -3589,7 +3673,7 @@ body:has(> .zx-modal:modal) {
 .zx-sheet[data-side=bottom] {
   inset-block-start: auto;
   inset-block-end: 0;
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-border);
   border-start-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   border-start-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   --zx-sheet-enter: 0 100%;
@@ -3598,8 +3682,21 @@ body:has(> .zx-modal:modal) {
   background: transparent;
 }
 .zx-sheet[data-backdrop=blur]::backdrop {
+  -webkit-backdrop-filter: blur(var(--zx-overlay-blur));
   backdrop-filter: blur(var(--zx-overlay-blur));
 }
+.zx-sheet[data-modality=none]::backdrop,
+.zx-sheet[data-modality=trap-focus]::backdrop {
+  background: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+  .zx-sheet[data-backdrop=blur]::backdrop {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet {
     transition:
@@ -3611,12 +3708,13 @@ body:has(> .zx-modal:modal) {
   .zx-sheet[data-state=open] {
     animation: none;
   }
-  .zx-sheet:not([open]) {
+  .zx-sheet:not([open]):not(:popover-open) {
     translate: var(--zx-sheet-enter, 0 0);
     opacity: 0;
   }
   @starting-style {
-    .zx-sheet[open] {
+    .zx-sheet[open],
+    .zx-sheet:popover-open {
       translate: var(--zx-sheet-enter, 0 0);
       opacity: 0;
     }
@@ -3818,10 +3916,12 @@ body:has(> .zx-modal:modal) {
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
 }
@@ -3851,10 +3951,12 @@ body:has(> .zx-modal:modal) {
   max-inline-size: var(--zx-tooltip-max-inline-size, 260px);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
@@ -4211,7 +4313,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-menu-button__item:hover,
 .zx-menu-button__item:focus-visible {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-menu-button__item[data-danger=true] {
   color: var(--zx-color-danger);
@@ -4228,7 +4330,7 @@ body:has(> .zx-modal:modal) {
 .zx-menu-button__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 
 /* src/components/context-menu/context-menu.css */
@@ -4255,7 +4357,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-context-menu__item:hover,
 .zx-context-menu__item:focus-visible {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-context-menu__item[data-danger=true] {
   color: var(--zx-color-danger);
@@ -4272,7 +4374,7 @@ body:has(> .zx-modal:modal) {
 .zx-context-menu__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 
 /* src/components/select/select.css */
@@ -4374,10 +4476,12 @@ body:has(> .zx-modal:modal) {
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -4400,13 +4504,13 @@ body:has(> .zx-modal:modal) {
   flex: 1;
 }
 .zx-select__option[data-active=true] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-select__option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-select__option[aria-selected=true] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
 }
 .zx-select__option > .zx-icon {
   flex: none;
@@ -4416,7 +4520,7 @@ body:has(> .zx-modal:modal) {
   position: sticky;
   z-index: 1;
   inset-block-start: 0;
-  background: var(--zx-color-overlay-surface);
+  background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -4439,7 +4543,7 @@ body:has(> .zx-modal:modal) {
 .zx-select__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-control-pad-x);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 .zx-select__empty {
   color: var(--zx-color-text-muted);
@@ -4801,10 +4905,12 @@ body:has(> .zx-modal:modal) {
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -4831,7 +4937,7 @@ body:has(> .zx-modal:modal) {
   cursor: pointer;
 }
 .zx-tag-picker__option[data-active] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-tag-picker__option[aria-selected=true] {
   color: var(--zx-color-accent);
@@ -5194,13 +5300,13 @@ body:has(> .zx-modal:modal) {
   place-items: center;
   min-inline-size: var(--zx-control-height);
   padding: 0;
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
 }
 .zx-date-picker__heading {
   overflow: hidden;
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
   font-weight: 650;
   text-overflow: ellipsis;
   text-wrap: nowrap;
@@ -5233,9 +5339,9 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 0;
   min-block-size: var(--zx-control-height);
   padding: 0;
-  border-color: var(--zx-color-bg-surface);
+  border-color: transparent;
   border-radius: var(--zx-radius-md);
-  background: inherit;
+  background: transparent;
   font-variant-numeric: tabular-nums;
 }
 .zx-date-picker__day[data-other-month=true] {
@@ -5275,10 +5381,12 @@ body:has(> .zx-modal:modal) {
   inset: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-3);
 }
 @media (prefers-reduced-transparency: reduce) {
@@ -5303,10 +5411,14 @@ body:has(> .zx-modal:modal) {
 .zx-month-picker__month {
   min-inline-size: 0;
   padding-inline: var(--zx-space-1);
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
+}
+.zx-date-picker__quick-month[aria-selected=true] {
+  background: var(--zx-color-overlay-selected);
+  color: var(--zx-color-accent);
+  font-weight: 700;
 }
-.zx-date-picker__quick-month[aria-selected=true],
 .zx-month-picker__month[aria-selected=true] {
   background: var(--zx-color-bg-selected);
   color: var(--zx-color-accent);
@@ -5572,10 +5684,12 @@ body:has(> .zx-modal:modal) {
 }
 .zx-datebox__popover .zx-date-picker__surface {
   border-color: var(--zx-color-overlay-border);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-datebox__popover .zx-date-picker__surface {
@@ -5893,10 +6007,12 @@ body:has(> .zx-modal:modal) {
 .zx-date-range-box__popover .zx-date-range-picker__surface {
   max-inline-size: none;
   border-color: var(--zx-color-overlay-border);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-date-range-box__popover .zx-date-range-picker__surface {
@@ -5965,14 +6081,14 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 0;
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-lg);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
 }
 .zx-calendar__toolbar {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-3);
   min-inline-size: 0;
@@ -5995,7 +6111,12 @@ body:has(> .zx-modal:modal) {
   gap: var(--zx-space-3);
 }
 .zx-calendar__views {
+  block-size: var(--zx-control-height);
+  gap: 2px;
   overflow-x: auto;
+  border-radius: 0;
+  background: var(--zx-color-bg-muted);
+  padding: 3px;
 }
 .zx-calendar__toolbar-button,
 .zx-calendar__view-button,
@@ -6020,24 +6141,20 @@ body:has(> .zx-modal:modal) {
   padding-inline: var(--zx-space-2);
 }
 .zx-calendar__view-button {
-  border-inline-end-width: 0;
+  block-size: 100%;
+  min-block-size: 0;
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
   padding-inline: var(--zx-space-3);
 }
-.zx-calendar__view-button:first-child {
-  border-start-start-radius: var(--zx-control-radius);
-  border-end-start-radius: var(--zx-control-radius);
-}
-.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-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);
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+  box-shadow: var(--zx-shadow-2);
+  color: var(--zx-color-text);
 }
 .zx-calendar__new {
   gap: var(--zx-space-2);
@@ -6049,7 +6166,7 @@ body:has(> .zx-modal:modal) {
   font-weight: 650;
 }
 .zx-calendar__toolbar-button:hover:not(:disabled),
-.zx-calendar__view-button:hover:not(:disabled) {
+.zx-calendar__view-button:hover:not(:disabled):not([aria-pressed=true]) {
   background: var(--zx-color-bg-hover);
 }
 .zx-calendar__new:hover:not(:disabled) {
@@ -6120,6 +6237,7 @@ body:has(> .zx-modal:modal) {
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
   place-content: center;
   border: 0;
+  border-radius: 0;
   border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
@@ -6210,6 +6328,7 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__slot {
   min-inline-size: 0;
   border: 0;
+  border-radius: 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);
@@ -6250,6 +6369,7 @@ body:has(> .zx-modal:modal) {
   inline-size: 100%;
   block-size: 100%;
   min-inline-size: 0;
+  min-block-size: 0;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--zx-calendar-event-color) 65%, var(--zx-color-border));
   border-inline-start: 3px solid var(--zx-calendar-event-color);
@@ -6313,8 +6433,11 @@ body:has(> .zx-modal:modal) {
   z-index: 3;
   display: grid;
   block-size: 8px;
+  min-block-size: 0;
   place-items: center;
+  appearance: none;
   border: 0;
+  border-radius: 0;
   background: transparent;
   padding: 0;
   cursor: ns-resize;
@@ -6335,6 +6458,7 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__event[data-variant=span] .zx-calendar__event-action,
 .zx-calendar__event[data-variant=month] .zx-calendar__event-action {
   display: flex;
+  min-block-size: 0;
   align-items: center;
   gap: var(--zx-space-1);
   padding-block: 2px;
@@ -6377,8 +6501,11 @@ body:has(> .zx-modal:modal) {
   border-block-end: 1px solid var(--zx-color-border);
 }
 .zx-calendar__agenda-heading {
-  align-self: start;
+  align-self: stretch;
+  appearance: none;
   border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
@@ -6390,15 +6517,19 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__agenda-heading[aria-current=date] {
   color: var(--zx-color-accent);
 }
+.zx-calendar__agenda-events {
+  display: grid;
+  min-inline-size: 0;
+}
 .zx-calendar__agenda-empty {
   margin: 0;
   color: var(--zx-color-text-muted);
   padding: var(--zx-space-3);
 }
-.zx-calendar__agenda-day > .zx-calendar__event {
+.zx-calendar__agenda-events > .zx-calendar__event {
   border-block-end: 1px solid var(--zx-color-border);
 }
-.zx-calendar__agenda-day > .zx-calendar__event:last-child {
+.zx-calendar__agenda-events > .zx-calendar__event:last-child {
   border-block-end: 0;
 }
 .zx-calendar__event[data-variant=agenda] .zx-calendar__event-action {
@@ -6461,59 +6592,16 @@ body:has(> .zx-modal:modal) {
   text-transform: uppercase;
   letter-spacing: .04em;
 }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday {
-  grid-row: 1;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(7) {
-  grid-column: 2;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(6) {
-  grid-column: 3;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(5) {
-  grid-column: 4;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(4) {
-  grid-column: 5;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(3) {
-  grid-column: 6;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(2) {
-  grid-column: 7;
-}
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(1) {
-  grid-column: 8;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(7) {
-  grid-column: 1;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(6) {
-  grid-column: 2;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(5) {
-  grid-column: 3;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(4) {
-  grid-column: 4;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(3) {
-  grid-column: 5;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(2) {
-  grid-column: 6;
-}
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(1) {
-  grid-column: 7;
-}
 .zx-calendar__month-week {
   min-block-size: 7.5rem;
   border-block-end: 1px solid var(--zx-color-border);
 }
 .zx-calendar__month-week-number {
-  grid-row: 1 / span 2;
+  grid-row: 1;
+  appearance: none;
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font: inherit;
@@ -6532,11 +6620,19 @@ body:has(> .zx-modal:modal) {
 }
 .zx-calendar__month-days {
   grid-row: 1;
+  min-block-size: 7.5rem;
+  align-items: stretch;
 }
 .zx-calendar__month-day {
+  display: flex;
+  block-size: 100%;
+  appearance: none;
+  align-items: flex-start;
+  justify-content: flex-end;
   min-block-size: var(--zx-control-height);
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   padding: var(--zx-space-2);
@@ -6544,6 +6640,9 @@ body:has(> .zx-modal:modal) {
   text-align: end;
   cursor: pointer;
 }
+.zx-calendar__month-day:last-child {
+  border-inline-end: 0;
+}
 .zx-calendar__month-day[data-other-month=true] {
   color: var(--zx-color-text-muted);
   background: var(--zx-color-bg-muted);
@@ -6551,20 +6650,35 @@ body:has(> .zx-modal:modal) {
 .zx-calendar__month-day[aria-current=date] {
   color: var(--zx-color-accent);
   font-weight: 750;
-  box-shadow: inset 0 2px var(--zx-color-accent);
 }
 .zx-calendar__month-day:hover:not(:disabled) {
   background: var(--zx-color-bg-hover);
 }
 .zx-calendar__month-events {
-  grid-row: 2;
+  grid-row: 1;
+  z-index: 2;
   grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2));
   align-content: start;
   gap: 2px 0;
-  padding-block: var(--zx-space-1);
+  padding-block: calc(var(--zx-control-height) + var(--zx-space-1)) var(--zx-space-1);
+  pointer-events: none;
+}
+.zx-calendar__month-events > .zx-calendar__event,
+.zx-calendar__month-events > .zx-calendar__more {
+  pointer-events: auto;
+}
+.zx-calendar__event[data-variant=month] .zx-calendar__event-action {
+  border-color: color-mix(in srgb, var(--zx-calendar-event-color) 55%, var(--zx-color-border));
+  border-inline-start-width: 1px;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--zx-calendar-event-color) 13%, var(--zx-color-bg-surface));
+}
+.zx-calendar__event[data-variant=month][data-all-day=true] .zx-calendar__event-time {
+  display: none;
 }
 .zx-calendar__more {
   align-self: center;
+  min-block-size: 0;
   overflow: hidden;
   border: 0;
   background: transparent;
@@ -6702,8 +6816,12 @@ body:has(> .zx-modal:modal) {
     position: sticky;
     inset-block-start: 0;
     z-index: 3;
+    border-inline-end: 0;
     border-block-end: 1px solid var(--zx-color-border);
   }
+  .zx-calendar__agenda-events {
+    grid-column: 1;
+  }
   .zx-calendar__event[data-variant=agenda] .zx-calendar__event-action {
     grid-template-columns: 5.5rem minmax(0, 1fr);
   }
@@ -6875,10 +6993,12 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 190px;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-2);
   max-block-size: min(360px, 70vh);
   overflow: auto;
@@ -6902,7 +7022,7 @@ body:has(> .zx-modal:modal) {
   padding-inline: var(--zx-space-2);
 }
 .zx-table__column-option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 .zx-table__column-option > label,
 .zx-table__column-label {
@@ -7323,8 +7443,12 @@ body:has(> .zx-modal:modal) {
 
 /* src/components/card-view/card-view.css */
 .zx-card-view {
-  --zx-card-view-min-card-width: 18rem;
+  --zx-card-view-min-card-width: 15rem;
   --zx-card-view-column-basis: 0%;
+  --zx-card-view-card-padding: var(--zx-space-3);
+  --zx-card-view-card-gap: var(--zx-space-2);
+  --zx-card-view-grid-gap: var(--zx-space-3);
+  --zx-card-view-preview-size: 1.75rem;
   inline-size: 100%;
   min-inline-size: 0;
   container-type: inline-size;
@@ -7361,18 +7485,19 @@ body:has(> .zx-modal:modal) {
   min-inline-size: 0;
 }
 .zx-card-view__group + .zx-card-view__group {
-  margin-block-start: var(--zx-space-6);
+  margin-block-start: var(--zx-space-4);
 }
 .zx-card-view__group-heading {
-  margin: 0 0 var(--zx-space-3);
+  margin: 0 0 var(--zx-space-2);
   color: var(--zx-color-text);
-  font-size: var(--zx-text-lg);
-  line-height: 1.35;
+  font-size: var(--zx-text-sm);
+  font-weight: 600;
+  line-height: 1.3;
 }
 .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);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--zx-card-view-min-card-width), calc(var(--zx-card-view-column-basis) - var(--zx-card-view-grid-gap)))), 1fr));
+  gap: var(--zx-card-view-grid-gap);
   min-inline-size: 0;
   margin: 0;
   padding: 0;
@@ -7408,7 +7533,7 @@ body:has(> .zx-modal:modal) {
   outline: none;
   box-shadow: var(--zx-focus-ring);
 }
-.zx-record-card[aria-selected=true] {
+.zx-record-card[data-selected=true] {
   border-color: var(--zx-color-accent);
   box-shadow: inset 0 0 0 1px var(--zx-color-accent);
 }
@@ -7475,6 +7600,35 @@ body:has(> .zx-modal:modal) {
   flex: 1 1 auto;
   min-inline-size: 0;
 }
+.zx-record-card__eyebrow {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-record-card__eyebrow-group,
+.zx-record-card__title-prefix {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  margin: 0;
+}
+.zx-record-card__eyebrow-group[data-card-slot=eyebrow-end] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.zx-record-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-record-card__title-row > .zx-record-card__heading {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
 .zx-record-card__heading {
   margin: 0;
   overflow-wrap: anywhere;
@@ -7654,67 +7808,211 @@ body:has(> .zx-modal:modal) {
       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-card-view .zx-record-card {
+  border-radius: var(--zx-radius-md);
 }
-.zx-kanban-view__toolbar:empty {
-  display: none;
+.zx-card-view .zx-record-card:has(> .zx-record-card__preview) {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
 }
-.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-card-view .zx-record-card__preview {
+  inline-size: var(--zx-card-view-preview-size);
+  block-size: var(--zx-card-view-preview-size);
+  margin-block-start: var(--zx-card-view-card-padding);
+  margin-inline-start: var(--zx-card-view-card-padding);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  aspect-ratio: 1;
 }
-.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-card-view .zx-record-card__preview .zx-icon {
+  inline-size: .875rem;
+  block-size: .875rem;
 }
-.zx-kanban-view__lane-heading,
-.zx-kanban-view__column-heading {
-  display: flex;
-  align-items: center;
+.zx-card-view .zx-record-card__body {
+  gap: var(--zx-card-view-card-gap);
+  padding: var(--zx-card-view-card-padding);
+}
+.zx-card-view .zx-record-card:has(> .zx-record-card__preview) .zx-record-card__body {
+  padding-inline-start: var(--zx-card-view-card-gap);
+}
+.zx-card-view .zx-record-card__header {
   gap: var(--zx-space-2);
-  margin: 0;
-  color: var(--zx-color-text);
+}
+.zx-card-view .zx-record-card__selection {
+  min-block-size: 1.25rem;
+}
+.zx-card-view .zx-record-card__heading {
   font-size: var(--zx-text-md);
-  font-weight: var(--zx-control-font-weight);
+  font-weight: 600;
   line-height: 1.3;
 }
-.zx-kanban-view__lane-heading {
-  margin-block-end: var(--zx-space-2);
+.zx-card-view .zx-record-card__primary,
+.zx-card-view .zx-record-card__title {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.zx-card-view .zx-record-card__subtitle {
+  margin-block-start: calc(var(--zx-space-1) / 2);
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-card-view .zx-record-card__actions {
+  flex-wrap: nowrap;
+  gap: calc(var(--zx-space-1) / 2);
+}
+.zx-card-view .zx-record-card__action {
+  min-block-size: 1.75rem;
+  border-color: transparent;
+  background: transparent;
+  padding-inline: var(--zx-space-2);
+  font-size: var(--zx-text-xs);
+}
+.zx-card-view .zx-record-card__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-1);
+}
+.zx-card-view .zx-record-card__field {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--zx-space-1);
+  max-inline-size: 100%;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
+}
+.zx-card-view .zx-record-card__label {
+  flex: none;
+  font-size: var(--zx-text-xs);
+  font-weight: 500;
+  line-height: 1.2;
+}
+.zx-card-view .zx-record-card__value {
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-card-view .zx-card-view__group-empty {
+  padding: var(--zx-space-3);
+  font-size: var(--zx-text-sm);
+}
+.zx-card-view .zx-card-view__empty {
+  min-block-size: 6rem;
+  border-radius: var(--zx-radius-md);
+  padding: var(--zx-space-4);
+  font-size: var(--zx-text-sm);
+}
+.zx-card-view .zx-card-view__skeleton {
+  grid-template-columns: var(--zx-card-view-preview-size) minmax(0, 1fr);
+  gap: var(--zx-card-view-card-gap);
+  padding: var(--zx-card-view-card-padding);
+}
+.zx-card-view .zx-card-view__skeleton-preview {
+  grid-row: 1 / span 2;
+  inline-size: var(--zx-card-view-preview-size);
+  margin: 0;
+  aspect-ratio: 1;
+  border-radius: var(--zx-radius-sm);
+}
+.zx-card-view .zx-card-view__skeleton-line {
+  min-inline-size: 0;
+  block-size: .625rem;
+}
+.zx-card-view .zx-card-view__skeleton-line:nth-child(3) {
+  inline-size: 62%;
+}
+.zx-card-view .zx-card-view__skeleton-line:nth-child(4) {
+  grid-column: 1 / -1;
+  inline-size: 42%;
+}
+@media (pointer: coarse) {
+  .zx-card-view .zx-record-card__selection,
+  .zx-card-view .zx-record-card__action {
+    min-inline-size: 44px;
+    min-block-size: 44px;
+  }
+}
+
+/* src/components/kanban-view/kanban-view.css */
+.zx-kanban-view {
+  --zx-kanban-column-width: 18.5rem;
+  --zx-kanban-thumbnail-size: 2rem;
+  --zx-kanban-card-padding-block: var(--zx-space-2);
+  --zx-kanban-card-padding-inline: var(--zx-space-3);
+  --zx-kanban-card-gap: var(--zx-space-2);
+  inline-size: 100%;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.zx-kanban-view__toolbar {
+  margin-block-end: var(--zx-space-1);
+}
+.zx-kanban-view__toolbar:empty {
+  display: none;
+}
+.zx-kanban-view__board {
+  min-inline-size: 0;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-gutter: stable;
+}
+.zx-kanban-view__lane + .zx-kanban-view__lane {
+  margin-block-start: var(--zx-space-3);
+  border-block-start: 1px solid var(--zx-color-border);
+  padding-block-start: var(--zx-space-2);
+}
+.zx-kanban-view__lane-heading,
+.zx-kanban-view__column-heading {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  margin: 0;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-control-font-weight);
+  line-height: 1.25;
+}
+.zx-kanban-view__lane-heading {
+  min-block-size: 2rem;
+  gap: var(--zx-space-1);
+  margin-block-end: var(--zx-space-1);
+}
+.zx-kanban-view__column-heading {
+  min-block-size: 2rem;
+  gap: var(--zx-space-1);
+  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));
+  grid-auto-columns: minmax(18rem, var(--zx-kanban-column-width));
   align-items: start;
-  gap: var(--zx-space-3);
+  gap: var(--zx-space-4);
   min-inline-size: max-content;
 }
+.zx-kanban-view__columns[hidden],
+.zx-kanban-view__cards[hidden] {
+  display: none;
+}
 .zx-kanban-view__column {
   display: grid;
-  grid-template-rows: auto minmax(64px, auto);
-  gap: var(--zx-space-2);
+  grid-template-rows: auto minmax(4rem, auto);
   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 {
+  order: 1;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7722,6 +8020,7 @@ body:has(> .zx-modal:modal) {
 }
 .zx-kanban-view__collapse,
 .zx-kanban-view__move-handle {
+  position: relative;
   display: inline-grid;
   flex: 0 0 auto;
   place-items: center;
@@ -7732,12 +8031,14 @@ body:has(> .zx-modal:modal) {
   cursor: pointer;
 }
 .zx-kanban-view__collapse {
-  inline-size: 26px;
-  block-size: 26px;
+  order: 3;
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  margin-inline-start: auto;
 }
 .zx-kanban-view__move-handle {
-  inline-size: 28px;
-  block-size: 28px;
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  block-size: calc(var(--zx-control-height) - var(--zx-space-1));
   cursor: grab;
   touch-action: none;
 }
@@ -7758,38 +8059,222 @@ body:has(> .zx-modal:modal) {
   box-shadow: var(--zx-focus-ring);
 }
 .zx-kanban-view__count {
+  order: 2;
   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);
+  font-size: var(--zx-text-xs);
+  font-weight: 400;
+  line-height: 1.25;
   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);
+  font-weight: 600;
 }
 .zx-kanban-view__column[data-wip=exceeded] .zx-kanban-view__count {
-  background: var(--zx-color-danger-bg);
   color: var(--zx-color-danger);
+  font-weight: 600;
+}
+.zx-kanban-view__lane[data-wip=limit] > .zx-kanban-view__lane-heading .zx-kanban-view__count {
+  color: var(--zx-color-warning);
+  font-weight: 600;
+}
+.zx-kanban-view__lane[data-wip=exceeded] > .zx-kanban-view__lane-heading .zx-kanban-view__count {
+  color: var(--zx-color-danger);
+  font-weight: 600;
 }
 .zx-kanban-view__cards {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--zx-space-2);
-  min-block-size: 64px;
+  min-block-size: 4rem;
   margin: 0;
-  border-radius: var(--zx-radius-sm);
-  padding: var(--zx-space-1);
+  padding: 0;
   list-style: none;
 }
 .zx-kanban-view__cards > .zx-record-card {
   inline-size: 100%;
   min-inline-size: 0;
+  overflow: visible;
+  border-radius: var(--zx-radius-md);
+}
+.zx-kanban-view :where(.zx-record-card[data-variant=outlined]) {
+  box-shadow: var(--zx-shadow-1);
+}
+.zx-kanban-view .zx-record-card:has(> .zx-record-card__preview) {
+  grid-template-columns: var(--zx-kanban-thumbnail-size) minmax(0, 1fr);
+  align-items: start;
+  column-gap: var(--zx-space-2);
+  padding-block: var(--zx-kanban-card-padding-block);
+  padding-inline: var(--zx-kanban-card-padding-inline);
+}
+.zx-kanban-view .zx-record-card > .zx-record-card__preview {
+  inline-size: var(--zx-kanban-thumbnail-size);
+  block-size: var(--zx-kanban-thumbnail-size);
+  aspect-ratio: 1;
+  align-self: start;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+}
+.zx-kanban-view .zx-record-card:has(> .zx-record-card__preview) > .zx-record-card__body {
+  padding: 0;
+}
+.zx-kanban-view .zx-record-card:not(:has(> .zx-record-card__preview)) > .zx-record-card__body {
+  padding-block: var(--zx-kanban-card-padding-block);
+  padding-inline: var(--zx-kanban-card-padding-inline);
+}
+.zx-kanban-view .zx-record-card__body {
+  gap: var(--zx-kanban-card-gap);
+}
+.zx-kanban-view .zx-record-card__header {
+  gap: var(--zx-space-2);
+}
+.zx-kanban-view .zx-record-card__selection {
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+}
+.zx-kanban-view .zx-record-card__heading {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: var(--zx-text-md);
+  font-weight: 600;
+  line-height: 1.3;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.zx-kanban-view .zx-record-card__subtitle {
+  margin-block-start: var(--zx-space-1);
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__actions {
+  gap: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.zx-kanban-view .zx-record-card:hover .zx-record-card__actions,
+.zx-kanban-view .zx-record-card:focus-within .zx-record-card__actions,
+.zx-kanban-view .zx-record-card[data-selected=true] .zx-record-card__actions,
+.zx-kanban-view .zx-record-card[data-grabbed=true] .zx-record-card__actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+.zx-kanban-view .zx-record-card__action {
+  inline-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding: 0;
+}
+.zx-kanban-view .zx-record-card__action-label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-2);
+}
+.zx-kanban-view .zx-record-card__field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  min-block-size: 0;
+  border: 0;
+  padding: 0;
+}
+.zx-kanban-view .zx-record-card__label,
+.zx-kanban-view .zx-record-card__value {
+  overflow: hidden;
+  font-size: var(--zx-text-xs);
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__label {
+  flex: none;
+  color: var(--zx-color-text-muted);
+  font-weight: 500;
+}
+.zx-kanban-view .zx-record-card__value {
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: 1.25rem;
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group,
+.zx-kanban-view .zx-record-card__title-prefix {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  margin: 0;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group[data-card-slot=eyebrow-end] {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group .zx-record-card__label,
+.zx-kanban-view .zx-record-card__title-prefix .zx-record-card__label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.zx-kanban-view .zx-record-card__eyebrow-group[data-card-slot=eyebrow-start] .zx-record-card__field {
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
+}
+.zx-kanban-view .zx-record-card__eyebrow-group .zx-record-card__value {
+  color: var(--zx-color-text-muted);
+}
+.zx-kanban-view .zx-record-card__eyebrow-group .zx-record-card__value > :only-child {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__title-row .zx-record-card__heading {
+  min-inline-size: 0;
+}
+.zx-kanban-view .zx-record-card__title-prefix {
+  flex: none;
+  padding-block-start: calc(var(--zx-space-1) + 1px);
+}
+.zx-kanban-view .zx-record-card__title-prefix .zx-record-card__value {
+  display: grid;
+  place-items: center;
+  color: var(--zx-color-accent);
+  line-height: 1;
+}
+.zx-kanban-view .zx-record-card__title-prefix .zx-icon {
+  inline-size: .5rem;
+  block-size: .5rem;
+}
+.zx-kanban-view .zx-record-card__title-prefix .zx-badge {
+  border: 0;
+  background: transparent;
+  padding: 0;
 }
 .zx-kanban-view__cards[data-drop=append],
 .zx-kanban-view__cards[data-keyboard-target=append] {
@@ -7812,7 +8297,7 @@ body:has(> .zx-modal:modal) {
 .zx-kanban-view__empty {
   display: grid;
   place-items: center;
-  min-block-size: 160px;
+  min-block-size: 6rem;
   color: var(--zx-color-text-muted);
   text-align: center;
 }
@@ -7828,14 +8313,38 @@ body:has(> .zx-modal:modal) {
   pointer-events: none;
 }
 @container (max-width: 420px) {
-  .zx-kanban-view__columns {
-    grid-auto-columns: minmax(240px, 88vw);
+  .zx-kanban-view .zx-record-card__label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+@media (hover: none), (pointer: coarse) {
+  .zx-kanban-view .zx-record-card__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (pointer: coarse) {
+  .zx-kanban-view__collapse,
+  .zx-kanban-view__move-handle,
+  .zx-kanban-view .zx-record-card__action,
+  .zx-kanban-view .zx-record-card__selection {
+    inline-size: 2.75rem;
+    min-block-size: 2.75rem;
   }
 }
+[data-zx-density=compact] .zx-kanban-view {
+  --zx-kanban-card-padding-inline: var(--zx-space-2);
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-kanban-view__collapse,
   .zx-kanban-view__move-handle,
-  .zx-kanban-view .zx-record-card {
+  .zx-kanban-view .zx-record-card,
+  .zx-kanban-view .zx-record-card__actions {
     transition:
       color var(--zx-dur-fast) var(--zx-ease),
       background var(--zx-dur-fast) var(--zx-ease),
@@ -7843,6 +8352,143 @@ body:has(> .zx-modal:modal) {
       opacity var(--zx-dur-fast) var(--zx-ease);
   }
 }
+.zx-kanban-view__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+.zx-kanban-view__search {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+.zx-kanban-view__search > .zx-icon {
+  position: absolute;
+  inset-inline-start: var(--zx-control-pad-x);
+  color: var(--zx-color-text-muted);
+  pointer-events: none;
+}
+.zx-kanban-view__search-input {
+  min-inline-size: 12rem;
+  max-inline-size: 100%;
+  padding-inline-start: calc(var(--zx-control-pad-x) * 2 + 13px);
+}
+.zx-kanban-view__search-input::-webkit-search-cancel-button {
+  cursor: pointer;
+}
+.zx-kanban-view__history {
+  display: inline-flex;
+  gap: var(--zx-space-1);
+  margin-inline-start: auto;
+}
+.zx-kanban-view[data-column-scroll=true] .zx-kanban-view__cards {
+  max-block-size: var(--zx-kanban-column-height);
+  overflow-y: auto;
+  overscroll-behavior-block: contain;
+  scrollbar-gutter: stable;
+}
+.zx-kanban-view__add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-space-1);
+  margin-block-start: var(--zx-space-2);
+  border: 1px dashed var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: transparent;
+  padding-block: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  cursor: pointer;
+}
+.zx-kanban-view__add:hover {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+.zx-kanban-view__add:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-kanban-view__add[hidden] {
+  display: none;
+}
+.zx-kanban-view__column-empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 4rem;
+  padding: var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: center;
+}
+.zx-kanban-view .zx-record-card[data-rule-tone] {
+  position: relative;
+  overflow: hidden;
+}
+.zx-kanban-view .zx-record-card[data-rule-tone]::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: 3px;
+  background: var(--zx-color-border-strong);
+  content: "";
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=accent]::before {
+  background: var(--zx-color-accent);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=success]::before {
+  background: var(--zx-color-success);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=warning]::before {
+  background: var(--zx-color-warning);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=danger]::before {
+  background: var(--zx-color-danger);
+}
+.zx-kanban-view .zx-record-card[data-rule-tone=info]::before {
+  background: var(--zx-color-info);
+}
+.zx-kanban-view__rules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zx-space-1);
+  margin: 0;
+}
+.zx-kanban-view__board[data-dragging=true] {
+  cursor: grabbing;
+  user-select: none;
+}
+.zx-kanban-view__board[data-dragging=true] .zx-record-card {
+  cursor: grabbing;
+}
+.zx-kanban-view__drag-preview {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 2;
+  max-inline-size: var(--zx-kanban-column-width);
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-raised);
+  box-shadow: var(--zx-shadow-2);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  translate: var(--zx-space-3) var(--zx-space-3);
+}
+@media (pointer: coarse) {
+  .zx-kanban-view__add {
+    min-block-size: 2.75rem;
+  }
+}
 
 /* src/components/grid/grid.css */
 .zx-table[data-preset=billing-items] tr.zx-grid-billing__summary > td {