@zeyos/zx 4.4.0 → 5.0.0

package/dist/zx.css

@@ -13,16 +13,21 @@
   --zx-gray-800: #27272a;
   --zx-gray-900: #18181b;
   --zx-gray-950: #09090b;
-  --zx-green-300: #5ee9b5;
-  --zx-green-400: #21cc75;
-  --zx-green-500: #009966;
-  --zx-green-600: #007a55;
-  --zx-green-700: #006045;
-  --zx-accent-300: var(--zx-green-300);
-  --zx-accent-400: var(--zx-green-400);
-  --zx-accent-500: var(--zx-green-500);
-  --zx-accent-600: var(--zx-green-600);
-  --zx-accent-700: var(--zx-green-700);
+  --zx-emerald-300: #5ee9b5;
+  --zx-emerald-400: #21cc75;
+  --zx-emerald-500: #009966;
+  --zx-emerald-600: #007a55;
+  --zx-emerald-700: #006045;
+  --zx-accent-300: var(--zx-emerald-300);
+  --zx-accent-400: var(--zx-emerald-400);
+  --zx-accent-500: var(--zx-emerald-500);
+  --zx-accent-600: var(--zx-emerald-600);
+  --zx-accent-700: var(--zx-emerald-700);
+  --zx-green-300: #b3e87a;
+  --zx-green-400: #90cd40;
+  --zx-green-500: #6ba211;
+  --zx-green-600: #4d7800;
+  --zx-green-700: #3d5e06;
   --zx-red-400: #ff6467;
   --zx-red-500: #e7000b;
   --zx-red-600: #c10007;
@@ -32,19 +37,47 @@
   --zx-blue-400: #51a2ff;
   --zx-blue-500: #2b7fff;
   --zx-blue-600: #155dfc;
-  --zx-space-1: 4px;
-  --zx-space-2: 8px;
-  --zx-space-3: 12px;
-  --zx-space-4: 16px;
-  --zx-space-5: 20px;
-  --zx-space-6: 24px;
-  --zx-space-7: 32px;
-  --zx-space-8: 40px;
-  --zx-radius: 0.45rem;
-  --zx-radius-sm: calc(var(--zx-radius) - 4px);
-  --zx-radius-md: calc(var(--zx-radius) - 2px);
+  --zx-tone-blue-300: #b3d4ff;
+  --zx-tone-blue-500: #3a81d7;
+  --zx-tone-blue-700: #1d589d;
+  --zx-tone-teal-300: #a8ddda;
+  --zx-tone-teal-500: #009390;
+  --zx-tone-teal-700: #006663;
+  --zx-tone-green-300: #b5deb5;
+  --zx-tone-green-500: #419547;
+  --zx-tone-green-700: #226929;
+  --zx-tone-amber-300: #eacc9b;
+  --zx-tone-amber-500: #a77600;
+  --zx-tone-amber-700: #745100;
+  --zx-tone-orange-300: #fbc3a7;
+  --zx-tone-orange-500: #c55f1d;
+  --zx-tone-orange-700: #8e3c00;
+  --zx-tone-red-300: #ffbfb8;
+  --zx-tone-red-500: #ca5551;
+  --zx-tone-red-700: #923432;
+  --zx-tone-pink-300: #f6bfd7;
+  --zx-tone-pink-500: #bc598c;
+  --zx-tone-pink-700: #873761;
+  --zx-tone-violet-300: #d4c8fe;
+  --zx-tone-violet-500: #886acf;
+  --zx-tone-violet-700: #5e4697;
+  --zx-tone-slate-300: #cad2dd;
+  --zx-tone-slate-500: #728295;
+  --zx-tone-slate-700: #4d5969;
+  --zx-space-unit: 4px;
+  --zx-space-1: calc(var(--zx-space-unit) * 1);
+  --zx-space-2: calc(var(--zx-space-unit) * 2);
+  --zx-space-3: calc(var(--zx-space-unit) * 3);
+  --zx-space-4: calc(var(--zx-space-unit) * 4);
+  --zx-space-5: calc(var(--zx-space-unit) * 5);
+  --zx-space-6: calc(var(--zx-space-unit) * 6);
+  --zx-space-7: calc(var(--zx-space-unit) * 8);
+  --zx-space-8: calc(var(--zx-space-unit) * 10);
+  --zx-radius: 4px;
+  --zx-radius-sm: calc(var(--zx-radius) * .5);
+  --zx-radius-md: calc(var(--zx-radius) * .75);
   --zx-radius-lg: var(--zx-radius);
-  --zx-radius-xl: calc(var(--zx-radius) + 4px);
+  --zx-radius-xl: calc(var(--zx-radius) * 1.5);
   --zx-radius-full: 999px;
   --zx-font-sans:
     Inter,
@@ -72,12 +105,29 @@
   --zx-text-lg: 16px;
   --zx-text-xl: 18px;
   --zx-text-2xl: 24px;
+  --zx-text-3xl: 30px;
+  --zx-weight-medium: 500;
+  --zx-weight-semibold: 600;
+  --zx-tracking-tight: -0.01em;
+  --zx-tracking-title: -0.015em;
   --zx-shadow-1: 0 1px 2px 0 rgb(9 9 11 / 5%);
   --zx-shadow-2: 0 1px 3px 0 rgb(9 9 11 / 10%), 0 1px 2px -1px rgb(9 9 11 / 10%);
   --zx-shadow-3: 0 10px 15px -3px rgb(9 9 11 / 10%), 0 4px 6px -4px rgb(9 9 11 / 10%);
   --zx-dur-fast: 120ms;
   --zx-dur-base: 180ms;
   --zx-ease: cubic-bezier(.2, .6, .3, 1);
+  --zx-ease-spring: cubic-bezier(.34, 1.32, .64, 1);
+  --zx-ease-drawer: cubic-bezier(.32, .72, 0, 1);
+}
+[data-zx-motion=reduced] {
+  --zx-dur-fast: 0ms;
+  --zx-dur-base: 0ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --zx-dur-fast: 0ms;
+    --zx-dur-base: 0ms;
+  }
 }
 
 /* styles/tokens/themes.css */
@@ -92,7 +142,7 @@
   --zx-accent-300: #ffd9a8;
   --zx-accent-400: #f7bc60;
   --zx-accent-500: #d0952f;
-  --zx-accent-600: #96690f;
+  --zx-accent-600: #916510;
   --zx-accent-700: #6f4e0b;
 }
 [data-zx-preset=ocean] {
@@ -132,15 +182,16 @@
   --zx-color-bg-surface: var(--zx-gray-0);
   --zx-color-bg-raised: var(--zx-gray-0);
   --zx-color-bg-control: var(--zx-gray-0);
+  --zx-color-bg-chrome: color-mix(in srgb, var(--zx-gray-100) 80%, var(--zx-gray-50));
   --zx-color-bg-muted: var(--zx-gray-100);
-  --zx-color-bg-hover: var(--zx-gray-100);
   --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 50%, transparent);
   --zx-color-border: var(--zx-gray-200);
   --zx-color-border-strong: var(--zx-gray-300);
   --zx-color-border-control: var(--zx-gray-200);
   --zx-color-text: var(--zx-gray-950);
-  --zx-color-text-muted: var(--zx-gray-500);
+  --zx-color-text-muted: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-600));
+  --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 70%, var(--zx-gray-400));
   --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);
@@ -150,7 +201,11 @@
   --zx-color-accent-active: var(--zx-accent-700);
   --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-600) 10%, var(--zx-gray-0));
   --zx-color-on-accent: var(--zx-gray-0);
-  --zx-color-danger: var(--zx-red-500);
+  --zx-color-accent-solid: var(--zx-accent-600);
+  --zx-color-accent-solid-hover: var(--zx-accent-700);
+  --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+  --zx-color-on-accent-solid: var(--zx-gray-0);
+  --zx-color-danger: var(--zx-red-600);
   --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-500) 10%, var(--zx-gray-0));
   --zx-color-warning: var(--zx-amber-600);
   --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 18%, var(--zx-gray-0));
@@ -158,26 +213,74 @@
   --zx-color-success-bg: color-mix(in srgb, var(--zx-green-600) 10%, var(--zx-gray-0));
   --zx-color-info: var(--zx-blue-600);
   --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-500) 10%, var(--zx-gray-0));
-  --zx-color-ring: var(--zx-color-accent);
-  --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
-  --zx-control-height: 32px;
+  --zx-color-tone-blue-fg: var(--zx-tone-blue-700);
+  --zx-color-tone-teal-fg: var(--zx-tone-teal-700);
+  --zx-color-tone-green-fg: var(--zx-tone-green-700);
+  --zx-color-tone-amber-fg: var(--zx-tone-amber-700);
+  --zx-color-tone-orange-fg: var(--zx-tone-orange-700);
+  --zx-color-tone-red-fg: var(--zx-tone-red-700);
+  --zx-color-tone-pink-fg: var(--zx-tone-pink-700);
+  --zx-color-tone-violet-fg: var(--zx-tone-violet-700);
+  --zx-color-tone-slate-fg: var(--zx-tone-slate-700);
+  --zx-color-chart-1: var(--zx-tone-blue-500);
+  --zx-color-chart-2: var(--zx-tone-orange-500);
+  --zx-color-chart-3: var(--zx-tone-teal-500);
+  --zx-color-chart-4: var(--zx-tone-amber-500);
+  --zx-color-chart-5: var(--zx-tone-pink-500);
+  --zx-color-chart-6: var(--zx-tone-green-500);
+  --zx-color-chart-7: var(--zx-tone-violet-500);
+  --zx-color-chart-8: var(--zx-tone-red-500);
+  --zx-control-height: 30px;
   --zx-control-pad-x: 10px;
   --zx-control-radius: var(--zx-radius-lg);
   --zx-control-font-size: var(--zx-text-md);
   --zx-control-font-weight: 500;
   --zx-overlay-shadow: var(--zx-shadow-3);
+  --zx-drag-shadow: 0 2px 4px -1px color-mix(in srgb, var(--zx-gray-950) 10%, transparent), 0 12px 28px -6px color-mix(in srgb, var(--zx-gray-950) 22%, transparent);
   --zx-overlay-blur: 8px;
   --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-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
+  --zx-overlay-specular-strength: 48%;
+  --zx-glass-blur: 8px;
+  --zx-glass-saturation: 130%;
+  --zx-glass-color-strength: 82%;
+  --zx-glass-filter-icon: blur(4px) saturate(118%);
+  --zx-glass-filter-control: blur(6px) saturate(116%);
+  --zx-glass-filter-raised: blur(8px) saturate(120%);
+  --zx-glass-filter-chrome: blur(10px) saturate(122%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
+  --zx-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-header-bg: var(--zx-gray-900);
+  --zx-header-text: var(--zx-gray-50);
+}
+:root,
+[data-zx-theme] {
+  --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 4.5%, transparent);
+  --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
+  --zx-color-border-subtle: color-mix(in srgb, var(--zx-color-text) 7%, transparent);
+  --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 13%, var(--zx-color-bg-surface));
+  --zx-color-ring: var(--zx-color-accent);
+  --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
+  --zx-color-app-icon-depth: color-mix(in srgb, var(--zx-color-app-icon-shade) 26%, transparent);
+  --zx-app-icon-rim-base: var(--zx-color-glass-highlight);
   --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);
@@ -185,13 +288,11 @@
   --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,
@@ -221,15 +322,6 @@
       180deg,
       color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 0%,
       transparent 28%);
-  --zx-glass-blur: 8px;
-  --zx-glass-saturation: 130%;
-  --zx-glass-color-strength: 82%;
-  --zx-glass-filter-icon: blur(4px) saturate(118%);
-  --zx-glass-filter-control: blur(6px) saturate(116%);
-  --zx-glass-filter-raised: blur(8px) saturate(120%);
-  --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(16px) saturate(140%);
-  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-app-icon-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 14%, transparent),
     inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 28%, transparent),
@@ -238,8 +330,6 @@
     inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 20%, transparent),
     inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 32%, transparent),
     0 4px 10px color-mix(in srgb, var(--zx-color-app-icon-shade) 30%, transparent);
-  --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
-  --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
   --zx-glass-raised-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-overlay-shadow);
   --zx-glass-overlay-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 42%, transparent),
@@ -249,14 +339,11 @@
     inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 34%, transparent),
     inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 14%, transparent),
     var(--zx-overlay-shadow);
-  --zx-header-bg: var(--zx-gray-900);
-  --zx-header-text: var(--zx-gray-50);
 }
 @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
   :root,
   .zx-scope,
   [data-zx-theme],
-  [data-zx-density],
   [data-zx-preset] {
     --zx-color-glass-chrome: var(--zx-color-bg-surface) !important;
     --zx-color-glass-surface: var(--zx-color-bg-raised) !important;
@@ -293,7 +380,6 @@
   :root,
   .zx-scope,
   [data-zx-theme],
-  [data-zx-density],
   [data-zx-preset] {
     --zx-color-glass-chrome: Canvas !important;
     --zx-color-glass-surface: Canvas !important;
@@ -324,7 +410,6 @@
   :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;
@@ -341,94 +426,143 @@
 /* styles/tokens/dark.css */
 [data-zx-theme=dark] {
   color-scheme: dark;
-  --zx-color-bg-page: var(--zx-gray-950);
-  --zx-color-bg-surface: var(--zx-gray-900);
-  --zx-color-bg-raised: var(--zx-gray-800);
+  --zx-color-bg-page: color-mix(in srgb, var(--zx-gray-900) 80%, var(--zx-gray-800));
+  --zx-color-bg-chrome: color-mix(in srgb, var(--zx-color-bg-page) 75%, var(--zx-color-bg-surface));
+  --zx-color-bg-surface: color-mix(in srgb, var(--zx-gray-900) 40%, var(--zx-gray-800));
+  --zx-color-bg-raised: color-mix(in srgb, var(--zx-gray-800) 90%, var(--zx-gray-700));
   --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
-  --zx-color-bg-muted: var(--zx-gray-800);
-  --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-muted: var(--zx-color-bg-raised);
+  --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 5%, transparent);
+  --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 9%, transparent);
+  --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 13%, var(--zx-color-bg-surface));
   --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-base: color-mix(in srgb, var(--zx-gray-800) 60%, var(--zx-gray-700));
   --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);
-  --zx-color-text: var(--zx-gray-50);
+  --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 9%, transparent);
+  --zx-color-border-subtle: color-mix(in srgb, var(--zx-gray-0) 6%, transparent);
+  --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+  --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 14%, transparent);
+  --zx-color-text: var(--zx-gray-200);
   --zx-color-text-muted: var(--zx-gray-400);
+  --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-400));
   --zx-color-text-placeholder: var(--zx-gray-500);
   --zx-color-text-invert: var(--zx-gray-950);
   --zx-color-accent: var(--zx-accent-400);
   --zx-color-accent-hover: var(--zx-accent-300);
   --zx-color-accent-active: var(--zx-accent-500);
-  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
+  --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-color-bg-surface));
   --zx-color-on-accent: var(--zx-gray-950);
+  --zx-color-accent-solid: var(--zx-accent-600);
+  --zx-color-accent-solid-hover: var(--zx-accent-700);
+  --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+  --zx-color-on-accent-solid: var(--zx-gray-0);
   --zx-color-danger: var(--zx-red-400);
-  --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
+  --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 13%, var(--zx-color-bg-surface));
   --zx-color-warning: var(--zx-amber-400);
-  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+  --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-color-bg-surface));
   --zx-color-success: var(--zx-green-400);
-  --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+  --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-color-bg-surface));
   --zx-color-info: var(--zx-blue-400);
-  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+  --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-color-bg-surface));
+  --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-blue-fg: var(--zx-tone-blue-300);
+  --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-teal-fg: var(--zx-tone-teal-300);
+  --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-green-fg: var(--zx-tone-green-300);
+  --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-amber-fg: var(--zx-tone-amber-300);
+  --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-orange-fg: var(--zx-tone-orange-300);
+  --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-red-fg: var(--zx-tone-red-300);
+  --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-pink-fg: var(--zx-tone-pink-300);
+  --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-violet-fg: var(--zx-tone-violet-300);
+  --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 20%, var(--zx-color-bg-surface));
+  --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
   --zx-color-ring: var(--zx-color-accent);
   --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
   --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+  --zx-drag-shadow:
+    0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent),
+    0 2px 6px -1px rgb(0 0 0 / 40%),
+    0 14px 32px -6px rgb(0 0 0 / 60%);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
 @media (prefers-color-scheme: dark) {
   [data-zx-theme=auto] {
     color-scheme: dark;
-    --zx-color-bg-page: var(--zx-gray-950);
-    --zx-color-bg-surface: var(--zx-gray-900);
-    --zx-color-bg-raised: var(--zx-gray-800);
+    --zx-color-bg-page: color-mix(in srgb, var(--zx-gray-900) 80%, var(--zx-gray-800));
+    --zx-color-bg-chrome: color-mix(in srgb, var(--zx-color-bg-page) 75%, var(--zx-color-bg-surface));
+    --zx-color-bg-surface: color-mix(in srgb, var(--zx-gray-900) 40%, var(--zx-gray-800));
+    --zx-color-bg-raised: color-mix(in srgb, var(--zx-gray-800) 90%, var(--zx-gray-700));
     --zx-color-bg-control: color-mix(in srgb, var(--zx-gray-0) 5%, transparent);
-    --zx-color-bg-muted: var(--zx-gray-800);
-    --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-muted: var(--zx-color-bg-raised);
+    --zx-color-bg-hover: color-mix(in srgb, var(--zx-color-text) 5%, transparent);
+    --zx-color-bg-current: color-mix(in srgb, var(--zx-color-text) 9%, transparent);
+    --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 13%, var(--zx-color-bg-surface));
     --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-base: color-mix(in srgb, var(--zx-gray-800) 60%, var(--zx-gray-700));
     --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);
-    --zx-color-text: var(--zx-gray-50);
+    --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 9%, transparent);
+    --zx-color-border-subtle: color-mix(in srgb, var(--zx-gray-0) 6%, transparent);
+    --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 24%, transparent);
+    --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 14%, transparent);
+    --zx-color-text: var(--zx-gray-200);
     --zx-color-text-muted: var(--zx-gray-400);
+    --zx-color-text-subtle: color-mix(in srgb, var(--zx-gray-500) 50%, var(--zx-gray-400));
     --zx-color-text-placeholder: var(--zx-gray-500);
     --zx-color-text-invert: var(--zx-gray-950);
     --zx-color-accent: var(--zx-accent-400);
     --zx-color-accent-hover: var(--zx-accent-300);
     --zx-color-accent-active: var(--zx-accent-500);
-    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-gray-900));
+    --zx-color-accent-subtle: color-mix(in srgb, var(--zx-accent-400) 16%, var(--zx-color-bg-surface));
     --zx-color-on-accent: var(--zx-gray-950);
+    --zx-color-accent-solid: var(--zx-accent-600);
+    --zx-color-accent-solid-hover: var(--zx-accent-700);
+    --zx-color-accent-solid-active: color-mix(in srgb, var(--zx-accent-700) 82%, var(--zx-gray-950));
+    --zx-color-on-accent-solid: var(--zx-gray-0);
     --zx-color-danger: var(--zx-red-400);
-    --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 16%, var(--zx-gray-900));
+    --zx-color-danger-bg: color-mix(in srgb, var(--zx-red-400) 13%, var(--zx-color-bg-surface));
     --zx-color-warning: var(--zx-amber-400);
-    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-gray-900));
+    --zx-color-warning-bg: color-mix(in srgb, var(--zx-amber-400) 16%, var(--zx-color-bg-surface));
     --zx-color-success: var(--zx-green-400);
-    --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-gray-900));
+    --zx-color-success-bg: color-mix(in srgb, var(--zx-green-400) 16%, var(--zx-color-bg-surface));
     --zx-color-info: var(--zx-blue-400);
-    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-gray-900));
+    --zx-color-info-bg: color-mix(in srgb, var(--zx-blue-400) 16%, var(--zx-color-bg-surface));
+    --zx-color-tone-blue-bg: color-mix(in srgb, var(--zx-tone-blue-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-blue-fg: var(--zx-tone-blue-300);
+    --zx-color-tone-teal-bg: color-mix(in srgb, var(--zx-tone-teal-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-teal-fg: var(--zx-tone-teal-300);
+    --zx-color-tone-green-bg: color-mix(in srgb, var(--zx-tone-green-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-green-fg: var(--zx-tone-green-300);
+    --zx-color-tone-amber-bg: color-mix(in srgb, var(--zx-tone-amber-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-amber-fg: var(--zx-tone-amber-300);
+    --zx-color-tone-orange-bg: color-mix(in srgb, var(--zx-tone-orange-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-orange-fg: var(--zx-tone-orange-300);
+    --zx-color-tone-red-bg: color-mix(in srgb, var(--zx-tone-red-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-red-fg: var(--zx-tone-red-300);
+    --zx-color-tone-pink-bg: color-mix(in srgb, var(--zx-tone-pink-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-pink-fg: var(--zx-tone-pink-300);
+    --zx-color-tone-violet-bg: color-mix(in srgb, var(--zx-tone-violet-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-violet-fg: var(--zx-tone-violet-300);
+    --zx-color-tone-slate-bg: color-mix(in srgb, var(--zx-tone-slate-500) 20%, var(--zx-color-bg-surface));
+    --zx-color-tone-slate-fg: var(--zx-tone-slate-300);
     --zx-color-ring: var(--zx-color-accent);
     --zx-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zx-color-ring) 45%, transparent);
     --zx-overlay-shadow: 0 12px 36px rgb(0 0 0 / 45%);
+    --zx-drag-shadow:
+      0 0 0 1px color-mix(in srgb, var(--zx-gray-0) 7%, transparent),
+      0 2px 6px -1px rgb(0 0 0 / 40%),
+      0 14px 32px -6px rgb(0 0 0 / 60%);
     --zx-header-bg: var(--zx-gray-900);
     --zx-header-text: var(--zx-gray-50);
   }
 }
 
-/* styles/tokens/density.css */
-[data-zx-density=compact] {
-  --zx-control-height: 28px;
-  --zx-control-pad-x: var(--zx-space-2);
-  --zx-text-md: 13px;
-  --zx-space-1: 3px;
-  --zx-space-2: 6px;
-  --zx-space-3: 10px;
-  --zx-space-4: 14px;
-}
-
 /* styles/tokens/modules.css */
 :root {
   --zx-module-fg-light: #ffffff;
@@ -547,6 +681,8 @@
   color: var(--zx-color-text);
   font-family: var(--zx-font-sans);
   font-size: var(--zx-text-md);
+  font-feature-settings: "cv11";
+  letter-spacing: var(--zx-tracking-tight);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   scrollbar-gutter: stable;
@@ -588,6 +724,17 @@
 :where(.zx-scope button:not(.zx-icon-btn)):hover {
   background: var(--zx-color-bg-hover);
 }
+:where(.zx-scope[data-zx-fields=quiet], .zx-scope [data-zx-fields=quiet]) :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]), select, textarea) {
+  border-color: transparent;
+  background: transparent;
+}
+:where(.zx-scope[data-zx-fields=quiet], .zx-scope [data-zx-fields=quiet]) :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]), select, textarea):where(:hover:not(:focus, :disabled, [readonly])) {
+  background: var(--zx-color-bg-hover);
+}
+:where(.zx-scope[data-zx-fields=quiet], .zx-scope [data-zx-fields=quiet]) :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=button], [type=submit], [type=reset], [type=image]), select, textarea):where(:focus:not([readonly])) {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
 .zx-scope .zx-icon-btn {
   display: inline-grid;
   place-items: center;
@@ -633,6 +780,16 @@
     transition-duration: 0.01ms !important;
   }
 }
+[data-zx-motion=reduced],
+[data-zx-motion=reduced] *,
+[data-zx-motion=reduced] *::before,
+[data-zx-motion=reduced] *::after,
+[data-zx-motion=reduced] *::backdrop {
+  scroll-behavior: auto !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
 
 /* styles/icons.css */
 .zx-icon {
@@ -647,6 +804,7 @@ i.zx-icon {
 }
 svg.zx-icon {
   vertical-align: middle;
+  overflow: visible;
 }
 .zx-module-icon {
   flex: none;
@@ -693,17 +851,17 @@ svg.zx-icon {
   cursor: not-allowed;
 }
 .zx-btn[data-kind=primary] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  border-color: var(--zx-color-accent-solid);
+  background: var(--zx-color-accent-solid);
+  color: var(--zx-color-on-accent-solid);
 }
 .zx-btn[data-kind=primary]:hover:not(:disabled) {
-  border-color: var(--zx-color-accent-hover);
-  background: var(--zx-color-accent-hover);
+  border-color: var(--zx-color-accent-solid-hover);
+  background: var(--zx-color-accent-solid-hover);
 }
 .zx-btn[data-kind=primary]:active:not(:disabled) {
-  border-color: var(--zx-color-accent-active);
-  background: var(--zx-color-accent-active);
+  border-color: var(--zx-color-accent-solid-active);
+  background: var(--zx-color-accent-solid-active);
 }
 .zx-btn[data-kind=danger] {
   border-color: var(--zx-color-danger);
@@ -720,10 +878,33 @@ svg.zx-icon {
   backdrop-filter: none;
   box-shadow: none;
 }
+.zx-btn[data-kind=ghost]:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-btn[data-kind=ghost] > .zx-icon {
+  color: var(--zx-color-text-subtle);
+}
 .zx-btn[data-kind=ghost]:hover:not(:disabled) {
   border-color: transparent;
   background: var(--zx-color-bg-hover);
 }
+.zx-btn[data-kind=ghost]:hover:not(:disabled) > .zx-icon {
+  color: var(--zx-color-text);
+}
+.zx-btn[aria-pressed=true] {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+}
+.zx-btn[data-kind=ghost][aria-pressed=true] {
+  border-color: transparent;
+}
+.zx-btn[aria-pressed=true] > .zx-icon {
+  color: var(--zx-color-text);
+}
+.zx-btn[aria-pressed=true]:hover:not(:disabled) {
+  background: var(--zx-color-bg-current);
+}
 .zx-btn[data-size=sm] {
   min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
   padding-inline: var(--zx-space-2);
@@ -735,13 +916,26 @@ svg.zx-icon {
 .zx-btn-group {
   display: inline-flex;
 }
+.zx-btn[aria-busy=true] {
+  cursor: progress;
+}
+.zx-btn[aria-busy=true] > .zx-icon {
+  display: none;
+}
+.zx-btn__spinner {
+  flex: none;
+}
 .zx-btn__shortcut {
   font: inherit;
   font-size: var(--zx-text-xs);
-  opacity: .7;
+  font-weight: 400;
+  color: var(--zx-color-text-muted);
   margin-inline-start: var(--zx-space-1);
   white-space: nowrap;
 }
+.zx-btn:is([data-kind=primary], [data-kind=danger]) .zx-btn__shortcut {
+  color: inherit;
+}
 .zx-btn-group > .zx-btn:not(:first-child) {
   margin-inline-start: -1px;
   border-start-start-radius: 0;
@@ -771,7 +965,8 @@ svg.zx-icon {
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
-  .zx-btn[data-kind=primary] {
+  .zx-btn[data-kind=primary],
+  .zx-btn[aria-pressed=true] {
     border-color: Highlight;
     background: Highlight;
     color: HighlightText;
@@ -786,12 +981,12 @@ svg.zx-icon {
   max-inline-size: 100%;
   border: 1px solid transparent;
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-muted);
+  background: color-mix(in srgb, var(--zx-color-text) 7%, transparent);
   color: var(--zx-color-text-muted);
   padding-block: 2px;
   padding-inline: var(--zx-space-2);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   font-variant-numeric: tabular-nums;
   line-height: 1.35;
   white-space: nowrap;
@@ -883,6 +1078,56 @@ svg.zx-icon {
 .zx-badge[data-variant=outline][data-kind=info] {
   color: var(--zx-color-info);
 }
+.zx-badge[data-tone] {
+  border-color: transparent;
+  background: var(--zx-badge-tone-bg);
+  color: var(--zx-badge-tone-fg);
+}
+.zx-badge[data-tone=blue] {
+  --zx-badge-tone-bg: var(--zx-color-tone-blue-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-blue-fg);
+}
+.zx-badge[data-tone=teal] {
+  --zx-badge-tone-bg: var(--zx-color-tone-teal-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-teal-fg);
+}
+.zx-badge[data-tone=green] {
+  --zx-badge-tone-bg: var(--zx-color-tone-green-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-green-fg);
+}
+.zx-badge[data-tone=amber] {
+  --zx-badge-tone-bg: var(--zx-color-tone-amber-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-amber-fg);
+}
+.zx-badge[data-tone=orange] {
+  --zx-badge-tone-bg: var(--zx-color-tone-orange-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-orange-fg);
+}
+.zx-badge[data-tone=red] {
+  --zx-badge-tone-bg: var(--zx-color-tone-red-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-red-fg);
+}
+.zx-badge[data-tone=pink] {
+  --zx-badge-tone-bg: var(--zx-color-tone-pink-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-pink-fg);
+}
+.zx-badge[data-tone=violet] {
+  --zx-badge-tone-bg: var(--zx-color-tone-violet-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-violet-fg);
+}
+.zx-badge[data-tone=slate] {
+  --zx-badge-tone-bg: var(--zx-color-tone-slate-bg);
+  --zx-badge-tone-fg: var(--zx-color-tone-slate-fg);
+}
+.zx-badge[data-variant=solid][data-tone] {
+  background: var(--zx-badge-tone-fg);
+  color: var(--zx-color-bg-surface);
+}
+.zx-badge[data-variant=outline][data-tone] {
+  border-color: currentColor;
+  background: transparent;
+  color: var(--zx-badge-tone-fg);
+}
 .zx-badge[data-size=sm] {
   gap: calc(var(--zx-space-1) / 2);
   padding-block: 1px;
@@ -893,6 +1138,15 @@ svg.zx-icon {
   inline-size: 5px;
   block-size: 5px;
 }
+.zx-badge[data-size=sm]:has(> .zx-badge__dot) {
+  gap: var(--zx-space-1);
+  padding-inline: var(--zx-space-1) calc(var(--zx-space-1) * 1.5);
+  font-size: var(--zx-text-xs);
+}
+.zx-badge[data-size=sm]:has(> .zx-badge__dot) .zx-badge__dot {
+  inline-size: 6px;
+  block-size: 6px;
+}
 .zx-badge-group {
   display: inline-flex;
   flex-wrap: wrap;
@@ -914,14 +1168,18 @@ svg.zx-icon {
   padding-inline: var(--zx-control-pad-x);
   font: inherit;
   font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
   cursor: pointer;
 }
 .zx-check-button:hover:not(:disabled) {
   background: var(--zx-color-bg-hover);
 }
 .zx-check-button[aria-pressed=true] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-bg-selected);
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+}
+.zx-check-button__on {
   color: var(--zx-color-accent);
 }
 .zx-check-button:focus-visible {
@@ -970,13 +1228,13 @@ svg.zx-icon {
 }
 .zx-empty-state__icon {
   display: flex;
-  color: var(--zx-color-text-placeholder);
+  color: var(--zx-color-text-subtle);
 }
 .zx-empty-state__title {
   margin: 0;
   color: var(--zx-color-text);
   font-size: var(--zx-text-lg);
-  font-weight: 600;
+  font-weight: var(--zx-weight-semibold);
   line-height: 1.4;
 }
 .zx-empty-state__description {
@@ -1360,6 +1618,7 @@ svg.zx-icon {
 
 /* src/components/copy/copy-button.css */
 .zx-copy-button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--zx-space-2);
@@ -1373,6 +1632,8 @@ svg.zx-icon {
 }
 .zx-copy-button__status {
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   block-size: 1px;
@@ -1382,18 +1643,21 @@ svg.zx-icon {
 
 /* src/components/copy/copy-input.css */
 .zx-copy-input {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--zx-space-1);
   inline-size: 100%;
 }
 .zx-copy-input__label {
-  color: var(--zx-color-text);
-  font-size: var(--zx-control-font-size);
-  font-weight: 500;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 .zx-copy-input[data-hide-label] .zx-copy-input__label {
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   block-size: 1px;
@@ -1451,16 +1715,15 @@ svg.zx-icon {
   min-block-size: var(--zx-control-height);
   padding-inline: var(--zx-space-3);
   border-block-end: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
 .zx-code-editor__language {
   overflow: hidden;
-  font-weight: 600;
-  letter-spacing: 0.04em;
+  font-family: var(--zx-font-mono);
+  font-weight: var(--zx-weight-medium);
   text-overflow: ellipsis;
-  text-transform: uppercase;
   text-wrap: nowrap;
 }
 .zx-code-editor__position {
@@ -1488,7 +1751,7 @@ svg.zx-icon {
   box-shadow: none;
 }
 .zx-code-editor[data-readonly=true] {
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
 }
 .zx-code-editor[data-disabled=true] {
   opacity: 0.6;
@@ -1553,8 +1816,9 @@ svg.zx-icon {
 /* src/components/toggle/toggle.css */
 .zx-toggle {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--zx-space-2);
+  max-inline-size: 100%;
   min-block-size: var(--zx-control-height);
   border: 0;
   background: none;
@@ -1562,6 +1826,7 @@ svg.zx-icon {
   padding: 0;
   font: inherit;
   font-size: var(--zx-control-font-size);
+  text-align: start;
   cursor: pointer;
 }
 .zx-toggle:hover:not(:disabled) {
@@ -1580,11 +1845,16 @@ svg.zx-icon {
   flex: none;
   inline-size: 34px;
   block-size: 20px;
+  margin-block-start: max(0px, (var(--zx-control-height) - 20px) / 2);
   border: 1px solid var(--zx-color-border-strong);
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-bg-control);
   padding: 2px;
 }
+.zx-toggle__label {
+  min-inline-size: 0;
+  padding-block: max(0px, (var(--zx-control-height) - 1lh) / 2);
+}
 .zx-toggle__thumb {
   display: block;
   inline-size: 14px;
@@ -1623,7 +1893,7 @@ svg.zx-icon {
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
   padding: var(--zx-space-2) var(--zx-space-4);
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   cursor: pointer;
   user-select: none;
 }
@@ -1749,9 +2019,9 @@ svg.zx-icon {
   min-inline-size: 0;
   margin: 0;
   font-size: var(--zx-text-lg);
-  font-weight: 700;
+  font-weight: 650;
   line-height: 1.3;
-  letter-spacing: -0.012em;
+  letter-spacing: var(--zx-tracking-title);
 }
 .zx-card__primary,
 .zx-card__title {
@@ -1805,9 +2075,9 @@ 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-color-2: var(--zx-color-chart-1);
+  --zx-aurora-color-3: var(--zx-color-chart-3);
+  --zx-aurora-color-4: var(--zx-color-chart-4);
   --zx-aurora-core: 7%;
   --zx-aurora-wash: 4%;
   --zx-aurora-faint: 2%;
@@ -2051,7 +2321,7 @@ svg.zx-icon {
   padding: var(--zx-space-3) var(--zx-space-4);
   color: var(--zx-color-text);
   font: inherit;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-align: start;
 }
 button.zx-panel__toggle {
@@ -2152,6 +2422,8 @@ button.zx-panel__toggle:focus-visible {
   margin: 0;
   flex: 1;
   font-size: var(--zx-text-xl);
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
 }
 .zx-master-panel__buttons {
   display: flex;
@@ -2212,7 +2484,7 @@ button.zx-panel__toggle:focus-visible {
   color: var(--zx-color-text-muted);
   font: inherit;
   font-size: var(--zx-control-font-size);
-  font-weight: 500;
+  font-weight: var(--zx-weight-medium);
   white-space: nowrap;
   cursor: pointer;
 }
@@ -2221,6 +2493,7 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-tabbox__tab[aria-selected=true] {
   color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-tabbox__tab[aria-disabled=true] {
   color: var(--zx-color-text-placeholder);
@@ -2237,7 +2510,6 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-tabbox[data-variant=divided] .zx-tabbox__tab {
   block-size: calc(var(--zx-control-height) + 8px);
-  border-block-start: 2px solid transparent;
   border-inline-end: 1px solid var(--zx-color-border);
   padding-inline: var(--zx-space-4);
 }
@@ -2248,9 +2520,7 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-color-bg-hover);
 }
 .zx-tabbox[data-variant=divided] .zx-tabbox__tab[aria-selected=true] {
-  border-block-start-color: var(--zx-color-accent);
   background: var(--zx-color-bg-surface);
-  font-weight: 650;
 }
 .zx-tabbox[data-variant=divided] .zx-tabbox__tab:focus-visible {
   z-index: 1;
@@ -2276,7 +2546,6 @@ button.zx-panel__toggle:focus-visible {
 .zx-tabbox[data-variant=bracket] .zx-tabbox__tab[aria-selected=true] {
   border-color: var(--zx-color-border);
   background: var(--zx-color-bg-surface);
-  font-weight: 650;
 }
 .zx-tabbox[data-variant=bracket] .zx-tabbox__tab[aria-selected=true]::after {
   content: "";
@@ -2303,8 +2572,7 @@ button.zx-panel__toggle:focus-visible {
   border-block-end-color: var(--zx-color-border-strong);
 }
 .zx-tabbox[data-variant=line] .zx-tabbox__tab[aria-selected=true] {
-  border-block-end-color: var(--zx-color-accent);
-  font-weight: 600;
+  border-block-end-color: var(--zx-color-text);
 }
 .zx-tabbox[data-variant=line] .zx-tabbox__tab:focus-visible {
   z-index: 1;
@@ -2317,13 +2585,12 @@ button.zx-panel__toggle:focus-visible {
   align-items: center;
   gap: 2px;
   block-size: var(--zx-control-height);
+  border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-tabbox-radius);
-  background: var(--zx-color-bg-muted);
-  padding: 3px;
+  padding: 2px;
 }
 .zx-tabbox[data-variant=segmented] .zx-tabbox__tab {
   block-size: 100%;
-  border: 1px solid transparent;
   border-radius: max(0px, calc(var(--zx-tabbox-radius) - 2px));
   padding-inline: var(--zx-space-3);
   font-size: var(--zx-text-sm);
@@ -2332,14 +2599,11 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-color-bg-hover);
 }
 .zx-tabbox[data-variant=segmented] .zx-tabbox__tab[aria-selected=true] {
-  border-color: var(--zx-color-border-control);
-  background: var(--zx-color-bg-control);
-  box-shadow: var(--zx-shadow-2);
+  background: var(--zx-color-bg-current);
 }
 .zx-tabbox[data-variant=segmented] .zx-tabbox__tab:focus-visible {
   z-index: 1;
   outline: 0;
-  border-color: var(--zx-color-ring);
   box-shadow: var(--zx-focus-ring);
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -2354,14 +2618,18 @@ button.zx-panel__toggle:focus-visible {
 .zx-tabbox__badge {
   min-inline-size: 1.25rem;
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
   padding-inline: var(--zx-space-1);
-  color: var(--zx-color-on-accent);
+  color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.25rem;
   text-align: center;
 }
+.zx-tabbox__tab[aria-selected=true] .zx-tabbox__badge {
+  color: var(--zx-color-text);
+}
 .zx-tabbox .zx-tabbox__close {
   inline-size: 1.5rem;
   block-size: 1.5rem;
@@ -2414,7 +2682,8 @@ button.zx-panel__toggle:focus-visible {
   padding-inline: var(--zx-space-2);
   color: var(--zx-color-accent);
   font-size: var(--zx-text-xl);
-  font-weight: 750;
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
 }
 .zx-navigation-bar__navigation {
   min-inline-size: 0;
@@ -2433,10 +2702,11 @@ button.zx-panel__toggle:focus-visible {
   gap: var(--zx-space-2);
   border: 0;
   border-radius: var(--zx-control-radius);
-  background: var(--zx-color-bg-raised);
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   color: var(--zx-color-text-muted);
   font: inherit;
+  font-weight: var(--zx-weight-medium);
   text-decoration: none;
   cursor: pointer;
 }
@@ -2446,9 +2716,9 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-navigation-bar__item[aria-current=page],
 .zx-navigation-bar__item[aria-selected=true] {
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 650;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-navigation-bar__item[aria-disabled=true] {
   color: var(--zx-color-text-muted);
@@ -2461,14 +2731,18 @@ button.zx-panel__toggle:focus-visible {
 .zx-navigation-bar__badge {
   min-inline-size: var(--zx-space-4);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
   padding-inline: var(--zx-space-1);
-  color: var(--zx-color-on-accent);
-  font-size: var(--zx-text-sm);
-  font-weight: 700;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   line-height: var(--zx-space-4);
   text-align: center;
 }
+.zx-navigation-bar__item:is([aria-current=page], [aria-selected=true]) .zx-navigation-bar__badge {
+  color: var(--zx-color-text);
+}
 .zx-navigation-bar__more {
   display: none;
 }
@@ -2766,7 +3040,7 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-color-danger);
   color: var(--zx-color-text-invert);
   font-size: 9px;
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
   line-height: 1;
 }
 .zx-app-icon:is(a, button, [role=button]):not(:disabled):not([aria-disabled=true]):hover .zx-app-icon__surface,
@@ -2830,7 +3104,7 @@ button.zx-panel__toggle:focus-visible {
   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-overlay-border);
-  border-radius: var(--zx-radius-xl);
+  border-radius: var(--zx-radius-lg);
   background-color: var(--zx-color-overlay-panel);
   background-image: var(--zx-overlay-panel-image);
   background-clip: padding-box;
@@ -2854,21 +3128,49 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-launcher__surface {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   max-block-size: inherit;
 }
 .zx-launcher__search {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  display: flex;
   align-items: center;
   gap: var(--zx-space-3);
   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] {
-  grid-template-columns: auto minmax(0, 1fr) auto;
+.zx-launcher__search > .zx-icon {
+  flex: none;
+}
+.zx-launcher__scope {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+  max-inline-size: 50%;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-current);
+  padding-inline: var(--zx-space-2) 2px;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.zx-launcher__scope[hidden] {
+  display: none;
+}
+.zx-launcher__scope-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.zx-launcher__scope .zx-launcher__scope-back {
+  inline-size: 24px;
+  block-size: 24px;
 }
 .zx-launcher__input {
+  flex: 1 1 0;
   min-inline-size: 0;
   border: 0;
   outline: 0;
@@ -2883,7 +3185,8 @@ button.zx-panel__toggle:focus-visible {
   display: none;
 }
 .zx-launcher__shortcut,
-.zx-launcher__hints kbd {
+.zx-launcher__hints kbd,
+.zx-launcher__key {
   border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-radius-sm);
   background: var(--zx-color-bg-muted);
@@ -2894,6 +3197,7 @@ button.zx-panel__toggle:focus-visible {
   line-height: 1.5;
 }
 .zx-launcher__shortcut {
+  flex: none;
   padding-inline: var(--zx-space-2);
   white-space: nowrap;
 }
@@ -2909,15 +3213,13 @@ button.zx-panel__toggle:focus-visible {
 .zx-launcher__results {
   min-block-size: 0;
   overflow: auto;
-  padding: var(--zx-space-2);
+  padding: var(--zx-space-1);
 }
 .zx-launcher__group-label {
-  padding: var(--zx-space-3) var(--zx-space-3) var(--zx-space-1);
+  padding: var(--zx-space-2) var(--zx-space-3) var(--zx-space-1);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
-  letter-spacing: .04em;
-  text-transform: uppercase;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-launcher__group[data-layout=grid] {
   display: grid;
@@ -2934,11 +3236,11 @@ button.zx-panel__toggle:focus-visible {
   align-items: center;
   gap: var(--zx-space-3);
   inline-size: 100%;
-  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
+  min-block-size: var(--zx-control-height);
   border: 0;
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-sm);
   background: transparent;
-  padding: var(--zx-space-2) var(--zx-space-3);
+  padding: var(--zx-space-1) var(--zx-space-3);
   color: inherit;
   text-align: start;
   text-decoration: none;
@@ -2948,8 +3250,11 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-color-overlay-hover);
 }
 .zx-launcher__option[aria-current=page] {
-  background: var(--zx-color-overlay-selected);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+}
+.zx-launcher__option[aria-current=page] .zx-launcher__label {
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-launcher__option[data-kind=application] {
   display: grid;
@@ -2957,11 +3262,12 @@ button.zx-panel__toggle:focus-visible {
   justify-items: center;
   align-content: center;
   min-block-size: 92px;
+  border-radius: var(--zx-radius-md);
   padding: var(--zx-space-3) var(--zx-space-2);
   text-align: center;
 }
 .zx-launcher__option[data-kind=application][aria-current=page] {
-  background: var(--zx-color-overlay-selected);
+  background: var(--zx-color-bg-current);
 }
 .zx-launcher__option[data-kind=application] .zx-launcher__icon {
   min-block-size: 36px;
@@ -2970,8 +3276,7 @@ button.zx-panel__toggle:focus-visible {
 .zx-launcher__option[data-kind=application] .zx-launcher__copy {
   inline-size: 100%;
 }
-.zx-launcher__option[data-kind=application] .zx-launcher__description,
-.zx-launcher__option[data-kind=application] .zx-launcher__badge {
+.zx-launcher__option[data-kind=application] :is(.zx-launcher__description, .zx-launcher__badge, .zx-launcher__hint, .zx-launcher__keys, .zx-launcher__chevron) {
   display: none;
 }
 .zx-launcher__option[data-kind=application] .zx-launcher__label {
@@ -2993,7 +3298,7 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-launcher__label {
   overflow: hidden;
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -3009,6 +3314,37 @@ button.zx-panel__toggle:focus-visible {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
+.zx-launcher__option:not([data-kind=application]) .zx-launcher__copy {
+  flex: 1 1 auto;
+}
+.zx-launcher__hint {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  max-inline-size: 40%;
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.zx-launcher__keys {
+  display: inline-flex;
+  flex: none;
+  gap: var(--zx-space-1);
+}
+.zx-launcher__chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--zx-color-text-subtle);
+}
+.zx-launcher__announce {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 .zx-launcher__hints {
   display: flex;
   flex-wrap: wrap;
@@ -3024,7 +3360,11 @@ button.zx-panel__toggle:focus-visible {
   align-items: center;
   gap: var(--zx-space-1);
 }
-.zx-launcher__hints kbd {
+.zx-launcher__hints span[hidden] {
+  display: none;
+}
+.zx-launcher__hints kbd,
+.zx-launcher__key {
   min-inline-size: 1.5rem;
   padding-inline: 4px;
   text-align: center;
@@ -3036,9 +3376,6 @@ button.zx-panel__toggle:focus-visible {
   .zx-launcher__shortcut {
     display: none;
   }
-  .zx-launcher__search {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
   .zx-launcher__hints {
     justify-content: center;
   }
@@ -3046,7 +3383,7 @@ button.zx-panel__toggle:focus-visible {
 
 /* src/components/avatar/avatar.css */
 .zx-avatar {
-  --zx-avatar-size: var(--zx-control-height);
+  --zx-avatar-size: var(--zx-space-7);
   position: relative;
   display: inline-grid;
   flex: none;
@@ -3058,10 +3395,10 @@ button.zx-panel__toggle:focus-visible {
   vertical-align: middle;
 }
 .zx-avatar[data-size=sm] {
-  --zx-avatar-size: calc(var(--zx-control-height) * .75);
+  --zx-avatar-size: var(--zx-space-6);
 }
 .zx-avatar[data-size=lg] {
-  --zx-avatar-size: calc(var(--zx-control-height) * 1.25);
+  --zx-avatar-size: var(--zx-space-8);
 }
 .zx-avatar[data-shape=circle] {
   border-radius: 50%;
@@ -3072,6 +3409,42 @@ button.zx-panel__toggle:focus-visible {
 .zx-avatar[data-shape=square] {
   border-radius: 0;
 }
+.zx-avatar[data-tone=blue] {
+  --zx-avatar-bg: var(--zx-color-tone-blue-bg);
+  --zx-avatar-fg: var(--zx-color-tone-blue-fg);
+}
+.zx-avatar[data-tone=teal] {
+  --zx-avatar-bg: var(--zx-color-tone-teal-bg);
+  --zx-avatar-fg: var(--zx-color-tone-teal-fg);
+}
+.zx-avatar[data-tone=green] {
+  --zx-avatar-bg: var(--zx-color-tone-green-bg);
+  --zx-avatar-fg: var(--zx-color-tone-green-fg);
+}
+.zx-avatar[data-tone=amber] {
+  --zx-avatar-bg: var(--zx-color-tone-amber-bg);
+  --zx-avatar-fg: var(--zx-color-tone-amber-fg);
+}
+.zx-avatar[data-tone=orange] {
+  --zx-avatar-bg: var(--zx-color-tone-orange-bg);
+  --zx-avatar-fg: var(--zx-color-tone-orange-fg);
+}
+.zx-avatar[data-tone=red] {
+  --zx-avatar-bg: var(--zx-color-tone-red-bg);
+  --zx-avatar-fg: var(--zx-color-tone-red-fg);
+}
+.zx-avatar[data-tone=pink] {
+  --zx-avatar-bg: var(--zx-color-tone-pink-bg);
+  --zx-avatar-fg: var(--zx-color-tone-pink-fg);
+}
+.zx-avatar[data-tone=violet] {
+  --zx-avatar-bg: var(--zx-color-tone-violet-bg);
+  --zx-avatar-fg: var(--zx-color-tone-violet-fg);
+}
+.zx-avatar[data-tone=slate] {
+  --zx-avatar-bg: var(--zx-color-tone-slate-bg);
+  --zx-avatar-fg: var(--zx-color-tone-slate-fg);
+}
 .zx-avatar__image,
 .zx-avatar__fallback {
   inline-size: 100%;
@@ -3090,11 +3463,14 @@ button.zx-panel__toggle:focus-visible {
 .zx-avatar__fallback {
   display: grid;
   place-items: center;
-  border: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-muted);
-  font-size: calc(var(--zx-avatar-size) * .34);
-  font-weight: 700;
+  overflow: hidden;
+  background: var(--zx-avatar-bg, var(--zx-color-bg-muted));
+  color: var(--zx-avatar-fg, var(--zx-color-text-muted));
+  font-size: max(10px, calc(var(--zx-avatar-size) * .4));
+  font-weight: var(--zx-weight-semibold);
+  letter-spacing: 0;
   line-height: 1;
+  white-space: nowrap;
 }
 .zx-avatar__status {
   position: absolute;
@@ -3115,6 +3491,11 @@ button.zx-panel__toggle:focus-visible {
 .zx-avatar__status[data-status=busy] {
   background: var(--zx-color-danger);
 }
+@media (forced-colors: active) {
+  .zx-avatar__fallback {
+    border: 1px solid CanvasText;
+  }
+}
 
 /* src/components/entity-ref/entity-ref.css */
 .zx-entity-ref {
@@ -3164,7 +3545,7 @@ button.zx-panel__toggle:focus-visible {
 }
 .zx-entity-ref__title {
   color: var(--zx-color-text);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.25;
 }
 .zx-entity-ref__primary,
@@ -3442,7 +3823,7 @@ button.zx-panel__toggle:focus-visible {
   overflow-wrap: anywhere;
 }
 .zx-activity-item__actor {
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-activity-item__title {
   font-weight: 400;
@@ -3527,8 +3908,7 @@ button.zx-panel__toggle:focus-visible {
   margin: 0;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 700;
-  letter-spacing: 0.02em;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-activity-list__items {
   display: grid;
@@ -3538,7 +3918,7 @@ button.zx-panel__toggle:focus-visible {
   list-style: none;
 }
 .zx-activity-list__items > .zx-activity-item:not(:last-child) {
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-activity-list__empty,
 .zx-activity-list__loading {
@@ -3567,30 +3947,66 @@ button.zx-panel__toggle:focus-visible {
 .zx-activity-list__skeleton > .zx-skeleton-text {
   padding-block-start: var(--zx-space-1);
 }
+.zx-activity-list[data-variant=compact] .zx-activity-item__article {
+  gap: var(--zx-space-2);
+  padding-block: var(--zx-space-2);
+}
+.zx-activity-list[data-variant=compact] .zx-activity-item__main {
+  gap: calc(var(--zx-space-1) / 2);
+}
+.zx-activity-list[data-variant=compact] .zx-activity-item__header {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: var(--zx-space-2);
+}
+.zx-activity-list[data-variant=compact] .zx-activity-item__heading {
+  display: block;
+  flex: 1 1 auto;
+}
+.zx-activity-list[data-variant=compact] .zx-activity-item__state {
+  align-self: baseline;
+  margin-inline-start: 0;
+}
 
 /* src/components/account-menu/account-menu.css */
 .zx-account-menu {
   display: block;
   min-inline-size: 0;
 }
-.zx-account-menu__trigger {
+.zx-account-menu .zx-account-menu__trigger {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  gap: var(--zx-space-3);
+  justify-content: stretch;
+  gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
-  border-color: transparent;
+  border: 0;
+  border-radius: var(--zx-radius-md);
   background: transparent;
-  padding: var(--zx-space-2);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  box-shadow: none;
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: inherit;
+  font-weight: var(--zx-weight-medium);
+  line-height: 1.3;
   text-align: start;
 }
-.zx-account-menu__trigger:hover,
-.zx-account-menu__trigger:focus-visible,
-.zx-account-menu__trigger[aria-expanded=true] {
+.zx-account-menu .zx-account-menu__trigger:is(:hover, [aria-expanded=true]):not(:disabled) {
   background: var(--zx-color-bg-hover);
 }
+.zx-account-menu .zx-account-menu__trigger:active:not(:disabled) {
+  background: var(--zx-color-bg-current);
+}
+.zx-account-menu .zx-account-menu__trigger:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+.zx-account-menu__chevron {
+  color: var(--zx-color-text-subtle);
+}
 .zx-account-menu__identity {
   display: grid;
   min-inline-size: 0;
@@ -3603,11 +4019,12 @@ button.zx-panel__toggle:focus-visible {
   white-space: nowrap;
 }
 .zx-account-menu__name {
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-account-menu__secondary {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
+  font-weight: 400;
 }
 .zx-account-menu__chevron {
   display: inline-flex;
@@ -3619,6 +4036,7 @@ button.zx-panel__toggle:focus-visible {
   display: inline-grid;
   grid-template-columns: auto;
   inline-size: auto;
+  padding: var(--zx-space-1);
 }
 .zx-account-menu[data-compact=true] .zx-account-menu__identity,
 .zx-account-menu[data-compact=true] .zx-account-menu__chevron {
@@ -3630,7 +4048,7 @@ button.zx-panel__toggle:focus-visible {
   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-overlay-divider);
-  padding: var(--zx-space-3);
+  padding: var(--zx-space-2) var(--zx-space-3);
 }
 .zx-account-menu__panel-identity span {
   color: var(--zx-color-text-muted);
@@ -3704,10 +4122,13 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-rail__item:hover,
 .zx-app-rail__item:focus-visible,
 .zx-app-rail__item[aria-expanded=true],
-.zx-app-rail__item[data-active-descendant=true],
-.zx-app-rail__item[aria-current=page] {
+.zx-app-rail__item[data-active-descendant=true] {
   background: var(--zx-color-bg-hover);
-  color: var(--zx-color-accent);
+  color: var(--zx-color-text);
+}
+.zx-app-rail__item[aria-current=page] {
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
 }
 .zx-app-rail__item[aria-disabled=true] {
   color: var(--zx-color-text-muted);
@@ -3746,25 +4167,25 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-rail__popover {
   --zx-app-rail-gutter: var(--zx-space-2);
   --zx-app-rail-icon: var(--zx-space-6);
-  --zx-app-rail-item-gap: var(--zx-space-3);
-  --zx-app-rail-item-height: calc(var(--zx-control-height) + var(--zx-space-2));
-  --zx-app-rail-pad-x: var(--zx-space-3);
-  --zx-app-rail-row-gap: var(--zx-space-1);
-  --zx-app-rail-radius: var(--zx-radius-xl);
-  --zx-app-rail-marker: 3px;
-  --zx-app-rail-hover: color-mix(in srgb, var(--zx-color-text) 7%, transparent);
-  --zx-app-rail-press: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
+  --zx-app-rail-item-gap: var(--zx-space-2);
+  --zx-app-rail-item-height: var(--zx-control-height);
+  --zx-app-rail-pad-x: var(--zx-space-2);
+  --zx-app-rail-row-gap: 2px;
+  --zx-app-rail-radius: var(--zx-radius-md);
+  --zx-app-rail-hover: var(--zx-color-bg-hover);
+  --zx-app-rail-current: var(--zx-color-bg-current);
+  --zx-app-rail-press: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
   min-inline-size: 240px;
 }
 .zx-dropdown.zx-app-rail__popover {
   max-inline-size: min(280px, calc(100vw - (2 * var(--zx-space-3))));
-  padding: var(--zx-space-2) var(--zx-app-rail-gutter);
+  padding: var(--zx-space-1) var(--zx-app-rail-gutter);
 }
 .zx-app-rail__flyout-title {
-  padding: var(--zx-space-1) var(--zx-app-rail-pad-x) var(--zx-space-2);
+  padding: var(--zx-space-1) var(--zx-app-rail-pad-x);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
   line-height: 1.3;
 }
 .zx-app-rail__flyout-list {
@@ -3789,7 +4210,7 @@ button.zx-panel__toggle:focus-visible {
   border: 0;
   border-radius: var(--zx-app-rail-radius);
   background: transparent;
-  padding-block: var(--zx-space-1);
+  padding-block: min(var(--zx-space-1), (var(--zx-app-rail-item-height) - var(--zx-app-rail-icon)) / 2);
   padding-inline: var(--zx-app-rail-pad-x);
   color: var(--zx-color-text);
   font-size: var(--zx-text-md);
@@ -3803,31 +4224,6 @@ button.zx-panel__toggle:focus-visible {
     min-block-size: 40px;
   }
 }
-.zx-app-rail__flyout-item::before {
-  content: "";
-  position: absolute;
-  inset-block: 50%;
-  inset-inline-start: calc(-1 * var(--zx-app-rail-gutter));
-  inline-size: var(--zx-app-rail-marker);
-  border-start-end-radius: var(--zx-radius-full);
-  border-end-end-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
-  opacity: 0;
-}
-.zx-app-rail__popover[data-side=right] .zx-app-rail__flyout-item::before {
-  inset-inline: auto calc(-1 * var(--zx-app-rail-gutter));
-  border-radius: 0;
-  border-start-start-radius: var(--zx-radius-full);
-  border-end-start-radius: var(--zx-radius-full);
-}
-.zx-app-rail__flyout-item[aria-current=page]::before {
-  inset-block: 25%;
-  opacity: 1;
-}
-.zx-app-rail__flyout-item[data-active-descendant=true][aria-expanded=false]::before {
-  inset-block: 38%;
-  opacity: .55;
-}
 .zx-app-rail__flyout-item-icon {
   grid-column: 1;
   display: flex;
@@ -3874,27 +4270,22 @@ button.zx-panel__toggle:focus-visible {
   color: var(--zx-color-text);
 }
 .zx-app-rail__flyout-item[data-active-descendant=true][aria-expanded=false] {
-  color: var(--zx-color-accent);
-  font-weight: 600;
+  font-weight: var(--zx-weight-semibold);
 }
-.zx-app-rail__flyout-item[aria-current=page] {
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
-  font-weight: 600;
+.zx-app-rail__flyout-item[data-active-descendant=true][aria-expanded=false] .zx-app-rail__flyout-item-icon {
+  color: var(--zx-color-text);
 }
-.zx-app-rail__flyout-item[aria-current=page]:hover {
-  background: color-mix(in srgb, var(--zx-color-text) 8%, var(--zx-color-accent));
+.zx-app-rail__flyout-item[aria-current=page] {
+  background: var(--zx-app-rail-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-app-rail__flyout-item[aria-current=page]:active {
-  background: color-mix(in srgb, var(--zx-color-text) 16%, var(--zx-color-accent));
-}
-.zx-app-rail__flyout-item[aria-current=page]:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--zx-color-on-accent), var(--zx-focus-ring);
+  background: var(--zx-app-rail-press);
 }
 .zx-app-rail__flyout-item[aria-current=page] .zx-app-rail__flyout-item-icon,
-.zx-app-rail__flyout-item[aria-current=page] .zx-app-rail__flyout-item-badge,
 .zx-app-rail__flyout-item[aria-current=page] .zx-app-rail__flyout-item-disclosure {
-  color: inherit;
+  color: var(--zx-color-text);
 }
 .zx-app-rail__flyout-item[aria-disabled=true] {
   color: var(--zx-color-text-muted);
@@ -3914,9 +4305,6 @@ button.zx-panel__toggle:focus-visible {
       color var(--zx-dur-fast) var(--zx-ease),
       box-shadow var(--zx-dur-fast) var(--zx-ease);
   }
-  .zx-app-rail__flyout-item::before {
-    transition: opacity var(--zx-dur-base) var(--zx-ease), inset-block var(--zx-dur-base) var(--zx-ease);
-  }
   .zx-app-rail__flyout-item:active {
     transform: scale(.985);
   }
@@ -3926,9 +4314,6 @@ button.zx-panel__toggle:focus-visible {
     background: Highlight;
     color: HighlightText;
   }
-  .zx-app-rail__flyout-item::before {
-    background: Highlight;
-  }
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-app-rail {
@@ -3942,16 +4327,17 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-sidebar {
   --zx-app-sidebar-gutter: var(--zx-space-2);
   --zx-app-sidebar-icon: var(--zx-space-6);
-  --zx-app-sidebar-item-gap: var(--zx-space-3);
-  --zx-app-sidebar-item-height: calc(var(--zx-control-height) + var(--zx-space-2));
-  --zx-app-sidebar-pad-x: var(--zx-space-3);
-  --zx-app-sidebar-row-gap: var(--zx-space-1);
-  --zx-app-sidebar-group-gap: var(--zx-space-4);
-  --zx-app-sidebar-indent: var(--zx-space-5);
-  --zx-app-sidebar-marker: 3px;
-  --zx-app-sidebar-radius: var(--zx-radius-xl);
-  --zx-app-sidebar-hover: color-mix(in srgb, var(--zx-color-text) 7%, transparent);
-  --zx-app-sidebar-press: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
+  --zx-app-sidebar-item-gap: var(--zx-space-2);
+  --zx-app-sidebar-item-height: var(--zx-control-height);
+  --zx-app-sidebar-pad-x: var(--zx-space-2);
+  --zx-app-sidebar-row-gap: 2px;
+  --zx-app-sidebar-group-gap: var(--zx-space-3);
+  --zx-app-sidebar-indent: var(--zx-space-3);
+  --zx-app-sidebar-icon-indent: var(--zx-space-4);
+  --zx-app-sidebar-radius: var(--zx-radius-md);
+  --zx-app-sidebar-hover: var(--zx-color-bg-hover);
+  --zx-app-sidebar-current: var(--zx-color-bg-current);
+  --zx-app-sidebar-press: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
   display: flex;
   min-block-size: 0;
   border: 1px solid var(--zx-color-glass-border);
@@ -3959,10 +4345,6 @@ button.zx-panel__toggle:focus-visible {
   box-shadow: var(--zx-glass-chrome-shadow);
   color: var(--zx-color-text);
 }
-[data-zx-density=compact] .zx-app-sidebar,
-.zx-app-sidebar[data-zx-density=compact] {
-  --zx-app-sidebar-group-gap: var(--zx-space-3);
-}
 .zx-app-sidebar[data-orientation=horizontal] {
   inline-size: 100%;
 }
@@ -3993,6 +4375,9 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-sidebar__header-content {
   min-inline-size: 0;
 }
+.zx-app-sidebar .zx-app-sidebar__collapse[hidden] {
+  display: none;
+}
 .zx-app-sidebar__nav {
   min-block-size: 0;
   overflow: auto;
@@ -4006,10 +4391,25 @@ button.zx-panel__toggle:focus-visible {
   padding: 0;
   list-style: none;
 }
-.zx-app-sidebar__list:not(:has(.zx-app-sidebar__item-icon)) {
+.zx-app-sidebar__list:not(:has(> .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon)),
+.zx-app-sidebar__sublist:not(:has(> .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon)) {
   --zx-app-sidebar-icon: 0px;
   --zx-app-sidebar-item-gap: 0px;
 }
+.zx-app-sidebar__row[data-level="1"] {
+  --zx-app-sidebar-step-1: max(var(--zx-app-sidebar-indent), var(--zx-app-sidebar-icon) + var(--zx-app-sidebar-item-gap));
+  --zx-app-sidebar-guide: calc(var(--zx-app-sidebar-pad-x) + max(var(--zx-app-sidebar-indent), var(--zx-app-sidebar-icon)) / 2);
+}
+.zx-app-sidebar__row[data-level="2"] {
+  --zx-app-sidebar-step-2: calc(var(--zx-app-sidebar-step-1) + max(var(--zx-app-sidebar-indent), var(--zx-app-sidebar-icon) + var(--zx-app-sidebar-item-gap)));
+  --zx-app-sidebar-guide: calc(var(--zx-app-sidebar-pad-x) + var(--zx-app-sidebar-step-1) + max(var(--zx-app-sidebar-indent), var(--zx-app-sidebar-icon)) / 2);
+}
+.zx-app-sidebar__row[data-level="1"]:has(> .zx-app-sidebar__sublist > .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon) {
+  --zx-app-sidebar-step-1: max(var(--zx-app-sidebar-indent), var(--zx-app-sidebar-icon-indent));
+}
+.zx-app-sidebar__row[data-level="2"]:has(> .zx-app-sidebar__sublist > .zx-app-sidebar__row > .zx-app-sidebar__item .zx-app-sidebar__item-icon) {
+  --zx-app-sidebar-step-2: calc(var(--zx-app-sidebar-step-1) + max(var(--zx-app-sidebar-indent), var(--zx-app-sidebar-icon-indent)));
+}
 .zx-app-sidebar__sublist {
   position: relative;
   margin-block-start: var(--zx-app-sidebar-row-gap);
@@ -4020,8 +4420,8 @@ button.zx-panel__toggle:focus-visible {
 .zx-app-sidebar__sublist::before {
   content: "";
   position: absolute;
-  inset-block: var(--zx-space-1);
-  inset-inline-start: calc(var(--zx-app-sidebar-pad-x) + var(--zx-app-sidebar-icon) / 2);
+  inset-block: 2px;
+  inset-inline-start: var(--zx-app-sidebar-guide);
   inline-size: 1px;
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-border);
@@ -4044,7 +4444,7 @@ button.zx-panel__toggle:focus-visible {
   border: 0;
   border-radius: var(--zx-app-sidebar-radius);
   background: transparent;
-  padding-block: var(--zx-space-1);
+  padding-block: min(var(--zx-space-1), (var(--zx-app-sidebar-item-height) - var(--zx-app-sidebar-icon)) / 2);
   padding-inline: var(--zx-app-sidebar-pad-x);
   color: var(--zx-color-text);
   font-size: var(--zx-text-md);
@@ -4059,35 +4459,10 @@ button.zx-panel__toggle:focus-visible {
   }
 }
 .zx-app-sidebar__row[data-level="2"] > .zx-app-sidebar__item {
-  padding-inline-start: calc(var(--zx-app-sidebar-pad-x) + var(--zx-app-sidebar-indent));
+  padding-inline-start: calc(var(--zx-app-sidebar-pad-x) + var(--zx-app-sidebar-step-1));
 }
 .zx-app-sidebar__row[data-level="3"] > .zx-app-sidebar__item {
-  padding-inline-start: calc(var(--zx-app-sidebar-pad-x) + 2 * var(--zx-app-sidebar-indent));
-}
-.zx-app-sidebar__item::before {
-  content: "";
-  position: absolute;
-  inset-block: 50%;
-  inset-inline-start: calc(-1 * var(--zx-app-sidebar-gutter));
-  inline-size: var(--zx-app-sidebar-marker);
-  border-start-end-radius: var(--zx-radius-full);
-  border-end-end-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
-  opacity: 0;
-}
-.zx-app-sidebar[data-side=right] .zx-app-sidebar__item::before {
-  inset-inline: auto calc(-1 * var(--zx-app-sidebar-gutter));
-  border-radius: 0;
-  border-start-start-radius: var(--zx-radius-full);
-  border-end-start-radius: var(--zx-radius-full);
-}
-.zx-app-sidebar__item[aria-current=page]::before {
-  inset-block: 25%;
-  opacity: 1;
-}
-.zx-app-sidebar__item[data-active-descendant=true][aria-expanded=false]::before {
-  inset-block: 38%;
-  opacity: .55;
+  padding-inline-start: calc(var(--zx-app-sidebar-pad-x) + var(--zx-app-sidebar-step-2));
 }
 .zx-app-sidebar__item-icon {
   grid-column: 1;
@@ -4128,27 +4503,22 @@ button.zx-panel__toggle:focus-visible {
   background: var(--zx-app-sidebar-press);
 }
 .zx-app-sidebar__item[data-active-descendant=true][aria-expanded=false] {
-  color: var(--zx-color-accent);
-  font-weight: 600;
+  font-weight: var(--zx-weight-semibold);
 }
-.zx-app-sidebar__item[aria-current=page] {
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
-  font-weight: 600;
+.zx-app-sidebar__item[data-active-descendant=true][aria-expanded=false] .zx-app-sidebar__item-icon {
+  color: var(--zx-color-text);
 }
-.zx-app-sidebar__item[aria-current=page]:hover {
-  background: color-mix(in srgb, var(--zx-color-text) 8%, var(--zx-color-accent));
+.zx-app-sidebar__item[aria-current=page] {
+  background: var(--zx-app-sidebar-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-app-sidebar__item[aria-current=page]:active {
-  background: color-mix(in srgb, var(--zx-color-text) 16%, var(--zx-color-accent));
-}
-.zx-app-sidebar__item[aria-current=page]:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--zx-color-on-accent), var(--zx-focus-ring);
+  background: var(--zx-app-sidebar-press);
 }
 .zx-app-sidebar__item[aria-current=page] .zx-app-sidebar__item-icon,
-.zx-app-sidebar__item[aria-current=page] .zx-app-sidebar__item-badge,
 .zx-app-sidebar__item[aria-current=page] .zx-app-sidebar__item-disclosure {
-  color: inherit;
+  color: var(--zx-color-text);
 }
 .zx-app-sidebar__item[aria-disabled=true] {
   color: var(--zx-color-text-muted);
@@ -4172,66 +4542,23 @@ button.zx-panel__toggle:focus-visible {
   display: grid;
   gap: var(--zx-space-1);
 }
-.zx-app-sidebar__rail .zx-app-rail__item[aria-current=page] {
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
-}
-.zx-app-sidebar__rail .zx-app-rail__item[aria-current=page]:hover {
-  background: color-mix(in srgb, var(--zx-color-text) 8%, var(--zx-color-accent));
+.zx-app-sidebar__rail .zx-app-rail__item {
+  color: var(--zx-color-text-muted);
 }
 .zx-app-sidebar__rail .zx-app-rail__item:not([aria-current=page]):hover,
 .zx-app-sidebar__rail .zx-app-rail__item:not([aria-current=page])[aria-expanded=true] {
   background: var(--zx-app-sidebar-hover);
   color: var(--zx-color-text);
 }
-.zx-app-sidebar__rail .zx-app-rail__item:not([aria-current=page]):active {
+.zx-app-sidebar__rail .zx-app-rail__item:active {
   background: var(--zx-app-sidebar-press);
 }
-.zx-app-sidebar__rail .zx-app-rail__item[aria-current=page]:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--zx-color-on-accent), var(--zx-focus-ring);
-}
-.zx-app-sidebar__rail .zx-app-rail__item::after {
-  content: "";
-  position: absolute;
-  inset-block: 22%;
-  inset-inline-start: calc(-1 * var(--zx-space-1));
-  inline-size: var(--zx-app-sidebar-marker);
-  border-start-end-radius: var(--zx-radius-full);
-  border-end-end-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
-  opacity: 0;
-}
-.zx-app-sidebar[data-side=right] .zx-app-rail__item::after {
-  inset-inline: auto calc(-1 * var(--zx-space-1));
-  border-radius: 0;
-  border-start-start-radius: var(--zx-radius-full);
-  border-end-start-radius: var(--zx-radius-full);
-}
-.zx-app-sidebar[data-orientation=horizontal] .zx-app-rail__item::after {
-  inset-block: auto calc(-1 * var(--zx-space-1));
-  inset-inline: 22%;
-  inline-size: auto;
-  block-size: var(--zx-app-sidebar-marker);
-  border-radius: 0;
-  border-start-start-radius: var(--zx-radius-full);
-  border-start-end-radius: var(--zx-radius-full);
-}
-.zx-app-sidebar[data-side=bottom] .zx-app-rail__item::after {
-  inset-block: calc(-1 * var(--zx-space-1)) auto;
-  border-radius: 0;
-  border-end-start-radius: var(--zx-radius-full);
-  border-end-end-radius: var(--zx-radius-full);
-}
-.zx-app-sidebar__rail .zx-app-rail__item[aria-current=page]::after {
-  opacity: 1;
-}
-.zx-app-sidebar__rail .zx-app-rail__item[data-active-descendant=true]:not([aria-current=page])::after {
-  inset-block: 34%;
-  opacity: .55;
+.zx-app-sidebar__rail .zx-app-rail__item[aria-current=page] {
+  background: var(--zx-app-sidebar-current);
+  color: var(--zx-color-text);
 }
-.zx-app-sidebar[data-orientation=horizontal] .zx-app-rail__item[data-active-descendant=true]:not([aria-current=page])::after {
-  inset-block: auto calc(-1 * var(--zx-space-1));
-  inset-inline: 34%;
+.zx-app-sidebar__rail .zx-app-rail__item[data-active-descendant=true]:not([aria-current=page]) {
+  color: var(--zx-color-text);
 }
 .zx-app-sidebar__rail .zx-app-rail__item-badge {
   inset-block-start: 0;
@@ -4245,7 +4572,7 @@ button.zx-panel__toggle:focus-visible {
   color: var(--zx-color-on-accent);
   font-size: var(--zx-text-xs);
   font-variant-numeric: tabular-nums;
-  font-weight: 600;
+  font-weight: var(--zx-weight-semibold);
   line-height: var(--zx-space-4);
   text-align: center;
 }
@@ -4257,11 +4584,6 @@ button.zx-panel__toggle:focus-visible {
   font-size: 0;
   line-height: 0;
 }
-.zx-app-sidebar__rail .zx-app-rail__item[aria-current=page] .zx-app-rail__item-badge {
-  background: var(--zx-color-on-accent);
-  box-shadow: none;
-  color: var(--zx-color-accent);
-}
 @media (prefers-reduced-motion: no-preference) {
   .zx-app-sidebar__item,
   .zx-app-sidebar__rail .zx-app-rail__item {
@@ -4270,10 +4592,6 @@ button.zx-panel__toggle:focus-visible {
       color var(--zx-dur-fast) var(--zx-ease),
       box-shadow var(--zx-dur-fast) var(--zx-ease);
   }
-  .zx-app-sidebar__item::before,
-  .zx-app-sidebar__rail .zx-app-rail__item::after {
-    transition: opacity var(--zx-dur-base) var(--zx-ease), inset-block var(--zx-dur-base) var(--zx-ease);
-  }
   .zx-app-sidebar__item:active,
   .zx-app-sidebar__rail .zx-app-rail__item:active {
     transform: scale(.985);
@@ -4311,10 +4629,6 @@ button.zx-panel__toggle:focus-visible {
     background: Highlight;
     color: HighlightText;
   }
-  .zx-app-sidebar__item::before,
-  .zx-app-sidebar__rail .zx-app-rail__item::after {
-    background: Highlight;
-  }
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-app-sidebar {
@@ -4349,12 +4663,25 @@ button.zx-panel__toggle:focus-visible {
   grid-auto-rows: max-content;
   align-content: start;
 }
+@media (max-width: 640px) {
+  .zx-message-region {
+    inset-block-start: auto;
+    inset-block-end: var(--zx-space-4);
+    inset-inline: var(--zx-space-4);
+    inline-size: auto;
+  }
+  .zx-message-region:popover-open {
+    align-content: end;
+  }
+}
 .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;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-auto-columns: auto;
+  grid-auto-flow: column;
   align-items: start;
   gap: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
@@ -4384,7 +4711,7 @@ button.zx-panel__toggle:focus-visible {
     background-clip: padding-box;
     -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
     backdrop-filter: var(--zx-glass-filter-overlay);
-    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);
+    box-shadow: var(--zx-glass-overlay-shadow);
   }
 }
 @media (prefers-reduced-transparency: reduce) {
@@ -4405,6 +4732,13 @@ button.zx-panel__toggle:focus-visible {
   min-inline-size: 0;
   overflow-wrap: anywhere;
 }
+.zx-message__toast[data-leading] > .zx-message__icon {
+  margin-block: calc(-0.5 * var(--zx-space-1)) 0;
+}
+.zx-message__action {
+  margin-block: calc(-1 * var(--zx-space-1)) 0;
+  white-space: nowrap;
+}
 .zx-message__close {
   margin-block: calc(-1 * var(--zx-space-1)) 0;
   margin-inline: 0 calc(-1 * var(--zx-space-1));
@@ -4539,6 +4873,8 @@ body:has(.zx-modal:modal) {
 .zx-dialog__title {
   margin: 0;
   font-size: var(--zx-text-xl);
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
   line-height: 1.3;
 }
 .zx-dialog__close {
@@ -4568,6 +4904,24 @@ body:has(.zx-modal:modal) {
 .zx-dialog__prompt-input {
   inline-size: 100%;
 }
+.zx-dialog__confirm {
+  display: grid;
+  gap: var(--zx-space-2);
+}
+.zx-dialog__confirm > .zx-dialog__prompt-message {
+  margin-block-end: var(--zx-space-2);
+}
+.zx-dialog__confirm-label {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+.zx-dialog__confirm-label > b {
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-dialog__confirm-input {
+  inline-size: 100%;
+}
 @media (prefers-reduced-motion: no-preference) {
   .zx-dialog__view[aria-hidden=false] {
     animation: zx-dialog-view-enter var(--zx-dur-fast) var(--zx-ease);
@@ -4626,16 +4980,16 @@ body:has(.zx-modal:modal) {
   inset-block-start: 0;
   inset-block-end: auto;
   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));
+  border-end-start-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
+  border-end-end-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
   --zx-sheet-enter: 0 -100%;
 }
 .zx-sheet[data-side=bottom] {
   inset-block-start: auto;
   inset-block-end: 0;
   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));
+  border-start-start-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
+  border-start-end-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
   --zx-sheet-enter: 0 100%;
 }
 .zx-sheet[data-backdrop=none]::backdrop {
@@ -4660,7 +5014,7 @@ body:has(.zx-modal:modal) {
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet {
     transition:
-      translate var(--zx-dur-base) var(--zx-ease),
+      translate var(--zx-dur-base) var(--zx-ease-drawer),
       opacity var(--zx-dur-base) var(--zx-ease),
       display var(--zx-dur-base) allow-discrete,
       overlay var(--zx-dur-base) allow-discrete;
@@ -4724,7 +5078,7 @@ body:has(.zx-modal:modal) {
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet[data-docked] {
     transition:
-      flex-basis var(--zx-dur-base) var(--zx-ease),
+      flex-basis var(--zx-dur-base) var(--zx-ease-drawer),
       opacity var(--zx-dur-base) var(--zx-ease),
       display var(--zx-dur-base) allow-discrete,
       overlay var(--zx-dur-base) allow-discrete;
@@ -4861,8 +5215,8 @@ body:has(.zx-modal:modal) {
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet[data-stack] {
     transition:
-      transform var(--zx-dur-base) var(--zx-ease),
-      translate var(--zx-dur-base) var(--zx-ease),
+      transform var(--zx-dur-base) var(--zx-ease-drawer),
+      translate var(--zx-dur-base) var(--zx-ease-drawer),
       opacity var(--zx-dur-base) var(--zx-ease),
       display var(--zx-dur-base) allow-discrete,
       overlay var(--zx-dur-base) allow-discrete;
@@ -4875,7 +5229,7 @@ body:has(.zx-modal:modal) {
   max-block-size: calc(100vh - (2 * var(--zx-space-3)));
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-lg);
   background-color: var(--zx-color-overlay-surface);
   background-image: var(--zx-overlay-surface-image);
   background-clip: padding-box;
@@ -4908,6 +5262,7 @@ body:has(.zx-modal:modal) {
 
 /* src/components/tooltip/tooltip.css */
 .zx-tooltip {
+  inline-size: max-content;
   max-inline-size: var(--zx-tooltip-max-inline-size, 260px);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
@@ -5266,12 +5621,14 @@ body:has(.zx-modal:modal) {
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: var(--zx-control-height);
-  border: 1px solid transparent;
+  min-block-size: calc(var(--zx-control-height) - 2px);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
   background: transparent;
-  padding-inline: var(--zx-control-pad-x);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: inherit;
   font: inherit;
+  line-height: 1.35;
   text-align: start;
   text-decoration: none;
 }
@@ -5348,7 +5705,7 @@ body:has(.zx-modal:modal) {
   box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
 }
 .zx-menu-button__heading {
-  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 600;
@@ -5376,12 +5733,14 @@ body:has(.zx-modal:modal) {
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: var(--zx-control-height);
-  border: 1px solid transparent;
+  min-block-size: calc(var(--zx-control-height) - 2px);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
   background: transparent;
-  padding-inline: var(--zx-control-pad-x);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: inherit;
   font: inherit;
+  line-height: 1.35;
   text-align: start;
   text-decoration: none;
 }
@@ -5458,7 +5817,7 @@ body:has(.zx-modal:modal) {
   box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
 }
 .zx-context-menu__heading {
-  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 600;
@@ -5499,7 +5858,7 @@ body:has(.zx-modal:modal) {
 .zx-select__value-adornment:not([hidden]) + .zx-select__input {
   padding-inline-start: var(--zx-space-2) !important;
 }
-.zx-select__control:has(.zx-select__input:focus-visible) {
+.zx-select:not([data-focus-origin=pointer]) .zx-select__control:has(.zx-select__input:focus-visible) {
   box-shadow: var(--zx-focus-ring);
 }
 .zx-select__input {
@@ -5556,9 +5915,13 @@ body:has(.zx-modal:modal) {
   border-block-start-color: var(--zx-color-accent);
   border-radius: var(--zx-radius-full);
 }
+.zx-select[aria-disabled=true] {
+  opacity: 0.65;
+}
+.zx-field[data-disabled=true] .zx-select[aria-disabled=true] {
+  opacity: 1;
+}
 .zx-select[aria-disabled=true] .zx-select__control {
-  background: var(--zx-color-bg-page);
-  color: var(--zx-color-text-muted);
   cursor: default;
 }
 .zx-select__panel {
@@ -5567,7 +5930,7 @@ body:has(.zx-modal:modal) {
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-lg);
   background-color: var(--zx-color-overlay-surface);
   background-image: var(--zx-overlay-surface-image);
   background-clip: padding-box;
@@ -5586,10 +5949,11 @@ body:has(.zx-modal:modal) {
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
   cursor: default;
-  padding: var(--zx-space-1) var(--zx-control-pad-x);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  line-height: 1.35;
 }
 .zx-select__option-content {
   min-inline-size: 0;
@@ -5615,10 +5979,8 @@ body:has(.zx-modal:modal) {
   background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
-  text-transform: uppercase;
+  font-weight: var(--zx-weight-semibold);
+  padding: var(--zx-space-1) var(--zx-space-2);
 }
 @media (prefers-reduced-transparency: reduce) {
   .zx-select__panel,
@@ -5634,12 +5996,12 @@ body:has(.zx-modal:modal) {
 }
 .zx-select__separator {
   block-size: 1px;
-  margin: var(--zx-space-1) var(--zx-control-pad-x);
+  margin: var(--zx-space-1) var(--zx-space-2);
   background: var(--zx-color-overlay-divider);
 }
 .zx-select__empty {
   color: var(--zx-color-text-muted);
-  padding: var(--zx-space-3) var(--zx-control-pad-x);
+  padding: var(--zx-space-3) var(--zx-space-2);
   text-align: center;
 }
 .zx-select__priority {
@@ -5647,35 +6009,60 @@ body:has(.zx-modal:modal) {
   align-items: center;
   gap: var(--zx-space-2);
 }
-.zx-select__priority-icon {
+.zx-priority-icon {
   display: inline-flex;
-  gap: 2px;
   flex: none;
-  color: var(--zx-color-warning);
+  vertical-align: middle;
+  align-items: flex-end;
+  gap: 1px;
+  box-sizing: border-box;
+  inline-size: 15px;
+  block-size: 14px;
+  padding-block: 1px;
+  color: var(--zx-color-text-muted);
 }
-.zx-select__priority-icon > span {
-  inline-size: 7px;
-  block-size: 7px;
-  border: 1px solid currentColor;
-  border-radius: 2px;
+.zx-priority-icon > span {
+  inline-size: 3px;
+  border-radius: 1px;
+  background: var(--zx-color-border-strong);
 }
-.zx-select__priority-icon > span[data-filled=true] {
-  background: currentColor;
+.zx-priority-icon > span:nth-child(1) {
+  block-size: 25%;
 }
-.zx-select__priority-icon[data-level="0"] {
-  color: var(--zx-color-success);
+.zx-priority-icon > span:nth-child(2) {
+  block-size: 50%;
 }
-.zx-select__priority-icon[data-level="1"] {
-  color: color-mix(in srgb, var(--zx-color-success) 35%, var(--zx-color-warning));
+.zx-priority-icon > span:nth-child(3) {
+  block-size: 75%;
 }
-.zx-select__priority-icon[data-level="2"] {
-  color: var(--zx-color-warning);
+.zx-priority-icon > span:nth-child(4) {
+  block-size: 100%;
 }
-.zx-select__priority-icon[data-level="3"] {
-  color: color-mix(in srgb, var(--zx-color-warning) 35%, var(--zx-color-danger));
+.zx-priority-icon > span[data-filled=true] {
+  background: currentColor;
 }
-.zx-select__priority-icon[data-level="4"] {
-  color: var(--zx-color-danger);
+.zx-priority-icon[data-level=none] {
+  align-items: center;
+}
+.zx-priority-icon[data-level=none] > span {
+  block-size: 2px;
+  background: currentColor;
+}
+.zx-priority-icon[data-level="4"] {
+  align-items: center;
+  justify-content: center;
+  inline-size: 14px;
+  margin-inline-end: 1px;
+  padding: 0;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-danger);
+  color: var(--zx-color-on-accent);
+  font-size: 11px;
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1;
+}
+.zx-priority-icon[data-level="4"]::before {
+  content: "!";
 }
 .zx-select__status {
   display: grid;
@@ -5689,7 +6076,11 @@ body:has(.zx-modal:modal) {
   inline-size: 20px;
   block-size: 20px;
   border-radius: var(--zx-radius-sm);
-  background: var(--zx-select-entity-color, var(--zx-color-accent-subtle));
+  background: var(--zx-color-bg-muted);
+  color: var(--zx-color-text-muted);
+}
+.zx-select__entity-glyph[style*=--zx-select-entity-color] {
+  background: var(--zx-select-entity-color);
   color: var(--zx-color-text-invert);
 }
 .zx-select__status-copy,
@@ -5712,10 +6103,12 @@ body:has(.zx-modal:modal) {
   font-family: var(--zx-font-mono);
   font-size: var(--zx-text-xs);
 }
-.zx-select__status-indicator {
+.zx-status-icon {
   position: relative;
   display: inline-grid;
   place-items: center;
+  box-sizing: border-box;
+  vertical-align: middle;
   inline-size: 14px;
   block-size: 14px;
   flex: none;
@@ -5723,54 +6116,54 @@ body:has(.zx-modal:modal) {
   border-radius: var(--zx-radius-full);
   color: var(--zx-color-text-muted);
 }
-.zx-select__status-indicator[data-tone=neutral] {
+.zx-status-icon[data-tone=neutral] {
   color: var(--zx-color-border-strong);
 }
-.zx-select__status-indicator[data-tone=warning] {
+.zx-status-icon[data-tone=warning] {
   color: var(--zx-color-warning);
 }
-.zx-select__status-indicator[data-tone=info] {
+.zx-status-icon[data-tone=info] {
   color: var(--zx-color-info);
 }
-.zx-select__status-indicator[data-tone=accent] {
+.zx-status-icon[data-tone=accent] {
   color: var(--zx-color-accent);
 }
-.zx-select__status-indicator[data-tone=success] {
+.zx-status-icon[data-tone=success] {
   color: var(--zx-color-success);
 }
-.zx-select__status-indicator[data-tone=danger] {
+.zx-status-icon[data-tone=danger] {
   color: var(--zx-color-danger);
 }
-.zx-select__status-indicator[data-indicator=dotted] {
+.zx-status-icon[data-indicator=dotted] {
   border-style: dotted;
 }
-.zx-select__status-indicator[data-indicator=progress]::after {
+.zx-status-icon[data-indicator=progress]::after {
   content: "";
   inline-size: 4px;
   block-size: 4px;
   border-radius: inherit;
   background: currentColor;
 }
-.zx-select__status-indicator[data-indicator=review] {
+.zx-status-icon[data-indicator=review] {
   background:
     linear-gradient(
       90deg,
       currentColor 50%,
       transparent 50%);
 }
-.zx-select__status-indicator[data-indicator=ready] {
+.zx-status-icon[data-indicator=ready] {
   background: conic-gradient(currentColor 0 35%, transparent 35% 100%);
 }
-.zx-select__status-indicator[data-indicator=waiting] {
+.zx-status-icon[data-indicator=waiting] {
   background: conic-gradient(currentColor 0 70%, transparent 70% 100%);
 }
-.zx-select__status-indicator:is([data-indicator=done], [data-indicator=canceled]) {
+.zx-status-icon:is([data-indicator=done], [data-indicator=canceled]) {
   background: currentColor;
 }
-.zx-select__status-indicator:is([data-indicator=done], [data-indicator=canceled]) > .zx-icon {
+.zx-status-icon:is([data-indicator=done], [data-indicator=canceled]) > .zx-icon {
   color: var(--zx-color-bg-raised);
 }
-.zx-select__status-indicator[data-indicator=duplicate]::after {
+.zx-status-icon[data-indicator=duplicate]::after {
   content: "";
   inline-size: 8px;
   block-size: 2px;
@@ -5822,7 +6215,7 @@ body:has(.zx-modal:modal) {
 }
 @media (prefers-reduced-motion: no-preference) {
   .zx-select__loading {
-    animation: zx-select-spin var(--zx-dur-slow) linear infinite;
+    animation: zx-select-spin 720ms linear infinite;
   }
 }
 @keyframes zx-select-spin {
@@ -5830,6 +6223,32 @@ body:has(.zx-modal:modal) {
     transform: rotate(1turn);
   }
 }
+[data-zx-fields=quiet] .zx-select__control,
+[data-zx-fields=quiet] .zx-select[aria-disabled=true] .zx-select__control {
+  border-color: transparent;
+  background: transparent;
+}
+[data-zx-fields=quiet] .zx-select :is(.zx-select__toggle, .zx-select__clear) {
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-select:not([aria-disabled=true]):hover .zx-select__control {
+  background: var(--zx-color-bg-hover);
+}
+[data-zx-fields=quiet] .zx-select:not([aria-disabled=true]):is(:hover, :focus-within, [data-state=open]) :is(.zx-select__toggle, .zx-select__clear) {
+  opacity: 1;
+}
+[data-zx-fields=quiet] .zx-select:not([aria-disabled=true]):is(:focus-within, [data-state=open]) .zx-select__control {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields=quiet] .zx-select__control {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+  [data-zx-fields=quiet] .zx-select :is(.zx-select__toggle, .zx-select__clear) {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 /* src/components/checklist/checklist.css */
 .zx-checklist {
@@ -5840,7 +6259,9 @@ body:has(.zx-modal:modal) {
   font-size: var(--zx-control-font-size);
 }
 .zx-checklist__label {
-  font-weight: 650;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 .zx-checklist__search {
   inline-size: 100%;
@@ -5860,10 +6281,11 @@ body:has(.zx-modal:modal) {
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
   cursor: pointer;
   padding: var(--zx-space-1) var(--zx-space-2);
+  line-height: 1.35;
 }
 .zx-checklist__item:hover {
   background: var(--zx-color-bg-hover);
@@ -5873,6 +6295,7 @@ body:has(.zx-modal:modal) {
 }
 .zx-checklist__item input {
   flex: none;
+  min-block-size: 0;
   accent-color: var(--zx-color-accent);
 }
 .zx-checklist__item:has(input:focus-visible) {
@@ -5916,6 +6339,9 @@ body:has(.zx-modal:modal) {
 .zx-tag-picker[data-readonly] .zx-tag-picker__control {
   cursor: default;
 }
+.zx-tag-picker[data-readonly] :is(.zx-tag-picker__input, .zx-tag-picker__toggle) {
+  display: none;
+}
 .zx-tag-picker__tags {
   display: contents;
 }
@@ -5945,6 +6371,58 @@ body:has(.zx-modal:modal) {
   background: color-mix(in srgb, var(--zx-tag-color, var(--zx-color-accent)) 16%, transparent);
   color: var(--zx-tag-color, var(--zx-color-accent));
 }
+.zx-tag-picker__tag[data-tone] {
+  border-color: transparent;
+  background: var(--zx-tag-tone-bg);
+  color: var(--zx-tag-tone-fg);
+}
+.zx-tag-picker__visual[data-tone] {
+  background: var(--zx-tag-tone-bg);
+  color: var(--zx-tag-tone-fg);
+}
+.zx-tag-picker .zx-tag-picker__tag[data-tone] .zx-tag-picker__remove {
+  color: inherit;
+}
+.zx-tag-picker .zx-tag-picker__tag[data-tone] .zx-tag-picker__remove:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  color: inherit;
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=blue] {
+  --zx-tag-tone-bg: var(--zx-color-tone-blue-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-blue-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=teal] {
+  --zx-tag-tone-bg: var(--zx-color-tone-teal-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-teal-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=green] {
+  --zx-tag-tone-bg: var(--zx-color-tone-green-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-green-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=amber] {
+  --zx-tag-tone-bg: var(--zx-color-tone-amber-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-amber-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=orange] {
+  --zx-tag-tone-bg: var(--zx-color-tone-orange-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-orange-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=red] {
+  --zx-tag-tone-bg: var(--zx-color-tone-red-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-red-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=pink] {
+  --zx-tag-tone-bg: var(--zx-color-tone-pink-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-pink-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=violet] {
+  --zx-tag-tone-bg: var(--zx-color-tone-violet-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-violet-fg);
+}
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone=slate] {
+  --zx-tag-tone-bg: var(--zx-color-tone-slate-bg);
+  --zx-tag-tone-fg: var(--zx-color-tone-slate-fg);
+}
 .zx-tag-picker__tag:not(:has(.zx-tag-picker__remove)) {
   padding-inline-end: var(--zx-space-2);
 }
@@ -5997,7 +6475,7 @@ body:has(.zx-modal:modal) {
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-lg);
   background-color: var(--zx-color-overlay-surface);
   background-image: var(--zx-overlay-surface-image);
   background-clip: padding-box;
@@ -6025,16 +6503,17 @@ body:has(.zx-modal:modal) {
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  padding: var(--zx-space-2) var(--zx-space-2);
-  border-radius: var(--zx-radius-md);
+  min-block-size: calc(var(--zx-control-height) - 2px);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  border-radius: var(--zx-radius-sm);
+  line-height: 1.35;
   cursor: pointer;
 }
 .zx-tag-picker__option[data-active] {
   background: var(--zx-color-overlay-hover);
 }
 .zx-tag-picker__option[aria-selected=true] {
-  color: var(--zx-color-accent);
-  font-weight: 550;
+  color: var(--zx-color-text);
 }
 .zx-tag-picker__option[aria-disabled=true] {
   opacity: 0.45;
@@ -6064,6 +6543,31 @@ body:has(.zx-modal:modal) {
   font-size: var(--zx-text-sm);
   text-align: center;
 }
+[data-zx-fields=quiet] .zx-tag-picker__control {
+  border-color: transparent;
+  background: transparent;
+}
+[data-zx-fields=quiet] .zx-tag-picker__toggle {
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-tag-picker:not([data-disabled], [data-readonly]):hover .zx-tag-picker__control {
+  background: var(--zx-color-bg-hover);
+}
+[data-zx-fields=quiet] .zx-tag-picker:not([data-disabled], [data-readonly]):is(:hover, [data-focus], [data-state=open]) .zx-tag-picker__toggle {
+  opacity: 1;
+}
+[data-zx-fields=quiet] .zx-tag-picker:not([data-disabled], [data-readonly]):is([data-focus], [data-state=open]) .zx-tag-picker__control {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields=quiet] .zx-tag-picker__control {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+  [data-zx-fields=quiet] .zx-tag-picker__toggle {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 /* src/components/number-field/number-field.css */
 .zx-number-field {
@@ -6133,6 +6637,55 @@ body:has(.zx-modal:modal) {
   border-end-end-radius: var(--zx-control-radius);
   border-inline-start: 1px solid var(--zx-color-border-control);
 }
+.zx-field__control > .zx-number-field {
+  display: flex;
+  inline-size: 100%;
+}
+.zx-field__control > .zx-number-field .zx-number-field__input {
+  min-inline-size: 0;
+}
+[data-zx-fields=quiet] .zx-number-field {
+  border-color: transparent;
+  background: transparent;
+}
+[data-zx-fields=quiet] .zx-number-field__input {
+  padding-inline-start: var(--zx-control-pad-x);
+  text-align: start;
+}
+[data-zx-fields=quiet] .zx-number-field__step {
+  border-color: transparent;
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-number-field__step[data-step=down] {
+  order: 1;
+  border-inline-end: 0;
+  border-inline-start: 1px solid transparent;
+  border-radius: 0;
+}
+[data-zx-fields=quiet] .zx-number-field__step[data-step=up] {
+  order: 2;
+}
+[data-zx-fields=quiet] .zx-number-field:not([data-disabled], [data-readonly]):hover {
+  background: var(--zx-color-bg-hover);
+}
+[data-zx-fields=quiet] .zx-number-field:not([data-disabled], [data-readonly]):is(:hover, :focus-within) .zx-number-field__step {
+  opacity: 1;
+}
+[data-zx-fields=quiet] .zx-number-field:not([data-disabled], [data-readonly]):focus-within {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+[data-zx-fields=quiet] .zx-number-field:not([data-disabled], [data-readonly]):focus-within .zx-number-field__step {
+  border-color: var(--zx-color-border-control);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields=quiet] .zx-number-field {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+  [data-zx-fields=quiet] .zx-number-field__step {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 /* src/components/slider/slider.css */
 .zx-slider {
@@ -6256,14 +6809,17 @@ body:has(.zx-modal:modal) {
 }
 .zx-slider__marks {
   position: relative;
+  inline-size: 100%;
   block-size: var(--zx-space-5);
   margin-block-start: var(--zx-space-1);
+  container-type: inline-size;
 }
 .zx-slider__mark {
+  --zx-slider-mark-at: calc(var(--zx-slider-thumb) / 2 + (100cqi - var(--zx-slider-thumb)) * var(--zx-slider-mark, 0));
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--zx-slider-mark, 0%);
-  transform: translateX(-50%);
+  inset-inline-start: var(--zx-slider-mark-at);
+  transform: translateX(clamp(-1 * var(--zx-slider-mark-at), -50%, 100cqi - var(--zx-slider-mark-at) - 100%));
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   white-space: nowrap;
@@ -6308,6 +6864,10 @@ body:has(.zx-modal:modal) {
   color: var(--zx-color-warning);
   clip-path: inset(0 calc(100% - var(--zx-rating-fill)) 0 0);
 }
+.zx-rating__glyph[data-part=on],
+.zx-rating__glyph[data-part=on] .zx-icon {
+  fill: currentColor;
+}
 .zx-rating__symbol[data-preview] .zx-rating__glyph[data-part=on] {
   color: var(--zx-color-warning);
   opacity: 0.75;
@@ -6400,14 +6960,14 @@ body:has(.zx-modal:modal) {
   overflow: hidden;
   border-color: transparent;
   background: transparent;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-overflow: ellipsis;
   text-wrap: nowrap;
 }
 .zx-month-picker__year,
 .zx-date-picker__quick-year {
   text-align: center;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-date-picker__grid {
   inline-size: 100%;
@@ -6420,7 +6980,7 @@ body:has(.zx-modal:modal) {
   padding: 0;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 .zx-date-picker__grid td {
@@ -6447,7 +7007,7 @@ body:has(.zx-modal:modal) {
   border-color: var(--zx-color-accent);
   background: var(--zx-color-accent);
   color: var(--zx-color-on-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-date-picker__day[aria-disabled=true] {
   color: var(--zx-color-text-placeholder);
@@ -6510,12 +7070,12 @@ body:has(.zx-modal:modal) {
 .zx-date-picker__quick-month[aria-selected=true] {
   background: var(--zx-color-overlay-selected);
   color: var(--zx-color-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-month-picker__month[aria-selected=true] {
   background: var(--zx-color-bg-selected);
   color: var(--zx-color-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-month-picker__month[aria-disabled=true] {
   color: var(--zx-color-text-placeholder);
@@ -6560,7 +7120,7 @@ body:has(.zx-modal:modal) {
 }
 .zx-time-picker__separator {
   color: var(--zx-color-text-muted);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-time-picker__clock-toggle {
   margin-inline-start: var(--zx-space-1);
@@ -6704,6 +7264,9 @@ body:has(.zx-modal:modal) {
   display: inline-flex;
   align-items: stretch;
 }
+.zx-datebox__control > :is(input, button) {
+  min-block-size: calc(var(--zx-control-height) - 2px);
+}
 .zx-datebox__control {
   position: relative;
   border: 1px solid var(--zx-color-border-control);
@@ -6722,8 +7285,24 @@ body:has(.zx-modal:modal) {
   border: 0;
   border-radius: var(--zx-control-radius) 0 0 var(--zx-control-radius);
   background: inherit;
+}
+.zx-datebox[data-clearable] .zx-datebox__input {
   padding-inline-end: var(--zx-control-height);
 }
+.zx-field__control > .zx-datebox {
+  display: block;
+}
+.zx-field__control > .zx-datebox :is(.zx-datebox__content, .zx-datebox__control) {
+  display: flex;
+}
+.zx-field__control > .zx-datebox .zx-datebox__control {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+.zx-field__control > .zx-datebox .zx-datebox__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
 .zx-datebox__input:focus-visible,
 .zx-datebox__toggle:focus-visible {
   position: relative;
@@ -6793,6 +7372,38 @@ body:has(.zx-modal:modal) {
     box-shadow: var(--zx-overlay-shadow);
   }
 }
+[data-zx-fields=quiet] .zx-datebox:not([data-state=invalid]) .zx-datebox__control {
+  border-color: transparent;
+  background: transparent;
+}
+[data-zx-fields=quiet] .zx-datebox__toggle {
+  border-inline-start-color: transparent;
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-datebox__clear {
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-datebox:not([aria-disabled=true], [data-state=invalid]):hover .zx-datebox__control {
+  background: var(--zx-color-bg-hover);
+}
+[data-zx-fields=quiet] .zx-datebox:not([aria-disabled=true]):is(:hover, :focus-within) :is(.zx-datebox__toggle, .zx-datebox__clear) {
+  opacity: 1;
+}
+[data-zx-fields=quiet] .zx-datebox:not([aria-disabled=true]):focus-within .zx-datebox__toggle {
+  border-inline-start-color: var(--zx-color-border-control);
+}
+[data-zx-fields=quiet] .zx-datebox:not([aria-disabled=true], [data-state=invalid]):focus-within .zx-datebox__control {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields=quiet] .zx-datebox__control {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+  [data-zx-fields=quiet] :is(.zx-datebox__toggle, .zx-datebox__clear) {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 /* src/components/date-picker/date-range-picker.css */
 .zx-date-range-picker {
@@ -6858,7 +7469,7 @@ body:has(.zx-modal:modal) {
 }
 .zx-date-range-picker__caption {
   overflow: hidden;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-align: center;
   text-overflow: ellipsis;
   text-wrap: nowrap;
@@ -6905,7 +7516,7 @@ body:has(.zx-modal:modal) {
   padding: 0;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 .zx-date-range-picker__grid td {
@@ -6965,7 +7576,7 @@ body:has(.zx-modal:modal) {
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-accent);
   color: var(--zx-color-on-accent);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-date-range-picker__grid td[data-range=middle] > .zx-date-range-picker__day,
 .zx-date-range-picker__grid td[data-range=preview] > .zx-date-range-picker__day {
@@ -7014,6 +7625,9 @@ body:has(.zx-modal:modal) {
   display: inline-flex;
   align-items: stretch;
 }
+.zx-date-range-box__control > :is(input, button) {
+  min-block-size: calc(var(--zx-control-height) - 2px);
+}
 .zx-date-range-box__control {
   position: relative;
   border: 1px solid var(--zx-color-border-control);
@@ -7032,8 +7646,24 @@ body:has(.zx-modal:modal) {
   border: 0;
   border-radius: var(--zx-control-radius) 0 0 var(--zx-control-radius);
   background: inherit;
+}
+.zx-date-range-box[data-clearable] .zx-date-range-box__input {
   padding-inline-end: var(--zx-control-height);
 }
+.zx-field__control > .zx-date-range-box {
+  display: block;
+}
+.zx-field__control > .zx-date-range-box :is(.zx-date-range-box__content, .zx-date-range-box__control) {
+  display: flex;
+}
+.zx-field__control > .zx-date-range-box .zx-date-range-box__control {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+.zx-field__control > .zx-date-range-box .zx-date-range-box__input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
 .zx-date-range-box__input:focus-visible,
 .zx-date-range-box__toggle:focus-visible {
   position: relative;
@@ -7116,6 +7746,38 @@ body:has(.zx-modal:modal) {
     box-shadow: var(--zx-overlay-shadow);
   }
 }
+[data-zx-fields=quiet] .zx-date-range-box:not([data-state=invalid]) .zx-date-range-box__control {
+  border-color: transparent;
+  background: transparent;
+}
+[data-zx-fields=quiet] .zx-date-range-box__toggle {
+  border-inline-start-color: transparent;
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-date-range-box__clear {
+  opacity: 0;
+}
+[data-zx-fields=quiet] .zx-date-range-box:not([aria-disabled=true], [data-state=invalid]):hover .zx-date-range-box__control {
+  background: var(--zx-color-bg-hover);
+}
+[data-zx-fields=quiet] .zx-date-range-box:not([aria-disabled=true]):is(:hover, :focus-within) :is(.zx-date-range-box__toggle, .zx-date-range-box__clear) {
+  opacity: 1;
+}
+[data-zx-fields=quiet] .zx-date-range-box:not([aria-disabled=true]):focus-within .zx-date-range-box__toggle {
+  border-inline-start-color: var(--zx-color-border-control);
+}
+[data-zx-fields=quiet] .zx-date-range-box:not([aria-disabled=true], [data-state=invalid]):focus-within .zx-date-range-box__control {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields=quiet] .zx-date-range-box__control {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+  [data-zx-fields=quiet] :is(.zx-date-range-box__toggle, .zx-date-range-box__clear) {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 /* src/components/timebox/timebox.css */
 .zx-timebox {
@@ -7143,13 +7805,13 @@ body:has(.zx-modal:modal) {
 }
 .zx-timebox__separator {
   color: var(--zx-color-text-muted);
-  font-weight: 700;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-timebox__sign {
   min-inline-size: var(--zx-control-height);
   padding: 0;
   border-color: var(--zx-color-border-control);
-  font-weight: 750;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-timebox__sign[data-state=positive] {
   border-color: var(--zx-color-success);
@@ -7161,11 +7823,23 @@ body:has(.zx-modal:modal) {
   background: var(--zx-color-danger-bg);
   color: var(--zx-color-danger);
 }
+[data-zx-fields=quiet] .zx-timebox__sign,
+[data-zx-fields=quiet] .zx-timebox__sign[data-state] {
+  border-color: transparent;
+  background: transparent;
+}
+[data-zx-fields=quiet] .zx-timebox:not([aria-disabled=true]) .zx-timebox__sign:hover {
+  background: var(--zx-color-bg-hover);
+}
+[data-zx-fields=quiet] .zx-timebox__sign:focus-visible {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
 
 /* src/components/calendar/calendar.css */
 .zx-calendar {
   --zx-calendar-time-axis: 4.75rem;
-  --zx-calendar-slot-height: 24px;
+  --zx-calendar-slot-height: var(--zx-space-6);
   --zx-calendar-event-color: var(--zx-color-accent);
   position: relative;
   container-type: inline-size;
@@ -7206,10 +7880,10 @@ body:has(.zx-modal:modal) {
 .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;
+  overflow-x: auto;
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  padding: 2px;
 }
 .zx-calendar__toolbar-button,
 .zx-calendar__view-button,
@@ -7237,33 +7911,36 @@ body:has(.zx-modal:modal) {
   block-size: 100%;
   min-block-size: 0;
   border-color: transparent;
-  border-radius: 0;
+  border-radius: max(0px, calc(var(--zx-control-radius) - 2px));
   background: transparent;
+  color: var(--zx-color-text-muted);
   padding-inline: var(--zx-space-3);
+  font-weight: var(--zx-weight-medium);
+}
+.zx-calendar__view-button:hover:not(:disabled) {
+  color: var(--zx-color-text);
 }
 .zx-calendar__view-button[aria-pressed=true] {
-  position: relative;
-  z-index: 1;
-  border-color: var(--zx-color-border-control);
-  background: var(--zx-color-bg-control);
-  box-shadow: var(--zx-shadow-2);
+  background: var(--zx-color-bg-current);
   color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-calendar__new {
   gap: var(--zx-space-2);
-  border-color: var(--zx-color-accent);
+  border-color: var(--zx-color-accent-solid);
   border-radius: var(--zx-control-radius);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  background: var(--zx-color-accent-solid);
+  color: var(--zx-color-on-accent-solid);
   padding-inline: var(--zx-space-3);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-calendar__toolbar-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) {
-  background: var(--zx-color-accent-hover);
+  border-color: var(--zx-color-accent-solid-hover);
+  background: var(--zx-color-accent-solid-hover);
 }
 .zx-calendar button:disabled {
   cursor: default;
@@ -7291,7 +7968,8 @@ body:has(.zx-modal:modal) {
   overflow: hidden;
   color: var(--zx-color-text);
   font-size: var(--zx-text-lg);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
+  letter-spacing: var(--zx-tracking-title);
   line-height: 1.25;
   text-align: center;
   text-overflow: ellipsis;
@@ -7313,11 +7991,11 @@ body:has(.zx-modal:modal) {
 }
 .zx-calendar__time-header,
 .zx-calendar__all-day {
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__time-corner,
 .zx-calendar__all-day-label {
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   color: var(--zx-color-text-muted);
 }
 .zx-calendar__day-headings {
@@ -7331,7 +8009,7 @@ body:has(.zx-modal:modal) {
   place-content: center;
   border: 0;
   border-radius: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   font: inherit;
@@ -7345,13 +8023,12 @@ body:has(.zx-modal:modal) {
 }
 .zx-calendar__day-heading[aria-current=date] .zx-calendar__day-number {
   color: var(--zx-color-accent);
-  font-weight: 750;
+  font-weight: 650;
 }
 .zx-calendar__day-weekday {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  text-transform: uppercase;
-  letter-spacing: .04em;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-calendar__day-number {
   font-size: var(--zx-text-sm);
@@ -7375,7 +8052,7 @@ body:has(.zx-modal:modal) {
   overflow: hidden;
 }
 .zx-calendar__all-day-cell {
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__all-day-cell:last-of-type {
   border-inline-end: 0;
@@ -7390,7 +8067,7 @@ body:has(.zx-modal:modal) {
 .zx-calendar__time-axis {
   position: relative;
   z-index: 2;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   background: var(--zx-color-bg-surface);
 }
 .zx-calendar__time-label {
@@ -7422,8 +8099,8 @@ body:has(.zx-modal:modal) {
   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);
+  border-block-start: 1px solid var(--zx-color-border-subtle);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   background: var(--zx-color-bg-surface);
   padding: 0;
   cursor: crosshair;
@@ -7509,7 +8186,7 @@ body:has(.zx-modal:modal) {
 }
 .zx-calendar__event-title {
   overflow: hidden;
-  font-weight: 680;
+  font-weight: var(--zx-weight-semibold);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -7582,7 +8259,8 @@ body:has(.zx-modal:modal) {
   inset-inline-start: var(--zx-space-1);
   color: var(--zx-color-danger);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
+  font-variant-numeric: tabular-nums;
   transform: translateY(-100%);
 }
 .zx-calendar__agenda {
@@ -7591,19 +8269,19 @@ body:has(.zx-modal:modal) {
 .zx-calendar__agenda-day {
   display: grid;
   grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__agenda-heading {
   align-self: stretch;
   appearance: none;
   border: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
   font: inherit;
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
   text-align: start;
   cursor: pointer;
 }
@@ -7620,7 +8298,7 @@ body:has(.zx-modal:modal) {
   padding: var(--zx-space-3);
 }
 .zx-calendar__agenda-events > .zx-calendar__event {
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__agenda-events > .zx-calendar__event:last-child {
   border-block-end: 0;
@@ -7664,7 +8342,7 @@ body:has(.zx-modal:modal) {
   grid-template-columns: auto minmax(0, 1fr);
 }
 .zx-calendar__month-weekdays {
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__month-week-gutter,
 .zx-calendar__month-week-number {
@@ -7680,20 +8358,18 @@ body:has(.zx-modal:modal) {
   padding: var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
-  text-transform: uppercase;
-  letter-spacing: .04em;
 }
 .zx-calendar__month-week {
   min-block-size: 7.5rem;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-calendar__month-week-number {
   grid-row: 1;
   appearance: none;
   border: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
@@ -7724,7 +8400,7 @@ body:has(.zx-modal:modal) {
   justify-content: flex-end;
   min-block-size: var(--zx-control-height);
   border: 0;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
   border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
@@ -7742,7 +8418,7 @@ body:has(.zx-modal:modal) {
 }
 .zx-calendar__month-day[aria-current=date] {
   color: var(--zx-color-accent);
-  font-weight: 750;
+  font-weight: 650;
 }
 .zx-calendar__month-day:hover:not(:disabled) {
   background: var(--zx-color-bg-hover);
@@ -7800,11 +8476,12 @@ body:has(.zx-modal:modal) {
   grid-column: 1 / -1;
   margin: 0 0 var(--zx-space-2);
   font-size: var(--zx-text-md);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-calendar__year-weekday {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 .zx-calendar__year-day,
@@ -7830,7 +8507,7 @@ body:has(.zx-modal:modal) {
 }
 .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;
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-calendar__year-day[aria-current=date] {
   outline: 2px solid var(--zx-color-accent);
@@ -7847,7 +8524,7 @@ body:has(.zx-modal:modal) {
   place-items: center;
   background: color-mix(in srgb, var(--zx-color-bg-surface) 82%, transparent);
   color: var(--zx-color-text);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-calendar__loading[hidden] {
   display: none;
@@ -7910,7 +8587,7 @@ body:has(.zx-modal:modal) {
     inset-block-start: 0;
     z-index: 3;
     border-inline-end: 0;
-    border-block-end: 1px solid var(--zx-color-border);
+    border-block-end: 1px solid var(--zx-color-border-subtle);
   }
   .zx-calendar__agenda-events {
     grid-column: 1;
@@ -7923,9 +8600,6 @@ body:has(.zx-modal:modal) {
     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);
@@ -8114,9 +8788,9 @@ body:has(.zx-modal:modal) {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
-  padding-inline: var(--zx-space-2);
+  padding: var(--zx-space-1) var(--zx-space-2);
 }
 .zx-table__column-option:hover {
   background: var(--zx-color-overlay-hover);
@@ -8176,14 +8850,17 @@ body:has(.zx-modal:modal) {
   }
 }
 .zx-table__reorder-column,
-.zx-table__reorder-header,
-.zx-table__reorder-cell {
+.zx-table__selection-column {
   inline-size: var(--zx-control-height);
-  text-align: center;
+}
+.zx-table :is(.zx-table__reorder-header, .zx-table__reorder-cell, .zx-table__selection-header, .zx-table__selection-cell) {
+  inline-size: var(--zx-control-height);
+  padding-inline: 0;
 }
 .zx-table__row-handle {
-  display: inline-grid;
+  display: grid;
   place-items: center;
+  margin-inline: auto;
   inline-size: 26px;
   block-size: 26px;
   min-block-size: 0;
@@ -8218,7 +8895,7 @@ body:has(.zx-modal:modal) {
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-md);
   background: var(--zx-color-bg-surface);
-  scrollbar-gutter: stable;
+  scrollbar-gutter: auto;
 }
 .zx-table[data-loading=true] .zx-table__body {
   opacity: 0.5;
@@ -8261,6 +8938,7 @@ body:has(.zx-modal:modal) {
   border-spacing: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
+  font-variant-numeric: tabular-nums;
 }
 .zx-table__table[data-layout=auto] {
   min-inline-size: max-content;
@@ -8268,21 +8946,23 @@ body:has(.zx-modal:modal) {
 .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));
+  border-block-end: 1px solid var(--zx-table-border-color, var(--zx-color-border-subtle));
   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));
+  border-block-end-color: var(--zx-table-border-color, var(--zx-color-border));
+  background: var(--zx-table-header-bg, var(--zx-color-bg-surface));
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
+}
+.zx-table th[aria-sort=ascending],
+.zx-table th[aria-sort=descending] {
+  color: var(--zx-color-text);
 }
 .zx-table__scroll[data-sticky-header=true] th {
   position: sticky;
@@ -8315,8 +8995,17 @@ body:has(.zx-modal:modal) {
   background: inherit;
   color: inherit;
   padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
   text-align: inherit;
 }
+.zx-table th:is([data-align=end], [data-align=right]) .zx-table__sort-button {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+.zx-table th[data-align=center] .zx-table__sort-button {
+  justify-content: center;
+}
 .zx-table__sort-button:hover {
   background: var(--zx-table-row-hover-bg, var(--zx-color-bg-hover));
   color: var(--zx-color-text);
@@ -8326,11 +9015,11 @@ body:has(.zx-modal:modal) {
 }
 .zx-table th[aria-sort=ascending] .zx-table__sort-button::after {
   content: "\2191";
-  color: var(--zx-color-accent);
+  color: var(--zx-color-text-muted);
 }
 .zx-table th[aria-sort=descending] .zx-table__sort-button::after {
   content: "\2193";
-  color: var(--zx-color-accent);
+  color: var(--zx-color-text-muted);
 }
 .zx-table__body tr:last-child td {
   border-block-end: 0;
@@ -8341,21 +9030,41 @@ body:has(.zx-modal:modal) {
 .zx-table__body tr[aria-selected=true] {
   background: var(--zx-table-row-selected-bg, var(--zx-color-bg-selected));
 }
+.zx-table__body tr[aria-selected=true]:not(:has(> .zx-table__selection-cell)) {
+  background: var(--zx-table-row-selected-bg, var(--zx-color-bg-current));
+}
 .zx-table__body tr[data-row]:hover {
   background: var(--zx-color-bg-hover);
 }
+.zx-table[data-variant=plain] .zx-table__scroll {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.zx-table[data-variant=plain] .zx-table__table {
+  background: transparent;
+}
+.zx-table[data-variant=plain] th {
+  background: var(--zx-table-header-bg, var(--zx-color-bg-surface));
+  border-block-end-color: var(--zx-table-border-color, var(--zx-color-border-subtle));
+}
+.zx-table[data-variant=plain] .zx-table__scroll[data-sticky-header=false] th {
+  background: transparent;
+}
+.zx-table[data-variant=plain] .zx-table__scroll[data-zebra=true] .zx-table__body tr:nth-child(even):not([aria-selected=true]) {
+  background: transparent;
+}
+.zx-table[data-variant=plain] .zx-table__body tr:last-child td {
+  border-block-end: 0;
+}
 .zx-table__checkbox {
+  display: block;
   inline-size: var(--zx-space-4);
   min-block-size: auto;
   block-size: var(--zx-space-4);
-  margin: 0;
+  margin: 0 auto;
   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);
@@ -8518,11 +9227,8 @@ body:has(.zx-modal:modal) {
 .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] :is(.zx-table__checkbox, .zx-table__row-handle) {
+  margin-inline: 0;
 }
 .zx-table[data-stacked] .zx-table__empty-row {
   display: block;
@@ -8567,9 +9273,9 @@ body:has(.zx-modal:modal) {
 /* src/components/stat-tile/stat-tile.css */
 .zx-stat-tile {
   --zx-stat-tile-value-size: var(--zx-text-2xl);
-  display: grid;
-  gap: var(--zx-space-2);
-  align-content: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--zx-space-1);
   min-inline-size: 0;
   padding: var(--zx-space-4);
   border: 1px solid var(--zx-color-border);
@@ -8614,41 +9320,47 @@ button.zx-stat-tile:focus-visible {
 .zx-stat-tile__label {
   min-inline-size: 0;
   overflow: hidden;
-  font-size: var(--zx-text-xs);
-  font-weight: 600;
-  letter-spacing: 0.04em;
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
   line-height: 1.4;
-  text-transform: uppercase;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--zx-color-text-muted);
 }
 .zx-stat-tile__icon {
-  display: grid;
+  display: inline-grid;
   flex: none;
   place-items: center;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
-  border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-muted);
-  color: var(--zx-color-text-muted);
+  color: var(--zx-color-text-subtle);
 }
 .zx-stat-tile__value {
   min-inline-size: 0;
+  margin-block-start: var(--zx-space-1);
   font-size: var(--zx-stat-tile-value-size);
-  font-weight: 600;
+  font-weight: 650;
   font-variant-numeric: tabular-nums;
+  letter-spacing: var(--zx-tracking-title);
   line-height: 1.15;
   overflow-wrap: break-word;
   color: var(--zx-color-text);
 }
+.zx-stat-tile__caption {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .zx-stat-tile__delta {
   display: flex;
   gap: var(--zx-space-1);
   align-items: baseline;
   min-inline-size: 0;
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   font-variant-numeric: tabular-nums;
   line-height: 1.4;
   color: var(--zx-color-text-muted);
@@ -8663,6 +9375,10 @@ button.zx-stat-tile:focus-visible {
   flex: none;
   align-self: center;
 }
+.zx-stat-tile__delta-value {
+  flex: none;
+  white-space: nowrap;
+}
 .zx-stat-tile__delta-label {
   min-inline-size: 0;
   overflow: hidden;
@@ -8673,35 +9389,18 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-stat-tile__trend {
   display: block;
+  flex: none;
+  box-sizing: content-box;
   inline-size: 100%;
   block-size: 2rem;
-  margin-block-start: var(--zx-space-1);
+  margin-block-start: auto;
+  padding-block-start: var(--zx-space-2);
   color: var(--zx-color-text-placeholder);
 }
 .zx-stat-tile__loading {
   display: grid;
   gap: var(--zx-space-2);
 }
-.zx-stat-tile[data-kind=accent] .zx-stat-tile__icon {
-  background: var(--zx-color-accent-subtle);
-  color: var(--zx-color-accent);
-}
-.zx-stat-tile[data-kind=success] .zx-stat-tile__icon {
-  background: var(--zx-color-success-bg);
-  color: var(--zx-color-success);
-}
-.zx-stat-tile[data-kind=warning] .zx-stat-tile__icon {
-  background: var(--zx-color-warning-bg);
-  color: var(--zx-color-warning);
-}
-.zx-stat-tile[data-kind=danger] .zx-stat-tile__icon {
-  background: var(--zx-color-danger-bg);
-  color: var(--zx-color-danger);
-}
-.zx-stat-tile[data-kind=info] .zx-stat-tile__icon {
-  background: var(--zx-color-info-bg);
-  color: var(--zx-color-info);
-}
 .zx-stat-tile[data-kind=accent] .zx-stat-tile__trend {
   color: var(--zx-color-accent);
 }
@@ -8827,7 +9526,7 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-record-card[data-selected=true] {
   border-color: var(--zx-color-accent);
-  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+  background: var(--zx-color-bg-selected);
 }
 .zx-record-card__preview {
   position: relative;
@@ -8925,7 +9624,7 @@ button.zx-stat-tile:focus-visible {
   margin: 0;
   overflow-wrap: anywhere;
   font-size: var(--zx-text-lg);
-  font-weight: 700;
+  font-weight: 650;
   line-height: 1.35;
 }
 .zx-record-card__primary,
@@ -9005,7 +9704,7 @@ button.zx-stat-tile:focus-visible {
   overflow: hidden;
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9135,7 +9834,7 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-card-view .zx-record-card__heading {
   font-size: var(--zx-text-md);
-  font-weight: 600;
+  font-weight: var(--zx-weight-semibold);
   line-height: 1.3;
 }
 .zx-card-view .zx-record-card__primary,
@@ -9175,15 +9874,14 @@ button.zx-stat-tile:focus-visible {
   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);
+  border-radius: var(--zx-radius-sm);
   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;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.2;
 }
 .zx-card-view .zx-record-card__value {
@@ -9340,8 +10038,8 @@ button.zx-stat-tile:focus-visible {
   touch-action: none;
 }
 .zx-kanban-view__move-handle[aria-pressed=true] {
-  background: var(--zx-color-accent-subtle);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
   cursor: grabbing;
 }
 .zx-kanban-view__collapse:hover,
@@ -9532,7 +10230,7 @@ button.zx-stat-tile:focus-visible {
   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);
+  border-radius: var(--zx-radius-sm);
   background: var(--zx-color-bg-muted);
   padding: calc(var(--zx-space-1) / 2) var(--zx-space-2);
 }
@@ -9590,6 +10288,10 @@ button.zx-stat-tile:focus-visible {
 .zx-kanban-view .zx-record-card[data-grabbed=true] {
   outline: 2px solid var(--zx-color-accent);
   outline-offset: 2px;
+  box-shadow: var(--zx-drag-shadow);
+}
+.zx-kanban-view .zx-record-card[data-grabbed=true]:focus-visible {
+  box-shadow: var(--zx-focus-ring), var(--zx-drag-shadow);
 }
 .zx-kanban-view__empty {
   display: grid;
@@ -9634,9 +10336,6 @@ button.zx-stat-tile:focus-visible {
     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,
@@ -9773,7 +10472,7 @@ button.zx-stat-tile:focus-visible {
   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);
+  box-shadow: var(--zx-drag-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-xs);
@@ -9818,7 +10517,6 @@ button.zx-stat-tile:focus-visible {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-variant-numeric: tabular-nums;
-  letter-spacing: .02em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -9876,15 +10574,51 @@ button.zx-stat-tile:focus-visible {
   overflow: hidden;
   border: 1px solid var(--zx-color-bg-surface);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-muted);
-  color: var(--zx-color-text-muted);
+  background: var(--zx-kanban-avatar-bg, var(--zx-color-bg-muted));
+  color: var(--zx-kanban-avatar-fg, var(--zx-color-text-muted));
+}
+.zx-kanban-view__avatar[data-tone=blue] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-blue-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-blue-fg);
+}
+.zx-kanban-view__avatar[data-tone=teal] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-teal-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-teal-fg);
+}
+.zx-kanban-view__avatar[data-tone=green] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-green-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-green-fg);
+}
+.zx-kanban-view__avatar[data-tone=amber] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-amber-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-amber-fg);
+}
+.zx-kanban-view__avatar[data-tone=orange] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-orange-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-orange-fg);
+}
+.zx-kanban-view__avatar[data-tone=red] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-red-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-red-fg);
+}
+.zx-kanban-view__avatar[data-tone=pink] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-pink-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-pink-fg);
+}
+.zx-kanban-view__avatar[data-tone=violet] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-violet-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-violet-fg);
+}
+.zx-kanban-view__avatar[data-tone=slate] {
+  --zx-kanban-avatar-bg: var(--zx-color-tone-slate-bg);
+  --zx-kanban-avatar-fg: var(--zx-color-tone-slate-fg);
 }
 .zx-kanban-view__avatar + .zx-kanban-view__avatar {
   margin-inline-start: calc(var(--zx-space-2) * -1);
 }
 .zx-kanban-view__avatar[data-overflow=true] {
-  background: var(--zx-color-accent-subtle);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text-muted);
 }
 .zx-kanban-view__avatar-image {
   inline-size: 100%;
@@ -9892,11 +10626,15 @@ button.zx-stat-tile:focus-visible {
   object-fit: cover;
 }
 .zx-kanban-view__avatar-initials {
-  font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-size: max(10px, calc(1.5rem * .4));
+  font-weight: var(--zx-weight-semibold);
+  letter-spacing: 0;
   line-height: 1;
   text-transform: uppercase;
 }
+.zx-kanban-view__avatar[data-overflow=true] .zx-kanban-view__avatar-initials {
+  font-size: var(--zx-text-xs);
+}
 .zx-kanban-view__move-handle[data-reveal=keyboard] {
   position: absolute;
   inline-size: 1px;
@@ -9941,7 +10679,7 @@ button.zx-stat-tile:focus-visible {
 /* src/components/grid/grid.css */
 .zx-table[data-preset=billing-items] tr.zx-grid-billing__summary > td {
   background: var(--zx-color-bg-muted);
-  font-weight: 700;
+  font-weight: 650;
 }
 
 /* src/components/chart/chart.css */
@@ -9954,6 +10692,7 @@ button.zx-stat-tile:focus-visible {
 .zx-chart__viewport {
   position: relative;
   inline-size: 100%;
+  min-inline-size: 0;
   min-block-size: 220px;
   aspect-ratio: var(--zx-chart-aspect-ratio, 16 / 9);
 }
@@ -9998,7 +10737,7 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-chart__table caption {
   margin-block-end: var(--zx-space-2);
-  font-weight: 700;
+  font-weight: var(--zx-weight-semibold);
   text-align: start;
 }
 .zx-chart__table th,
@@ -10014,7 +10753,7 @@ button.zx-stat-tile:focus-visible {
 
 /* src/components/tree/tree.css */
 .zx-tree {
-  --zx-tree-indent: 18px;
+  --zx-tree-indent: var(--zx-space-3);
   display: block;
   min-inline-size: 0;
   color: var(--zx-color-text);
@@ -10024,19 +10763,24 @@ button.zx-stat-tile:focus-visible {
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: calc(var(--zx-control-height) - 6px);
-  padding-inline: var(--zx-space-2);
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding: var(--zx-space-1) var(--zx-space-2);
   padding-inline-start: calc(var(--zx-space-2) + var(--zx-tree-level, 0) * var(--zx-tree-indent));
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-sm);
+  line-height: 1.25;
   cursor: pointer;
 }
 .zx-tree__row:hover {
   background: var(--zx-color-bg-hover);
 }
 .zx-tree__row[aria-selected=true] {
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
+}
+.zx-tree[aria-multiselectable=true] .zx-tree__row[aria-selected=true] {
   background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 550;
+  font-weight: inherit;
 }
 .zx-tree__row:focus-visible {
   outline: 0;
@@ -10048,7 +10792,7 @@ button.zx-stat-tile:focus-visible {
   inline-size: 14px;
   block-size: 14px;
   flex: none;
-  color: var(--zx-color-text-muted);
+  color: var(--zx-color-text-subtle);
 }
 .zx-tree__row[aria-expanded=true] .zx-tree__twisty {
   transform: rotate(90deg);
@@ -10069,13 +10813,10 @@ button.zx-stat-tile:focus-visible {
   display: inline-grid;
   place-items: center;
   flex: none;
-  color: var(--zx-color-text-muted);
-}
-.zx-tree__row[data-branch] .zx-tree__icon {
-  color: var(--zx-color-warning);
+  color: var(--zx-color-text-subtle);
 }
 .zx-tree__row[aria-selected=true] .zx-tree__icon {
-  color: inherit;
+  color: var(--zx-color-text);
 }
 .zx-tree__label {
   overflow: hidden;
@@ -10084,11 +10825,10 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-tree__badge {
   margin-inline-start: auto;
-  padding-inline: var(--zx-space-2);
-  border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-muted);
+  padding-inline: var(--zx-space-1);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
+  font-weight: var(--zx-weight-medium);
   font-variant-numeric: tabular-nums;
 }
 .zx-tree__empty {
@@ -10117,7 +10857,7 @@ button.zx-stat-tile:focus-visible {
   flex: none;
   min-inline-size: 0;
   flex-direction: column;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-border-subtle);
 }
 .zx-finder__list {
   flex: 1 1 auto;
@@ -10130,18 +10870,19 @@ button.zx-stat-tile:focus-visible {
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: calc(var(--zx-control-height) - 6px);
-  padding-inline: var(--zx-space-2);
-  border-radius: var(--zx-radius-md);
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding: var(--zx-space-1) var(--zx-space-2);
+  border-radius: var(--zx-radius-sm);
+  line-height: 1.25;
   cursor: pointer;
 }
 .zx-finder__row:hover {
   background: var(--zx-color-bg-hover);
 }
 .zx-finder__row[aria-selected=true] {
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 550;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-finder__row:focus-visible {
   outline: 0;
@@ -10151,13 +10892,10 @@ button.zx-stat-tile:focus-visible {
   display: inline-grid;
   place-items: center;
   flex: none;
-  color: var(--zx-color-text-muted);
-}
-.zx-finder__row[data-branch] .zx-finder__icon {
-  color: var(--zx-color-warning);
+  color: var(--zx-color-text-subtle);
 }
 .zx-finder__row[aria-selected=true] .zx-finder__icon {
-  color: inherit;
+  color: var(--zx-color-text);
 }
 .zx-finder__label {
   overflow: hidden;
@@ -10212,17 +10950,18 @@ button.zx-stat-tile:focus-visible {
 .zx-data-filter__label {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-data-filter__badge {
   align-self: center;
   min-inline-size: var(--zx-control-height);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
   padding: var(--zx-space-1) var(--zx-space-2);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 .zx-data-filter__clear {
@@ -10258,7 +10997,7 @@ button.zx-stat-tile:focus-visible {
 .zx-filter-panel__label {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-filter-panel__input {
   inline-size: 100%;
@@ -10390,7 +11129,7 @@ button.zx-stat-tile:focus-visible {
 }
 .zx-list-toolbar__tool[aria-pressed=true] {
   border-color: var(--zx-color-border-strong);
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-bg-current);
 }
 .zx-list-toolbar__tool:disabled {
   color: var(--zx-color-text-placeholder);
@@ -10428,8 +11167,9 @@ button.zx-stat-tile:focus-visible {
   box-shadow: var(--zx-focus-ring);
 }
 .zx-list-toolbar__view[aria-pressed=true] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-bg-current);
   color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 @media (prefers-reduced-motion: no-preference) {
   .zx-list-toolbar__tool,
@@ -10635,11 +11375,14 @@ button.zx-stat-tile:focus-visible {
 .zx-sort-control__direction {
   inline-size: var(--zx-control-height);
   padding: 0;
-  border-radius: var(--zx-radius-full);
+  border-radius: var(--zx-control-radius);
 }
 .zx-sort-control__direction:focus-visible {
   box-shadow: var(--zx-focus-ring);
 }
+.zx-sort-control .zx-sort-control__direction > .zx-icon {
+  color: var(--zx-color-text);
+}
 .zx-sort-control .zx-select__control {
   background: var(--zx-color-bg-control);
 }
@@ -10698,13 +11441,13 @@ button.zx-stat-tile:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 .zx-pagination__page[aria-current=page] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  border-color: transparent;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 .zx-pagination__page[aria-current=page]:hover:not(:disabled) {
-  border-color: var(--zx-color-accent-hover);
-  background: var(--zx-color-accent-hover);
+  background: var(--zx-color-bg-current);
 }
 .zx-pagination__ellipsis {
   display: inline-flex;
@@ -10989,6 +11732,7 @@ button.zx-stepper__control:disabled {
 /* src/components/field/field.css */
 .zx-field {
   display: grid;
+  align-content: start;
   gap: var(--zx-space-1);
   min-inline-size: 0;
 }
@@ -10997,14 +11741,17 @@ button.zx-stepper__control:disabled {
   column-gap: var(--zx-space-4);
   align-items: start;
 }
+.zx-field[data-layout=inline] .zx-field__label {
+  padding-block-start: max(0px, (var(--zx-control-height) - 1lh) / 2);
+}
 .zx-field[data-field-type=hidden] {
   display: none;
 }
 .zx-field__label {
   min-inline-size: 0;
-  color: var(--zx-color-text);
+  color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-field__required,
 .zx-field[data-state=danger] .zx-field__label {
@@ -11071,16 +11818,19 @@ button.zx-stepper__control:disabled {
 .zx-field[data-state=danger] .zx-field__option-list {
   border-color: var(--zx-color-danger);
 }
-.zx-field__static,
+.zx-field__static {
+  min-block-size: var(--zx-control-height);
+  padding-block: max(0px, (var(--zx-control-height) - 1lh) / 2);
+  font-size: var(--zx-control-font-size);
+}
+[data-zx-fields=quiet] .zx-field__static {
+  padding-inline: calc(var(--zx-control-pad-x) + 1px);
+}
 .zx-field__error-control {
   min-block-size: var(--zx-control-height);
   padding: var(--zx-space-2) var(--zx-control-pad-x);
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-danger);
   border-radius: var(--zx-control-radius);
-  background: var(--zx-color-bg-surface);
-}
-.zx-field__error-control {
-  border-color: var(--zx-color-danger);
   background: var(--zx-color-danger-bg);
   color: var(--zx-color-danger);
 }
@@ -11106,9 +11856,9 @@ button.zx-stepper__control:disabled {
 }
 .zx-fieldset__legend {
   padding-inline: var(--zx-space-2);
-  color: var(--zx-color-text);
-  font-size: var(--zx-text-lg);
-  font-weight: 600;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 .zx-fieldset__grid {
   display: grid;
@@ -11152,12 +11902,13 @@ button.zx-stepper__control:disabled {
   min-inline-size: 6rem;
 }
 .zx-form__actions .zx-btn[type=submit] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  border-color: var(--zx-color-accent-solid);
+  background: var(--zx-color-accent-solid);
+  color: var(--zx-color-on-accent-solid);
 }
 .zx-form__actions .zx-btn[type=submit]:hover {
-  background: var(--zx-color-accent-hover);
+  border-color: var(--zx-color-accent-solid-hover);
+  background: var(--zx-color-accent-solid-hover);
 }
 
 /* src/components/value-list/value-list.css */
@@ -11189,8 +11940,8 @@ button.zx-stepper__control:disabled {
   max-inline-size: 100%;
   padding-inline: var(--zx-space-2);
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-selected);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   cursor: grab;
 }
@@ -11207,7 +11958,7 @@ button.zx-stepper__control:disabled {
   place-items: center;
   min-inline-size: 1.25rem;
   min-block-size: 1.25rem;
-  border-radius: var(--zx-radius-full);
+  border-radius: var(--zx-radius-sm);
   color: var(--zx-color-text-muted);
   cursor: pointer;
 }
@@ -11388,7 +12139,7 @@ button.zx-stepper__control:disabled {
 }
 .zx-field-upload__prompt {
   color: var(--zx-color-text);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
 }
 .zx-field-upload__hint,
 .zx-field-upload__status,