@zvk/ui 0.1.8 → 0.1.11

package/dist/styles.css

@@ -6,6 +6,9 @@
   :root {
     --zvk-ui-font-family-sans: "Aptos", "SF Pro Text", "Segoe UI Variable", ui-sans-serif, system-ui, sans-serif;
     --zvk-ui-font-family-mono: "SF Mono", "Cascadia Code", ui-monospace, monospace;
+    --zvk-ui-font-family-primary: var(--zvk-ui-font-family-sans);
+    --zvk-ui-font-family-secondary: var(--zvk-ui-font-family-sans);
+    --zvk-ui-font-family-tertiary: var(--zvk-ui-font-family-mono);
     --zvk-ui-font-size-xs: 0.75rem;
     --zvk-ui-font-size-sm: 0.875rem;
     --zvk-ui-font-size-md: 0.9375rem;
@@ -25,6 +28,7 @@
     --zvk-ui-space-5: 1.25rem;
     --zvk-ui-space-6: 1.5rem;
     --zvk-ui-space-8: 2rem;
+    --zvk-ui-space-10: 2.5rem;
 
     --zvk-ui-radius-xs: 0.25rem;
     --zvk-ui-radius-sm: 0.375rem;
@@ -42,18 +46,36 @@
     --zvk-ui-container-lg: 64rem;
     --zvk-ui-container-xl: 80rem;
 
+    --zvk-ui-material-surface-backdrop-filter: none;
+    --zvk-ui-material-floating-backdrop-filter: none;
+    --zvk-ui-material-control-backdrop-filter: none;
+    --zvk-ui-material-glass-highlight: 0 0 0 0 transparent;
+    --zvk-ui-material-glass-shadow: var(--zvk-ui-shadow-sm);
+    --zvk-ui-material-overlay-background: color-mix(in srgb, var(--zvk-ui-color-foreground) 28%, transparent);
+    --zvk-ui-material-reduced-transparency-surface: var(--zvk-ui-color-surface);
+    --zvk-ui-material-reduced-transparency-surface-raised: var(--zvk-ui-color-surface-raised);
+    --zvk-ui-material-reduced-transparency-control: var(--zvk-ui-control-background);
+
+    --zvk-ui-z-index-base: 0;
     --zvk-ui-z-index-overlay: 1000;
+    --zvk-ui-z-index-modal: calc(var(--zvk-ui-z-index-overlay) + 1);
     --zvk-ui-z-index-popover: 1100;
     --zvk-ui-z-popover: var(--zvk-ui-z-index-popover);
     --zvk-ui-z-index-tooltip: 1200;
     --zvk-ui-z-index-toast: 1300;
 
     --zvk-ui-opacity-disabled: 0.56;
+    --zvk-ui-duration-instant: 80ms;
     --zvk-ui-duration-fast: 120ms;
     --zvk-ui-duration-normal: 180ms;
+    --zvk-ui-duration-slow: 240ms;
     --zvk-ui-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --zvk-ui-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+    --zvk-ui-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
+    --zvk-ui-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
     --zvk-ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--zvk-ui-color-ring) 24%, transparent);
   }
+
 }
 
 
@@ -92,6 +114,21 @@
     --zvk-ui-control-hover: #f8fafc;
     --zvk-ui-control-active: #eef4ff;
     --zvk-ui-card-border: #7f8ea3;
+    --zvk-ui-material-overlay-background: rgb(255 255 255 / 0.96);
+    --zvk-ui-button-backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
+    --zvk-ui-select-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-dialog-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-alert-dialog-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-sheet-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-popover-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-hover-card-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-tooltip-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-dropdown-menu-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-combobox-popup-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-context-menu-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-menubar-content-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
+    --zvk-ui-sidebar-shell-sidebar-backdrop-filter: var(--zvk-ui-material-surface-backdrop-filter);
+    --zvk-ui-toast-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
   }
 
   [data-zvk-ui-theme="dark"] {
@@ -126,6 +163,28 @@
     --zvk-ui-control-hover: #172233;
     --zvk-ui-control-active: #1b2f50;
     --zvk-ui-card-border: #5c708a;
+    --zvk-ui-material-overlay-background: rgb(17 24 33 / 0.96);
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :root,
+    .zvk-ui-root {
+      --zvk-ui-color-surface: var(--zvk-ui-material-reduced-transparency-surface);
+      --zvk-ui-color-surface-raised: var(--zvk-ui-material-reduced-transparency-surface-raised);
+      --zvk-ui-control-background: var(--zvk-ui-material-reduced-transparency-control);
+      --zvk-ui-material-surface-backdrop-filter: none;
+      --zvk-ui-material-floating-backdrop-filter: none;
+      --zvk-ui-material-control-backdrop-filter: none;
+    }
+  }
+
+  [data-zvk-ui-transparency="reduced"] {
+    --zvk-ui-color-surface: var(--zvk-ui-material-reduced-transparency-surface);
+    --zvk-ui-color-surface-raised: var(--zvk-ui-material-reduced-transparency-surface-raised);
+    --zvk-ui-control-background: var(--zvk-ui-material-reduced-transparency-control);
+    --zvk-ui-material-surface-backdrop-filter: none;
+    --zvk-ui-material-floating-backdrop-filter: none;
+    --zvk-ui-material-control-backdrop-filter: none;
   }
 }
 
@@ -180,7 +239,7 @@
   :where(.zvk-ui-root, [data-zvk-ui-scope]) {
     background: var(--zvk-ui-color-background);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     line-height: var(--zvk-ui-line-height-normal);
   }
 }
@@ -197,14 +256,15 @@
     --zvk-ui-button-shadow: var(--zvk-ui-shadow-xs);
     align-items: center;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-button-backdrop-filter, var(--zvk-ui-material-control-backdrop-filter));
     background: var(--zvk-ui-button-bg);
     border: 1px solid var(--zvk-ui-button-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-button-shadow);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-button-shadow);
     color: var(--zvk-ui-button-fg);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     gap: var(--zvk-ui-control-gap);
@@ -229,7 +289,7 @@
   }
 
   :where(.zvk-ui-button:focus-visible) {
-    box-shadow: var(--zvk-ui-button-shadow), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-button-shadow), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
@@ -297,6 +357,16 @@
   :where(.zvk-ui-button__content) {
     min-width: 0;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-button) {
+      transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    }
+
+    :where(.zvk-ui-button:active:not(:disabled, [data-disabled="true"])) {
+      transform: none;
+    }
+  }
 }
 
 
@@ -306,10 +376,11 @@
     align-items: center;
     aspect-ratio: 1;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
@@ -325,7 +396,7 @@
   }
 
   :where(.zvk-ui-icon-button:focus-visible) {
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
@@ -372,6 +443,16 @@
     border-color: color-mix(in srgb, var(--zvk-ui-color-destructive) 82%, black);
     color: white;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-icon-button) {
+      transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    }
+
+    :where(.zvk-ui-icon-button:active:not(:disabled, [data-disabled="true"])) {
+      transform: none;
+    }
+  }
 }
 
 
@@ -384,7 +465,7 @@
     border-radius: var(--zvk-ui-radius-full);
     color: var(--zvk-ui-badge-color, var(--zvk-ui-color-foreground));
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 650;
     gap: var(--zvk-ui-space-1);
@@ -434,6 +515,7 @@
 /* src/components/card/card.css */
 @layer zvk-ui-components {
   :where(.zvk-ui-card) {
+    backdrop-filter: var(--zvk-ui-card-backdrop-filter, var(--zvk-ui-material-surface-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-card-border);
     border-radius: var(--zvk-ui-radius-lg);
@@ -443,8 +525,9 @@
   }
 
   :where(.zvk-ui-card[data-variant="elevated"]) {
+    --zvk-ui-card-backdrop-filter: var(--zvk-ui-material-floating-backdrop-filter);
     background: var(--zvk-ui-color-surface-raised);
-    box-shadow: var(--zvk-ui-shadow-sm);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
   }
 
   :where(.zvk-ui-card[data-variant="ghost"]) {
@@ -490,7 +573,7 @@
 
   :where(.zvk-ui-card__title) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-lg);
     font-weight: 700;
     line-height: var(--zvk-ui-line-height-tight);
@@ -573,7 +656,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     .zvk-ui-spinner::before {
-      animation-duration: 1.2s;
+      animation: none;
     }
   }
 }
@@ -590,7 +673,7 @@
   }
 
   :where(.zvk-ui-skeleton[data-animate="true"]) {
-    animation: zvk-ui-skeleton-shimmer 1.4s var(--zvk-ui-ease-standard) infinite;
+    animation: zvk-ui-skeleton-shimmer calc(var(--zvk-ui-duration-normal) * 8) var(--zvk-ui-ease-standard) infinite;
   }
 
   :where(.zvk-ui-skeleton[data-rounded="sm"]) {
@@ -624,7 +707,7 @@
   :where(.zvk-ui-label) {
     color: var(--zvk-ui-color-foreground);
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-label-font-size, var(--zvk-ui-font-size-sm));
     font-weight: 650;
     gap: var(--zvk-ui-space-1);
@@ -658,7 +741,7 @@
   :where(.zvk-ui-progress__label),
   :where(.zvk-ui-progress__value) {
     color: var(--zvk-ui-color-muted-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 600;
     line-height: var(--zvk-ui-line-height-tight);
@@ -711,7 +794,7 @@
   }
 
   :where(.zvk-ui-progress[data-indeterminate="true"] .zvk-ui-progress__indicator) {
-    animation: zvk-ui-progress-indeterminate 1.2s var(--zvk-ui-ease-standard) infinite;
+    animation: zvk-ui-progress-indeterminate calc(var(--zvk-ui-duration-normal) * 7) var(--zvk-ui-ease-standard) infinite;
     width: 40%;
   }
 
@@ -783,7 +866,7 @@
 
   :where(.zvk-ui-alert__title) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 700;
     line-height: var(--zvk-ui-line-height-tight);
@@ -816,7 +899,7 @@
     border-radius: var(--zvk-ui-radius-full);
     color: var(--zvk-ui-color-muted-foreground);
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-avatar-font-size, var(--zvk-ui-font-size-sm));
     font-weight: 700;
     height: var(--zvk-ui-avatar-size);
@@ -869,14 +952,14 @@
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 650;
     height: var(--zvk-ui-copy-button-height, var(--zvk-ui-control-height-sm));
     justify-content: center;
     line-height: 1;
     padding-inline: var(--zvk-ui-space-3);
-    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
     white-space: nowrap;
   }
 
@@ -924,7 +1007,7 @@
 
   :where(.zvk-ui-copyable-text__label) {
     color: var(--zvk-ui-color-muted-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 650;
     line-height: var(--zvk-ui-line-height-tight);
@@ -933,7 +1016,7 @@
   :where(.zvk-ui-copyable-text__value) {
     color: var(--zvk-ui-color-foreground);
     flex: 1 1 auto;
-    font-family: var(--zvk-ui-font-family-mono);
+    font-family: var(--zvk-ui-font-family-tertiary);
     font-size: var(--zvk-ui-font-size-sm);
     line-height: var(--zvk-ui-line-height-tight);
     min-width: 0;
@@ -976,7 +1059,7 @@
     color: var(--zvk-ui-color-foreground);
     display: inline-flex;
     flex: 0 0 auto;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 650;
     min-height: var(--zvk-ui-control-height-sm);
@@ -995,7 +1078,7 @@
   :where(.zvk-ui-file-upload-input__control) {
     color: var(--zvk-ui-color-foreground);
     flex: 0 1 auto;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     min-width: 0;
   }
@@ -1032,6 +1115,187 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-file-upload-input) {
+      align-items: stretch;
+      flex-wrap: wrap;
+      row-gap: var(--zvk-ui-space-2);
+    }
+
+    :where(.zvk-ui-file-upload-input__button, .zvk-ui-file-upload-input__control) {
+      min-height: max(var(--zvk-ui-file-upload-input-height, var(--zvk-ui-control-height-md)), var(--zvk-ui-control-height-md));
+    }
+
+    :where(.zvk-ui-file-upload-input__control) {
+      flex: 1 1 12rem;
+      max-inline-size: 100%;
+    }
+
+    :where(.zvk-ui-file-upload-input__summary) {
+      flex-basis: 100%;
+      overflow: visible;
+      overflow-wrap: anywhere;
+      text-overflow: clip;
+      white-space: normal;
+    }
+  }
+}
+
+
+/* src/components/file-dropzone/file-dropzone.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-file-dropzone) {
+    display: grid;
+    gap: var(--zvk-ui-field-gap);
+  }
+
+  :where(.zvk-ui-file-dropzone__surface) {
+    background: var(--zvk-ui-control-background);
+    border: 1px dashed var(--zvk-ui-file-dropzone-border-color, var(--zvk-ui-control-border));
+    border-radius: var(--zvk-ui-radius-lg);
+    box-shadow: var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    min-height: 7rem;
+    overflow: hidden;
+    position: relative;
+    transition:
+      background-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard),
+      border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard),
+      box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  :where(.zvk-ui-file-dropzone__surface:hover) {
+    --zvk-ui-file-dropzone-border-color: var(--zvk-ui-control-border-strong);
+  }
+
+  :where(.zvk-ui-file-dropzone:focus-within .zvk-ui-file-dropzone__surface) {
+    --zvk-ui-file-dropzone-border-color: var(--zvk-ui-color-ring);
+    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+  }
+
+  :where(.zvk-ui-file-dropzone[data-dragging="true"] .zvk-ui-file-dropzone__surface) {
+    --zvk-ui-file-dropzone-border-color: var(--zvk-ui-color-primary);
+    background: var(--zvk-ui-color-primary-soft);
+  }
+
+  :where(.zvk-ui-file-dropzone[data-invalid="true"] .zvk-ui-file-dropzone__surface) {
+    --zvk-ui-file-dropzone-border-color: var(--zvk-ui-color-destructive);
+  }
+
+  :where(.zvk-ui-file-dropzone[data-disabled="true"] .zvk-ui-file-dropzone__surface) {
+    cursor: not-allowed;
+  }
+
+  :where(.zvk-ui-file-dropzone__panel) {
+    align-items: center;
+    display: grid;
+    justify-items: center;
+    padding: var(--zvk-ui-space-5);
+    pointer-events: none;
+    text-align: center;
+  }
+
+  :where(.zvk-ui-file-dropzone__prompt) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 650;
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-ui-file-dropzone__input) {
+    cursor: pointer;
+    inset: 0;
+    opacity: 0;
+    position: absolute;
+  }
+
+  :where(.zvk-ui-file-dropzone__input:disabled) {
+    cursor: not-allowed;
+  }
+
+  :where(.zvk-ui-file-dropzone__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(.zvk-ui-file-dropzone__item) {
+    align-items: center;
+    background: var(--zvk-ui-color-surface);
+    border: 1px solid var(--zvk-ui-color-border);
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-1) var(--zvk-ui-space-3);
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-ui-file-dropzone__item-name) {
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 650;
+    line-height: var(--zvk-ui-line-height-tight);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-ui-file-dropzone__item-meta) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-tight);
+    min-width: 0;
+  }
+
+  :where(.zvk-ui-file-dropzone__remove) {
+    align-items: center;
+    align-self: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: var(--zvk-ui-color-primary);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 650;
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    min-height: var(--zvk-ui-control-height-sm);
+    padding-inline: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-file-dropzone__remove:hover:not(:disabled)) {
+    background: var(--zvk-ui-color-primary-soft);
+  }
+
+  :where(.zvk-ui-file-dropzone__remove:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: 0;
+  }
+
+  :where(.zvk-ui-file-dropzone__remove:disabled) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-file-dropzone__item) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where(.zvk-ui-file-dropzone__remove) {
+      grid-column: 1;
+      grid-row: auto;
+      justify-self: start;
+    }
+  }
 }
 
 
@@ -1049,7 +1313,7 @@
 
   :where(.zvk-ui-error-fallback__title) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 700;
     line-height: var(--zvk-ui-line-height-tight);
@@ -1082,7 +1346,7 @@
 
   :where(.zvk-ui-field__label) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 650;
     line-height: var(--zvk-ui-line-height-tight);
@@ -1117,7 +1381,7 @@
 
   :where(.zvk-ui-form-label) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 650;
     line-height: var(--zvk-ui-line-height-tight);
@@ -1135,6 +1399,45 @@
     font-weight: 600;
   }
 
+  :where(.zvk-ui-form-validation-summary) {
+    background: color-mix(in srgb, var(--zvk-ui-color-destructive) 8%, var(--zvk-ui-color-surface));
+    border: 1px solid color-mix(in srgb, var(--zvk-ui-color-destructive) 24%, var(--zvk-ui-color-border));
+    border-radius: var(--zvk-ui-radius-md);
+    color: var(--zvk-ui-color-foreground);
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+    padding: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-ui-form-validation-summary__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
+    margin: 0;
+  }
+
+  :where(.zvk-ui-form-validation-summary__list) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    margin: 0;
+    padding-inline-start: var(--zvk-ui-space-5);
+  }
+
+  :where(.zvk-ui-form-validation-summary__item) {
+    color: var(--zvk-ui-color-destructive);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: var(--zvk-ui-line-height-normal);
+  }
+
+  :where(.zvk-ui-form-validation-summary__link) {
+    color: inherit;
+    font-weight: 600;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.15em;
+  }
+
   :where(.zvk-ui-form-field[data-disabled="true"]) {
     opacity: var(--zvk-ui-opacity-disabled);
   }
@@ -1145,12 +1448,13 @@
 @layer zvk-ui-components {
   :where(.zvk-ui-input) {
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-input-border-color, var(--zvk-ui-control-border));
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     height: var(--zvk-ui-input-height, var(--zvk-ui-control-height-md));
     line-height: 1;
@@ -1170,7 +1474,7 @@
 
   :where(.zvk-ui-input:focus-visible) {
     --zvk-ui-input-border-color: var(--zvk-ui-color-ring);
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
@@ -1194,17 +1498,22 @@
   }
 }
 
+.zvk-ui-input {
+  padding-inline: var(--zvk-ui-control-padding-x);
+}
+
 
 /* src/components/textarea/textarea.css */
 @layer zvk-ui-components {
   .zvk-ui-textarea {
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-input-border-color, var(--zvk-ui-control-border));
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     min-block-size: calc(var(--zvk-ui-control-height-md) * 2);
     padding-inline: var(--zvk-ui-control-padding-x);
@@ -1224,7 +1533,7 @@
 
   :where(.zvk-ui-textarea:focus-visible) {
     --zvk-ui-input-border-color: var(--zvk-ui-color-ring);
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
@@ -1248,6 +1557,11 @@
   }
 }
 
+.zvk-ui-textarea {
+  padding-block: var(--zvk-ui-space-2);
+  padding-inline: var(--zvk-ui-control-padding-x);
+}
+
 
 /* src/components/checkbox/checkbox.css */
 @layer zvk-ui-components {
@@ -1275,7 +1589,7 @@
   .zvk-ui-checkbox__control {
     align-items: center;
     background: var(--zvk-ui-control-background);
-    border: 1px solid var(--zvk-ui-color-border);
+    border: 1px solid var(--zvk-ui-control-border);
     border-radius: var(--zvk-ui-radius-sm);
     box-shadow: var(--zvk-ui-shadow-xs);
     display: inline-flex;
@@ -1304,11 +1618,24 @@
     border-color: var(--zvk-ui-color-primary);
   }
 
+  .zvk-ui-checkbox__input:indeterminate + .zvk-ui-checkbox__control {
+    background: var(--zvk-ui-color-primary);
+    border-color: var(--zvk-ui-color-primary);
+  }
+
   .zvk-ui-checkbox__input:checked + .zvk-ui-checkbox__control .zvk-ui-checkbox__indicator {
     opacity: 1;
     transform: rotate(45deg) scale(1) translate(-1px, -1px);
   }
 
+  .zvk-ui-checkbox__input:indeterminate + .zvk-ui-checkbox__control .zvk-ui-checkbox__indicator {
+    block-size: 0;
+    inline-size: 0.625rem;
+    border-width: 0 0 2px;
+    opacity: 1;
+    transform: none;
+  }
+
   .zvk-ui-checkbox__input:focus-visible + .zvk-ui-checkbox__control {
     box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
   }
@@ -1336,7 +1663,7 @@
 
   .zvk-ui-checkbox__label {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     line-height: var(--zvk-ui-line-height-tight);
   }
@@ -1353,9 +1680,9 @@
 /* src/components/switch/switch.css */
 @layer zvk-ui-components {
   .zvk-ui-switch {
-    --zvk-ui-switch-height: var(--zvk-ui-control-height-md);
-    --zvk-ui-switch-width: calc(var(--zvk-ui-switch-height) * 1.75);
-    --zvk-ui-switch-padding: var(--zvk-ui-space-1);
+    --zvk-ui-switch-height: 1.5rem;
+    --zvk-ui-switch-width: 2.75rem;
+    --zvk-ui-switch-padding: 0.125rem;
     --zvk-ui-switch-thumb-size: calc(var(--zvk-ui-switch-height) - (var(--zvk-ui-switch-padding) * 2) - 2px);
     --zvk-ui-switch-thumb-translate: calc(var(--zvk-ui-switch-width) - var(--zvk-ui-switch-thumb-size) - (var(--zvk-ui-switch-padding) * 2) - 2px);
     align-items: center;
@@ -1420,16 +1747,18 @@
   }
 
   .zvk-ui-switch[data-size="sm"] {
-    --zvk-ui-switch-height: var(--zvk-ui-control-height-sm);
+    --zvk-ui-switch-height: 1.25rem;
+    --zvk-ui-switch-width: 2.25rem;
   }
 
   .zvk-ui-switch[data-size="lg"] {
-    --zvk-ui-switch-height: var(--zvk-ui-control-height-lg);
+    --zvk-ui-switch-height: 1.75rem;
+    --zvk-ui-switch-width: 3.25rem;
   }
 
   .zvk-ui-switch__label {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     line-height: var(--zvk-ui-line-height-tight);
   }
@@ -1467,7 +1796,7 @@
 
   .zvk-ui-radio-group__legend {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 650;
     line-height: var(--zvk-ui-line-height-tight);
@@ -1528,12 +1857,13 @@
     display: inline-flex;
     height: 1rem;
     justify-content: center;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
     width: 1rem;
   }
 
   .zvk-ui-radio-group__label {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     line-height: var(--zvk-ui-line-height-tight);
   }
@@ -1563,6 +1893,12 @@
     cursor: not-allowed;
     opacity: var(--zvk-ui-opacity-disabled);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-radio-group__control {
+      transition: none;
+    }
+  }
 }
 
 
@@ -1618,7 +1954,7 @@
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     gap: var(--zvk-ui-control-gap);
@@ -1724,7 +2060,7 @@
   :where(.zvk-ui-calendar) {
     color: var(--zvk-ui-color-foreground);
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-3);
     inline-size: max-content;
     min-inline-size: 17.5rem;
@@ -1757,6 +2093,7 @@
     font: inherit;
     justify-content: center;
     padding: 0;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
   :where(.zvk-ui-calendar__nav) {
@@ -1881,51 +2218,152 @@
 }
 
 
-/* src/components/select/select.css */
+/* src/components/date-range-picker/date-range-picker.css */
 @layer zvk-ui-components {
-  :where(.zvk-ui-select) {
-    display: inline-grid;
-    min-width: 0;
+  :where(.zvk-ui-date-range-picker) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
   }
 
-  :where(.zvk-ui-select__trigger) {
+  :where(.zvk-ui-date-range-picker__group) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-date-range-picker__controls) {
+    display: grid;
+    gap: var(--zvk-ui-space-3);
+  }
+
+  :where(.zvk-ui-date-range-picker__field) {
+    display: grid;
+    gap: var(--zvk-ui-space-1);
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-ui-date-range-picker__field-label) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 600;
+    line-height: var(--zvk-ui-line-height-tight);
+  }
+
+  :where(.zvk-ui-date-range-picker__input-row) {
+    display: grid;
+    gap: var(--zvk-ui-space-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  :where(.zvk-ui-date-range-picker__input) {
+    min-inline-size: 0;
+  }
+
+  :where(.zvk-ui-date-range-picker .zvk-ui-popover) {
+    display: block;
+  }
+
+  :where(.zvk-ui-date-range-picker__calendar-trigger),
+  :where(.zvk-ui-date-range-picker__clear) {
     align-items: center;
     appearance: none;
     background: var(--zvk-ui-control-background);
-    border: 1px solid var(--zvk-ui-select-border-color, var(--zvk-ui-control-border));
+    border: 1px solid var(--zvk-ui-control-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
-    gap: var(--zvk-ui-control-gap);
+    font-weight: 600;
     height: var(--zvk-ui-control-height-md);
-    justify-content: space-between;
+    justify-content: center;
     line-height: 1;
-    min-width: 10rem;
     padding-inline: var(--zvk-ui-control-padding-x);
     transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    white-space: nowrap;
   }
 
-  :where(.zvk-ui-select__trigger:hover:not(:disabled)) {
-    --zvk-ui-select-border-color: var(--zvk-ui-control-border-strong);
+  :where(.zvk-ui-date-range-picker__calendar-trigger:hover),
+  :where(.zvk-ui-date-range-picker__clear:hover) {
+    border-color: var(--zvk-ui-control-border-strong);
   }
 
-  :where(.zvk-ui-select__trigger:focus-visible) {
-    --zvk-ui-select-border-color: var(--zvk-ui-color-ring);
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+  :where(.zvk-ui-date-range-picker__calendar-trigger:focus-visible),
+  :where(.zvk-ui-date-range-picker__clear:focus-visible) {
+    border-color: var(--zvk-ui-color-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
-  :where(.zvk-ui-select__trigger:disabled) {
-    cursor: not-allowed;
-    opacity: var(--zvk-ui-opacity-disabled);
+  :where(.zvk-ui-date-range-picker__calendar-trigger[data-state="open"]) {
+    border-color: var(--zvk-ui-color-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
   }
 
-  :where(.zvk-ui-select__trigger[data-invalid="true"]) {
-    --zvk-ui-select-border-color: var(--zvk-ui-color-destructive);
+  :where(.zvk-ui-date-range-picker__clear) {
+    justify-self: start;
+  }
+
+  :where(.zvk-ui-date-range-picker__content) {
+    padding: var(--zvk-ui-space-3);
+  }
+
+  @media (min-width: 36rem) {
+    :where(.zvk-ui-date-range-picker__controls) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+}
+
+
+/* src/components/select/select.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-select) {
+    display: inline-grid;
+    min-width: 0;
+    --zvk-ui-select-trigger-min-width: 10rem;
+  }
+
+  :where(.zvk-ui-select__trigger) {
+    align-items: center;
+    appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
+    background: var(--zvk-ui-control-background);
+    border: 1px solid var(--zvk-ui-select-border-color, var(--zvk-ui-control-border));
+    border-radius: var(--zvk-ui-radius-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
+    color: var(--zvk-ui-color-foreground);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
+    gap: var(--zvk-ui-control-gap);
+    height: var(--zvk-ui-control-height-md);
+    justify-content: space-between;
+    line-height: 1;
+    min-width: var(--zvk-ui-select-trigger-min-width);
+    padding-inline: var(--zvk-ui-control-padding-x);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  :where(.zvk-ui-select__trigger:hover:not(:disabled)) {
+    --zvk-ui-select-border-color: var(--zvk-ui-control-border-strong);
+  }
+
+  :where(.zvk-ui-select__trigger:focus-visible) {
+    --zvk-ui-select-border-color: var(--zvk-ui-color-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    outline: 0;
+  }
+
+  :where(.zvk-ui-select__trigger:disabled) {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  :where(.zvk-ui-select__trigger[data-invalid="true"]) {
+    --zvk-ui-select-border-color: var(--zvk-ui-color-destructive);
   }
 
   :where(.zvk-ui-select[data-size="sm"] .zvk-ui-select__trigger) {
@@ -1942,17 +2380,81 @@
     color: var(--zvk-ui-color-muted-foreground);
   }
 
+  :where(.zvk-ui-select__indicator) {
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-grid;
+    flex: 0 0 auto;
+    inline-size: 1rem;
+    margin-inline-start: auto;
+    place-items: center;
+    transition: color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), transform var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  .zvk-ui-select__indicator::before {
+    block-size: 0.45rem;
+    border-block-end: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
+    content: "";
+    inline-size: 0.45rem;
+    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
+  }
+
+  :where(.zvk-ui-select__trigger[data-state="open"] .zvk-ui-select__indicator) {
+    color: var(--zvk-ui-color-foreground);
+    transform: rotate(180deg);
+  }
+
   :where(.zvk-ui-select__content) {
+    --zvk-ui-select-motion-x: 0;
+    --zvk-ui-select-motion-y: -0.25rem;
+    backdrop-filter: var(--zvk-ui-select-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-card-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-lg);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
     display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-1);
-    min-width: var(--zvk-ui-floating-reference-width, 10rem);
+    max-block-size: min(calc(100vh - var(--zvk-ui-space-4)), var(--zvk-ui-floating-available-height, calc(100vh - var(--zvk-ui-space-4))));
+    min-width: var(--zvk-ui-floating-reference-width, var(--zvk-ui-select-trigger-min-width));
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
     padding: var(--zvk-ui-space-1);
+    scrollbar-gutter: stable;
     z-index: var(--zvk-ui-z-popover);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :where(.zvk-ui-select__content[data-side="top"]) {
+    --zvk-ui-select-motion-y: 0.25rem;
+  }
+
+  :where(.zvk-ui-select__content[data-side="bottom"]) {
+    --zvk-ui-select-motion-y: -0.25rem;
+  }
+
+  :where(.zvk-ui-select__content[data-side="left"]) {
+    --zvk-ui-select-motion-x: 0.25rem;
+    --zvk-ui-select-motion-y: 0;
+  }
+
+  :where(.zvk-ui-select__content[data-side="right"]) {
+    --zvk-ui-select-motion-x: -0.25rem;
+    --zvk-ui-select-motion-y: 0;
+  }
+
+  :where(.zvk-ui-select__content[data-state="open"]) {
+    animation: zvk-ui-select-content-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+  }
+
+  :where(.zvk-ui-select__content[data-state="closed"]:not([hidden])) {
+    animation: zvk-ui-select-content-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit);
+    pointer-events: none;
+  }
+
+  :where(.zvk-ui-select__content[aria-hidden="true"]) {
+    pointer-events: none;
   }
 
   :where(.zvk-ui-select__content[hidden]) {
@@ -1964,7 +2466,7 @@
     border-radius: var(--zvk-ui-radius-sm);
     cursor: pointer;
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     gap: var(--zvk-ui-space-2);
     grid-template-columns: 1rem 1fr;
@@ -1995,6 +2497,7 @@
 
   :where(.zvk-ui-select__label) {
     color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 600;
     padding: var(--zvk-ui-space-1) var(--zvk-ui-space-2);
@@ -2023,6 +2526,40 @@
     color: var(--zvk-ui-color-foreground);
     outline: 0;
   }
+
+  @keyframes zvk-ui-select-content-enter {
+    from {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-select-motion-x), var(--zvk-ui-select-motion-y)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes zvk-ui-select-content-exit {
+    from {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-select-motion-x), var(--zvk-ui-select-motion-y)) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-select__indicator) {
+      transition: none;
+    }
+
+    :where(.zvk-ui-select__content[data-state="open"], .zvk-ui-select__content[data-state="closed"]:not([hidden])) {
+      animation: none;
+    }
+  }
 }
 
 
@@ -2045,13 +2582,14 @@
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     gap: var(--zvk-ui-control-gap);
     height: var(--zvk-ui-collapsible-trigger-height);
     justify-content: flex-start;
     min-width: max-content;
     padding-inline: var(--zvk-ui-collapsible-trigger-padding-x);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
   :where(.zvk-ui-collapsible__trigger:hover:not(:disabled, [data-disabled="true"])) {
@@ -2066,9 +2604,31 @@
     padding-inline: var(--zvk-ui-control-padding-x);
   }
 
+  :where(.zvk-ui-collapsible__content[data-state="open"]) {
+    animation: zvk-ui-collapsible-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard) both;
+  }
+
   :where(.zvk-ui-collapsible__content[data-state="closed"]) {
     overflow: hidden;
   }
+
+  @keyframes zvk-ui-collapsible-content-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-collapsible__content[data-state="open"]) {
+      animation: none;
+    }
+  }
 }
 
 
@@ -2084,6 +2644,7 @@
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
     overflow: hidden;
+    transition: border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
   :where(.zvk-ui-accordion__item[data-state="open"]) {
@@ -2092,18 +2653,23 @@
 
   :where(.zvk-ui-accordion__trigger) {
     --zvk-ui-accordion-trigger-height: var(--zvk-ui-control-height-md);
+    align-items: center;
     appearance: none;
     background: var(--zvk-ui-color-surface);
     border: none;
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     gap: var(--zvk-ui-control-gap);
+    justify-content: flex-start;
+    line-height: 1;
     min-width: 100%;
     min-height: var(--zvk-ui-accordion-trigger-height);
+    padding-inline: var(--zvk-ui-control-padding-x);
     text-align: left;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
     width: 100%;
   }
 
@@ -2120,6 +2686,10 @@
     padding: var(--zvk-ui-space-3);
   }
 
+  :where(.zvk-ui-accordion__content[data-state="open"]) {
+    animation: zvk-ui-accordion-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard) both;
+  }
+
   :where(.zvk-ui-accordion__content[data-state="closed"]) {
     display: none;
   }
@@ -2127,6 +2697,24 @@
   :where(.zvk-ui-accordion[data-disabled="true"] .zvk-ui-accordion__trigger:disabled) {
     cursor: not-allowed;
   }
+
+  @keyframes zvk-ui-accordion-content-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-accordion__content[data-state="open"]) {
+      animation: none;
+    }
+  }
 }
 
 
@@ -2162,7 +2750,7 @@
     cursor: pointer;
     display: inline-flex;
     flex: 0 0 auto;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     justify-content: center;
@@ -2201,10 +2789,32 @@
 
   :where(.zvk-ui-tabs__content) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-md);
     line-height: var(--zvk-ui-line-height-normal);
   }
+
+  :where(.zvk-ui-tabs__content[data-state="open"]) {
+    animation: zvk-ui-tabs-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard) both;
+  }
+
+  @keyframes zvk-ui-tabs-content-enter {
+    from {
+      opacity: 0;
+      transform: translateY(0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-tabs__content[data-state="open"]) {
+      animation: none;
+    }
+  }
 }
 
 
@@ -2239,11 +2849,17 @@
   }
 
   :where(.zvk-ui-breadcrumbs__link) {
+    align-items: center;
+    border-radius: var(--zvk-ui-radius-sm);
     color: inherit;
+    display: inline-flex;
+    min-block-size: 1.5rem;
     text-decoration: none;
+    transition: color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
   :where(.zvk-ui-breadcrumbs__link:hover, .zvk-ui-breadcrumbs__link:focus-visible) {
+    color: var(--zvk-ui-color-foreground);
     text-decoration: underline;
   }
 
@@ -2251,6 +2867,13 @@
     color: var(--zvk-ui-color-muted-foreground);
     pointer-events: none;
   }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-breadcrumbs__link) {
+      min-block-size: var(--zvk-ui-control-height-lg);
+      padding-inline: var(--zvk-ui-space-1);
+    }
+  }
 }
 
 
@@ -2258,6 +2881,7 @@
 @layer zvk-ui-components {
   :where(.zvk-ui-pagination) {
     display: block;
+    max-inline-size: 100%;
     width: max-content;
   }
 
@@ -2275,6 +2899,7 @@
   }
 
   :where(.zvk-ui-pagination__item) {
+    align-items: center;
     appearance: none;
     background: transparent;
     border: 1px solid transparent;
@@ -2282,9 +2907,11 @@
     color: var(--zvk-ui-color-foreground);
     display: inline-flex;
     font-size: var(--zvk-ui-font-size-sm);
+    justify-content: center;
     padding-block: var(--zvk-ui-space-1);
     padding-inline: var(--zvk-ui-space-2);
     text-decoration: none;
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
   :where(.zvk-ui-pagination__item:hover:not(:disabled)) {
@@ -2310,6 +2937,23 @@
     outline: 0;
     box-shadow: var(--zvk-ui-focus-ring);
   }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-pagination) {
+      width: 100%;
+    }
+
+    :where(.zvk-ui-pagination__list) {
+      display: flex;
+      flex-wrap: wrap;
+      row-gap: var(--zvk-ui-space-1);
+    }
+
+    :where(.zvk-ui-pagination__item) {
+      min-block-size: var(--zvk-ui-control-height-lg);
+      min-inline-size: var(--zvk-ui-control-height-lg);
+    }
+  }
 }
 
 
@@ -2320,6 +2964,7 @@
     max-inline-size: 100%;
     overflow-x: auto;
     overscroll-behavior-x: contain;
+    scrollbar-gutter: stable;
     -webkit-overflow-scrolling: touch;
   }
 
@@ -2368,89 +3013,191 @@
     text-align: left;
   }
 
-  :where(.zvk-ui-table__head, .zvk-ui-table__cell) {
-    text-align: left;
-    padding-block: var(--zvk-ui-table-cell-padding-y);
-    padding-inline: var(--zvk-ui-table-cell-padding-x);
-  }
-
-  :where(.zvk-ui-table__head) {
-    font-size: var(--zvk-ui-font-size-sm);
-    font-weight: 600;
-  }
-
-  :where(.zvk-ui-table__row) {
-    border-bottom: 1px solid var(--zvk-ui-color-border-subtle);
-  }
-
-  :where(.zvk-ui-table__row:last-child) {
-    border-bottom: none;
-  }
-}
-
-
-/* src/components/empty-state/empty-state.css */
-@layer zvk-ui-components {
-  :where(.zvk-ui-empty-state) {
+  :where(.zvk-ui-table__toolbar) {
     align-items: center;
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: var(--zvk-ui-space-3);
-    text-align: center;
-  }
-
-  :where(.zvk-ui-empty-state__icon) {
-    color: var(--zvk-ui-color-muted-foreground);
-    font-size: var(--zvk-ui-font-size-2xl);
-    line-height: 1;
-    min-height: 1.75rem;
+    justify-content: space-between;
   }
 
-  :where(.zvk-ui-empty-state__title) {
+  :where(.zvk-ui-table__toolbar-title) {
     color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-lg);
-    font-weight: 650;
-    margin: 0;
-  }
-
-  :where(.zvk-ui-empty-state__description) {
-    color: var(--zvk-ui-color-muted-foreground);
+    font-weight: 700;
+    line-height: var(--zvk-ui-line-height-tight);
     margin: 0;
-    max-width: 45ch;
   }
 
-  :where(.zvk-ui-empty-state__actions) {
+  :where(.zvk-ui-table__toolbar-actions) {
+    align-items: center;
     display: inline-flex;
+    flex-wrap: wrap;
     gap: var(--zvk-ui-space-2);
   }
 
-  :where(.zvk-ui-empty-state[data-align="start"]) {
-    align-items: flex-start;
+  :where(.zvk-ui-table__head, .zvk-ui-table__cell) {
     text-align: left;
+    padding-block: var(--zvk-ui-table-cell-padding-y);
+    padding-inline: var(--zvk-ui-table-cell-padding-x);
   }
 
-  :where(.zvk-ui-empty-state[data-size="sm"]) {
-    gap: var(--zvk-ui-space-2);
+  :where(.zvk-ui-table__selection-cell) {
+    inline-size: 1%;
+    text-align: center;
+    white-space: nowrap;
   }
 
-  :where(.zvk-ui-empty-state[data-size="sm"] .zvk-ui-empty-state__title) {
-    font-size: var(--zvk-ui-font-size-base);
+  :where(.zvk-ui-table__selection-cell[data-disabled="true"]) {
+    opacity: var(--zvk-ui-opacity-disabled);
   }
 
-  :where(.zvk-ui-empty-state[data-size="lg"]) {
-    gap: var(--zvk-ui-space-4);
+  :where(.zvk-ui-table__selection-checkbox) {
+    justify-content: center;
   }
 
-  :where(.zvk-ui-empty-state[data-size="lg"] .zvk-ui-empty-state__title) {
-    font-size: var(--zvk-ui-font-size-xl);
+  :where(.zvk-ui-table__head) {
+    font-size: var(--zvk-ui-font-size-sm);
+    font-weight: 600;
   }
-}
-
 
-/* src/components/stat/stat.css */
-@layer zvk-ui-components {
-  :where(.zvk-ui-stat) {
-    border: 1px solid var(--zvk-ui-color-border);
+  :where(.zvk-ui-table__sort-button) {
+    align-items: center;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--zvk-ui-radius-sm);
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    font-weight: inherit;
+    gap: var(--zvk-ui-space-2);
+    margin: calc(-1 * var(--zvk-ui-space-1));
+    padding: var(--zvk-ui-space-1);
+    text-align: inherit;
+  }
+
+  :where(.zvk-ui-table__sort-button:hover) {
+    background: var(--zvk-ui-color-muted);
+  }
+
+  :where(.zvk-ui-table__sort-button:focus-visible) {
+    box-shadow: var(--zvk-ui-focus-ring);
+    outline: none;
+  }
+
+  :where(.zvk-ui-table__sort-button:disabled) {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  :where(.zvk-ui-table__sort-direction) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  :where(.zvk-ui-table__row) {
+    border-bottom: 1px solid var(--zvk-ui-color-border-subtle);
+  }
+
+  :where(.zvk-ui-table__row:last-child) {
+    border-bottom: none;
+  }
+
+  :where(.zvk-ui-table__state-row) {
+    color: var(--zvk-ui-color-muted-foreground);
+  }
+
+  :where(.zvk-ui-table__state-row[data-state="loading"]) {
+    color: var(--zvk-ui-color-foreground);
+  }
+
+  :where(.zvk-ui-table__state-row[data-state="error"]) {
+    color: var(--zvk-ui-color-destructive);
+  }
+
+  :where(.zvk-ui-table__state-cell) {
+    padding-block: calc(var(--zvk-ui-table-cell-padding-y) * 2);
+    text-align: center;
+  }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-table-container) {
+      box-shadow:
+        inset var(--zvk-ui-space-2) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 18%, transparent),
+        inset calc(-1 * var(--zvk-ui-space-2)) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 18%, transparent);
+      scrollbar-width: thin;
+    }
+  }
+}
+
+
+/* src/components/empty-state/empty-state.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-empty-state) {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--zvk-ui-space-3);
+    text-align: center;
+  }
+
+  :where(.zvk-ui-empty-state__icon) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-size: var(--zvk-ui-font-size-2xl);
+    line-height: 1;
+    min-height: 1.75rem;
+  }
+
+  :where(.zvk-ui-empty-state__title) {
+    color: var(--zvk-ui-color-foreground);
+    font-size: var(--zvk-ui-font-size-lg);
+    font-weight: 650;
+    margin: 0;
+  }
+
+  :where(.zvk-ui-empty-state__description) {
+    color: var(--zvk-ui-color-muted-foreground);
+    margin: 0;
+    max-width: 45ch;
+  }
+
+  :where(.zvk-ui-empty-state__actions) {
+    display: inline-flex;
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-empty-state[data-align="start"]) {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  :where(.zvk-ui-empty-state[data-size="sm"]) {
+    gap: var(--zvk-ui-space-2);
+  }
+
+  :where(.zvk-ui-empty-state[data-size="sm"] .zvk-ui-empty-state__title) {
+    font-size: var(--zvk-ui-font-size-base);
+  }
+
+  :where(.zvk-ui-empty-state[data-size="lg"]) {
+    gap: var(--zvk-ui-space-4);
+  }
+
+  :where(.zvk-ui-empty-state[data-size="lg"] .zvk-ui-empty-state__title) {
+    font-size: var(--zvk-ui-font-size-xl);
+  }
+}
+
+
+/* src/components/stat/stat.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-stat) {
+    border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-lg);
     display: grid;
     gap: var(--zvk-ui-space-2);
@@ -2533,11 +3280,15 @@
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
     display: grid;
-    font-family: var(--zvk-ui-font-family-mono);
+    font-family: var(--zvk-ui-font-family-tertiary);
     line-height: 1.4;
     margin: 0;
+    max-inline-size: 100%;
     overflow: auto;
+    overscroll-behavior-x: contain;
     padding: var(--zvk-ui-space-3);
+    scrollbar-gutter: stable;
+    -webkit-overflow-scrolling: touch;
   }
 
   :where(.zvk-ui-code-block__header) {
@@ -2572,27 +3323,94 @@
     border-left: 2px solid var(--zvk-ui-color-border-strong);
     padding-left: var(--zvk-ui-space-3);
   }
+
+  @media (max-width: 40rem) {
+    :where(.zvk-ui-code-block) {
+      box-shadow:
+        inset var(--zvk-ui-space-2) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 24%, transparent),
+        inset calc(-1 * var(--zvk-ui-space-2)) 0 var(--zvk-ui-space-3) calc(-1 * var(--zvk-ui-space-3)) color-mix(in srgb, var(--zvk-ui-color-foreground) 24%, transparent);
+      scrollbar-width: thin;
+    }
+  }
+}
+
+
+/* src/components/kbd/kbd.css */
+@layer zvk-ui-components {
+  :where(.zvk-ui-kbd-group) {
+    align-items: center;
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-flex;
+    gap: var(--zvk-ui-space-1);
+    max-inline-size: 100%;
+    vertical-align: baseline;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-ui-kbd) {
+    align-items: center;
+    background: color-mix(in srgb, var(--zvk-ui-color-foreground) 5%, var(--zvk-ui-color-surface));
+    border: 1px solid var(--zvk-ui-color-border);
+    border-block-end-color: var(--zvk-ui-color-border-strong);
+    border-radius: var(--zvk-ui-radius-sm);
+    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--zvk-ui-color-foreground) 10%, transparent);
+    color: var(--zvk-ui-color-foreground);
+    display: inline-flex;
+    font-family: var(--zvk-ui-font-family-tertiary);
+    font-size: var(--zvk-ui-font-size-xs);
+    font-weight: 650;
+    justify-content: center;
+    letter-spacing: 0;
+    line-height: 1;
+    min-block-size: 1.5rem;
+    min-inline-size: 1.5rem;
+    padding-block: 0;
+    padding-inline: var(--zvk-ui-space-1);
+    vertical-align: baseline;
+    white-space: nowrap;
+  }
+
+  :where(.zvk-ui-kbd[data-size="sm"]) {
+    min-block-size: 1.25rem;
+    min-inline-size: 1.25rem;
+    padding-inline: calc(var(--zvk-ui-space-1) / 2);
+  }
+
+  :where(.zvk-ui-kbd__separator) {
+    color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-xs);
+    line-height: 1;
+  }
 }
 
 
 /* src/components/dialog/dialog.css */
 @layer zvk-ui-components {
   :where(.zvk-ui-dialog__overlay) {
-    --zvk-ui-dialog-overlay-background: color-mix(in srgb, var(--zvk-ui-color-foreground) 28%, transparent);
-    animation: zvk-ui-dialog-overlay-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard);
+    --zvk-ui-dialog-overlay-background: var(--zvk-ui-material-overlay-background);
     background: var(--zvk-ui-dialog-overlay-background);
     inset: 0;
     position: fixed;
-    z-index: 100;
+    z-index: var(--zvk-ui-z-index-overlay);
+  }
+
+  :where(.zvk-ui-dialog__overlay[data-state="open"]) {
+    animation: zvk-ui-dialog-overlay-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-enter) both;
+  }
+
+  :where(.zvk-ui-dialog__overlay[data-state="closed"]) {
+    animation: zvk-ui-dialog-overlay-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit) both;
   }
 
   :where(.zvk-ui-dialog__content) {
-    --zvk-ui-dialog-content-background: var(--zvk-ui-color-surface);
+    --zvk-ui-dialog-content-background: var(--zvk-ui-color-surface-raised);
     --zvk-ui-dialog-content-border: var(--zvk-ui-color-border);
+    backdrop-filter: var(--zvk-ui-dialog-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-dialog-content-background);
     border: 1px solid var(--zvk-ui-dialog-content-border);
     border-radius: var(--zvk-ui-radius-lg);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     left: 50%;
     max-height: min(85vh, 32rem);
     max-width: min(92vw, 32rem);
@@ -2602,11 +3420,15 @@
     top: 50%;
     transform: translate(-50%, -50%);
     width: min(92vw, 32rem);
-    z-index: 101;
+    z-index: var(--zvk-ui-z-index-modal);
   }
 
   :where(.zvk-ui-dialog__content[data-state="open"]) {
-    animation: zvk-ui-dialog-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard);
+    animation: zvk-ui-dialog-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-enter) both;
+  }
+
+  :where(.zvk-ui-dialog__content[data-state="closed"]) {
+    animation: zvk-ui-dialog-content-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit) both;
   }
 
   :where(.zvk-ui-dialog__header, .zvk-ui-dialog__footer) {
@@ -2620,7 +3442,7 @@
 
   :where(.zvk-ui-dialog__title) {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-lg);
     font-weight: 700;
     line-height: var(--zvk-ui-line-height-tight);
@@ -2642,14 +3464,15 @@
   :where(.zvk-ui-dialog__trigger, .zvk-ui-dialog__close) {
     align-items: center;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     justify-content: center;
@@ -2675,15 +3498,10 @@
   }
 
   :where(.zvk-ui-dialog__trigger:focus-visible, .zvk-ui-dialog__close:focus-visible) {
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
-  :where(.zvk-ui-dialog[data-state="closed"]) .zvk-ui-dialog__content,
-  :where(.zvk-ui-dialog__content[data-state="closed"]) {
-    display: none;
-  }
-
   @keyframes zvk-ui-dialog-overlay-enter {
     from {
       opacity: 0;
@@ -2694,6 +3512,16 @@
     }
   }
 
+  @keyframes zvk-ui-dialog-overlay-exit {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
   @keyframes zvk-ui-dialog-content-enter {
     from {
       opacity: 0;
@@ -2706,11 +3534,32 @@
     }
   }
 
+  @keyframes zvk-ui-dialog-content-exit {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(-50%, calc(-50% + 0.25rem)) scale(0.98);
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :where(.zvk-ui-dialog__overlay),
-    :where(.zvk-ui-dialog__content[data-state="open"]) {
+    :where(.zvk-ui-dialog__content) {
       animation: none;
     }
+
+    :where(.zvk-ui-dialog__overlay[data-state="closed"]),
+    :where(.zvk-ui-dialog__content[data-state="closed"]) {
+      opacity: 0;
+    }
+
+    :where(.zvk-ui-dialog__content) {
+      transform: translate(-50%, -50%);
+    }
   }
 }
 
@@ -2722,19 +3571,28 @@
   }
 
   .zvk-ui-alert-dialog__overlay {
-    background: color-mix(in srgb, var(--zvk-ui-color-foreground) 28%, transparent);
+    background: var(--zvk-ui-material-overlay-background);
     inset: 0;
     position: fixed;
-    z-index: 100;
+    z-index: var(--zvk-ui-z-index-overlay);
+  }
+
+  .zvk-ui-alert-dialog__overlay[data-state="open"] {
+    animation: zvk-ui-alert-dialog-overlay-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-enter) both;
+  }
+
+  .zvk-ui-alert-dialog__overlay[data-state="closed"] {
+    animation: zvk-ui-alert-dialog-overlay-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit) both;
   }
 
   .zvk-ui-alert-dialog__content {
-    background: var(--zvk-ui-color-surface);
+    backdrop-filter: var(--zvk-ui-alert-dialog-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
+    background: var(--zvk-ui-color-surface-raised);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-lg);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     inline-size: min(30rem, calc(100vw - 2rem));
     left: 50%;
     line-height: var(--zvk-ui-line-height-normal);
@@ -2742,12 +3600,20 @@
     position: fixed;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: 101;
+    z-index: var(--zvk-ui-z-index-modal);
+  }
+
+  .zvk-ui-alert-dialog__content[data-state="open"] {
+    animation: zvk-ui-alert-dialog-content-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-enter) both;
+  }
+
+  .zvk-ui-alert-dialog__content[data-state="closed"] {
+    animation: zvk-ui-alert-dialog-content-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit) both;
   }
 
   .zvk-ui-alert-dialog__title {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-lg);
     font-weight: 700;
     line-height: var(--zvk-ui-line-height-tight);
@@ -2772,14 +3638,15 @@
   .zvk-ui-alert-dialog__button {
     align-items: center;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     justify-content: center;
@@ -2806,7 +3673,7 @@
 
   .zvk-ui-alert-dialog__trigger:focus-visible,
   .zvk-ui-alert-dialog__button:focus-visible {
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
@@ -2815,6 +3682,66 @@
     cursor: not-allowed;
     opacity: var(--zvk-ui-opacity-disabled);
   }
+
+  @keyframes zvk-ui-alert-dialog-overlay-enter {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zvk-ui-alert-dialog-overlay-exit {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes zvk-ui-alert-dialog-content-enter {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  @keyframes zvk-ui-alert-dialog-content-exit {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-alert-dialog__overlay,
+    .zvk-ui-alert-dialog__content {
+      animation: none;
+    }
+
+    .zvk-ui-alert-dialog__overlay[data-state="closed"],
+    .zvk-ui-alert-dialog__content[data-state="closed"] {
+      opacity: 0;
+    }
+
+    .zvk-ui-alert-dialog__content {
+      transform: translate(-50%, -50%);
+    }
+  }
 }
 
 
@@ -2825,25 +3752,34 @@
   }
 
   .zvk-ui-sheet__overlay {
-    background: color-mix(in srgb, var(--zvk-ui-color-foreground) 24%, transparent);
+    background: var(--zvk-ui-material-overlay-background);
     inset: 0;
     position: fixed;
-    z-index: 100;
+    z-index: var(--zvk-ui-z-index-overlay);
+  }
+
+  .zvk-ui-sheet__overlay[data-state="open"] {
+    animation: zvk-ui-sheet-overlay-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-enter) both;
+  }
+
+  .zvk-ui-sheet__overlay[data-state="closed"] {
+    animation: zvk-ui-sheet-overlay-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit) both;
   }
 
   .zvk-ui-sheet__content {
-    background: var(--zvk-ui-color-surface);
+    backdrop-filter: var(--zvk-ui-sheet-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
+    background: var(--zvk-ui-color-surface-raised);
     border: 1px solid var(--zvk-ui-color-border);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
     display: flex;
     flex-direction: column;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-4);
     line-height: var(--zvk-ui-line-height-normal);
     padding: var(--zvk-ui-space-5);
     position: fixed;
-    z-index: 101;
+    z-index: var(--zvk-ui-z-index-modal);
   }
 
   .zvk-ui-sheet__content[data-side="right"],
@@ -2881,6 +3817,38 @@
     bottom: 0;
   }
 
+  .zvk-ui-sheet__content[data-state="open"][data-side="right"] {
+    animation: zvk-ui-sheet-content-enter-right var(--zvk-ui-duration-slow) var(--zvk-ui-ease-emphasized) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="closed"][data-side="right"] {
+    animation: zvk-ui-sheet-content-exit-right var(--zvk-ui-duration-slow) var(--zvk-ui-ease-exit) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="open"][data-side="left"] {
+    animation: zvk-ui-sheet-content-enter-left var(--zvk-ui-duration-slow) var(--zvk-ui-ease-emphasized) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="closed"][data-side="left"] {
+    animation: zvk-ui-sheet-content-exit-left var(--zvk-ui-duration-slow) var(--zvk-ui-ease-exit) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="open"][data-side="top"] {
+    animation: zvk-ui-sheet-content-enter-top var(--zvk-ui-duration-slow) var(--zvk-ui-ease-emphasized) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="closed"][data-side="top"] {
+    animation: zvk-ui-sheet-content-exit-top var(--zvk-ui-duration-slow) var(--zvk-ui-ease-exit) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="open"][data-side="bottom"] {
+    animation: zvk-ui-sheet-content-enter-bottom var(--zvk-ui-duration-slow) var(--zvk-ui-ease-emphasized) both;
+  }
+
+  .zvk-ui-sheet__content[data-state="closed"][data-side="bottom"] {
+    animation: zvk-ui-sheet-content-exit-bottom var(--zvk-ui-duration-slow) var(--zvk-ui-ease-exit) both;
+  }
+
   .zvk-ui-sheet__header {
     display: grid;
     gap: var(--zvk-ui-space-2);
@@ -2888,7 +3856,7 @@
 
   .zvk-ui-sheet__title {
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-lg);
     font-weight: 700;
     line-height: var(--zvk-ui-line-height-tight);
@@ -2913,14 +3881,15 @@
   .zvk-ui-sheet__close {
     align-items: center;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     justify-content: center;
@@ -2947,14 +3916,146 @@
 
   .zvk-ui-sheet__trigger:focus-visible,
   .zvk-ui-sheet__close:focus-visible {
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
-  .zvk-ui-sheet__trigger:disabled,
-  .zvk-ui-sheet__close:disabled {
-    cursor: not-allowed;
-    opacity: var(--zvk-ui-opacity-disabled);
+  .zvk-ui-sheet__trigger:disabled,
+  .zvk-ui-sheet__close:disabled {
+    cursor: not-allowed;
+    opacity: var(--zvk-ui-opacity-disabled);
+  }
+
+  @keyframes zvk-ui-sheet-overlay-enter {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zvk-ui-sheet-overlay-exit {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-enter-right {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-exit-right {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-enter-left {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-exit-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-enter-top {
+    from {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-exit-top {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-enter-bottom {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes zvk-ui-sheet-content-exit-bottom {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-sheet__overlay,
+    .zvk-ui-sheet__content {
+      animation: none;
+    }
+
+    .zvk-ui-sheet__overlay[data-state="closed"],
+    .zvk-ui-sheet__content[data-state="closed"] {
+      opacity: 0;
+    }
+
+    .zvk-ui-sheet__content {
+      transform: none;
+    }
   }
 }
 
@@ -2969,14 +4070,15 @@
   :where(.zvk-ui-popover__trigger) {
     align-items: center;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     justify-content: center;
@@ -2999,26 +4101,59 @@
   }
 
   :where(.zvk-ui-popover__trigger:focus-visible) {
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
   :where(.zvk-ui-popover__content) {
+    --zvk-ui-popover-motion-x: 0;
+    --zvk-ui-popover-motion-y: -0.25rem;
+    backdrop-filter: var(--zvk-ui-popover-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
+    color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
     padding: var(--zvk-ui-space-3);
     position: absolute;
     max-width: var(--zvk-ui-floating-available-width);
     max-height: var(--zvk-ui-floating-available-height);
     transform-origin: var(--zvk-ui-popover-transform-origin);
-    z-index: 1;
+    z-index: var(--zvk-ui-z-popover, var(--zvk-ui-z-index-popover));
     pointer-events: auto;
   }
 
+  :where(.zvk-ui-popover__content[data-side="top"]) {
+    --zvk-ui-popover-motion-y: 0.25rem;
+  }
+
+  :where(.zvk-ui-popover__content[data-side="bottom"]) {
+    --zvk-ui-popover-motion-y: -0.25rem;
+  }
+
+  :where(.zvk-ui-popover__content[data-side="left"]) {
+    --zvk-ui-popover-motion-x: 0.25rem;
+    --zvk-ui-popover-motion-y: 0;
+  }
+
+  :where(.zvk-ui-popover__content[data-side="right"]) {
+    --zvk-ui-popover-motion-x: -0.25rem;
+    --zvk-ui-popover-motion-y: 0;
+  }
+
   :where(.zvk-ui-popover__content[data-state="open"]) {
-    animation: zvk-ui-popover-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard);
+    animation: zvk-ui-popover-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-enter);
+  }
+
+  :where(.zvk-ui-popover__content[data-state="closed"]:not([hidden])) {
+    animation: zvk-ui-popover-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit);
+    pointer-events: none;
+  }
+
+  :where(.zvk-ui-popover__content[aria-hidden="true"]) {
+    pointer-events: none;
   }
 
   :where(.zvk-ui-popover__content[hidden]) {
@@ -3028,17 +4163,29 @@
   @keyframes zvk-ui-popover-enter {
     from {
       opacity: 0;
-      transform: scale(0.96) translateY(-0.125rem);
+      transform: translate(var(--zvk-ui-popover-motion-x), var(--zvk-ui-popover-motion-y)) scale(0.96);
     }
 
     to {
       opacity: 1;
-      transform: scale(1) translateY(0);
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes zvk-ui-popover-exit {
+    from {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-popover-motion-x), var(--zvk-ui-popover-motion-y)) scale(0.96);
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :where(.zvk-ui-popover__content[data-state="open"]) {
+    :where(.zvk-ui-popover__content[data-state="open"], .zvk-ui-popover__content[data-state="closed"]:not([hidden])) {
       animation: none;
     }
   }
@@ -3057,13 +4204,15 @@
   }
 
   :where(.zvk-ui-hover-card__content) {
-    animation: zvk-ui-hover-card-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    --zvk-ui-hover-card-motion-x: 0;
+    --zvk-ui-hover-card-motion-y: -0.1875rem;
+    backdrop-filter: var(--zvk-ui-hover-card-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface-raised);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     max-width: min(20rem, var(--zvk-ui-floating-available-width));
     padding: var(--zvk-ui-space-3);
@@ -3072,13 +4221,40 @@
     z-index: var(--zvk-ui-z-index-popover, var(--zvk-ui-z-index-overlay));
   }
 
+  :where(.zvk-ui-hover-card__content[data-side="top"]) {
+    --zvk-ui-hover-card-motion-y: 0.1875rem;
+  }
+
+  :where(.zvk-ui-hover-card__content[data-side="bottom"]) {
+    --zvk-ui-hover-card-motion-y: -0.1875rem;
+  }
+
+  :where(.zvk-ui-hover-card__content[data-side="left"]) {
+    --zvk-ui-hover-card-motion-x: 0.1875rem;
+    --zvk-ui-hover-card-motion-y: 0;
+  }
+
+  :where(.zvk-ui-hover-card__content[data-side="right"]) {
+    --zvk-ui-hover-card-motion-x: -0.1875rem;
+    --zvk-ui-hover-card-motion-y: 0;
+  }
+
   :where(.zvk-ui-hover-card__content:focus-visible) {
-    box-shadow: var(--zvk-ui-shadow-md), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
-  :where(.zvk-ui-hover-card__content[data-state="closed"]) {
-    animation: none;
+  :where(.zvk-ui-hover-card__content[data-state="open"]) {
+    animation: zvk-ui-hover-card-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+  }
+
+  :where(.zvk-ui-hover-card__content[data-state="closed"]:not([hidden])) {
+    animation: zvk-ui-hover-card-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit);
+    pointer-events: none;
+  }
+
+  :where(.zvk-ui-hover-card__content[aria-hidden="true"]) {
+    pointer-events: none;
   }
 
   :where(.zvk-ui-hover-card__content[hidden]) {
@@ -3088,17 +4264,29 @@
   @keyframes zvk-ui-hover-card-enter {
     from {
       opacity: 0;
-      transform: scale(0.98) translateY(0.125rem);
+      transform: translate(var(--zvk-ui-hover-card-motion-x), var(--zvk-ui-hover-card-motion-y)) scale(0.98);
     }
 
     to {
       opacity: 1;
-      transform: scale(1) translateY(0);
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes zvk-ui-hover-card-exit {
+    from {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-hover-card-motion-x), var(--zvk-ui-hover-card-motion-y)) scale(0.98);
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :where(.zvk-ui-hover-card__content) {
+    :where(.zvk-ui-hover-card__content[data-state="open"], .zvk-ui-hover-card__content[data-state="closed"]:not([hidden])) {
       animation: none;
     }
   }
@@ -3108,12 +4296,14 @@
 /* src/components/tooltip/tooltip.css */
 @layer zvk-ui-components {
   :where(.zvk-ui-tooltip) {
-    animation: zvk-ui-tooltip-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+    --zvk-ui-tooltip-motion-x: 0;
+    --zvk-ui-tooltip-motion-y: -0.125rem;
+    backdrop-filter: var(--zvk-ui-tooltip-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface-raised);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     max-width: min(16rem, var(--zvk-ui-floating-available-width));
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
@@ -3123,20 +4313,62 @@
     z-index: var(--zvk-ui-z-index-tooltip, var(--zvk-ui-z-index-overlay));
   }
 
+  :where(.zvk-ui-tooltip[data-side="top"]) {
+    --zvk-ui-tooltip-motion-y: 0.125rem;
+  }
+
+  :where(.zvk-ui-tooltip[data-side="bottom"]) {
+    --zvk-ui-tooltip-motion-y: -0.125rem;
+  }
+
+  :where(.zvk-ui-tooltip[data-side="left"]) {
+    --zvk-ui-tooltip-motion-x: 0.125rem;
+    --zvk-ui-tooltip-motion-y: 0;
+  }
+
+  :where(.zvk-ui-tooltip[data-side="right"]) {
+    --zvk-ui-tooltip-motion-x: -0.125rem;
+    --zvk-ui-tooltip-motion-y: 0;
+  }
+
+  :where(.zvk-ui-tooltip[data-state="open"]) {
+    animation: zvk-ui-tooltip-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+  }
+
+  :where(.zvk-ui-tooltip[data-state="closed"]:not([hidden])) {
+    animation: zvk-ui-tooltip-exit var(--zvk-ui-duration-instant) var(--zvk-ui-ease-exit);
+  }
+
+  :where(.zvk-ui-tooltip[hidden]) {
+    display: none;
+  }
+
   @keyframes zvk-ui-tooltip-enter {
     from {
       opacity: 0;
-      transform: scale(0.96) translateY(0.125rem);
+      transform: translate(var(--zvk-ui-tooltip-motion-x), var(--zvk-ui-tooltip-motion-y));
     }
 
     to {
       opacity: 1;
-      transform: scale(1) translateY(0);
+      transform: translate(0, 0);
+    }
+  }
+
+  @keyframes zvk-ui-tooltip-exit {
+    from {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-tooltip-motion-x), var(--zvk-ui-tooltip-motion-y));
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :where(.zvk-ui-tooltip) {
+    :where(.zvk-ui-tooltip[data-state="open"], .zvk-ui-tooltip[data-state="closed"]:not([hidden])) {
       animation: none;
     }
   }
@@ -3148,16 +4380,18 @@
   :where(.zvk-ui-dropdown-menu__trigger) {
     align-items: center;
     appearance: none;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-xs);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs);
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
+    gap: var(--zvk-ui-control-gap);
     justify-content: center;
     line-height: 1;
     min-block-size: var(--zvk-ui-control-height-md);
@@ -3167,6 +4401,33 @@
     user-select: none;
   }
 
+  :where(.zvk-ui-dropdown-menu__trigger-label) {
+    min-width: 0;
+  }
+
+  :where(.zvk-ui-dropdown-menu__trigger-indicator) {
+    color: var(--zvk-ui-color-muted-foreground);
+    display: inline-grid;
+    flex: 0 0 auto;
+    inline-size: 1rem;
+    place-items: center;
+    transition: color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), transform var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
+  }
+
+  .zvk-ui-dropdown-menu__trigger-indicator::before {
+    block-size: 0.45rem;
+    border-block-end: 1.5px solid currentColor;
+    border-inline-end: 1.5px solid currentColor;
+    content: "";
+    inline-size: 0.45rem;
+    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
+  }
+
+  :where(.zvk-ui-dropdown-menu__trigger[data-state="open"] .zvk-ui-dropdown-menu__trigger-indicator) {
+    color: var(--zvk-ui-color-foreground);
+    transform: rotate(180deg);
+  }
+
   :where(.zvk-ui-dropdown-menu__trigger:hover:not(:disabled)) {
     background: var(--zvk-ui-control-hover);
     border-color: var(--zvk-ui-color-border-strong);
@@ -3178,23 +4439,63 @@
   }
 
   :where(.zvk-ui-dropdown-menu__trigger:focus-visible) {
-    box-shadow: var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-shadow-xs), var(--zvk-ui-focus-ring);
     outline: 0;
   }
 
   :where(.zvk-ui-dropdown-menu__content) {
     --zvk-ui-dropdown-menu-min-width: min-content;
+    --zvk-ui-dropdown-menu-motion-x: 0;
+    --zvk-ui-dropdown-menu-motion-y: -0.25rem;
+    backdrop-filter: var(--zvk-ui-dropdown-menu-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface-raised);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
     min-width: var(--zvk-ui-dropdown-menu-min-width);
     outline: none;
     padding: var(--zvk-ui-space-1);
     position: absolute;
   }
 
+  :where(.zvk-ui-dropdown-menu__content[data-side="top"]) {
+    --zvk-ui-dropdown-menu-motion-y: 0.25rem;
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[data-side="bottom"]) {
+    --zvk-ui-dropdown-menu-motion-y: -0.25rem;
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[data-side="left"]) {
+    --zvk-ui-dropdown-menu-motion-x: 0.25rem;
+    --zvk-ui-dropdown-menu-motion-y: 0;
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[data-side="right"]) {
+    --zvk-ui-dropdown-menu-motion-x: -0.25rem;
+    --zvk-ui-dropdown-menu-motion-y: 0;
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[data-state="open"]) {
+    animation: zvk-ui-dropdown-menu-content-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[data-state="closed"]:not([hidden])) {
+    animation: zvk-ui-dropdown-menu-content-exit var(--zvk-ui-duration-fast) var(--zvk-ui-ease-exit);
+    pointer-events: none;
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[aria-hidden="true"]) {
+    pointer-events: none;
+  }
+
+  :where(.zvk-ui-dropdown-menu__content[hidden]) {
+    display: none;
+  }
+
   :where(.zvk-ui-dropdown-menu__item) {
     all: unset;
     align-items: center;
@@ -3202,7 +4503,7 @@
     cursor: default;
     display: flex;
     gap: var(--zvk-ui-space-2);
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
     text-align: left;
     user-select: none;
@@ -3227,6 +4528,7 @@
 
   :where(.zvk-ui-dropdown-menu__label) {
     color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 600;
     padding: var(--zvk-ui-space-1) var(--zvk-ui-space-3);
@@ -3256,6 +4558,40 @@
     display: grid;
     gap: var(--zvk-ui-space-1);
   }
+
+  @keyframes zvk-ui-dropdown-menu-content-enter {
+    from {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-dropdown-menu-motion-x), var(--zvk-ui-dropdown-menu-motion-y)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @keyframes zvk-ui-dropdown-menu-content-exit {
+    from {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-dropdown-menu-motion-x), var(--zvk-ui-dropdown-menu-motion-y)) scale(0.98);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-dropdown-menu__trigger-indicator) {
+      transition: none;
+    }
+
+    :where(.zvk-ui-dropdown-menu__content[data-state="open"], .zvk-ui-dropdown-menu__content[data-state="closed"]:not([hidden])) {
+      animation: none;
+    }
+  }
 }
 
 
@@ -3323,7 +4659,7 @@
     background: var(--zvk-ui-color-surface);
     color: var(--zvk-ui-color-foreground);
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-2);
     line-height: var(--zvk-ui-line-height-normal);
   }
@@ -3333,11 +4669,11 @@
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
     color: var(--zvk-ui-color-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     line-height: var(--zvk-ui-line-height-tight);
-    min-block-size: 2.5rem;
-    padding: 0 var(--zvk-ui-space-3);
+    min-block-size: var(--zvk-ui-control-height-md);
+    padding: 0 var(--zvk-ui-control-padding-x);
     inline-size: 100%;
   }
 
@@ -3355,6 +4691,7 @@
   }
 
   .zvk-ui-command__empty,
+  .zvk-ui-command__loading,
   .zvk-ui-command__group-heading {
     color: var(--zvk-ui-color-muted-foreground);
     font-size: var(--zvk-ui-font-size-xs);
@@ -3397,7 +4734,7 @@
   }
 
   .zvk-ui-command-dialog {
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     padding: var(--zvk-ui-space-4);
   }
 
@@ -3424,6 +4761,7 @@
 
   .zvk-ui-combobox__label {
     color: var(--zvk-ui-color-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
   }
@@ -3436,14 +4774,15 @@
   }
 
   .zvk-ui-combobox__input {
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-control-background);
     border: 1px solid var(--zvk-ui-control-border);
     border-radius: var(--zvk-ui-radius-md);
     color: var(--zvk-ui-color-foreground);
     font: inherit;
     inline-size: 100%;
-    min-block-size: 2.5rem;
-    padding: 0 var(--zvk-ui-space-3);
+    min-block-size: var(--zvk-ui-control-height-md);
+    padding: 0 var(--zvk-ui-control-padding-x);
   }
 
   .zvk-ui-combobox__input:hover:not(:disabled) {
@@ -3451,11 +4790,11 @@
   }
 
   .zvk-ui-combobox__input[data-size="sm"] {
-    min-block-size: 2rem;
+    min-block-size: var(--zvk-ui-control-height-sm);
   }
 
   .zvk-ui-combobox__input[data-size="lg"] {
-    min-block-size: 3rem;
+    min-block-size: var(--zvk-ui-control-height-lg);
   }
 
   .zvk-ui-combobox__input:focus-visible {
@@ -3483,11 +4822,15 @@
   }
 
   .zvk-ui-combobox__popup {
+    --zvk-ui-combobox-motion-x: 0;
+    --zvk-ui-combobox-motion-y: -0.1875rem;
+    backdrop-filter: var(--zvk-ui-combobox-popup-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-card-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-1);
     max-block-size: min(16rem, var(--zvk-ui-floating-available-height));
     overflow: auto;
@@ -3495,6 +4838,28 @@
     z-index: var(--zvk-ui-z-popover);
   }
 
+  .zvk-ui-combobox__popup[data-side="top"] {
+    --zvk-ui-combobox-motion-y: 0.1875rem;
+  }
+
+  .zvk-ui-combobox__popup[data-side="bottom"] {
+    --zvk-ui-combobox-motion-y: -0.1875rem;
+  }
+
+  .zvk-ui-combobox__popup[data-side="left"] {
+    --zvk-ui-combobox-motion-x: 0.1875rem;
+    --zvk-ui-combobox-motion-y: 0;
+  }
+
+  .zvk-ui-combobox__popup[data-side="right"] {
+    --zvk-ui-combobox-motion-x: -0.1875rem;
+    --zvk-ui-combobox-motion-y: 0;
+  }
+
+  .zvk-ui-combobox__popup[data-state="open"] {
+    animation: zvk-ui-combobox-popup-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+  }
+
   .zvk-ui-combobox__option {
     border-radius: var(--zvk-ui-radius-sm);
     color: var(--zvk-ui-color-foreground);
@@ -3536,6 +4901,24 @@
     color: var(--zvk-ui-color-foreground);
     outline: 0;
   }
+
+  @keyframes zvk-ui-combobox-popup-enter {
+    from {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-combobox-motion-x), var(--zvk-ui-combobox-motion-y)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-combobox__popup[data-state="open"] {
+      animation: none;
+    }
+  }
 }
 
 
@@ -3550,17 +4933,45 @@
   }
 
   .zvk-ui-context-menu__content {
+    --zvk-ui-context-menu-motion-x: 0;
+    --zvk-ui-context-menu-motion-y: -0.1875rem;
+    backdrop-filter: var(--zvk-ui-context-menu-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
     display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
     gap: var(--zvk-ui-space-1);
     min-inline-size: 12rem;
     padding: var(--zvk-ui-space-1);
     position: fixed;
-    z-index: 110;
+    z-index: var(--zvk-ui-z-popover);
+  }
+
+  .zvk-ui-context-menu__content[data-side="top"] {
+    --zvk-ui-context-menu-motion-y: 0.1875rem;
+  }
+
+  .zvk-ui-context-menu__content[data-side="bottom"] {
+    --zvk-ui-context-menu-motion-y: -0.1875rem;
+  }
+
+  .zvk-ui-context-menu__content[data-side="left"] {
+    --zvk-ui-context-menu-motion-x: 0.1875rem;
+    --zvk-ui-context-menu-motion-y: 0;
+  }
+
+  .zvk-ui-context-menu__content[data-side="right"] {
+    --zvk-ui-context-menu-motion-x: -0.1875rem;
+    --zvk-ui-context-menu-motion-y: 0;
+  }
+
+  .zvk-ui-context-menu__content[data-state="open"] {
+    animation: zvk-ui-context-menu-content-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+    transform-origin: top left;
   }
 
   .zvk-ui-context-menu__item {
@@ -3573,7 +4984,7 @@
     display: flex;
     font: inherit;
     gap: var(--zvk-ui-space-2);
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
     text-align: start;
   }
@@ -3601,6 +5012,7 @@
 
   .zvk-ui-context-menu__label {
     color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 600;
     padding: var(--zvk-ui-space-1) var(--zvk-ui-space-3);
@@ -3619,19 +5031,40 @@
   .zvk-ui-context-menu__item-label {
     min-width: 0;
   }
+
+  @keyframes zvk-ui-context-menu-content-enter {
+    from {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-context-menu-motion-x), var(--zvk-ui-context-menu-motion-y)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-context-menu__content[data-state="open"] {
+      animation: none;
+    }
+  }
 }
 
 
 /* src/components/menubar/menubar.css */
 @layer zvk-ui-components {
   .zvk-ui-menubar {
+    align-self: start;
     align-items: center;
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
     color: var(--zvk-ui-color-foreground);
     display: inline-flex;
     gap: var(--zvk-ui-space-1);
+    justify-self: start;
     padding: var(--zvk-ui-space-1);
   }
 
@@ -3656,24 +5089,52 @@
   }
 
   .zvk-ui-menubar__content {
+    --zvk-ui-menubar-motion-x: 0;
+    --zvk-ui-menubar-motion-y: -0.1875rem;
+    backdrop-filter: var(--zvk-ui-menubar-content-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
     display: grid;
+    font-family: var(--zvk-ui-font-family-primary);
+    font-size: var(--zvk-ui-font-size-sm);
     gap: var(--zvk-ui-space-1);
     min-inline-size: 12rem;
     padding: var(--zvk-ui-space-1);
     position: fixed;
-    z-index: 110;
+    z-index: var(--zvk-ui-z-popover);
+  }
+
+  .zvk-ui-menubar__content[data-side="top"] {
+    --zvk-ui-menubar-motion-y: 0.1875rem;
+  }
+
+  .zvk-ui-menubar__content[data-side="bottom"] {
+    --zvk-ui-menubar-motion-y: -0.1875rem;
+  }
+
+  .zvk-ui-menubar__content[data-side="left"] {
+    --zvk-ui-menubar-motion-x: 0.1875rem;
+    --zvk-ui-menubar-motion-y: 0;
+  }
+
+  .zvk-ui-menubar__content[data-side="right"] {
+    --zvk-ui-menubar-motion-x: -0.1875rem;
+    --zvk-ui-menubar-motion-y: 0;
+  }
+
+  .zvk-ui-menubar__content[data-state="open"] {
+    animation: zvk-ui-menubar-content-enter var(--zvk-ui-duration-fast) var(--zvk-ui-ease-enter);
+    transform-origin: top center;
   }
 
   .zvk-ui-menubar__item {
     align-items: center;
     display: flex;
     gap: var(--zvk-ui-space-2);
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: var(--zvk-ui-space-2) var(--zvk-ui-space-3);
     text-align: start;
   }
@@ -3711,6 +5172,7 @@
 
   .zvk-ui-menubar__label {
     color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 600;
     padding: var(--zvk-ui-space-1) var(--zvk-ui-space-3);
@@ -3721,6 +5183,24 @@
     font-size: var(--zvk-ui-font-size-xs);
     margin-inline-start: auto;
   }
+
+  @keyframes zvk-ui-menubar-content-enter {
+    from {
+      opacity: 0;
+      transform: translate(var(--zvk-ui-menubar-motion-x), var(--zvk-ui-menubar-motion-y)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(0, 0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .zvk-ui-menubar__content[data-state="open"] {
+      animation: none;
+    }
+  }
 }
 
 
@@ -3784,7 +5264,7 @@
     color: var(--zvk-ui-color-foreground);
     cursor: pointer;
     display: inline-flex;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     font-weight: 600;
     justify-content: center;
@@ -3812,10 +5292,16 @@
 
   :where(.zvk-ui-carousel__page) {
     color: var(--zvk-ui-color-muted-foreground);
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     font-size: var(--zvk-ui-font-size-sm);
     line-height: var(--zvk-ui-line-height-normal);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-carousel__viewport) {
+      scroll-behavior: auto;
+    }
+  }
 }
 
 
@@ -3909,6 +5395,7 @@
   }
 
   :where(.zvk-ui-sidebar-shell__sidebar) {
+    backdrop-filter: var(--zvk-ui-sidebar-shell-sidebar-backdrop-filter, var(--zvk-ui-material-surface-backdrop-filter));
     background: var(--zvk-ui-color-surface);
     border: 1px solid var(--zvk-ui-color-border);
     border-radius: var(--zvk-ui-radius-lg);
@@ -3956,7 +5443,7 @@
   :where(.zvk-ui-sectioned-sidebar-nav) {
     color: var(--zvk-ui-color-foreground);
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-4);
   }
 
@@ -3967,6 +5454,7 @@
 
   :where(.zvk-ui-sectioned-sidebar-nav__section-title) {
     color: var(--zvk-ui-color-muted-foreground);
+    font-family: var(--zvk-ui-font-family-secondary);
     font-size: var(--zvk-ui-font-size-xs);
     font-weight: 700;
     letter-spacing: 0;
@@ -4016,9 +5504,10 @@
   }
 
   :where(.zvk-ui-sectioned-sidebar-nav__item-control[data-state="active"]) {
+    backdrop-filter: var(--zvk-ui-material-control-backdrop-filter);
     background: var(--zvk-ui-color-primary-soft);
     border-color: var(--zvk-ui-color-primary-border);
-    color: var(--zvk-ui-color-primary-foreground);
+    color: var(--zvk-ui-color-primary);
   }
 
   :where(.zvk-ui-sectioned-sidebar-nav__item-control[data-disabled="true"]) {
@@ -4145,15 +5634,17 @@
 
   :where(.zvk-ui-toast) {
     --zvk-ui-toast-accent: var(--zvk-ui-color-border-strong);
+    backdrop-filter: var(--zvk-ui-toast-backdrop-filter, var(--zvk-ui-material-floating-backdrop-filter));
     background: var(--zvk-ui-color-surface-raised);
     border: 1px solid var(--zvk-ui-color-border);
     border-inline-start: 3px solid var(--zvk-ui-toast-accent);
     border-radius: var(--zvk-ui-radius-md);
-    box-shadow: var(--zvk-ui-shadow-md);
+    box-shadow: var(--zvk-ui-material-glass-highlight), var(--zvk-ui-material-glass-shadow);
     color: var(--zvk-ui-color-foreground);
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-2);
+    animation: zvk-ui-toast-enter var(--zvk-ui-duration-normal) var(--zvk-ui-ease-standard) both;
     padding: var(--zvk-ui-space-3);
   }
 
@@ -4212,6 +5703,7 @@
     justify-content: center;
     min-block-size: var(--zvk-ui-control-height-sm);
     padding-inline: var(--zvk-ui-space-2);
+    transition: background var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), border-color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), box-shadow var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard), color var(--zvk-ui-duration-fast) var(--zvk-ui-ease-standard);
   }
 
   :where(.zvk-ui-toast__action:hover:not(:disabled)),
@@ -4226,6 +5718,22 @@
     outline: 0;
     box-shadow: var(--zvk-ui-focus-ring);
   }
+
+  @keyframes zvk-ui-toast-enter {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.zvk-ui-toast) {
+      animation: none;
+    }
+  }
 }
 
 
@@ -4234,7 +5742,7 @@
   :where(.zvk-ui-conversation) {
     color: var(--zvk-ui-color-foreground);
     display: grid;
-    font-family: var(--zvk-ui-font-family-sans);
+    font-family: var(--zvk-ui-font-family-primary);
     gap: var(--zvk-ui-space-4);
   }