@teseor/css 1.1.0 → 1.2.1

package/dist/index.css

@@ -9,26 +9,25 @@
 /* 00. Config: Layer definitions + Design tokens */
 /* Fonts (Google Fonts CDN) */
 :root {
-  --ui-hue-primary: 220;
-  --ui-hue-success: 142;
-  --ui-hue-warning: 38;
-  --ui-hue-danger: 0;
-  --ui-color-neutral-50: hsl(var(--ui-hue-primary) 10% 98%);
-  --ui-color-neutral-100: hsl(var(--ui-hue-primary) 10% 96%);
-  --ui-color-neutral-200: hsl(var(--ui-hue-primary) 10% 90%);
-  --ui-color-neutral-300: hsl(var(--ui-hue-primary) 10% 80%);
-  --ui-color-neutral-400: hsl(var(--ui-hue-primary) 10% 60%);
-  --ui-color-neutral-500: hsl(var(--ui-hue-primary) 10% 45%);
-  --ui-color-neutral-600: hsl(var(--ui-hue-primary) 10% 35%);
-  --ui-color-neutral-700: hsl(var(--ui-hue-primary) 10% 25%);
-  --ui-color-neutral-800: hsl(var(--ui-hue-primary) 10% 15%);
-  --ui-color-neutral-900: hsl(var(--ui-hue-primary) 10% 10%);
-  --ui-color-primary-light: hsl(var(--ui-hue-primary) 85% 65%);
-  --ui-color-primary: hsl(var(--ui-hue-primary) 85% 50%);
-  --ui-color-primary-dark: hsl(var(--ui-hue-primary) 85% 40%);
-  --ui-color-success: hsl(var(--ui-hue-success) 70% 45%);
-  --ui-color-warning: hsl(var(--ui-hue-warning) 90% 50%);
-  --ui-color-danger: hsl(var(--ui-hue-danger) 70% 50%);
+  --ui-color-primary: oklch(55% 0.22 250);
+  --ui-color-success: oklch(60% 0.18 145);
+  --ui-color-warning: oklch(75% 0.18 70);
+  --ui-color-danger: oklch(60% 0.22 25);
+  --ui-color-neutral: oklch(50% 0.02 250);
+  --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
+  --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
+  --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
+  --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
+  --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
+  --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);
+  --ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);
+  --ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);
+  --ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);
+  --ui-color-neutral-500: var(--ui-color-neutral);
+  --ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);
+  --ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);
+  --ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);
+  --ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black);
 }
 :root {
   --ui-space-px: calc(var(--ui-unit) * 0.125);
@@ -135,9 +134,9 @@
   --ui-border-width-lg: calc(var(--ui-unit) * 0.5);
 }
 :root {
-  --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary) 10% 20% / 0.05);
-  --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary) 10% 20% / 0.1);
-  --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary) 10% 20% / 0.15);
+  --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);
+  --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);
+  --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15);
 }
 @layer tokens {
   :root {
@@ -715,13 +714,13 @@
   .ui-sidebar-nav--collapsed {
     --ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3));
   }
-  .ui-sidebar-nav--collapsed .sidebar-nav__label,
-  .ui-sidebar-nav--collapsed .sidebar-nav__badge,
-  .ui-sidebar-nav--collapsed .sidebar-nav__group-label,
-  .ui-sidebar-nav--collapsed .sidebar-nav__subgroup-label {
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__label,
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label {
     display: none;
   }
-  .ui-sidebar-nav--collapsed .sidebar-nav__item {
+  .ui-sidebar-nav--collapsed .ui-sidebar-nav__item {
     justify-content: center;
     padding-inline: var(--ui-space-1);
   }
@@ -768,134 +767,216 @@
 }
 /* 04. Components */
 @layer components.tokens {
-  .ui-accordion {
-    --ui-_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --ui-_border-width: var(--ui-accordion-border-width, 1px);
-    --ui-_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)));
+  .ui-button {
+    --ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));
+    --ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));
+    --ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));
+    --ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: var(--ui-_accent);
+    --ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);
+    --ui-_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+  }
+  .ui-button--sm {
+    --ui-ctx-size: var(--ui-size-sm, 0.75rem);
+    --ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));
+    --ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem));
+  }
+  .ui-button--md {
+    --ui-ctx-size: var(--ui-size-md, 1rem);
+    --ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));
+    --ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem));
+  }
+  .ui-button--lg {
+    --ui-ctx-size: var(--ui-size-lg, 1.25rem);
+    --ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));
+    --ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));
+    --ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem));
+  }
+  .ui-button--secondary {
+    --ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
+    --ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));
+    --ui-_text: var(--ui-color-text, hsl(220, 10%, 10%));
+  }
+  .ui-button--ghost {
+    --ui-_bg: transparent;
+    --ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);
+    --ui-_text: var(--ui-_accent);
+  }
+  .ui-button--outline {
+    --ui-_bg: transparent;
+    --ui-_bg-hover: var(--ui-_accent);
+    --ui-_text: var(--ui-_accent);
+    --ui-_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
+    --ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor;
+  }
+  .ui-button--danger {
+    --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
+  }
+  .ui-button--link {
+    --ui-_bg: transparent;
+    --ui-_bg-hover: transparent;
+    --ui-_text: var(--ui-_accent);
+    --ui-_text-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);
+    --ui-_height: auto;
+    --ui-_padding-x: 0;
+    --ui-_radius: 0;
+  }
+  .ui-button--icon {
+    --ui-_padding-x: 0;
+  }
+  .ui-button--radius-none {
+    --ui-_radius: 0;
+  }
+  .ui-button--radius-sm {
+    --ui-_radius: var(--ui-radius-sm, 0.25rem);
+  }
+  .ui-button--radius-lg {
+    --ui-_radius: var(--ui-radius-lg, 1rem);
+  }
+  .ui-button--radius-full {
+    --ui-_radius: 624.9375rem;
   }
 }
 @layer components.styles {
-  .ui-accordion {
+  .ui-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-1, 0.5rem);
+    block-size: var(--ui-_height);
+    padding-inline: var(--ui-_padding-x);
+    margin: 0;
+    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
+    font-size: var(--ui-_font-size);
+    font-weight: var(--ui-_font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--ui-_text);
+    background: var(--ui-_bg);
+    border: var(--ui-_border, none);
     border-radius: var(--ui-_radius);
-    outline: var(--ui-_border-width) solid var(--ui-_border-color);
-    outline-offset: calc(var(--ui-_border-width) * -1);
+    cursor: pointer;
+    transition: background-color var(--ui-duration-base) var(--ui-ease-default), color var(--ui-duration-base) var(--ui-ease-default), transform var(--ui-duration-fast) var(--ui-ease-default);
   }
-  .ui-accordion > .disclosure {
-    --ui-_border-width: 0;
-    border: none;
-    border-radius: 0;
+  .ui-button:hover, .ui-button--hover {
+    color: var(--ui-_text-hover, var(--ui-_text));
+    background: var(--ui-_bg-hover);
   }
-  .ui-accordion > .disclosure + .disclosure {
-    border-block-start: 1px solid var(--ui-_border-color);
+  .ui-button:focus-visible, .ui-button--focus {
+    outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));
+    outline-offset: var(--ui-border-width-md, 0.125rem);
   }
-  .ui-accordion > .disclosure:first-child .disclosure__trigger {
-    border-start-start-radius: var(--ui-_radius);
-    border-start-end-radius: var(--ui-_radius);
+  .ui-button:active, .ui-button--active {
+    transform: scale(0.98);
   }
-  .ui-accordion > .disclosure:last-child .disclosure__trigger {
-    border-end-start-radius: var(--ui-_radius);
-    border-end-end-radius: var(--ui-_radius);
+  .ui-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
-  .ui-accordion > .disclosure:last-child .disclosure__content {
-    border-end-start-radius: var(--ui-_radius);
-    border-end-end-radius: var(--ui-_radius);
+  .ui-button:disabled:hover {
+    background: var(--ui-_bg);
+    transform: none;
   }
-  .ui-accordion--borderless {
-    border: none;
+  .ui-button--icon {
+    inline-size: var(--ui-_height);
   }
-  .ui-accordion--borderless > .disclosure + .disclosure {
-    border-block-start: none;
+  .ui-button--block {
+    inline-size: 100%;
   }
-  .ui-accordion--separated {
-    display: flex;
-    flex-direction: column;
-    gap: calc(0.5rem * 1);
-    border: none;
+  .ui-button--link {
+    text-decoration: underline;
+    text-underline-offset: var(--ui-space-quarter);
   }
-  .ui-accordion--separated > .disclosure {
-    border: 1px solid var(--ui-_border-color);
-    border-radius: var(--ui-_radius);
+  .ui-button--link:hover {
+    text-decoration-thickness: var(--ui-space-quarter);
   }
-  .ui-accordion--separated > .disclosure + .disclosure {
-    border-block-start: 1px solid var(--ui-_border-color);
+  .ui-button__icon {
+    flex-shrink: 0;
+    block-size: 1em;
+    inline-size: 1em;
   }
-}
-@layer components.tokens {
-  .ui-alert {
-    --ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));
-    --ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));
-    --ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));
-    --ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-alert-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
-    --ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_icon-color: var(--ui-alert-icon-color, currentcolor);
+  .ui-button__icon--start {
+    order: -1;
   }
-  .ui-alert--info {
-    --ui-_bg: var(--ui-alert-info-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-info-border, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_icon-color: var(--ui-alert-info-icon, var(--ui-color-primary, hsl(220, 85%, 50%)));
+  .ui-button__icon--end {
+    order: 1;
   }
-  .ui-alert--success {
-    --ui-_bg: var(--ui-alert-success-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_icon-color: var(--ui-alert-success-icon, var(--ui-color-success, hsl(142, 70%, 45%)));
+  .ui-button--loading {
+    position: relative;
+    opacity: 0.7;
+    pointer-events: none;
   }
-  .ui-alert--warning {
-    --ui-_bg: var(--ui-alert-warning-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-warning-border, var(--ui-color-warning, hsl(38, 90%, 50%)));
-    --ui-_icon-color: var(--ui-alert-warning-icon, var(--ui-color-warning, hsl(38, 90%, 50%)));
+  .ui-button--loading::after {
+    content: "";
+    position: absolute;
+    block-size: 1em;
+    inline-size: 1em;
+    border: 2px solid currentcolor;
+    border-radius: 50%;
+    animation: button-spin 0.6s linear infinite;
+    border-inline-end-color: transparent;
   }
-  .ui-alert--danger {
-    --ui-_bg: var(--ui-alert-danger-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_border-color: var(--ui-alert-danger-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_icon-color: var(--ui-alert-danger-icon, var(--ui-color-danger, hsl(0, 70%, 50%)));
+  @keyframes button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+@layer components.tokens {
+  .ui-button-group {
+    --ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)));
   }
 }
 @layer components.styles {
-  .ui-alert {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--ui-_gap);
-    padding: calc(var(--ui-_padding) - var(--ui-_border-width));
-    padding-inline: var(--ui-_padding);
-    color: var(--ui-_color);
-    background: var(--ui-_bg);
-    border: var(--ui-_border-width) solid var(--ui-_border-color);
-    border-radius: var(--ui-_radius);
-    border-inline-start-width: calc(0.5rem * 0.5);
+  .ui-button-group {
+    display: inline-flex;
   }
-  .ui-alert__icon {
-    flex-shrink: 0;
-    color: var(--ui-_icon-color);
+  .ui-button-group > .ui-button:not(:first-child, :last-child) {
+    border-radius: 0;
   }
-  .ui-alert__content {
-    flex: 1;
-    min-inline-size: 0;
+  .ui-button-group > .ui-button:first-child:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
-  .ui-alert__title {
-    margin: 0;
-    font-weight: var(--ui-weight-medium, 500);
-    line-height: var(--ui-row-1, 1rem);
+  .ui-button-group > .ui-button:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
-  .ui-alert__description {
-    margin: 0;
-    margin-block-start: calc(0.5rem * 1);
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    line-height: var(--ui-row-1, 1rem);
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+  .ui-button-group > .ui-button + .ui-button {
+    margin-inline-start: calc(0.5rem / -8);
   }
-  .ui-alert__close {
-    flex-shrink: 0;
-    align-self: flex-start;
-    padding: 0;
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
-    background: none;
-    border: none;
-    cursor: pointer;
+  .ui-button-group > .ui-button:focus-visible {
+    z-index: 1;
   }
-  .ui-alert__close:hover {
-    color: var(--ui-color-text, hsl(220, 10%, 10%));
+  .ui-button-group--vertical {
+    flex-direction: column;
+  }
+  .ui-button-group--vertical > .ui-button:not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+  .ui-button-group--vertical > .ui-button:first-child:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .ui-button-group--vertical > .ui-button:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+  .ui-button-group--vertical > .ui-button + .ui-button {
+    margin-block-start: calc(0.5rem / -8);
+    margin-inline-start: 0;
+  }
+  .ui-button-group--attached > .ui-button {
+    border-inline-end-width: 0;
+  }
+  .ui-button-group--attached > .ui-button:last-child {
+    border-inline-end-width: 1px;
+  }
+  .ui-button-group--attached > .ui-button + .ui-button {
+    margin-inline-start: 0;
   }
 }
 @layer components.tokens {
@@ -965,22 +1046,23 @@
     flex-direction: row-reverse;
     justify-content: flex-end;
   }
-  .ui-avatar-group > .avatar {
+  .ui-avatar-group > .ui-avatar {
     margin-inline-start: calc(var(--ui-_size) * -0.25);
     border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%));
   }
-  .ui-avatar-group > .avatar:last-child {
+  .ui-avatar-group > .ui-avatar:last-child {
     margin-inline-start: 0;
   }
 }
 @layer components.tokens {
   .ui-badge {
+    --ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
     --ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));
     --ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));
     --ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));
     --ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));
     --ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));
-    --ui-_bg: var(--ui-badge-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_bg: var(--ui-_accent);
     --ui-_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)));
   }
   .ui-badge--sm {
@@ -989,20 +1071,20 @@
     --ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85));
   }
   .ui-badge--primary {
-    --ui-_bg: var(--ui-badge-primary-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-badge-primary-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+    --ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
+    --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
   }
   .ui-badge--success {
-    --ui-_bg: var(--ui-badge-success-bg, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_text: var(--ui-badge-success-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+    --ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
+    --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
   }
   .ui-badge--warning {
-    --ui-_bg: var(--ui-badge-warning-bg, var(--ui-color-warning, hsl(38, 90%, 50%)));
-    --ui-_text: var(--ui-badge-warning-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
+    --ui-_text: var(--ui-color-text, hsl(220, 10%, 10%));
   }
   .ui-badge--danger {
-    --ui-_bg: var(--ui-badge-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_text: var(--ui-badge-danger-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+    --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
+    --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
   }
 }
 @layer components.styles {
@@ -1022,535 +1104,389 @@
   }
 }
 @layer components.tokens {
-  .ui-breadcrumb {
-    --ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));
-    --ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));
-    --ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
-    --ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
-    --ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
+  .ui-card {
+    --ui-_padding: var(--ui-card-padding, var(--ui-space-4));
+    --ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
+    --ui-_bg: var(--ui-card-bg, var(--ui-color-bg));
+    --ui-_border-color: var(--ui-card-border-color, var(--ui-color-border));
+    --ui-_radius: var(--ui-card-radius, var(--ui-radius-md));
+  }
+  .ui-card--subtle {
+    --ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle));
+  }
+  .ui-card--muted {
+    --ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted));
+  }
+  .ui-card--sm {
+    --ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2));
+  }
+  .ui-card--lg {
+    --ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6));
+  }
+  .ui-card--flush {
+    --ui-_padding: 0;
+    --ui-_border-width: 0;
   }
 }
 @layer components.styles {
-  .ui-breadcrumb {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ui-_gap);
-    block-size: var(--ui-_height);
-    padding: 0;
-    margin: 0;
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    line-height: 1;
-    list-style: none;
+  .ui-card {
+    border: var(--ui-_border-width) solid var(--ui-_border-color);
+    border-radius: var(--ui-_radius);
+    background: var(--ui-_bg);
+    padding: calc(var(--ui-_padding) - var(--ui-_border-width));
+    line-height: var(--ui-row-1);
   }
-  .ui-breadcrumb__item {
+}
+@layer components.tokens {
+  .ui-data-list {
+    --ui-_gap: var(--ui-data-list-gap, calc(0.5rem * 2));
+    --ui-_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));
+    --ui-_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
+    --ui-_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)));
+  }
+}
+@layer components.styles {
+  .ui-data-list {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: var(--ui-_gap);
-    block-size: var(--ui-_height);
+    margin: 0;
+    line-height: var(--ui-row-1, 1rem);
   }
-  .ui-breadcrumb__item:not(:last-child)::after {
-    content: var(--ui-breadcrumb-separator, "/");
-    color: var(--ui-_separator-color);
+  .ui-data-list__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-_item-gap);
   }
-  .ui-breadcrumb__link {
-    text-decoration: none;
-    color: var(--ui-_link-color);
-    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  .ui-data-list__label {
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    font-weight: var(--ui-weight-medium, 500);
+    line-height: var(--ui-row-1, 1rem);
+    color: var(--ui-_label-color);
   }
-  .ui-breadcrumb__link:hover {
-    text-decoration: underline;
-    color: var(--ui-color-primary);
+  .ui-data-list__value {
+    margin: 0;
+    line-height: var(--ui-row-1, 1rem);
+    color: var(--ui-_value-color);
   }
-  .ui-breadcrumb__item:last-child .breadcrumb__link,
-  .ui-breadcrumb__current {
-    color: var(--ui-_current-color);
-    pointer-events: none;
+  .ui-data-list--horizontal .ui-data-list__item {
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: calc(0.5rem * 2);
   }
-  .ui-breadcrumb__item--hidden {
-    display: none;
+  .ui-data-list--horizontal .ui-data-list__label {
+    flex-shrink: 0;
   }
-  .ui-breadcrumb__ellipsis {
-    color: var(--ui-_separator-color);
+  .ui-data-list--horizontal .ui-data-list__value {
+    text-align: end;
   }
-}
-@layer components.tokens {
-  .ui-button {
-    --ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));
-    --ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));
-    --ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));
-    --ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-button-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_bg-hover: var(--ui-button-bg-hover, var(--ui-color-primary-dark, hsl(220, 85%, 40%)));
-    --ui-_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+  .ui-data-list--divided .ui-data-list__item {
+    padding-block-end: calc(var(--ui-_gap) - var(--ui-border-width-sm, 0.0625rem));
+    border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%));
   }
-  .ui-button--sm {
-    --ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));
-    --ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem));
+  .ui-data-list--divided .ui-data-list__item:last-child {
+    padding-block-end: 0;
+    border-block-end: none;
   }
-  .ui-button--lg {
-    --ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));
-    --ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));
-    --ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem));
+  .ui-data-list--striped .ui-data-list__item:nth-child(odd) {
+    padding: calc(0.5rem * 1);
+    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
+    border-radius: var(--ui-radius-sm, 0.25rem);
   }
-  .ui-button--secondary {
-    --ui-_bg: var(--ui-button-secondary-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_bg-hover: var(--ui-button-secondary-bg-hover, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_text: var(--ui-button-secondary-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+  .ui-data-list--sm {
+    --ui-_gap: calc(0.5rem * 1);
+    --ui-_item-gap: 0;
+    font-size: var(--ui-font-size-sm, 0.875rem);
   }
-  .ui-button--ghost {
-    --ui-_bg: var(--ui-button-ghost-bg, transparent);
-    --ui-_bg-hover: var(--ui-button-ghost-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_text: var(--ui-button-ghost-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
+  .ui-data-list--lg {
+    --ui-_gap: calc(0.5rem * 3);
+    --ui-_item-gap: calc(0.5rem * 1);
+    font-size: var(--ui-font-size-lg, 1.25rem);
   }
-  .ui-button--outline {
-    --ui-_bg: var(--ui-button-outline-bg, transparent);
-    --ui-_bg-hover: var(--ui-button-outline-bg-hover, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-button-outline-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text-hover: var(--ui-button-outline-text-hover, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
-    --ui-_border: var(--ui-button-outline-border, var(--ui-border-width-sm, 0.0625rem) solid currentColor);
+}
+@layer components.tokens {
+  .ui-icon {
+    --ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));
+    --ui-_stroke: var(--ui-icon-stroke, 2);
   }
-  .ui-button--danger {
-    --ui-_bg: var(--ui-button-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_bg-hover: var(--ui-button-danger-bg-hover, hsl(0, 70%, 40%));
+  .ui-icon--xs {
+    --ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem));
   }
-  .ui-button--link {
-    --ui-_bg: transparent;
-    --ui-_bg-hover: transparent;
-    --ui-_text: var(--ui-button-link-text, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text-hover: var(--ui-button-link-text-hover, var(--ui-color-primary-dark, hsl(220, 85%, 40%)));
-    --ui-_height: auto;
-    --ui-_padding-x: 0;
-    --ui-_radius: 0;
+  .ui-icon--sm {
+    --ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem));
   }
-  .ui-button--icon {
-    --ui-_padding-x: 0;
+  .ui-icon--md {
+    --ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem));
   }
-  .ui-button--radius-none {
-    --ui-_radius: 0;
+  .ui-icon--lg {
+    --ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem));
   }
-  .ui-button--radius-sm {
-    --ui-_radius: var(--ui-radius-sm, 0.25rem);
+  .ui-icon--xl {
+    --ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem));
   }
-  .ui-button--radius-lg {
-    --ui-_radius: var(--ui-radius-lg, 1rem);
+  .ui-icon--stroke-thin {
+    --ui-_stroke: var(--ui-icon-stroke-thin, 1);
   }
-  .ui-button--radius-full {
-    --ui-_radius: 624.9375rem;
+  .ui-icon--stroke-thick {
+    --ui-_stroke: var(--ui-icon-stroke-thick, 2.5);
   }
 }
 @layer components.styles {
-  .ui-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--ui-space-1, 0.5rem);
-    block-size: var(--ui-_height);
-    padding-inline: var(--ui-_padding-x);
-    margin: 0;
-    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
-    font-size: var(--ui-_font-size);
-    font-weight: var(--ui-_font-weight);
-    line-height: 1;
-    text-decoration: none;
-    white-space: nowrap;
-    color: var(--ui-_text);
-    background: var(--ui-_bg);
-    border: var(--ui-_border, none);
-    border-radius: var(--ui-_radius);
-    cursor: pointer;
-    transition: background-color var(--ui-duration-base) var(--ui-ease-default), color var(--ui-duration-base) var(--ui-ease-default), transform var(--ui-duration-fast) var(--ui-ease-default);
+  .ui-icon {
+    display: inline-block;
+    flex-shrink: 0;
+    block-size: var(--ui-_size);
+    inline-size: var(--ui-_size);
+    vertical-align: middle;
+    color: currentcolor;
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: var(--ui-_stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
   }
-  .ui-button:hover, .ui-button--hover {
-    color: var(--ui-_text-hover, var(--ui-_text));
-    background: var(--ui-_bg-hover);
+  .ui-icon--filled {
+    fill: currentcolor;
+    stroke: none;
   }
-  .ui-button:focus-visible, .ui-button--focus {
-    outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, hsl(220, 85%, 65%));
-    outline-offset: var(--ui-border-width-md, 0.125rem);
+  .ui-icon--spin {
+    animation: icon-spin 1s linear infinite;
   }
-  .ui-button:active, .ui-button--active {
-    transform: scale(0.98);
+  @keyframes icon-spin {
+    to {
+      transform: rotate(360deg);
+    }
   }
-  .ui-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+}
+@layer components.tokens {
+  .ui-status {
+    --ui-_size: var(--ui-status-size, calc(0.5rem * 1));
+    --ui-_color: var(--ui-status-color, var(--ui-color-text-muted));
+    --ui-_gap: var(--ui-status-gap, calc(0.5rem * 1));
   }
-  .ui-button:disabled:hover {
-    background: var(--ui-_bg);
-    transform: none;
+  .ui-status--success {
+    --ui-_color: var(--ui-color-success);
   }
-  .ui-button--icon {
-    inline-size: var(--ui-_height);
+  .ui-status--warning {
+    --ui-_color: var(--ui-color-warning);
   }
-  .ui-button--block {
-    inline-size: 100%;
+  .ui-status--danger {
+    --ui-_color: var(--ui-color-danger);
   }
-  .ui-button--link {
-    text-decoration: underline;
-    text-underline-offset: var(--ui-space-quarter);
+  .ui-status--info {
+    --ui-_color: var(--ui-color-primary);
   }
-  .ui-button--link:hover {
-    text-decoration-thickness: var(--ui-space-quarter);
+}
+@layer components.styles {
+  .ui-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-_gap);
   }
-  .ui-button__icon {
+  .ui-status__dot {
     flex-shrink: 0;
-    block-size: 1em;
-    inline-size: 1em;
-  }
-  .ui-button__icon--start {
-    order: -1;
-  }
-  .ui-button__icon--end {
-    order: 1;
+    block-size: var(--ui-_size);
+    inline-size: var(--ui-_size);
+    background: var(--ui-_color);
+    border-radius: 50%;
   }
-  .ui-button--loading {
+  .ui-status--pulse .ui-status__dot {
     position: relative;
-    opacity: 0.7;
-    pointer-events: none;
   }
-  .ui-button--loading::after {
+  .ui-status--pulse .ui-status__dot::before {
     content: "";
     position: absolute;
-    block-size: 1em;
-    inline-size: 1em;
-    border: 2px solid currentcolor;
+    inset: 0;
+    background: var(--ui-_color);
     border-radius: 50%;
-    animation: button-spin 0.6s linear infinite;
-    border-inline-end-color: transparent;
+    animation: status-pulse 2s infinite;
   }
-  @keyframes button-spin {
-    to {
-      transform: rotate(360deg);
+  @keyframes status-pulse {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(2.5);
     }
   }
-}
-@layer components.tokens {
-  .ui-button-group {
-    --ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)));
-  }
-}
-@layer components.styles {
-  .ui-button-group {
-    display: inline-flex;
-  }
-  .ui-button-group > .button:not(:first-child, :last-child) {
-    border-radius: 0;
-  }
-  .ui-button-group > .button:first-child:not(:last-child) {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-  .ui-button-group > .button:last-child:not(:first-child) {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-  .ui-button-group > .button + .button {
-    margin-inline-start: calc(0.5rem / -8);
-  }
-  .ui-button-group > .button:focus-visible {
-    z-index: 1;
+  .ui-status--sm {
+    --ui-_size: calc(0.5rem * 0.75);
+    --ui-_gap: calc(0.5rem * 0.75);
   }
-  .ui-button-group--vertical {
-    flex-direction: column;
+  .ui-status--lg {
+    --ui-_size: calc(0.5rem * 1.5);
+    --ui-_gap: calc(0.5rem * 1.5);
   }
-  .ui-button-group--vertical > .button:not(:first-child, :last-child) {
-    border-radius: 0;
+}
+@layer components.tokens {
+  .ui-table {
+    --ui-_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
+    --ui-_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
+    --ui-_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));
+    --ui-_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem));
   }
-  .ui-button-group--vertical > .button:first-child:not(:last-child) {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
+  .ui-table--compact {
+    --ui-_cell-padding-y: var(--ui-space-0, 0.25rem);
+    --ui-_cell-padding-x: var(--ui-space-1, 0.5rem);
+    --ui-_font-size: var(--ui-font-size-xs, 0.75rem);
   }
-  .ui-button-group--vertical > .button:last-child:not(:first-child) {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
+}
+@layer components.styles {
+  .ui-table {
+    inline-size: 100%;
+    font-size: var(--ui-_font-size);
+    border-collapse: separate;
+    border-spacing: 0;
   }
-  .ui-button-group--vertical > .button + .button {
-    margin-block-start: calc(0.5rem / -8);
-    margin-inline-start: 0;
+  .ui-table th,
+  .ui-table td {
+    padding-block-start: var(--ui-_cell-padding-y);
+    padding-block-end: calc(var(--ui-_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));
+    padding-inline: var(--ui-_cell-padding-x);
+    line-height: calc(var(--ui-unit, 0.5rem) * 3);
+    text-align: start;
+    border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
   }
-  .ui-button-group--attached > .button {
-    border-inline-end-width: 0;
+  .ui-table th {
+    font-weight: var(--ui-weight-medium, 500);
+    background: var(--ui-_header-bg);
   }
-  .ui-button-group--attached > .button:last-child {
-    border-inline-end-width: 1px;
+  .ui-table--striped tbody tr:nth-child(odd) {
+    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
   }
-  .ui-button-group--attached > .button + .button {
-    margin-inline-start: 0;
+  .ui-table--striped th {
+    background: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
   }
 }
 @layer components.tokens {
-  .ui-card {
-    --ui-_padding: var(--ui-card-padding, var(--ui-space-4));
-    --ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
-    --ui-_bg: var(--ui-card-bg, var(--ui-color-bg));
-    --ui-_border-color: var(--ui-card-border-color, var(--ui-color-border));
-    --ui-_radius: var(--ui-card-radius, var(--ui-radius-md));
+  .ui-tag {
+    --ui-_height: var(--ui-tag-height, calc(0.5rem * 3));
+    --ui-_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));
+    --ui-_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));
+    --ui-_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));
+    --ui-_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)));
   }
-  .ui-card--subtle {
-    --ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle));
+  .ui-tag--sm {
+    --ui-_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));
+    --ui-_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));
+    --ui-_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem));
   }
-  .ui-card--muted {
-    --ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted));
+  .ui-tag--primary {
+    --ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
-  .ui-card--sm {
-    --ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2));
+  .ui-tag--success {
+    --ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
-  .ui-card--lg {
-    --ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6));
+  .ui-tag--warning {
+    --ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));
+    --ui-_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)));
   }
-  .ui-card--flush {
-    --ui-_padding: 0;
-    --ui-_border-width: 0;
+  .ui-tag--danger {
+    --ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
 }
 @layer components.styles {
-  .ui-card {
-    border: var(--ui-_border-width) solid var(--ui-_border-color);
-    border-radius: var(--ui-_radius);
+  .ui-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-_gap);
+    block-size: var(--ui-_height);
+    padding-inline: var(--ui-_padding-x);
+    font-size: var(--ui-_font-size);
+    font-weight: var(--ui-weight-medium, 500);
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--ui-_color);
     background: var(--ui-_bg);
-    padding: calc(var(--ui-_padding) - var(--ui-_border-width));
-    line-height: var(--ui-row-1);
-  }
-}
-@layer components.tokens {
-  .ui-checkbox {
-    --ui-_size: var(--ui-checkbox-size, calc(0.5rem * 2));
-    --ui-_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));
-    --ui-_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
-  }
-  .ui-checkbox--lg {
-    --ui-_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3));
+    border-radius: var(--ui-_radius);
   }
-  .ui-checkbox--error {
-    --ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+  .ui-tag:disabled, .ui-tag[aria-disabled=true] {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
-}
-@layer components.styles {
-  .ui-checkbox {
+  .ui-tag__remove {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    block-size: var(--ui-_size);
-    inline-size: var(--ui-_size);
-    margin: 0;
-    vertical-align: middle;
-    background: var(--ui-_bg);
-    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    border-radius: var(--ui-_radius);
+    padding: 0;
+    margin-inline-start: calc(var(--ui-_gap) * -0.5);
+    color: currentcolor;
+    background: none;
+    border: none;
+    opacity: 0.7;
     cursor: pointer;
-    appearance: none;
-    transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
   }
-  .ui-checkbox::before {
-    content: "";
-    block-size: 65%;
-    inline-size: 65%;
-    background-color: var(--ui-_check-color);
-    opacity: 0;
-    clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
-    transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+  .ui-tag__remove:hover {
+    opacity: 1;
   }
-  .ui-checkbox:hover:not(:disabled) {
-    border-color: var(--ui-_border-color-focus);
+  .ui-tag-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(0.5rem * 0.5);
   }
-  .ui-checkbox:focus-visible {
-    border-color: var(--ui-_border-color-focus);
-    outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+}
+@layer components.tokens {
+  .ui-accordion {
+    --ui-_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --ui-_border-width: var(--ui-accordion-border-width, 1px);
+    --ui-_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)));
   }
-  .ui-checkbox:checked {
-    background: var(--ui-_bg-checked);
-    border-color: var(--ui-_bg-checked);
+}
+@layer components.styles {
+  .ui-accordion {
+    border-radius: var(--ui-_radius);
+    outline: var(--ui-_border-width) solid var(--ui-_border-color);
+    outline-offset: calc(var(--ui-_border-width) * -1);
   }
-  .ui-checkbox:checked::before {
-    opacity: 1;
+  .ui-accordion > .ui-disclosure {
+    --ui-_border-width: 0;
+    border: none;
+    border-radius: 0;
   }
-  .ui-checkbox:indeterminate {
-    background: var(--ui-_bg-checked);
-    border-color: var(--ui-_bg-checked);
+  .ui-accordion > .ui-disclosure + .ui-disclosure {
+    border-block-start: 1px solid var(--ui-_border-color);
   }
-  .ui-checkbox:indeterminate::before {
-    opacity: 1;
-    clip-path: polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%);
+  .ui-accordion > .ui-disclosure:first-child .ui-disclosure__trigger {
+    border-start-start-radius: var(--ui-_radius);
+    border-start-end-radius: var(--ui-_radius);
   }
-  .ui-checkbox:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .ui-accordion > .ui-disclosure:last-child .ui-disclosure__trigger {
+    border-end-start-radius: var(--ui-_radius);
+    border-end-end-radius: var(--ui-_radius);
   }
-}
-@layer components.tokens {
-  .ui-code {
-    --ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));
-    --ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));
-    --ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem));
+  .ui-accordion > .ui-disclosure:last-child .ui-disclosure__content {
+    border-end-start-radius: var(--ui-_radius);
+    border-end-end-radius: var(--ui-_radius);
   }
-  .ui-code--sm {
-    --ui-_font-size: var(--ui-font-size-xs, 0.75rem);
+  .ui-accordion--borderless {
+    border: none;
   }
-  .ui-code-block {
-    --ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));
-    --ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));
-    --ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));
-    --ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)));
+  .ui-accordion--borderless > .ui-disclosure + .ui-disclosure {
+    border-block-start: none;
   }
-}
-@layer components.styles {
-  .ui-code {
-    padding: var(--ui-_padding-y) var(--ui-_padding-x);
-    font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
-    font-size: var(--ui-_font-size);
-    line-height: var(--ui-leading-tight-sm, 1rem);
-    background: var(--ui-_bg);
-    border-radius: var(--ui-_radius);
+  .ui-accordion--separated {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.5rem * 1);
+    border: none;
   }
-  .ui-code-block {
-    display: block;
-    padding: calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));
-    overflow-x: auto;
-    font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
-    font-size: var(--ui-_font-size);
-    line-height: var(--ui-leading-tight-sm, 1rem);
-    white-space: pre;
-    background: var(--ui-_bg);
-    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+  .ui-accordion--separated > .ui-disclosure {
+    border: 1px solid var(--ui-_border-color);
     border-radius: var(--ui-_radius);
   }
-  .ui-code-block code {
-    padding: 0;
-    font-size: inherit;
-    background: none;
-  }
-}
-@layer components.tokens {
-  .ui-data-list {
-    --ui-_gap: var(--ui-data-list-gap, calc(0.5rem * 2));
-    --ui-_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));
-    --ui-_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
-    --ui-_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-  }
-}
-@layer components.styles {
-  .ui-data-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-_gap);
-    margin: 0;
-    line-height: var(--ui-row-1, 1rem);
-  }
-  .ui-data-list__item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-_item-gap);
-  }
-  .ui-data-list__label {
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    font-weight: var(--ui-weight-medium, 500);
-    line-height: var(--ui-row-1, 1rem);
-    color: var(--ui-_label-color);
-  }
-  .ui-data-list__value {
-    margin: 0;
-    line-height: var(--ui-row-1, 1rem);
-    color: var(--ui-_value-color);
-  }
-  .ui-data-list--horizontal .data-list__item {
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: calc(0.5rem * 2);
-  }
-  .ui-data-list--horizontal .data-list__label {
-    flex-shrink: 0;
-  }
-  .ui-data-list--horizontal .data-list__value {
-    text-align: end;
-  }
-  .ui-data-list--divided .data-list__item {
-    padding-block-end: var(--ui-_gap);
-    border-block-end: 1px solid var(--ui-color-border, hsl(220, 10%, 90%));
-  }
-  .ui-data-list--divided .data-list__item:last-child {
-    padding-block-end: 0;
-    border-block-end: none;
-  }
-  .ui-data-list--striped .data-list__item:nth-child(odd) {
-    padding: calc(0.5rem * 1);
-    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
-    border-radius: var(--ui-radius-sm, 0.25rem);
-  }
-  .ui-data-list--sm {
-    --ui-_gap: calc(0.5rem * 1);
-    --ui-_item-gap: 0;
-    font-size: var(--ui-font-size-sm, 0.875rem);
-  }
-  .ui-data-list--lg {
-    --ui-_gap: calc(0.5rem * 3);
-    --ui-_item-gap: calc(0.5rem * 1);
-    font-size: var(--ui-font-size-lg, 1.25rem);
-  }
-}
-@layer components.tokens {
-  .ui-dialog {
-    --ui-_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
-    --ui-_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));
-    --ui-_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
-    --ui-_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-  }
-}
-@layer components.styles {
-  .ui-dialog .modal__content {
-    padding: 0;
-  }
-  .ui-dialog__header {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between;
-    gap: calc(0.5rem * 2);
-    padding: var(--ui-_header-padding);
-    border-block-end: 1px solid var(--ui-_border-color);
-  }
-  .ui-dialog__title {
-    margin: 0;
-    font-size: var(--ui-font-size-lg, 1.25rem);
-    font-weight: var(--ui-weight-semibold, 600);
-    line-height: calc(0.5rem * 3);
-  }
-  .ui-dialog__close {
-    flex-shrink: 0;
-    margin-inline-start: auto;
-  }
-  .ui-dialog__body {
-    flex: 1 1 auto;
-    padding: var(--ui-_body-padding);
-    overflow-y: auto;
-  }
-  .ui-dialog__footer {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: flex-end;
-    gap: calc(0.5rem * 1.5);
-    padding: var(--ui-_footer-padding);
+  .ui-accordion--separated > .ui-disclosure + .ui-disclosure {
     border-block-start: 1px solid var(--ui-_border-color);
   }
-  .ui-dialog--borderless .dialog__header {
-    border-block-end: none;
-  }
-  .ui-dialog--borderless .dialog__footer {
-    border-block-start: none;
-  }
 }
 @layer components.tokens {
   .ui-disclosure {
@@ -1599,13 +1535,13 @@
     flex-shrink: 0;
     transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-disclosure[open] .disclosure__icon {
+  .ui-disclosure[open] .ui-disclosure__icon {
     transform: rotate(180deg);
   }
   .ui-disclosure__content {
     padding: 0 var(--ui-_padding-x) var(--ui-_padding-y);
   }
-  .ui-disclosure--animate .disclosure__content {
+  .ui-disclosure--animate .ui-disclosure__content {
     animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
   }
   @keyframes disclosure-open {
@@ -1623,280 +1559,472 @@
     border: none;
     border-radius: 0;
   }
-  .ui-disclosure--flush .disclosure__trigger {
+  .ui-disclosure--flush .ui-disclosure__trigger {
     padding-inline: 0;
   }
-  .ui-disclosure--flush .disclosure__content {
+  .ui-disclosure--flush .ui-disclosure__content {
     padding-inline: 0;
   }
 }
 @layer components.tokens {
-  .ui-divider {
-    --ui-_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --ui-_line-size: var(--ui-divider-line-size, 1px);
-    --ui-_height: var(--ui-divider-height, 0.5rem);
-    --ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2));
-  }
-}
-@layer components.styles {
-  .ui-divider {
-    display: flex;
-    align-items: center;
-    block-size: var(--ui-_height);
-    margin: var(--ui-_gap) 0;
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    line-height: 1;
-    color: var(--ui-color-text-muted);
+  .ui-alert {
+    --ui-_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));
+    --ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));
+    --ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));
+    --ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));
+    --ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: color-mix(in oklch, var(--ui-_accent) 8%, white);
+    --ui-_border-color: var(--ui-_accent);
+    --ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_icon-color: var(--ui-_accent);
   }
-  .ui-divider::before,
-  .ui-divider::after {
-    content: "";
-    flex: 1;
-    block-size: var(--ui-_line-size);
-    background: var(--ui-_color);
+  .ui-alert--info {
+    --ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
   }
-  .ui-divider:not(:empty) {
-    --ui-_height: var(--ui-row-1, 1rem);
+  .ui-alert--success {
+    --ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
   }
-  .ui-divider:not(:empty)::before {
-    margin-inline-end: calc(0.5rem * 2);
+  .ui-alert--warning {
+    --ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
   }
-  .ui-divider:not(:empty)::after {
-    margin-inline-start: calc(0.5rem * 2);
+  .ui-alert--danger {
+    --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
-  .ui-divider:empty::after {
-    display: none;
+}
+@layer components.styles {
+  .ui-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ui-_gap);
+    padding: calc(var(--ui-_padding) - var(--ui-_border-width));
+    padding-inline: var(--ui-_padding);
+    color: var(--ui-_color);
+    background: var(--ui-_bg);
+    border: var(--ui-_border-width) solid var(--ui-_border-color);
+    border-radius: var(--ui-_radius);
+    border-inline-start-width: calc(0.5rem * 0.5);
   }
-  .ui-divider--vertical {
-    flex-direction: column;
-    align-self: stretch;
-    margin: 0 var(--ui-_gap);
-    writing-mode: vertical-rl;
+  .ui-alert__icon {
+    flex-shrink: 0;
+    color: var(--ui-_icon-color);
   }
-  .ui-divider--vertical::before,
-  .ui-divider--vertical::after {
+  .ui-alert__content {
     flex: 1;
-    block-size: auto;
-    inline-size: var(--ui-_size);
-  }
-  .ui-divider--start::before {
-    display: none;
-  }
-  .ui-divider--start:not(:empty)::after {
-    margin-inline-start: calc(0.5rem * 2);
+    min-inline-size: 0;
   }
-  .ui-divider--end::after {
-    display: none;
+  .ui-alert__title {
+    margin: 0;
+    font-weight: var(--ui-weight-medium, 500);
+    line-height: var(--ui-row-1, 1rem);
   }
-  .ui-divider--end:not(:empty)::before {
-    margin-inline-end: calc(0.5rem * 2);
+  .ui-alert__description {
+    margin: 0;
+    margin-block-start: calc(0.5rem * 1);
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    line-height: var(--ui-row-1, 1rem);
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
   }
-  .ui-divider--dashed::before,
-  .ui-divider--dashed::after {
-    background: repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
+  .ui-alert__close {
+    flex-shrink: 0;
+    align-self: flex-start;
+    padding: 0;
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+    background: none;
+    border: none;
+    cursor: pointer;
   }
-  .ui-divider--vertical.divider--dashed::before,
-  .ui-divider--vertical.divider--dashed::after {
-    background: repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
+  .ui-alert__close:hover {
+    color: var(--ui-color-text, hsl(220, 10%, 10%));
   }
 }
 @layer components.tokens {
-  .ui-drawer {
-    --ui-_size: var(--ui-drawer-size, calc(0.5rem * 40));
-    --ui-_max-size: var(--ui-drawer-max-size, 90%);
-    --ui-_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));
-    --ui-_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
-    --ui-_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));
-    --ui-_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
-    --ui-_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
-  }
-  .ui-drawer--sm {
-    --ui-_size: calc(0.5rem * 30);
+  .ui-progress {
+    --ui-_height: var(--ui-progress-height, calc(0.5rem * 1));
+    --ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --ui-_fill: var(--ui-progress-fill, var(--ui-color-primary));
+    --ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
   }
-  .ui-drawer--lg {
-    --ui-_size: calc(0.5rem * 50);
+  .ui-progress--sm {
+    --ui-_height: calc(0.5rem * 1);
   }
-  .ui-drawer--full {
-    --ui-_size: 100%;
-    --ui-_max-size: 100%;
+  .ui-progress--lg {
+    --ui-_height: calc(0.5rem * 2);
   }
 }
 @layer components.styles {
-  .ui-drawer-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: var(--ui-z-drawer, 900);
-    background: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));
+  .ui-progress {
+    position: relative;
+    block-size: var(--ui-_height);
+    overflow: hidden;
+    background: var(--ui-_bg);
+    border-radius: var(--ui-_radius);
   }
-  .ui-drawer-overlay[data-state=open] {
-    animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  .ui-progress__bar {
+    block-size: 100%;
+    background: var(--ui-_fill);
+    border-radius: var(--ui-_radius);
+    transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
   }
-  .ui-drawer-overlay[data-state=closed] {
-    animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  .ui-progress--indeterminate .ui-progress__bar {
+    inline-size: 30%;
+    animation: progress-indeterminate 1.5s infinite ease-in-out;
   }
-  @keyframes drawer-overlay-in {
-    from {
-      opacity: 0;
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(400%);
     }
   }
-  @keyframes drawer-overlay-out {
+  .ui-progress--striped .ui-progress__bar {
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 0.5rem 0.5rem;
+  }
+  .ui-progress--animated .ui-progress__bar {
+    animation: progress-stripes 1s linear infinite;
+  }
+  @keyframes progress-stripes {
+    from {
+      background-position: 0.5rem 0;
+    }
     to {
-      opacity: 0;
+      background-position: 0 0;
     }
   }
-  .ui-drawer {
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    z-index: var(--ui-z-drawer, 900);
-    background: var(--ui-_bg);
-    box-shadow: var(--ui-_shadow);
+  .ui-progress--success {
+    --ui-_fill: var(--ui-color-success);
   }
-  .ui-drawer--end {
-    inset-block: 0;
-    inset-inline-end: 0;
-    inline-size: var(--ui-_size);
-    max-inline-size: var(--ui-_max-size);
-    box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--ui-_border-color);
+  .ui-progress--warning {
+    --ui-_fill: var(--ui-color-warning);
   }
-  .ui-drawer--start {
-    inset-block: 0;
-    inset-inline-start: 0;
-    inline-size: var(--ui-_size);
-    max-inline-size: var(--ui-_max-size);
-    box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--ui-_border-color);
+  .ui-progress--danger {
+    --ui-_fill: var(--ui-color-danger);
   }
-  .ui-drawer--top {
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--ui-_size);
-    max-block-size: var(--ui-_max-size);
-    box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color);
+}
+@layer components.tokens {
+  .ui-skeleton {
+    --ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --ui-_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
+    --ui-_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
   }
-  .ui-drawer--bottom {
-    inset-block-end: 0;
-    inset-inline: 0;
-    block-size: var(--ui-_size);
-    max-block-size: var(--ui-_max-size);
-    box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
+}
+@layer components.styles {
+  .ui-skeleton {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    background: var(--ui-_bg);
+    border-radius: var(--ui-_radius);
   }
-  .ui-drawer--end[data-state=open] {
-    animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  .ui-skeleton::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent 0%, var(--ui-_shimmer) 50%, transparent 100%);
+    animation: skeleton-shimmer 1.5s infinite;
+    transform: translateX(-100%);
   }
-  .ui-drawer--end[data-state=closed] {
-    animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  @keyframes skeleton-shimmer {
+    100% {
+      transform: translateX(100%);
+    }
   }
-  .ui-drawer--start[data-state=open] {
-    animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  .ui-skeleton--text {
+    block-size: calc(0.5rem * 2);
+    inline-size: 100%;
   }
-  .ui-drawer--start[data-state=closed] {
-    animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  .ui-skeleton--heading {
+    block-size: calc(0.5rem * 3);
+    inline-size: 60%;
   }
-  .ui-drawer--top[data-state=open] {
-    animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  .ui-skeleton--circle {
+    block-size: calc(0.5rem * 5);
+    inline-size: calc(0.5rem * 5);
+    border-radius: 50%;
   }
-  .ui-drawer--top[data-state=closed] {
-    animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  .ui-skeleton--rect {
+    block-size: calc(0.5rem * 20);
+    inline-size: 100%;
   }
-  .ui-drawer--bottom[data-state=open] {
-    animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  .ui-skeleton--static::after {
+    animation: none;
   }
-  .ui-drawer--bottom[data-state=closed] {
-    animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  .ui-skeleton--pulse {
+    animation: skeleton-pulse 1.5s infinite ease-in-out;
   }
-  @keyframes drawer-slide-in-end {
-    from {
-      transform: translateX(100%);
-    }
+  .ui-skeleton--pulse::after {
+    display: none;
   }
-  @keyframes drawer-slide-out-end {
-    to {
-      transform: translateX(100%);
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
     }
-  }
-  @keyframes drawer-slide-in-start {
-    from {
-      transform: translateX(-100%);
+    50% {
+      opacity: 0.5;
     }
   }
-  @keyframes drawer-slide-out-start {
-    to {
-      transform: translateX(-100%);
-    }
+}
+@layer components.tokens {
+  .ui-spinner {
+    --ui-_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
+    --ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
+    --ui-_color: var(--ui-spinner-color, currentcolor);
+    --ui-_track-color: var(--ui-spinner-track-color, transparent);
+    --ui-_duration: var(--ui-spinner-duration, 750ms);
   }
-  @keyframes drawer-slide-in-top {
-    from {
-      transform: translateY(-100%);
-    }
+  .ui-spinner--xs {
+    --ui-_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
+    --ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
   }
-  @keyframes drawer-slide-out-top {
-    to {
-      transform: translateY(-100%);
-    }
+  .ui-spinner--sm {
+    --ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
+    --ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
   }
-  @keyframes drawer-slide-in-bottom {
-    from {
-      transform: translateY(100%);
-    }
+  .ui-spinner--lg {
+    --ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
+    --ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
   }
-  @keyframes drawer-slide-out-bottom {
-    to {
-      transform: translateY(100%);
-    }
+  .ui-spinner--xl {
+    --ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
+    --ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
   }
-  .ui-drawer__header {
-    display: flex;
+}
+@layer components.styles {
+  .ui-spinner {
+    display: inline-block;
     flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between;
-    gap: calc(0.5rem * 2);
-    padding: var(--ui-_header-padding);
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
+    box-sizing: border-box;
+    block-size: var(--ui-_size);
+    inline-size: var(--ui-_size);
+    vertical-align: middle;
+    border: var(--ui-_border-width) solid var(--ui-_track-color);
+    border-radius: 50%;
+    border-block-start-color: var(--ui-_color);
+    animation: spinner-rotate var(--ui-_duration) linear infinite;
   }
-  .ui-drawer__title {
-    margin: 0;
-    font-size: var(--ui-font-size-lg, 1.25rem);
-    font-weight: var(--ui-weight-semibold, 600);
-    line-height: var(--ui-row-1, 1rem);
+  @keyframes spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
   }
-  .ui-drawer__description {
-    margin: 0;
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    line-height: var(--ui-row-1, 1rem);
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+}
+@layer components.tokens {
+  .ui-toast-viewport {
+    --ui-_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));
+    --ui-_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));
+    --ui-_max-width: var(--ui-toast-viewport-max-width, 420px);
   }
-  .ui-drawer__close {
-    flex-shrink: 0;
-    margin-inline-start: auto;
+  .ui-toast {
+    --ui-_padding: var(--ui-toast-padding, calc(0.5rem * 2));
+    --ui-_gap: var(--ui-toast-gap, calc(0.5rem * 1));
+    --ui-_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
+    --ui-_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
   }
-  .ui-drawer__body {
-    flex: 1 1 auto;
-    padding: var(--ui-_body-padding);
-    overflow-y: auto;
-    line-height: var(--ui-row-1, 1rem);
+  .ui-toast--success {
+    --ui-_border-color: var(--ui-color-success);
   }
-  .ui-drawer__footer {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: flex-end;
-    gap: calc(0.5rem * 2);
-    padding: var(--ui-_footer-padding);
-    box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color);
+  .ui-toast--warning {
+    --ui-_border-color: var(--ui-color-warning);
   }
-}
-@layer components.tokens {
-  .ui-field {
-    --ui-_gap: var(--ui-field-gap, 0);
+  .ui-toast--danger {
+    --ui-_border-color: var(--ui-color-danger);
+  }
+  .ui-toast--info {
+    --ui-_border-color: var(--ui-color-primary);
   }
 }
 @layer components.styles {
-  .ui-field {
+  .ui-toast-viewport {
     display: flex;
     flex-direction: column;
     gap: var(--ui-_gap);
-  }
+    position: fixed;
+    z-index: var(--ui-z-toast, 1000);
+    max-inline-size: var(--ui-_max-width);
+    padding: var(--ui-_padding);
+    pointer-events: none;
+    list-style: none;
+  }
+  .ui-toast-viewport--top-end {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+  .ui-toast-viewport--top-start {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  .ui-toast-viewport--bottom-end {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+  .ui-toast-viewport--bottom-start {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+  .ui-toast-viewport--top-center {
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+  .ui-toast-viewport--bottom-center {
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+  .ui-toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ui-_gap);
+    padding: var(--ui-_padding);
+    background: var(--ui-_bg);
+    border-radius: var(--ui-_radius);
+    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    box-shadow: var(--ui-_shadow);
+    pointer-events: auto;
+    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+  }
+  .ui-toast__icon {
+    flex-shrink: 0;
+  }
+  .ui-toast__content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .ui-toast__title {
+    margin: 0;
+    font-weight: var(--ui-weight-medium, 500);
+    line-height: var(--ui-row-1, 1rem);
+  }
+  .ui-toast__description {
+    margin: 0;
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    line-height: var(--ui-row-1, 1rem);
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+  }
+  .ui-toast__action {
+    flex-shrink: 0;
+  }
+  .ui-toast__close {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ui-row-1, 1rem);
+    inline-size: var(--ui-row-1, 1rem);
+    padding: 0;
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  .ui-toast__close:hover {
+    color: var(--ui-color-text, hsl(220, 10%, 10%));
+  }
+  .ui-toast[data-state=open] {
+    animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+  .ui-toast[data-state=closed] {
+    animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  }
+  @keyframes toast-slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+  @keyframes toast-slide-out {
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+}
+@layer components.tokens {
+  .ui-checkbox {
+    --ui-_size: var(--ui-checkbox-size, calc(0.5rem * 2));
+    --ui-_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));
+    --ui-_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
+    --ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+  }
+  .ui-checkbox--lg {
+    --ui-_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3));
+  }
+  .ui-checkbox--error {
+    --ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+  }
+}
+@layer components.styles {
+  .ui-checkbox {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ui-_size);
+    inline-size: var(--ui-_size);
+    margin: 0;
+    vertical-align: middle;
+    background: var(--ui-_bg);
+    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    border-radius: var(--ui-_radius);
+    cursor: pointer;
+    appearance: none;
+    transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+  }
+  .ui-checkbox::before {
+    content: "";
+    block-size: 65%;
+    inline-size: 65%;
+    background-color: var(--ui-_check-color);
+    opacity: 0;
+    clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
+    transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+  }
+  .ui-checkbox:hover:not(:disabled) {
+    border-color: var(--ui-_border-color-focus);
+  }
+  .ui-checkbox:focus-visible {
+    border-color: var(--ui-_border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
+  }
+  .ui-checkbox:checked {
+    background: var(--ui-_bg-checked);
+    border-color: var(--ui-_bg-checked);
+  }
+  .ui-checkbox:checked::before {
+    opacity: 1;
+  }
+  .ui-checkbox:indeterminate {
+    background: var(--ui-_bg-checked);
+    border-color: var(--ui-_bg-checked);
+  }
+  .ui-checkbox:indeterminate::before {
+    opacity: 1;
+    clip-path: polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%);
+  }
+  .ui-checkbox:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+@layer components.tokens {
+  .ui-field {
+    --ui-_gap: var(--ui-field-gap, 0);
+  }
+}
+@layer components.styles {
+  .ui-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-_gap);
+  }
   .ui-field__control {
     display: flex;
     flex-direction: column;
@@ -1906,12 +2034,12 @@
     flex-wrap: wrap;
     align-items: flex-start;
   }
-  .ui-field--horizontal > .field__label {
+  .ui-field--horizontal > .ui-field__label {
     flex: 0 0 auto;
     min-inline-size: calc(0.5rem * 15);
     padding-block-start: calc(0.5rem * 1);
   }
-  .ui-field--horizontal > .field__control {
+  .ui-field--horizontal > .ui-field__control {
     flex: 1 1 0;
     min-inline-size: calc(0.5rem * 20);
   }
@@ -1954,167 +2082,68 @@
   }
 }
 @layer components.tokens {
-  .ui-heading {
-    --ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));
-    --ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));
-    --ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));
-    --ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-  }
-  .ui-heading--4xl {
-    --ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));
-    --ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem));
+  .ui-input {
+    --ui-_height: var(--ui-input-height, var(--ui-row-2, 2rem));
+    --ui-_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));
+    --ui-_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
+    --ui-_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
   }
-  .ui-heading--3xl {
-    --ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));
-    --ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem));
+  .ui-input--sm {
+    --ui-_height: var(--ui-input-height-sm, calc(1rem * 1.5));
+    --ui-_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));
   }
-  .ui-heading--2xl {
-    --ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));
-    --ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem));
+  .ui-input--lg {
+    --ui-_height: var(--ui-input-height-lg, calc(1rem * 2.5));
+    --ui-_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));
+    --ui-_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem));
   }
-  .ui-heading--xl {
-    --ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));
-    --ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem));
+  .ui-input--filled {
+    --ui-_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_border-color: transparent;
   }
-  .ui-heading--lg {
-    --ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));
-    --ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem));
+  .ui-input--ghost {
+    --ui-_bg: transparent;
+    --ui-_border-color: transparent;
   }
-  .ui-heading--md {
-    --ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));
-    --ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem));
+  .ui-input--error {
+    --ui-_border-color: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
-  .ui-heading--sm {
-    --ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));
-    --ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem));
+  .ui-input--success {
+    --ui-_border-color: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
   }
 }
 @layer components.styles {
-  .ui-heading {
-    margin: 0;
+  .ui-input {
+    display: inline-flex;
+    align-items: center;
+    block-size: var(--ui-_height);
+    padding-inline: var(--ui-_padding-x);
+    font-family: inherit;
     font-size: var(--ui-_font-size);
-    font-weight: var(--ui-_weight);
-    line-height: var(--ui-_line-height);
-    color: var(--ui-_color);
+    line-height: 1;
+    color: var(--ui-_text);
+    background: var(--ui-_bg);
+    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    border-radius: var(--ui-_radius);
+    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
   }
-}
-@layer components.tokens {
-  .ui-icon {
-    --ui-_size: var(--ui-icon-size, 1em);
-    --ui-_stroke: var(--ui-icon-stroke, 2);
+  .ui-input::placeholder {
+    color: var(--ui-_placeholder);
   }
-  .ui-icon--xs {
-    --ui-_size: var(--ui-icon-size-xs, calc(0.5rem * 2));
-  }
-  .ui-icon--sm {
-    --ui-_size: var(--ui-icon-size-sm, calc(0.5rem * 3));
-  }
-  .ui-icon--md {
-    --ui-_size: var(--ui-icon-size-md, calc(0.5rem * 4));
-  }
-  .ui-icon--lg {
-    --ui-_size: var(--ui-icon-size-lg, calc(0.5rem * 5));
-  }
-  .ui-icon--xl {
-    --ui-_size: var(--ui-icon-size-xl, calc(0.5rem * 6));
-  }
-  .ui-icon--stroke-thin {
-    --ui-_stroke: var(--ui-icon-stroke-thin, 1);
-  }
-  .ui-icon--stroke-thick {
-    --ui-_stroke: var(--ui-icon-stroke-thick, 2.5);
-  }
-}
-@layer components.styles {
-  .ui-icon {
-    display: inline-block;
-    flex-shrink: 0;
-    block-size: var(--ui-_size);
-    inline-size: var(--ui-_size);
-    vertical-align: middle;
-    color: currentcolor;
-    fill: none;
-    stroke: currentcolor;
-    stroke-width: var(--ui-_stroke);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-  .ui-icon--filled {
-    fill: currentcolor;
-    stroke: none;
-  }
-  .ui-icon--spin {
-    animation: icon-spin 1s linear infinite;
-  }
-  @keyframes icon-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-@layer components.tokens {
-  .ui-input {
-    --ui-_height: var(--ui-input-height, var(--ui-row-2, 2rem));
-    --ui-_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));
-    --ui-_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
-  }
-  .ui-input--sm {
-    --ui-_height: var(--ui-input-height-sm, calc(1rem * 1.5));
-    --ui-_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));
-  }
-  .ui-input--lg {
-    --ui-_height: var(--ui-input-height-lg, calc(1rem * 2.5));
-    --ui-_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));
-    --ui-_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem));
-  }
-  .ui-input--filled {
-    --ui-_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_border-color: transparent;
-  }
-  .ui-input--ghost {
-    --ui-_bg: transparent;
-    --ui-_border-color: transparent;
-  }
-  .ui-input--error {
-    --ui-_border-color: var(--ui-input-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-  }
-  .ui-input--success {
-    --ui-_border-color: var(--ui-input-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-  }
-}
-@layer components.styles {
-  .ui-input {
-    display: inline-flex;
-    align-items: center;
-    block-size: var(--ui-_height);
-    padding-inline: var(--ui-_padding-x);
-    font-family: inherit;
-    font-size: var(--ui-_font-size);
-    line-height: 1;
-    color: var(--ui-_text);
-    background: var(--ui-_bg);
-    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    border-radius: var(--ui-_radius);
-    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
-  }
-  .ui-input::placeholder {
-    color: var(--ui-_placeholder);
-  }
-  .ui-input:hover:not(:disabled, :focus) {
-    border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
+  .ui-input:hover:not(:disabled, :focus) {
+    border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
   }
   .ui-input:focus, .ui-input--focus {
     border-color: var(--ui-_border-color-focus);
     outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
   .ui-input:disabled, .ui-input--disabled {
     opacity: 0.5;
@@ -2131,13 +2160,13 @@
     align-items: stretch;
     position: relative;
   }
-  .ui-input-group .input {
+  .ui-input-group .ui-input {
     flex: 1;
   }
-  .ui-input-group--has-prefix .input {
+  .ui-input-group--has-prefix .ui-input {
     padding-inline-start: calc(var(--ui-_height) + var(--ui-space-half, 0.25rem));
   }
-  .ui-input-group--has-suffix .input {
+  .ui-input-group--has-suffix .ui-input {
     padding-inline-end: calc(var(--ui-_height) + var(--ui-space-half, 0.25rem));
   }
   .ui-input-group__addon {
@@ -2165,7 +2194,7 @@
   .ui-label {
     --ui-_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));
     --ui-_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, hsl(0, 70%, 50%)));
+    --ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
   .ui-label--lg {
     --ui-_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem));
@@ -2195,844 +2224,723 @@
   }
 }
 @layer components.tokens {
-  .ui-link {
-    --ui-_color: var(--ui-link-color, var(--ui-color-primary));
-    --ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));
-    --ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));
-    --ui-_decoration: var(--ui-link-decoration, underline);
-    --ui-_decoration-hover: var(--ui-link-decoration-hover, underline);
+  .ui-radio {
+    --ui-_size: var(--ui-radio-size, calc(0.5rem * 2));
+    --ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
+    --ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
-  .ui-link--muted {
-    --ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
-    --ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
+  .ui-radio--lg {
+    --ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3));
   }
-  .ui-link--subtle {
-    --ui-_decoration: none;
-    --ui-_decoration-hover: underline;
+  .ui-radio--error {
+    --ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
 }
 @layer components.styles {
-  .ui-link {
-    text-decoration: var(--ui-_decoration);
-    color: var(--ui-_color);
+  .ui-radio {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ui-_size);
+    inline-size: var(--ui-_size);
+    margin: 0;
+    vertical-align: middle;
+    background: var(--ui-_bg);
+    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    border-radius: 50%;
     cursor: pointer;
-    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
-    text-underline-offset: calc(0.5rem / 4);
+    appearance: none;
+    transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
   }
-  .ui-link:hover {
-    text-decoration: var(--ui-_decoration-hover);
-    color: var(--ui-_color-hover);
+  .ui-radio::before {
+    content: "";
+    block-size: 50%;
+    inline-size: 50%;
+    background-color: var(--ui-_dot-color);
+    border-radius: 50%;
+    opacity: 0;
+    transform: scale(0);
+    transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
   }
-  .ui-link:focus-visible {
-    border-radius: calc(0.5rem / 4);
-    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
-    outline-offset: calc(0.5rem / 4);
+  .ui-radio:hover:not(:disabled) {
+    border-color: var(--ui-_border-color-focus);
   }
-  .ui-link:visited {
-    color: var(--ui-_color-visited);
+  .ui-radio:focus-visible {
+    border-color: var(--ui-_border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
-  .ui-link--disabled,
-  .ui-link[aria-disabled=true] {
-    color: var(--ui-color-text-muted);
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
+  .ui-radio:checked {
+    background: var(--ui-_bg-checked);
+    border-color: var(--ui-_bg-checked);
   }
-  .ui-link--external::after {
-    content: "↗";
-    display: inline-block;
-    margin-inline-start: calc(0.5rem / 4);
-    font-size: 0.75em;
+  .ui-radio:checked::before {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .ui-radio:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 }
 @layer components.tokens {
-  .ui-menu {
-    --ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));
-    --ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));
-    --ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));
-    --ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
-    --ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
-    --ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));
-    --ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));
-    --ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
+  .ui-select {
+    --ui-_height: var(--ui-select-height, var(--ui-row-2, 2rem));
+    --ui-_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));
+    --ui-_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
+    --ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
   }
-}
-@layer components.styles {
-  .ui-menu {
-    min-inline-size: var(--ui-_min-width);
-    max-block-size: var(--ui-_max-height);
-    padding: var(--ui-_padding);
-    overflow-y: auto;
-    background: var(--ui-_bg);
-    border-radius: var(--ui-_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    box-shadow: var(--ui-_shadow);
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+  .ui-select--sm {
+    --ui-_height: var(--ui-select-height-sm, calc(1rem * 1.5));
+    --ui-_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem));
   }
-  .ui-menu__group {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  .ui-select--lg {
+    --ui-_height: var(--ui-select-height-lg, calc(1rem * 2.5));
+    --ui-_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));
+    --ui-_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem));
   }
-  .ui-menu__label {
-    padding: var(--ui-_item-padding);
-    font-size: var(--ui-font-size-xs, 0.75rem);
-    font-weight: var(--ui-weight-medium, 500);
-    line-height: var(--ui-row-1, 1rem);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+  .ui-select--filled {
+    --ui-_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_border-color: transparent;
   }
-  .ui-menu__item {
-    display: flex;
-    align-items: center;
-    gap: calc(0.5rem * 1);
-    padding: var(--ui-_item-padding);
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    line-height: var(--ui-row-1, 1rem);
-    text-decoration: none;
-    color: var(--ui-color-text, hsl(220, 10%, 10%));
-    background: transparent;
-    border: none;
-    border-radius: var(--ui-_item-radius);
-    cursor: pointer;
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  .ui-select--ghost {
+    --ui-_bg: transparent;
+    --ui-_border-color: transparent;
   }
-  .ui-menu__item:hover, .ui-menu__item:focus-visible {
-    background: var(--ui-_item-bg-hover);
-    outline: none;
+  .ui-select--error {
+    --ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
-  .ui-menu__item--danger {
-    color: var(--ui-color-danger, hsl(0, 70%, 50%));
+  .ui-select--success {
+    --ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
   }
-  .ui-menu__item--danger:hover, .ui-menu__item--danger:focus-visible {
-    color: var(--ui-color-danger, hsl(0, 70%, 50%));
+}
+@layer components.styles {
+  .ui-select {
+    display: inline-block;
+    block-size: var(--ui-_height);
+    padding-inline-start: var(--ui-_padding-x);
+    padding-inline-end: calc(var(--ui-_height) - var(--ui-space-half, 0.25rem));
+    font-family: inherit;
+    font-size: var(--ui-_font-size);
+    line-height: 1;
+    color: var(--ui-_text);
+    background-color: var(--ui-_bg);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    border-radius: var(--ui-_radius);
+    cursor: pointer;
+    appearance: none;
+    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    background-repeat: no-repeat;
+    background-position: right var(--ui-space-half, 0.25rem) center;
+    background-size: calc(var(--ui-_height) * 0.5);
   }
-  .ui-menu__item--disabled,
-  .ui-menu__item[aria-disabled=true] {
+  .ui-select:hover:not(:disabled, :focus) {
+    border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
+  }
+  .ui-select:focus, .ui-select--focus {
+    border-color: var(--ui-_border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
+  }
+  .ui-select:disabled, .ui-select--disabled {
     opacity: 0.5;
-    pointer-events: none;
+    cursor: not-allowed;
   }
-  .ui-menu__item-icon {
-    flex-shrink: 0;
-    block-size: calc(0.5rem * 2);
-    inline-size: calc(0.5rem * 2);
+  .ui-select--block {
+    inline-size: 100%;
   }
-  .ui-menu__item-shortcut {
-    margin-inline-start: auto;
-    font-size: var(--ui-font-size-xs, 0.75rem);
+  .ui-select:invalid, .ui-select--placeholder {
     color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
   }
-  .ui-menu__separator {
-    display: flex;
-    align-items: center;
-    block-size: calc(0.5rem * 2);
-    margin: 0;
-  }
-  .ui-menu__separator::before {
-    content: "";
-    flex: 1;
-    block-size: var(--ui-border-width-sm, 1px);
-    background: var(--ui-color-border, hsl(220, 10%, 90%));
+}
+@layer components.tokens {
+  .ui-textarea {
+    --ui-_min-height: var(--ui-textarea-min-height, calc(1rem * 4));
+    --ui-_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));
+    --ui-_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));
+    --ui-_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
+    --ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
   }
-  .ui-menu__item--check,
-  .ui-menu__item--radio {
-    position: relative;
-    padding-inline-start: calc(0.5rem * 4);
+  .ui-textarea--sm {
+    --ui-_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));
+    --ui-_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem));
   }
-  .ui-menu__item-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    inset-inline-start: calc(0.5rem * 1);
-    block-size: calc(0.5rem * 2);
-    inline-size: calc(0.5rem * 2);
+  .ui-textarea--lg {
+    --ui-_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));
+    --ui-_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));
+    --ui-_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));
+    --ui-_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem));
   }
-}
-@layer components.tokens {
-  .ui-modal {
-    --ui-_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
-    --ui-_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));
-    --ui-_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));
-    --ui-_padding: var(--ui-modal-padding, calc(0.5rem * 3));
-    --ui-_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));
-    --ui-_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));
-    --ui-_z: var(--ui-modal-z, var(--ui-z-modal, 400));
+  .ui-textarea--filled {
+    --ui-_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_border-color: transparent;
   }
-  .ui-modal--sm {
-    --ui-_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40));
+  .ui-textarea--ghost {
+    --ui-_bg: transparent;
+    --ui-_border-color: transparent;
   }
-  .ui-modal--lg {
-    --ui-_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80));
+  .ui-textarea--error {
+    --ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
+    --ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
   }
-  .ui-modal--full {
-    --ui-_max-width: calc(100vw - 0.5rem * 4);
-    --ui-_max-height: calc(100vh - 0.5rem * 4);
-    --ui-_radius: 0;
+  .ui-textarea--success {
+    --ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
+    --ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
   }
 }
 @layer components.styles {
-  .ui-modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    inset: 0;
-    z-index: var(--ui-_z);
-    padding: calc(0.5rem * 2);
-  }
-  .ui-modal__content {
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  .ui-textarea {
+    display: block;
+    box-sizing: border-box;
     inline-size: 100%;
-    max-block-size: var(--ui-_max-height);
-    max-inline-size: var(--ui-_max-width);
-    padding: var(--ui-_padding);
-    overflow: hidden;
+    min-block-size: var(--ui-_min-height);
+    padding-block: var(--ui-_padding-y);
+    padding-inline: var(--ui-_padding-x);
+    font-family: inherit;
+    font-size: var(--ui-_font-size);
+    line-height: var(--ui-row-1, 1rem);
+    color: var(--ui-_text);
     background: var(--ui-_bg);
+    border: none;
     border-radius: var(--ui-_radius);
-    box-shadow: var(--ui-_shadow);
+    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    resize: vertical;
   }
-  .ui-modal__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
+  .ui-textarea::placeholder {
+    color: var(--ui-_placeholder);
   }
-  .ui-modal--entering .modal__content,
-  .ui-modal--visible .modal__content {
-    opacity: 1;
-    transform: scale(1);
+  .ui-textarea:hover:not(:disabled, :focus) {
+    outline-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
   }
-  .ui-modal--exiting .modal__content,
-  .ui-modal--hidden .modal__content {
-    opacity: 0;
-    transform: scale(0.95);
+  .ui-textarea:focus, .ui-textarea--focus {
+    outline-color: var(--ui-_border-color-focus);
+    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
   }
-  .ui-modal--animate .modal__content {
-    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease), transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  .ui-textarea:disabled, .ui-textarea--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    resize: none;
   }
-  .ui-modal--hidden {
-    visibility: hidden;
-    pointer-events: none;
+  .ui-textarea:read-only {
+    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
+    resize: none;
+  }
+  .ui-textarea--resize-none {
+    resize: none;
+  }
+  .ui-textarea--resize-horizontal {
+    resize: horizontal;
+  }
+  .ui-textarea--resize-both {
+    resize: both;
   }
 }
 @layer components.tokens {
-  .ui-overlay {
-    --ui-_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
-    --ui-_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
+  .ui-toggle {
+    --ui-_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));
+    --ui-_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));
+    --ui-_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
+    --ui-_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));
+    --ui-_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));
+    --ui-_thumb-bg: var(--ui-toggle-thumb-bg, white);
+    --ui-_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4));
   }
-  .ui-overlay--light {
-    --ui-_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
+  .ui-toggle--sm {
+    --ui-_track-width: calc(0.5rem * 4);
+    --ui-_track-height: calc(0.5rem * 2);
+    --ui-_track-radius: 0.5rem;
+    --ui-_thumb-size: calc(0.5rem * 1.5);
   }
-  .ui-overlay--blur {
-    --ui-_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
+  .ui-toggle--lg {
+    --ui-_track-width: calc(0.5rem * 6);
+    --ui-_track-height: calc(0.5rem * 4);
+    --ui-_track-radius: calc(0.5rem * 2);
+    --ui-_thumb-size: calc(0.5rem * 3.5);
   }
 }
 @layer components.styles {
-  .ui-overlay {
-    position: fixed;
+  .ui-toggle {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    position: relative;
+    block-size: var(--ui-_track-height);
+    inline-size: var(--ui-_track-width);
+    background: var(--ui-_track-bg);
+    border-radius: var(--ui-_track-radius);
+    cursor: pointer;
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+  .ui-toggle__input {
+    position: absolute;
     inset: 0;
-    z-index: var(--ui-_z);
-    background: var(--ui-_bg);
+    block-size: 100%;
+    inline-size: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
   }
-  .ui-overlay--blur {
-    backdrop-filter: blur(calc(0.5rem * 0.5));
+  .ui-toggle__track {
+    position: absolute;
+    inset: 0;
+    background: var(--ui-_track-bg);
+    border-radius: var(--ui-_track-radius);
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-overlay--entering,
-  .ui-overlay--visible {
-    opacity: 1;
+  .ui-toggle__thumb {
+    position: absolute;
+    inset-block-start: var(--ui-_thumb-offset);
+    inset-inline-start: var(--ui-_thumb-offset);
+    block-size: var(--ui-_thumb-size);
+    inline-size: var(--ui-_thumb-size);
+    background: var(--ui-_thumb-bg);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-overlay--exiting,
-  .ui-overlay--hidden {
-    opacity: 0;
-    pointer-events: none;
+  .ui-toggle__input:checked ~ .ui-toggle__track {
+    background: var(--ui-_track-bg-checked);
   }
-  .ui-overlay--animate {
-    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  .ui-toggle__input:checked ~ .ui-toggle__thumb {
+    transform: translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2));
+  }
+  .ui-toggle__input:focus-visible ~ .ui-toggle__track {
+    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+    outline-offset: calc(0.5rem / 4);
+  }
+  .ui-toggle__input:disabled ~ .ui-toggle__track,
+  .ui-toggle__input:disabled ~ .ui-toggle__thumb {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .ui-toggle:has(.ui-toggle__input:disabled) {
+    cursor: not-allowed;
   }
 }
 @layer components.tokens {
-  .ui-pagination {
-    --ui-_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));
-    --ui-_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));
-    --ui-_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));
-    --ui-_item-bg: var(--ui-pagination-item-bg, transparent);
-    --ui-_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
-    --ui-_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+  .ui-divider {
+    --ui-_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --ui-_line-size: var(--ui-divider-line-size, 1px);
+    --ui-_height: var(--ui-divider-height, 0.5rem);
+    --ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2));
   }
 }
 @layer components.styles {
-  .ui-pagination {
+  .ui-divider {
     display: flex;
     align-items: center;
-    gap: var(--ui-_gap);
+    block-size: var(--ui-_height);
+    margin: var(--ui-_gap) 0;
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    line-height: 1;
+    color: var(--ui-color-text-muted);
   }
-  .ui-pagination__list {
+  .ui-divider::before,
+  .ui-divider::after {
+    content: "";
+    flex: 1;
+    block-size: var(--ui-_line-size);
+    background: var(--ui-_color);
+  }
+  .ui-divider:not(:empty) {
+    --ui-_height: var(--ui-row-1, 1rem);
+  }
+  .ui-divider:not(:empty)::before {
+    margin-inline-end: calc(0.5rem * 2);
+  }
+  .ui-divider:not(:empty)::after {
+    margin-inline-start: calc(0.5rem * 2);
+  }
+  .ui-divider:empty::after {
+    display: none;
+  }
+  .ui-divider--vertical {
+    flex-direction: column;
+    align-self: stretch;
+    margin: 0 var(--ui-_gap);
+    writing-mode: vertical-rl;
+  }
+  .ui-divider--vertical::before,
+  .ui-divider--vertical::after {
+    flex: 1;
+    block-size: auto;
+    inline-size: var(--ui-_size);
+  }
+  .ui-divider--start::before {
+    display: none;
+  }
+  .ui-divider--start:not(:empty)::after {
+    margin-inline-start: calc(0.5rem * 2);
+  }
+  .ui-divider--end::after {
+    display: none;
+  }
+  .ui-divider--end:not(:empty)::before {
+    margin-inline-end: calc(0.5rem * 2);
+  }
+  .ui-divider--dashed::before,
+  .ui-divider--dashed::after {
+    background: repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
+  }
+  .ui-divider--vertical.ui-divider--dashed::before,
+  .ui-divider--vertical.ui-divider--dashed::after {
+    background: repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
+  }
+}
+@layer components.tokens {
+  .ui-breadcrumb {
+    --ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));
+    --ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));
+    --ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
+    --ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
+    --ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
+  }
+}
+@layer components.styles {
+  .ui-breadcrumb {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--ui-_gap);
+    block-size: var(--ui-_height);
     padding: 0;
     margin: 0;
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    line-height: 1;
     list-style: none;
   }
-  .ui-pagination__item {
+  .ui-breadcrumb__item {
     display: flex;
-  }
-  .ui-pagination__link {
-    display: inline-flex;
     align-items: center;
-    justify-content: center;
-    block-size: var(--ui-_item-size);
-    min-inline-size: var(--ui-_item-size);
-    padding-inline: calc(0.5rem * 1);
-    font-size: var(--ui-font-size-sm, 0.875rem);
-    text-decoration: none;
-    color: var(--ui-_item-color);
-    background: var(--ui-_item-bg);
-    border-radius: var(--ui-_item-radius);
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease), color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
-  }
-  .ui-pagination__link:hover {
-    background: var(--ui-_item-bg-hover);
+    gap: var(--ui-_gap);
+    block-size: var(--ui-_height);
   }
-  .ui-pagination__link[aria-current=page],
-  .ui-pagination__link--active {
-    color: var(--ui-_item-color-active);
-    background: var(--ui-_item-bg-active);
-    pointer-events: none;
+  .ui-breadcrumb__item:not(:last-child)::after {
+    content: var(--ui-breadcrumb-separator, "/");
+    color: var(--ui-_separator-color);
   }
-  .ui-pagination__link[aria-disabled=true],
-  .ui-pagination__link--disabled {
-    opacity: 0.5;
-    pointer-events: none;
+  .ui-breadcrumb__link {
+    text-decoration: none;
+    color: var(--ui-_link-color);
+    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-pagination__prev,
-  .ui-pagination__next {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(0.5rem * 0.5);
-    padding-inline: calc(0.5rem * 1.5);
+  .ui-breadcrumb__link:hover {
+    text-decoration: underline;
+    color: var(--ui-color-primary);
   }
-  .ui-pagination__ellipsis {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--ui-_item-size);
-    min-inline-size: var(--ui-_item-size);
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
+  .ui-breadcrumb__item:last-child .ui-breadcrumb__link,
+  .ui-breadcrumb__current {
+    color: var(--ui-_current-color);
+    pointer-events: none;
   }
-  .ui-pagination--sm {
-    --ui-_item-size: calc(0.5rem * 3);
-    --ui-_gap: calc(0.5rem * 0.25);
+  .ui-breadcrumb__item--hidden {
+    display: none;
   }
-  .ui-pagination--lg {
-    --ui-_item-size: calc(0.5rem * 5);
-    --ui-_gap: calc(0.5rem * 0.75);
+  .ui-breadcrumb__ellipsis {
+    color: var(--ui-_separator-color);
   }
 }
 @layer components.tokens {
-  .ui-popover {
-    --ui-_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
-    --ui-_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
-    --ui-_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));
-    --ui-_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));
-    --ui-_padding: var(--ui-popover-padding, calc(0.5rem * 2));
-    --ui-_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));
-    --ui-_z: var(--ui-popover-z, var(--ui-z-popover, 500));
-    --ui-_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem));
+  .ui-menu {
+    --ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));
+    --ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));
+    --ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));
+    --ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));
+    --ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
+    --ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
+    --ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));
+    --ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));
+    --ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
   }
 }
 @layer components.styles {
-  .ui-popover {
-    position: absolute;
-    z-index: var(--ui-_z);
-    max-inline-size: var(--ui-_max-width);
+  .ui-menu {
+    min-inline-size: var(--ui-_min-width);
+    max-block-size: var(--ui-_max-height);
     padding: var(--ui-_padding);
-    line-height: var(--ui-row-1, 1rem);
+    overflow-y: auto;
     background: var(--ui-_bg);
     border-radius: var(--ui-_radius);
     outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
     box-shadow: var(--ui-_shadow);
     outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
   }
-  .ui-popover__header {
-    padding-block-end: calc(0.5rem * 2);
-    margin-block-end: calc(0.5rem * 2);
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
-  }
-  .ui-popover__title {
+  .ui-menu__group {
+    padding: 0;
     margin: 0;
-    font-size: var(--ui-font-size-md, 1rem);
-    font-weight: var(--ui-weight-semibold, 600);
+    list-style: none;
   }
-  .ui-popover--top::after {
-    content: "";
-    position: absolute;
-    inset-block-start: 100%;
-    inset-inline-start: 50%;
-    border: var(--ui-_arrow-size) solid transparent;
-    border-block-start-color: var(--ui-_bg);
-    transform: translateX(-50%);
+  .ui-menu__label {
+    padding: var(--ui-_item-padding);
+    font-size: var(--ui-font-size-xs, 0.75rem);
+    font-weight: var(--ui-weight-medium, 500);
+    line-height: var(--ui-row-1, 1rem);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
   }
-  .ui-popover--top::before {
-    content: "";
-    position: absolute;
-    inset-block-start: 100%;
-    inset-inline-start: 50%;
-    border: calc(var(--ui-_arrow-size) + 1px) solid transparent;
-    border-block-start-color: var(--ui-_border-color);
-    transform: translateX(-50%);
+  .ui-menu__item {
+    display: flex;
+    align-items: center;
+    gap: calc(0.5rem * 1);
+    padding: var(--ui-_item-padding);
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    line-height: var(--ui-row-1, 1rem);
+    text-decoration: none;
+    color: var(--ui-color-text, hsl(220, 10%, 10%));
+    background: transparent;
+    border: none;
+    border-radius: var(--ui-_item-radius);
+    cursor: pointer;
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-  .ui-popover--bottom::after {
-    content: "";
-    position: absolute;
-    inset-block-end: 100%;
-    inset-inline-start: 50%;
-    border: var(--ui-_arrow-size) solid transparent;
-    border-block-end-color: var(--ui-_bg);
-    transform: translateX(-50%);
+  .ui-menu__item:hover, .ui-menu__item:focus-visible {
+    background: var(--ui-_item-bg-hover);
+    outline: none;
   }
-  .ui-popover--bottom::before {
-    content: "";
-    position: absolute;
-    inset-block-end: 100%;
-    inset-inline-start: 50%;
-    border: calc(var(--ui-_arrow-size) + 1px) solid transparent;
-    border-block-end-color: var(--ui-_border-color);
-    transform: translateX(-50%);
+  .ui-menu__item--danger {
+    color: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
-  .ui-popover--visible {
-    opacity: 1;
+  .ui-menu__item--danger:hover, .ui-menu__item--danger:focus-visible {
+    color: var(--ui-color-danger, oklch(60% 0.22 25deg));
   }
-  .ui-popover--hidden {
-    opacity: 0;
+  .ui-menu__item--disabled,
+  .ui-menu__item[aria-disabled=true] {
+    opacity: 0.5;
     pointer-events: none;
   }
-  .ui-popover--animate {
-    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
-  }
-}
-@layer components.tokens {
-  .ui-progress {
-    --ui-_height: var(--ui-progress-height, calc(0.5rem * 1));
-    --ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
-    --ui-_fill: var(--ui-progress-fill, var(--ui-color-primary));
-    --ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
-  }
-  .ui-progress--sm {
-    --ui-_height: calc(0.5rem * 1);
-  }
-  .ui-progress--lg {
-    --ui-_height: calc(0.5rem * 2);
-  }
-}
-@layer components.styles {
-  .ui-progress {
-    position: relative;
-    block-size: var(--ui-_height);
-    overflow: hidden;
-    background: var(--ui-_bg);
-    border-radius: var(--ui-_radius);
-  }
-  .ui-progress__bar {
-    block-size: 100%;
-    background: var(--ui-_fill);
-    border-radius: var(--ui-_radius);
-    transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
-  }
-  .ui-progress--indeterminate .progress__bar {
-    inline-size: 30%;
-    animation: progress-indeterminate 1.5s infinite ease-in-out;
-  }
-  @keyframes progress-indeterminate {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(400%);
-    }
-  }
-  .ui-progress--striped .progress__bar {
-    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background-size: 0.5rem 0.5rem;
-  }
-  .ui-progress--animated .progress__bar {
-    animation: progress-stripes 1s linear infinite;
-  }
-  @keyframes progress-stripes {
-    from {
-      background-position: 0.5rem 0;
-    }
-    to {
-      background-position: 0 0;
-    }
-  }
-  .ui-progress--success {
-    --ui-_fill: var(--ui-color-success);
-  }
-  .ui-progress--warning {
-    --ui-_fill: var(--ui-color-warning);
-  }
-  .ui-progress--danger {
-    --ui-_fill: var(--ui-color-danger);
-  }
-}
-@layer components.tokens {
-  .ui-radio {
-    --ui-_size: var(--ui-radio-size, calc(0.5rem * 2));
-    --ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
-  }
-  .ui-radio--lg {
-    --ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3));
+  .ui-menu__item-icon {
+    flex-shrink: 0;
+    block-size: calc(0.5rem * 2);
+    inline-size: calc(0.5rem * 2);
   }
-  .ui-radio--error {
-    --ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+  .ui-menu__item-shortcut {
+    margin-inline-start: auto;
+    font-size: var(--ui-font-size-xs, 0.75rem);
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
   }
-}
-@layer components.styles {
-  .ui-radio {
-    display: inline-flex;
-    flex-shrink: 0;
+  .ui-menu__separator {
+    display: flex;
     align-items: center;
-    justify-content: center;
-    block-size: var(--ui-_size);
-    inline-size: var(--ui-_size);
+    block-size: calc(0.5rem * 2);
     margin: 0;
-    vertical-align: middle;
-    background: var(--ui-_bg);
-    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    border-radius: 50%;
-    cursor: pointer;
-    appearance: none;
-    transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
   }
-  .ui-radio::before {
+  .ui-menu__separator::before {
     content: "";
-    block-size: 50%;
-    inline-size: 50%;
-    background-color: var(--ui-_dot-color);
-    border-radius: 50%;
-    opacity: 0;
-    transform: scale(0);
-    transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
-  }
-  .ui-radio:hover:not(:disabled) {
-    border-color: var(--ui-_border-color-focus);
-  }
-  .ui-radio:focus-visible {
-    border-color: var(--ui-_border-color-focus);
-    outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
-  }
-  .ui-radio:checked {
-    background: var(--ui-_bg-checked);
-    border-color: var(--ui-_bg-checked);
+    flex: 1;
+    block-size: var(--ui-border-width-sm, 1px);
+    background: var(--ui-color-border, hsl(220, 10%, 90%));
   }
-  .ui-radio:checked::before {
-    opacity: 1;
-    transform: scale(1);
+  .ui-menu__item--check,
+  .ui-menu__item--radio {
+    position: relative;
+    padding-inline-start: calc(0.5rem * 4);
   }
-  .ui-radio:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .ui-menu__item-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inset-inline-start: calc(0.5rem * 1);
+    block-size: calc(0.5rem * 2);
+    inline-size: calc(0.5rem * 2);
   }
 }
 @layer components.tokens {
-  .ui-select {
-    --ui-_height: var(--ui-select-height, var(--ui-row-2, 2rem));
-    --ui-_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));
-    --ui-_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
-  }
-  .ui-select--sm {
-    --ui-_height: var(--ui-select-height-sm, calc(1rem * 1.5));
-    --ui-_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem));
-  }
-  .ui-select--lg {
-    --ui-_height: var(--ui-select-height-lg, calc(1rem * 2.5));
-    --ui-_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));
-    --ui-_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem));
-  }
-  .ui-select--filled {
-    --ui-_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_border-color: transparent;
-  }
-  .ui-select--ghost {
-    --ui-_bg: transparent;
-    --ui-_border-color: transparent;
-  }
-  .ui-select--error {
-    --ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-  }
-  .ui-select--success {
-    --ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
+  .ui-nav {
+    --ui-_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));
+    --ui-_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));
+    --ui-_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));
+    --ui-_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));
+    --ui-_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
+    --ui-_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));
+    --ui-_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
+  }
+  .ui-nav--pills {
+    --ui-_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
+    --ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
 }
 @layer components.styles {
-  .ui-select {
-    display: inline-block;
-    block-size: var(--ui-_height);
-    padding-inline-start: var(--ui-_padding-x);
-    padding-inline-end: calc(var(--ui-_height) - var(--ui-space-half, 0.25rem));
-    font-family: inherit;
-    font-size: var(--ui-_font-size);
+  .ui-nav__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--ui-_gap);
+    box-sizing: border-box;
+    block-size: var(--ui-_item-height);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--ui-_border-color);
+  }
+  .ui-nav__item {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: var(--ui-_item-height);
+    padding-inline: var(--ui-_item-padding-x);
+    font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
+    font-size: var(--ui-_item-font-size);
+    font-weight: var(--ui-_item-font-weight);
     line-height: 1;
-    color: var(--ui-_text);
-    background-color: var(--ui-_bg);
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    border-radius: var(--ui-_radius);
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--ui-_item-color);
+    background: transparent;
+    border: none;
+    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
     cursor: pointer;
-    appearance: none;
-    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
-    background-repeat: no-repeat;
-    background-position: right var(--ui-space-half, 0.25rem) center;
-    background-size: calc(var(--ui-_height) * 0.5);
+    transition: color var(--ui-duration-base) var(--ui-ease-default), background var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
   }
-  .ui-select:hover:not(:disabled, :focus) {
-    border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
+  .ui-nav__item:hover {
+    color: var(--ui-_item-color-hover);
   }
-  .ui-select:focus, .ui-select--focus {
-    border-color: var(--ui-_border-color-focus);
-    outline: none;
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+  .ui-nav__item--active {
+    color: var(--ui-_item-color-active);
+    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-_item-color-active);
   }
-  .ui-select:disabled, .ui-select--disabled {
+  .ui-nav__item--disabled {
     opacity: 0.5;
-    cursor: not-allowed;
-  }
-  .ui-select--block {
-    inline-size: 100%;
-  }
-  .ui-select:invalid, .ui-select--placeholder {
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
-  }
-}
-@layer components.tokens {
-  .ui-skeleton {
-    --ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
-    --ui-_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
-    --ui-_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
-  }
-}
-@layer components.styles {
-  .ui-skeleton {
-    display: block;
-    position: relative;
-    overflow: hidden;
-    background: var(--ui-_bg);
-    border-radius: var(--ui-_radius);
-  }
-  .ui-skeleton::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, transparent 0%, var(--ui-_shimmer) 50%, transparent 100%);
-    animation: skeleton-shimmer 1.5s infinite;
-    transform: translateX(-100%);
-  }
-  @keyframes skeleton-shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-  .ui-skeleton--text {
-    block-size: calc(0.5rem * 2);
-    inline-size: 100%;
-  }
-  .ui-skeleton--heading {
-    block-size: calc(0.5rem * 3);
-    inline-size: 60%;
-  }
-  .ui-skeleton--circle {
-    block-size: calc(0.5rem * 5);
-    inline-size: calc(0.5rem * 5);
-    border-radius: 50%;
-  }
-  .ui-skeleton--rect {
-    block-size: calc(0.5rem * 20);
-    inline-size: 100%;
-  }
-  .ui-skeleton--static::after {
-    animation: none;
-  }
-  .ui-skeleton--pulse {
-    animation: skeleton-pulse 1.5s infinite ease-in-out;
+    pointer-events: none;
   }
-  .ui-skeleton--pulse::after {
-    display: none;
+  .ui-nav--pills .ui-nav__list {
+    box-shadow: none;
   }
-  @keyframes skeleton-pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.5;
-    }
+  .ui-nav--pills .ui-nav__item {
+    border-radius: var(--ui-_item-radius);
+    box-shadow: none;
   }
-}
-@layer components.tokens {
-  .ui-spinner {
-    --ui-_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
-    --ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
-    --ui-_color: var(--ui-spinner-color, currentcolor);
-    --ui-_track-color: var(--ui-spinner-track-color, transparent);
-    --ui-_duration: var(--ui-spinner-duration, 750ms);
+  .ui-nav--pills .ui-nav__item:hover {
+    background: var(--ui-_item-bg-hover);
   }
-  .ui-spinner--xs {
-    --ui-_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
-    --ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
+  .ui-nav--pills .ui-nav__item--active {
+    color: var(--ui-_item-color-active);
+    background: var(--ui-_item-bg-active);
   }
-  .ui-spinner--sm {
-    --ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
-    --ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
+  .ui-nav--vertical .ui-nav__list {
+    flex-direction: column;
+    align-items: stretch;
+    block-size: auto;
+    box-shadow: inset calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 0 var(--ui-_border-color);
   }
-  .ui-spinner--lg {
-    --ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
-    --ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
+  .ui-nav--vertical .ui-nav__item {
+    box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 transparent;
   }
-  .ui-spinner--xl {
-    --ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
-    --ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
+  .ui-nav--vertical .ui-nav__item--active {
+    box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 var(--ui-_item-color-active);
   }
-}
-@layer components.styles {
-  .ui-spinner {
-    display: inline-block;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    block-size: var(--ui-_size);
-    inline-size: var(--ui-_size);
-    vertical-align: middle;
-    border: var(--ui-_border-width) solid var(--ui-_track-color);
-    border-radius: 50%;
-    border-block-start-color: var(--ui-_color);
-    animation: spinner-rotate var(--ui-_duration) linear infinite;
+  .ui-nav--vertical.ui-nav--pills .ui-nav__list {
+    box-shadow: none;
   }
-  @keyframes spinner-rotate {
-    to {
-      transform: rotate(360deg);
-    }
+  .ui-nav--vertical.ui-nav--pills .ui-nav__item {
+    box-shadow: none;
   }
 }
 @layer components.tokens {
-  .ui-status {
-    --ui-_size: var(--ui-status-size, calc(0.5rem * 1));
-    --ui-_color: var(--ui-status-color, var(--ui-color-text-muted));
-    --ui-_gap: var(--ui-status-gap, calc(0.5rem * 1));
-  }
-  .ui-status--success {
-    --ui-_color: var(--ui-color-success);
-  }
-  .ui-status--warning {
-    --ui-_color: var(--ui-color-warning);
-  }
-  .ui-status--danger {
-    --ui-_color: var(--ui-color-danger);
-  }
-  .ui-status--info {
-    --ui-_color: var(--ui-color-primary);
+  .ui-pagination {
+    --ui-_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));
+    --ui-_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));
+    --ui-_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));
+    --ui-_item-bg: var(--ui-pagination-item-bg, transparent);
+    --ui-_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
+    --ui-_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
+    --ui-_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));
+    --ui-_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
   }
 }
 @layer components.styles {
-  .ui-status {
-    display: inline-flex;
+  .ui-pagination {
+    display: flex;
     align-items: center;
     gap: var(--ui-_gap);
   }
-  .ui-status__dot {
-    flex-shrink: 0;
-    block-size: var(--ui-_size);
-    inline-size: var(--ui-_size);
-    background: var(--ui-_color);
-    border-radius: 50%;
-  }
-  .ui-status--pulse .status__dot {
-    position: relative;
-  }
-  .ui-status--pulse .status__dot::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--ui-_color);
-    border-radius: 50%;
-    animation: status-pulse 2s infinite;
-  }
-  @keyframes status-pulse {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(2.5);
-    }
+  .ui-pagination__list {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-_gap);
+    padding: 0;
+    margin: 0;
+    list-style: none;
   }
-  .ui-status--sm {
-    --ui-_size: calc(0.5rem * 0.75);
-    --ui-_gap: calc(0.5rem * 0.75);
+  .ui-pagination__item {
+    display: flex;
   }
-  .ui-status--lg {
-    --ui-_size: calc(0.5rem * 1.5);
-    --ui-_gap: calc(0.5rem * 1.5);
+  .ui-pagination__link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ui-_item-size);
+    min-inline-size: var(--ui-_item-size);
+    padding-inline: calc(0.5rem * 1);
+    font-size: var(--ui-font-size-sm, 0.875rem);
+    text-decoration: none;
+    color: var(--ui-_item-color);
+    background: var(--ui-_item-bg);
+    border-radius: var(--ui-_item-radius);
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease), color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
-}
-@layer components.tokens {
-  .ui-table {
-    --ui-_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
-    --ui-_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
-    --ui-_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));
-    --ui-_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem));
+  .ui-pagination__link:hover {
+    background: var(--ui-_item-bg-hover);
   }
-  .ui-table--compact {
-    --ui-_cell-padding-y: var(--ui-space-0, 0.25rem);
-    --ui-_cell-padding-x: var(--ui-space-1, 0.5rem);
-    --ui-_font-size: var(--ui-font-size-xs, 0.75rem);
+  .ui-pagination__link[aria-current=page],
+  .ui-pagination__link--active {
+    color: var(--ui-_item-color-active);
+    background: var(--ui-_item-bg-active);
+    pointer-events: none;
   }
-}
-@layer components.styles {
-  .ui-table {
-    inline-size: 100%;
-    font-size: var(--ui-_font-size);
-    border-collapse: separate;
-    border-spacing: 0;
+  .ui-pagination__link[aria-disabled=true],
+  .ui-pagination__link--disabled {
+    opacity: 0.5;
+    pointer-events: none;
   }
-  .ui-table th,
-  .ui-table td {
-    padding-block-start: var(--ui-_cell-padding-y);
-    padding-block-end: calc(var(--ui-_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));
-    padding-inline: var(--ui-_cell-padding-x);
-    line-height: calc(var(--ui-unit, 0.5rem) * 3);
-    text-align: start;
-    border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+  .ui-pagination__prev,
+  .ui-pagination__next {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(0.5rem * 0.5);
+    padding-inline: calc(0.5rem * 1.5);
   }
-  .ui-table th {
-    font-weight: var(--ui-weight-medium, 500);
-    background: var(--ui-_header-bg);
+  .ui-pagination__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--ui-_item-size);
+    min-inline-size: var(--ui-_item-size);
+    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
   }
-  .ui-table--striped tbody tr:nth-child(odd) {
-    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
+  .ui-pagination--sm {
+    --ui-_item-size: calc(0.5rem * 3);
+    --ui-_gap: calc(0.5rem * 0.25);
   }
-  .ui-table--striped th {
-    background: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
+  .ui-pagination--lg {
+    --ui-_item-size: calc(0.5rem * 5);
+    --ui-_gap: calc(0.5rem * 0.75);
   }
 }
 @layer components.tokens {
@@ -3076,9 +2984,9 @@
     color: var(--ui-color-text, hsl(220, 10%, 10%));
   }
   .ui-tabs__tab--active {
-    color: var(--ui-color-primary, hsl(220, 85%, 50%));
+    color: var(--ui-color-primary, oklch(55% 0.22 250deg));
     background: var(--ui-_tab-bg-active);
-    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, hsl(220, 85%, 50%));
+    box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, oklch(55% 0.22 250deg));
   }
   .ui-tabs__panel {
     display: none;
@@ -3090,381 +2998,425 @@
   }
 }
 @layer components.tokens {
-  .ui-tag {
-    --ui-_height: var(--ui-tag-height, calc(0.5rem * 3));
-    --ui-_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));
-    --ui-_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));
-    --ui-_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));
-    --ui-_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-  }
-  .ui-tag--sm {
-    --ui-_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));
-    --ui-_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));
-    --ui-_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem));
-  }
-  .ui-tag--primary {
-    --ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
-  }
-  .ui-tag--success {
-    --ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
-  }
-  .ui-tag--warning {
-    --ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, hsl(38, 90%, 50%)));
-    --ui-_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)));
-  }
-  .ui-tag--danger {
-    --ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
+  .ui-dialog {
+    --ui-_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
+    --ui-_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));
+    --ui-_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
+    --ui-_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
   }
 }
 @layer components.styles {
-  .ui-tag {
-    display: inline-flex;
+  .ui-dialog .ui-modal__content {
+    padding: 0;
+  }
+  .ui-dialog__header {
+    display: flex;
+    flex-shrink: 0;
     align-items: center;
-    gap: var(--ui-_gap);
-    block-size: var(--ui-_height);
-    padding-inline: var(--ui-_padding-x);
-    font-size: var(--ui-_font-size);
-    font-weight: var(--ui-weight-medium, 500);
-    line-height: 1;
-    white-space: nowrap;
-    color: var(--ui-_color);
-    background: var(--ui-_bg);
-    border-radius: var(--ui-_radius);
+    justify-content: space-between;
+    gap: calc(0.5rem * 2);
+    padding: var(--ui-_header-padding);
+    border-block-end: 1px solid var(--ui-_border-color);
   }
-  .ui-tag:disabled, .ui-tag[aria-disabled=true] {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .ui-dialog__title {
+    margin: 0;
+    font-size: var(--ui-font-size-lg, 1.25rem);
+    font-weight: var(--ui-weight-semibold, 600);
+    line-height: calc(0.5rem * 3);
   }
-  .ui-tag__remove {
-    display: inline-flex;
+  .ui-dialog__close {
     flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin-inline-start: calc(var(--ui-_gap) * -0.5);
-    color: currentcolor;
-    background: none;
-    border: none;
-    opacity: 0.7;
-    cursor: pointer;
+    margin-inline-start: auto;
   }
-  .ui-tag__remove:hover {
-    opacity: 1;
+  .ui-dialog__body {
+    flex: 1 1 auto;
+    padding: var(--ui-_body-padding);
+    overflow-y: auto;
   }
-  .ui-tag-group {
+  .ui-dialog__footer {
     display: flex;
-    flex-wrap: wrap;
-    gap: calc(0.5rem * 0.5);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: calc(0.5rem * 1.5);
+    padding: var(--ui-_footer-padding);
+    border-block-start: 1px solid var(--ui-_border-color);
+  }
+  .ui-dialog--borderless .ui-dialog__header {
+    border-block-end: none;
+  }
+  .ui-dialog--borderless .ui-dialog__footer {
+    border-block-start: none;
   }
 }
 @layer components.tokens {
-  .ui-textarea {
-    --ui-_min-height: var(--ui-textarea-min-height, calc(1rem * 4));
-    --ui-_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));
-    --ui-_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));
-    --ui-_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));
-    --ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
-    --ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, hsl(220, 85%, 50%)));
-    --ui-_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));
-    --ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
+  .ui-drawer {
+    --ui-_size: var(--ui-drawer-size, calc(0.5rem * 40));
+    --ui-_max-size: var(--ui-drawer-max-size, 90%);
+    --ui-_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
+    --ui-_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));
+    --ui-_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
+    --ui-_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));
+    --ui-_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
+    --ui-_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
   }
-  .ui-textarea--sm {
-    --ui-_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));
-    --ui-_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem));
+  .ui-drawer--sm {
+    --ui-_size: calc(0.5rem * 30);
   }
-  .ui-textarea--lg {
-    --ui-_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));
-    --ui-_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));
-    --ui-_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));
-    --ui-_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem));
+  .ui-drawer--lg {
+    --ui-_size: calc(0.5rem * 50);
   }
-  .ui-textarea--filled {
-    --ui-_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
-    --ui-_border-color: transparent;
+  .ui-drawer--full {
+    --ui-_size: 100%;
+    --ui-_max-size: 100%;
   }
-  .ui-textarea--ghost {
-    --ui-_bg: transparent;
-    --ui-_border-color: transparent;
+}
+@layer components.styles {
+  .ui-drawer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-z-drawer, 900);
+    background: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));
   }
-  .ui-textarea--error {
-    --ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
-    --ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, hsl(0, 70%, 50%)));
+  .ui-drawer-overlay[data-state=open] {
+    animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
   }
-  .ui-textarea--success {
-    --ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
-    --ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, hsl(142, 70%, 45%)));
+  .ui-drawer-overlay[data-state=closed] {
+    animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
   }
-}
-@layer components.styles {
-  .ui-textarea {
-    display: block;
-    box-sizing: border-box;
-    inline-size: 100%;
-    min-block-size: var(--ui-_min-height);
-    padding-block: var(--ui-_padding-y);
-    padding-inline: var(--ui-_padding-x);
-    font-family: inherit;
-    font-size: var(--ui-_font-size);
-    line-height: var(--ui-row-1, 1rem);
-    color: var(--ui-_text);
-    background: var(--ui-_bg);
-    border: none;
-    border-radius: var(--ui-_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
-    resize: vertical;
+  @keyframes drawer-overlay-in {
+    from {
+      opacity: 0;
+    }
   }
-  .ui-textarea::placeholder {
-    color: var(--ui-_placeholder);
+  @keyframes drawer-overlay-out {
+    to {
+      opacity: 0;
+    }
   }
-  .ui-textarea:hover:not(:disabled, :focus) {
-    outline-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
+  .ui-drawer {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: var(--ui-z-drawer, 900);
+    background: var(--ui-_bg);
+    box-shadow: var(--ui-_shadow);
   }
-  .ui-textarea:focus, .ui-textarea--focus {
-    outline-color: var(--ui-_border-color-focus);
-    box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, hsl(220, 85%, 65%));
+  .ui-drawer--end {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--ui-_size);
+    max-inline-size: var(--ui-_max-size);
+    box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--ui-_border-color);
   }
-  .ui-textarea:disabled, .ui-textarea--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    resize: none;
+  .ui-drawer--start {
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: var(--ui-_size);
+    max-inline-size: var(--ui-_max-size);
+    box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--ui-_border-color);
   }
-  .ui-textarea:read-only {
-    background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
-    resize: none;
+  .ui-drawer--top {
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: var(--ui-_size);
+    max-block-size: var(--ui-_max-size);
+    box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color);
   }
-  .ui-textarea--resize-none {
-    resize: none;
+  .ui-drawer--bottom {
+    inset-block-end: 0;
+    inset-inline: 0;
+    block-size: var(--ui-_size);
+    max-block-size: var(--ui-_max-size);
+    box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
   }
-  .ui-textarea--resize-horizontal {
-    resize: horizontal;
+  .ui-drawer--end[data-state=open] {
+    animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
   }
-  .ui-textarea--resize-both {
-    resize: both;
+  .ui-drawer--end[data-state=closed] {
+    animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
   }
-}
-@layer components.tokens {
-  .ui-toast-viewport {
-    --ui-_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));
-    --ui-_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));
-    --ui-_max-width: var(--ui-toast-viewport-max-width, 420px);
+  .ui-drawer--start[data-state=open] {
+    animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  }
+  .ui-drawer--start[data-state=closed] {
+    animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
   }
-  .ui-toast {
-    --ui-_padding: var(--ui-toast-padding, calc(0.5rem * 2));
-    --ui-_gap: var(--ui-toast-gap, calc(0.5rem * 1));
-    --ui-_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));
-    --ui-_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
-    --ui-_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
-    --ui-_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
+  .ui-drawer--top[data-state=open] {
+    animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
   }
-  .ui-toast--success {
-    --ui-_border-color: var(--ui-color-success);
+  .ui-drawer--top[data-state=closed] {
+    animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
   }
-  .ui-toast--warning {
-    --ui-_border-color: var(--ui-color-warning);
+  .ui-drawer--bottom[data-state=open] {
+    animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
   }
-  .ui-toast--danger {
-    --ui-_border-color: var(--ui-color-danger);
+  .ui-drawer--bottom[data-state=closed] {
+    animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
   }
-  .ui-toast--info {
-    --ui-_border-color: var(--ui-color-primary);
+  @keyframes drawer-slide-in-end {
+    from {
+      transform: translateX(100%);
+    }
   }
-}
-@layer components.styles {
-  .ui-toast-viewport {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ui-_gap);
-    position: fixed;
-    z-index: var(--ui-z-toast, 1000);
-    max-inline-size: var(--ui-_max-width);
-    padding: var(--ui-_padding);
-    pointer-events: none;
-    list-style: none;
+  @keyframes drawer-slide-out-end {
+    to {
+      transform: translateX(100%);
+    }
   }
-  .ui-toast-viewport--top-end {
-    inset-block-start: 0;
-    inset-inline-end: 0;
+  @keyframes drawer-slide-in-start {
+    from {
+      transform: translateX(-100%);
+    }
   }
-  .ui-toast-viewport--top-start {
-    inset-block-start: 0;
-    inset-inline-start: 0;
+  @keyframes drawer-slide-out-start {
+    to {
+      transform: translateX(-100%);
+    }
   }
-  .ui-toast-viewport--bottom-end {
-    inset-block-end: 0;
-    inset-inline-end: 0;
+  @keyframes drawer-slide-in-top {
+    from {
+      transform: translateY(-100%);
+    }
   }
-  .ui-toast-viewport--bottom-start {
-    inset-block-end: 0;
-    inset-inline-start: 0;
+  @keyframes drawer-slide-out-top {
+    to {
+      transform: translateY(-100%);
+    }
   }
-  .ui-toast-viewport--top-center {
-    inset-block-start: 0;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
+  @keyframes drawer-slide-in-bottom {
+    from {
+      transform: translateY(100%);
+    }
   }
-  .ui-toast-viewport--bottom-center {
-    inset-block-end: 0;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
+  @keyframes drawer-slide-out-bottom {
+    to {
+      transform: translateY(100%);
+    }
   }
-  .ui-toast {
+  .ui-drawer__header {
     display: flex;
-    align-items: flex-start;
-    gap: var(--ui-_gap);
-    padding: var(--ui-_padding);
-    background: var(--ui-_bg);
-    border-radius: var(--ui-_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
-    box-shadow: var(--ui-_shadow);
-    pointer-events: auto;
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
-  }
-  .ui-toast__icon {
     flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(0.5rem * 2);
+    padding: var(--ui-_header-padding);
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
   }
-  .ui-toast__content {
-    flex: 1;
-    min-inline-size: 0;
-  }
-  .ui-toast__title {
+  .ui-drawer__title {
     margin: 0;
-    font-weight: var(--ui-weight-medium, 500);
+    font-size: var(--ui-font-size-lg, 1.25rem);
+    font-weight: var(--ui-weight-semibold, 600);
     line-height: var(--ui-row-1, 1rem);
   }
-  .ui-toast__description {
+  .ui-drawer__description {
     margin: 0;
     font-size: var(--ui-font-size-sm, 0.875rem);
     line-height: var(--ui-row-1, 1rem);
     color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
   }
-  .ui-toast__action {
+  .ui-drawer__close {
     flex-shrink: 0;
+    margin-inline-start: auto;
   }
-  .ui-toast__close {
-    display: inline-flex;
+  .ui-drawer__body {
+    flex: 1 1 auto;
+    padding: var(--ui-_body-padding);
+    overflow-y: auto;
+    line-height: var(--ui-row-1, 1rem);
+  }
+  .ui-drawer__footer {
+    display: flex;
     flex-shrink: 0;
     align-items: center;
+    justify-content: flex-end;
+    gap: calc(0.5rem * 2);
+    padding: var(--ui-_footer-padding);
+    box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color);
+  }
+}
+@layer components.tokens {
+  .ui-modal {
+    --ui-_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
+    --ui-_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));
+    --ui-_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));
+    --ui-_padding: var(--ui-modal-padding, calc(0.5rem * 3));
+    --ui-_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));
+    --ui-_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));
+    --ui-_z: var(--ui-modal-z, var(--ui-z-modal, 400));
+  }
+  .ui-modal--sm {
+    --ui-_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40));
+  }
+  .ui-modal--lg {
+    --ui-_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80));
+  }
+  .ui-modal--full {
+    --ui-_max-width: calc(100vw - 0.5rem * 4);
+    --ui-_max-height: calc(100vh - 0.5rem * 4);
+    --ui-_radius: 0;
+  }
+}
+@layer components.styles {
+  .ui-modal {
+    display: flex;
+    align-items: center;
     justify-content: center;
-    block-size: var(--ui-row-1, 1rem);
-    inline-size: var(--ui-row-1, 1rem);
-    padding: 0;
-    color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
-    background: none;
-    border: none;
-    cursor: pointer;
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-_z);
+    padding: calc(0.5rem * 2);
   }
-  .ui-toast__close:hover {
-    color: var(--ui-color-text, hsl(220, 10%, 10%));
+  .ui-modal__content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    inline-size: 100%;
+    max-block-size: var(--ui-_max-height);
+    max-inline-size: var(--ui-_max-width);
+    padding: var(--ui-_padding);
+    overflow: hidden;
+    background: var(--ui-_bg);
+    border-radius: var(--ui-_radius);
+    box-shadow: var(--ui-_shadow);
   }
-  .ui-toast[data-state=open] {
-    animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+  .ui-modal__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
   }
-  .ui-toast[data-state=closed] {
-    animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+  .ui-modal--entering .ui-modal__content,
+  .ui-modal--visible .ui-modal__content {
+    opacity: 1;
+    transform: scale(1);
   }
-  @keyframes toast-slide-in {
-    from {
-      opacity: 0;
-      transform: translateX(100%);
-    }
+  .ui-modal--exiting .ui-modal__content,
+  .ui-modal--hidden .ui-modal__content {
+    opacity: 0;
+    transform: scale(0.95);
   }
-  @keyframes toast-slide-out {
-    to {
-      opacity: 0;
-      transform: translateX(100%);
-    }
+  .ui-modal--animate .ui-modal__content {
+    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease), transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  }
+  .ui-modal--hidden {
+    visibility: hidden;
+    pointer-events: none;
   }
 }
 @layer components.tokens {
-  .ui-toggle {
-    --ui-_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));
-    --ui-_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));
-    --ui-_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
-    --ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
-    --ui-_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));
-    --ui-_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));
-    --ui-_thumb-bg: var(--ui-toggle-thumb-bg, white);
-    --ui-_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4));
+  .ui-overlay {
+    --ui-_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
+    --ui-_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
   }
-  .ui-toggle--sm {
-    --ui-_track-width: calc(0.5rem * 4);
-    --ui-_track-height: calc(0.5rem * 2);
-    --ui-_track-radius: 0.5rem;
-    --ui-_thumb-size: calc(0.5rem * 1.5);
+  .ui-overlay--light {
+    --ui-_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
+  }
+  .ui-overlay--blur {
+    --ui-_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
+  }
+}
+@layer components.styles {
+  .ui-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--ui-_z);
+    background: var(--ui-_bg);
+  }
+  .ui-overlay--blur {
+    backdrop-filter: blur(calc(0.5rem * 0.5));
+  }
+  .ui-overlay--entering,
+  .ui-overlay--visible {
+    opacity: 1;
+  }
+  .ui-overlay--exiting,
+  .ui-overlay--hidden {
+    opacity: 0;
+    pointer-events: none;
   }
-  .ui-toggle--lg {
-    --ui-_track-width: calc(0.5rem * 6);
-    --ui-_track-height: calc(0.5rem * 4);
-    --ui-_track-radius: calc(0.5rem * 2);
-    --ui-_thumb-size: calc(0.5rem * 3.5);
+  .ui-overlay--animate {
+    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
   }
 }
-@layer components.styles {
-  .ui-toggle {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    position: relative;
-    block-size: var(--ui-_track-height);
-    inline-size: var(--ui-_track-width);
-    background: var(--ui-_track-bg);
-    border-radius: var(--ui-_track-radius);
-    cursor: pointer;
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+@layer components.tokens {
+  .ui-popover {
+    --ui-_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
+    --ui-_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --ui-_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));
+    --ui-_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));
+    --ui-_padding: var(--ui-popover-padding, calc(0.5rem * 2));
+    --ui-_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));
+    --ui-_z: var(--ui-popover-z, var(--ui-z-popover, 500));
+    --ui-_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem));
   }
-  .ui-toggle__input {
+}
+@layer components.styles {
+  .ui-popover {
     position: absolute;
-    inset: 0;
-    block-size: 100%;
-    inline-size: 100%;
+    z-index: var(--ui-_z);
+    max-inline-size: var(--ui-_max-width);
+    padding: var(--ui-_padding);
+    line-height: var(--ui-row-1, 1rem);
+    background: var(--ui-_bg);
+    border-radius: var(--ui-_radius);
+    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    box-shadow: var(--ui-_shadow);
+    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+  }
+  .ui-popover__header {
+    padding-block-end: calc(0.5rem * 2);
+    margin-block-end: calc(0.5rem * 2);
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
+  }
+  .ui-popover__title {
     margin: 0;
-    opacity: 0;
-    cursor: pointer;
+    font-size: var(--ui-font-size-md, 1rem);
+    font-weight: var(--ui-weight-semibold, 600);
   }
-  .ui-toggle__track {
+  .ui-popover--top::after {
+    content: "";
     position: absolute;
-    inset: 0;
-    background: var(--ui-_track-bg);
-    border-radius: var(--ui-_track-radius);
-    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    border: var(--ui-_arrow-size) solid transparent;
+    border-block-start-color: var(--ui-_bg);
+    transform: translateX(-50%);
   }
-  .ui-toggle__thumb {
+  .ui-popover--top::before {
+    content: "";
     position: absolute;
-    inset-block-start: var(--ui-_thumb-offset);
-    inset-inline-start: var(--ui-_thumb-offset);
-    block-size: var(--ui-_thumb-size);
-    inline-size: var(--ui-_thumb-size);
-    background: var(--ui-_thumb-bg);
-    border-radius: 50%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    border: calc(var(--ui-_arrow-size) + 1px) solid transparent;
+    border-block-start-color: var(--ui-_border-color);
+    transform: translateX(-50%);
   }
-  .ui-toggle__input:checked ~ .toggle__track {
-    background: var(--ui-_track-bg-checked);
+  .ui-popover--bottom::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    border: var(--ui-_arrow-size) solid transparent;
+    border-block-end-color: var(--ui-_bg);
+    transform: translateX(-50%);
   }
-  .ui-toggle__input:checked ~ .toggle__thumb {
-    transform: translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2));
+  .ui-popover--bottom::before {
+    content: "";
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    border: calc(var(--ui-_arrow-size) + 1px) solid transparent;
+    border-block-end-color: var(--ui-_border-color);
+    transform: translateX(-50%);
   }
-  .ui-toggle__input:focus-visible ~ .toggle__track {
-    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
-    outline-offset: calc(0.5rem / 4);
+  .ui-popover--visible {
+    opacity: 1;
   }
-  .ui-toggle__input:disabled ~ .toggle__track,
-  .ui-toggle__input:disabled ~ .toggle__thumb {
-    opacity: 0.5;
-    cursor: not-allowed;
+  .ui-popover--hidden {
+    opacity: 0;
+    pointer-events: none;
   }
-  .ui-toggle:has(.toggle__input:disabled) {
-    cursor: not-allowed;
+  .ui-popover--animate {
+    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
 }
 @layer components.tokens {
@@ -3540,6 +3492,148 @@
     transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
   }
 }
+@layer components.tokens {
+  .ui-code {
+    --ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));
+    --ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));
+    --ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));
+    --ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem));
+  }
+  .ui-code--sm {
+    --ui-_font-size: var(--ui-font-size-xs, 0.75rem);
+  }
+  .ui-code-block {
+    --ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));
+    --ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
+    --ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));
+    --ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));
+    --ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)));
+  }
+}
+@layer components.styles {
+  .ui-code {
+    padding: var(--ui-_padding-y) var(--ui-_padding-x);
+    font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
+    font-size: var(--ui-_font-size);
+    line-height: var(--ui-leading-tight-sm, 1rem);
+    background: var(--ui-_bg);
+    border-radius: var(--ui-_radius);
+  }
+  .ui-code-block {
+    display: block;
+    padding: calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));
+    overflow-x: auto;
+    font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
+    font-size: var(--ui-_font-size);
+    line-height: var(--ui-leading-tight-sm, 1rem);
+    white-space: pre;
+    background: var(--ui-_bg);
+    border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
+    border-radius: var(--ui-_radius);
+  }
+  .ui-code-block code {
+    padding: 0;
+    font-size: inherit;
+    background: none;
+  }
+}
+@layer components.tokens {
+  .ui-heading {
+    --ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));
+    --ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));
+    --ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));
+    --ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)));
+  }
+  .ui-heading--4xl {
+    --ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));
+    --ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem));
+  }
+  .ui-heading--3xl {
+    --ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));
+    --ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem));
+  }
+  .ui-heading--2xl {
+    --ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));
+    --ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem));
+  }
+  .ui-heading--xl {
+    --ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));
+    --ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem));
+  }
+  .ui-heading--lg {
+    --ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));
+    --ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem));
+  }
+  .ui-heading--md {
+    --ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));
+    --ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem));
+  }
+  .ui-heading--sm {
+    --ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));
+    --ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem));
+  }
+}
+@layer components.styles {
+  .ui-heading {
+    margin: 0;
+    font-size: var(--ui-_font-size);
+    font-weight: var(--ui-_weight);
+    line-height: var(--ui-_line-height);
+    color: var(--ui-_color);
+  }
+}
+@layer components.tokens {
+  .ui-link {
+    --ui-_color: var(--ui-link-color, var(--ui-color-primary));
+    --ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));
+    --ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));
+    --ui-_decoration: var(--ui-link-decoration, underline);
+    --ui-_decoration-hover: var(--ui-link-decoration-hover, underline);
+  }
+  .ui-link--muted {
+    --ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
+    --ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
+  }
+  .ui-link--subtle {
+    --ui-_decoration: none;
+    --ui-_decoration-hover: underline;
+  }
+}
+@layer components.styles {
+  .ui-link {
+    text-decoration: var(--ui-_decoration);
+    color: var(--ui-_color);
+    cursor: pointer;
+    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    text-underline-offset: calc(0.5rem / 4);
+  }
+  .ui-link:hover {
+    text-decoration: var(--ui-_decoration-hover);
+    color: var(--ui-_color-hover);
+  }
+  .ui-link:focus-visible {
+    border-radius: calc(0.5rem / 4);
+    outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+    outline-offset: calc(0.5rem / 4);
+  }
+  .ui-link:visited {
+    color: var(--ui-_color-visited);
+  }
+  .ui-link--disabled,
+  .ui-link[aria-disabled=true] {
+    color: var(--ui-color-text-muted);
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .ui-link--external::after {
+    content: "↗";
+    display: inline-block;
+    margin-inline-start: calc(0.5rem / 4);
+    font-size: 0.75em;
+  }
+}
 /* 05. Utilities (high specificity, load last) */
 /* Spacing utilities - all values align to 8px grid */
 /* Uses logical properties for international/RTL support */
@@ -4391,14 +4485,13 @@
   }
 }
 /* 99. Debug tools (dev only) */
-/* Debug grid overlay - add class="debug-grid" to body or any container */
 .ui-debug-grid,
 .ui-debug-grid-rows,
 .ui-debug-baseline {
   position: relative;
 }
 .ui-debug-grid {
-  --ui-debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.15);
+  --ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15);
 }
 .ui-debug-grid::after {
   content: "";
@@ -4414,10 +4507,9 @@
   background-size: var(--ui-unit) var(--ui-unit);
   background-position: 0 0;
 }
-/* Stronger grid at row intervals (16px) */
 .ui-debug-grid-rows {
-  --ui-debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.1);
-  --ui-debug-color-strong: hsl(var(--ui-hue-primary) 80% 50% / 0.25);
+  --ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);
+  --ui-debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25);
 }
 .ui-debug-grid-rows::after {
   content: "";
@@ -4433,9 +4525,8 @@
   background-size: var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-row);
   background-position: 0 0;
 }
-/* Baseline grid only (horizontal lines) */
 .ui-debug-baseline {
-  --ui-debug-color: hsl(var(--ui-hue-danger) 80% 50% / 0.2);
+  --ui-debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
 }
 .ui-debug-baseline::after {
   content: "";
@@ -4450,7 +4541,6 @@
   pointer-events: none;
   background-size: 100% var(--ui-unit);
 }
-/* Element boundaries outline */
 .ui-debug-outline * {
   outline: 1px solid hsla(0, 100%, 50%, 0.5);
 }