@orcestr/ui 0.0.3 → 0.1.0

package/dist/styles/orcestr-ui.css

@@ -1,29 +1,51 @@
 :root[data-oui-theme=light],
 .oui-root {
-  --oui-bg: #f8fafc;
+  --oui-bg: #ffffff;
   --oui-panel: #ffffff;
-  --oui-panel-2: #f3f6fa;
+  --oui-panel-2: #f9f9f9;
   --oui-control-bg: transparent;
-  --oui-control-hover-bg: rgb(15 23 42 / 6%);
-  --oui-border: rgb(15 23 42 / 8%);
-  --oui-border-strong: rgb(15 23 42 / 16%);
-  --oui-text: #111827;
-  --oui-muted: #6b7280;
-  --oui-soft: #eef3f8;
-  --oui-soft-hover: #e6edf5;
-  --oui-brand: #2563eb;
-  --oui-brand-strong: #1d4ed8;
-  --oui-brand-solid: #2563eb;
-  --oui-brand-solid-hover: #1d4ed8;
-  --oui-brand-soft: rgb(37 99 235 / 12%);
-  --oui-success: #0f9f6e;
-  --oui-success-soft: #e8f8f2;
-  --oui-warning: #bd7a00;
-  --oui-warning-soft: #fff6db;
-  --oui-danger: #dc2626;
-  --oui-danger-soft: rgb(220 38 38 / 12%);
-  --oui-info: #0876bd;
-  --oui-info-soft: #e7f4ff;
+  --oui-control-hover-bg: #0000000f;
+  --oui-border: #00000017;
+  --oui-border-strong: #00000026;
+  --oui-text: #202020;
+  --oui-muted: #646464;
+  --oui-soft: #008ff519;
+  --oui-soft-hover: #008ff519;
+  --oui-primary-base: #0090ff;
+  --oui-primary-text: #0d74ce;
+  --oui-primary-surface: #008ff519;
+  --oui-primary-border: #0083eb71;
+  --oui-primary-contrast: #ffffff;
+  --oui-secondary-base: #8d8d8d;
+  --oui-secondary-text: #202020;
+  --oui-secondary-surface: #00000006;
+  --oui-secondary-border: #00000017;
+  --oui-secondary-contrast: #ffffff;
+  --oui-neutral-base: #6b7280;
+  --oui-neutral-text: #202020;
+  --oui-neutral-surface: #00000006;
+  --oui-neutral-border: #00000017;
+  --oui-neutral-contrast: #ffffff;
+  --oui-success-base: #0f9f6e;
+  --oui-success-text: #218358;
+  --oui-success-surface: #00a43319;
+  --oui-success-border: #00914071;
+  --oui-success-contrast: #ffffff;
+  --oui-warning-base: #ffc53d;
+  --oui-warning-text: #ab6400;
+  --oui-warning-surface: #ffde003d;
+  --oui-warning-border: #eab5008c;
+  --oui-warning-contrast: #202020;
+  --oui-danger-base: #e5484d;
+  --oui-danger-text: #ce2c31;
+  --oui-danger-surface: #f3000d14;
+  --oui-danger-border: #df000356;
+  --oui-danger-contrast: #ffffff;
+  --oui-info-base: #0090ff;
+  --oui-info-text: #0d74ce;
+  --oui-info-surface: #008ff519;
+  --oui-info-border: #0083eb71;
+  --oui-info-contrast: #ffffff;
   --oui-section-bg: #0f172a;
   --oui-section-opacity: 0%;
   --oui-section-nested-opacity: 0%;
@@ -34,13 +56,16 @@
   --oui-section-solid-bg: var(--oui-bg);
   --oui-section-nested-solid-bg: var(--oui-bg);
   --oui-floating-bg: var(--oui-surface-bg);
-  --oui-pad-bg: #0f172a;
-  --oui-pad-opacity: 3.5%;
-  --oui-pad-hover-opacity: 5.5%;
+  --oui-pad-bg: #00000006;
+  --oui-pad-hover-bg: #0000000f;
+  --oui-pad-opacity: 100%;
+  --oui-pad-hover-opacity: 100%;
+  --oui-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 78%, var(--oui-text) 22%);
+  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 68%, var(--oui-text) 32%);
   --oui-skeleton-shimmer: rgb(255 255 255 / 18%);
-  --oui-shadow-sm: 0 2px 8px rgb(17 24 39 / 8%);
-  --oui-shadow-md: 0 16px 48px var(--oui-shadow-soft);
-  --oui-ring: 0 0 0 3px rgb(37 99 235 / 16%);
+  --oui-shadow-sm: inset 0 0 0 1px #0000001f, inset 0 1.5px 2px 0 #00000006, inset 0 1.5px 2px 0 rgb(0 0 0 / 10%);
+  --oui-shadow-md: 0 0 0 1px #0000000f, 0 2px 3px -2px #0000000f, 0 3px 12px -4px rgb(0 0 0 / 10%), 0 4px 16px -8px rgb(0 0 0 / 10%);
+  --oui-ring: 0 0 0 3px #009eff2a;
   --oui-radius: 8px;
   --oui-radius-sm: 6px;
   --oui-radius-xl: 12px;
@@ -64,13 +89,14 @@
   --oui-state-selected-opacity: .15;
   --oui-state-focus-ring-width: 3px;
   --oui-panel-solid: #ffffff;
-  --oui-gray-3: #eef2f7;
-  --oui-gray-a3: rgb(15 23 42 / 6%);
-  --oui-gray-a4: rgb(15 23 42 / 8%);
-  --oui-gray-a5: rgb(15 23 42 / 12%);
-  --oui-gray-a8: rgb(15 23 42 / 18%);
-  --oui-shadow-soft: rgb(15 23 42 / 18%);
+  --oui-gray-3: #f0f0f0;
+  --oui-gray-a3: #0000000f;
+  --oui-gray-a4: #00000017;
+  --oui-gray-a5: #0000001f;
+  --oui-gray-a8: #00000044;
+  --oui-shadow-soft: rgb(0 0 0 / 12%);
   color: var(--oui-text);
+  color-scheme: light;
   background: var(--oui-bg);
   min-height: 100%;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -78,33 +104,55 @@
 
 :root[data-oui-theme=dark],
 .oui-root[data-oui-theme=dark] {
-  --oui-bg: #111318;
-  --oui-panel: #171a21;
-  --oui-panel-2: #20242d;
+  --oui-bg: #09090b;
+  --oui-panel: #0c0c0f;
+  --oui-panel-2: #222222;
   --oui-control-bg: transparent;
-  --oui-control-hover-bg: rgb(255 255 255 / 6%);
-  --oui-border: rgb(255 255 255 / 8%);
-  --oui-border-strong: rgb(255 255 255 / 14%);
-  --oui-text: #f4f6f8;
-  --oui-muted: #9aa4b2;
-  --oui-soft: #223147;
-  --oui-soft-hover: #2b3b54;
-  --oui-brand: #6ea0ff;
-  --oui-brand-strong: #93b8ff;
-  --oui-brand-solid: #315fbe;
-  --oui-brand-solid-hover: #3b70d8;
-  --oui-brand-soft: rgb(110 160 255 / 16%);
-  --oui-success: #5fd3a1;
-  --oui-success-soft: #173a31;
-  --oui-warning: #f3c969;
-  --oui-warning-soft: #443516;
-  --oui-danger: #ff7b72;
-  --oui-danger-soft: rgb(255 123 114 / 14%);
-  --oui-info: #71c7ff;
-  --oui-info-soft: #173852;
+  --oui-control-hover-bg: #ffffff12;
+  --oui-border: #ffffff1b;
+  --oui-border-strong: #ffffff2c;
+  --oui-text: #eeeeee;
+  --oui-muted: #b4b4b4;
+  --oui-soft: #0077ff3a;
+  --oui-soft-hover: #0077ff3a;
+  --oui-primary-base: #0090ff;
+  --oui-primary-text: #70b8ff;
+  --oui-primary-surface: #0077ff3a;
+  --oui-primary-border: #2a91fe98;
+  --oui-primary-contrast: #ffffff;
+  --oui-secondary-base: #8d8d8d;
+  --oui-secondary-text: #eeeeee;
+  --oui-secondary-surface: #ffffff09;
+  --oui-secondary-border: #ffffff1b;
+  --oui-secondary-contrast: #ffffff;
+  --oui-neutral-base: #b4b4b4;
+  --oui-neutral-text: #eeeeee;
+  --oui-neutral-surface: #ffffff09;
+  --oui-neutral-border: #ffffff1b;
+  --oui-neutral-contrast: #ffffff;
+  --oui-success-base: #30a46c;
+  --oui-success-text: #3dd68c;
+  --oui-success-surface: #22ff991e;
+  --oui-success-border: #50fdac5e;
+  --oui-success-contrast: #ffffff;
+  --oui-warning-base: #ffc53d;
+  --oui-warning-text: #ffca16;
+  --oui-warning-surface: #fa820022;
+  --oui-warning-border: #fd9b0051;
+  --oui-warning-contrast: #202020;
+  --oui-danger-base: #e5484d;
+  --oui-danger-text: #ff9592;
+  --oui-danger-surface: #ff173f2d;
+  --oui-danger-border: #ff536184;
+  --oui-danger-contrast: #ffffff;
+  --oui-info-base: #0090ff;
+  --oui-info-text: #70b8ff;
+  --oui-info-surface: #0077ff3a;
+  --oui-info-border: #2a91fe98;
+  --oui-info-contrast: #ffffff;
   --oui-section-bg: #ffffff;
-  --oui-section-opacity: 2%;
-  --oui-section-nested-opacity: 2%;
+  --oui-section-opacity: 0%;
+  --oui-section-nested-opacity: 0%;
   --oui-section-shadow: none;
   --oui-section-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-opacity), transparent);
   --oui-section-nested-surface-bg: color-mix(in srgb, var(--oui-section-bg) var(--oui-section-nested-opacity), transparent);
@@ -112,20 +160,24 @@
   --oui-section-solid-bg: rgb(22 24 29);
   --oui-section-nested-solid-bg: rgb(27 29 34);
   --oui-floating-bg: var(--oui-surface-bg);
-  --oui-pad-bg: #ffffff;
-  --oui-pad-opacity: 2%;
-  --oui-pad-hover-opacity: 4.5%;
-  --oui-skeleton-shimmer: rgb(255 255 255 / 8%);
-  --oui-shadow-sm: 0 2px 10px rgb(0 0 0 / 22%);
-  --oui-shadow-md: 0 16px 48px var(--oui-shadow-soft);
-  --oui-ring: 0 0 0 3px rgb(106 160 255 / 22%);
+  --oui-pad-bg: #ffffff09;
+  --oui-pad-hover-bg: #ffffff12;
+  --oui-pad-opacity: 100%;
+  --oui-pad-hover-opacity: 100%;
+  --oui-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 82%, var(--oui-text) 18%);
+  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 74%, var(--oui-text) 26%);
+  --oui-skeleton-shimmer: #ffffff12;
+  --oui-shadow-sm: inset 0 -1px 1px 0 #ffffff12, inset 0 0 0 1px #ffffff12, inset 0 3px 4px 0 rgb(0 0 0 / 30%), inset 0 0 0 1px #ffffff1b;
+  --oui-shadow-md: 0 0 0 1px #ffffff2c, 0 2px 3px -2px rgb(0 0 0 / 15%), 0 3px 8px -2px rgb(0 0 0 / 40%), 0 4px 12px -4px rgb(0 0 0 / 50%);
+  --oui-ring: 0 0 0 3px #0075ff57;
   --oui-panel-solid: var(--oui-panel);
-  --oui-gray-3: #20242d;
-  --oui-gray-a3: rgb(255 255 255 / 5%);
-  --oui-gray-a4: rgb(255 255 255 / 8%);
-  --oui-gray-a5: rgb(255 255 255 / 11%);
-  --oui-gray-a8: rgb(255 255 255 / 16%);
-  --oui-shadow-soft: rgb(0 0 0 / 42%);
+  --oui-gray-3: #222222;
+  --oui-gray-a3: #ffffff12;
+  --oui-gray-a4: #ffffff1b;
+  --oui-gray-a5: #ffffff22;
+  --oui-gray-a8: #ffffff55;
+  --oui-shadow-soft: rgb(0 0 0 / 48%);
+  color-scheme: dark;
 }
 
 .oui-root *,
@@ -175,30 +227,122 @@
   color: var(--oui-text);
 }
 
-.oui-text-brand {
-  color: var(--oui-brand-strong);
+.oui-text-primary {
+  color: var(--oui-primary-text);
+}
+
+.oui-text-secondary {
+  color: var(--oui-secondary-text);
 }
 
 .oui-text-success {
-  color: var(--oui-success);
+  color: var(--oui-success-base);
 }
 
 .oui-text-warning {
-  color: var(--oui-warning);
+  color: var(--oui-warning-base);
 }
 
 .oui-text-danger {
-  color: var(--oui-danger);
+  color: var(--oui-danger-base);
 }
 
 .oui-text-info {
-  color: var(--oui-info);
+  color: var(--oui-info-base);
 }
 
 .oui-muted {
   color: var(--oui-muted);
 }
 
+.oui-text-blue {
+  color: var(--blue-11, var(--oui-text));
+}
+
+.oui-text-sky {
+  color: var(--sky-11, var(--oui-text));
+}
+
+.oui-text-cyan {
+  color: var(--cyan-11, var(--oui-text));
+}
+
+.oui-text-teal {
+  color: var(--teal-11, var(--oui-text));
+}
+
+.oui-text-indigo {
+  color: var(--indigo-11, var(--oui-text));
+}
+
+.oui-text-violet {
+  color: var(--violet-11, var(--oui-text));
+}
+
+.oui-text-purple {
+  color: var(--purple-11, var(--oui-text));
+}
+
+.oui-text-iris {
+  color: var(--iris-11, var(--oui-text));
+}
+
+.oui-text-green {
+  color: var(--green-11, var(--oui-text));
+}
+
+.oui-text-jade {
+  color: var(--jade-11, var(--oui-text));
+}
+
+.oui-text-mint {
+  color: var(--mint-11, var(--oui-text));
+}
+
+.oui-text-grass {
+  color: var(--grass-11, var(--oui-text));
+}
+
+.oui-text-lime {
+  color: var(--lime-11, var(--oui-text));
+}
+
+.oui-text-yellow {
+  color: var(--yellow-11, var(--oui-text));
+}
+
+.oui-text-amber {
+  color: var(--amber-11, var(--oui-text));
+}
+
+.oui-text-orange {
+  color: var(--orange-11, var(--oui-text));
+}
+
+.oui-text-brown {
+  color: var(--brown-11, var(--oui-text));
+}
+
+.oui-text-red {
+  color: var(--red-11, var(--oui-text));
+}
+
+.oui-text-ruby {
+  color: var(--ruby-11, var(--oui-text));
+}
+
+.oui-text-crimson {
+  color: var(--crimson-11, var(--oui-text));
+}
+
+.oui-text-pink {
+  color: var(--pink-11, var(--oui-text));
+}
+
+.oui-text-tomato {
+  color: var(--tomato-11, var(--oui-text));
+}
+
 .oui-app-shell {
   height: 100vh;
   min-height: 100vh;
@@ -421,8 +565,8 @@
 
 .oui-app-shell-nav-item[data-active=true] {
   border-color: transparent;
-  color: var(--oui-brand-strong);
-  background: var(--oui-brand-soft);
+  color: var(--oui-primary-text);
+  background: var(--oui-primary-surface);
 }
 
 .oui-app-shell-nav-item:disabled {
@@ -471,8 +615,8 @@
   min-height: 18px;
   border-radius: 999px;
   padding: 0 6px;
-  color: var(--oui-brand-strong);
-  background: var(--oui-brand-soft);
+  color: var(--oui-primary-text);
+  background: var(--oui-primary-surface);
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
@@ -526,9 +670,21 @@
   .oui-app-shell {
     padding: 0;
   }
+  .oui-app-shell-header {
+    min-height: 48px;
+    gap: 8px;
+    padding: 6px 8px;
+  }
+  .oui-app-shell-header > .oui-icon-button {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+    flex: 0 0 32px;
+    align-self: center;
+  }
   .oui-app-shell-frame {
     width: 100%;
-    height: calc(100vh - 56px);
+    height: calc(100vh - 48px);
     grid-template-columns: 1fr;
     grid-template-rows: minmax(0, 1fr);
     max-width: none;
@@ -544,18 +700,49 @@
     grid-column: 1;
     grid-row: 1;
   }
-  .oui-app-shell-sidebar-drawer-panel {
+  .oui-drawer-backdrop.oui-app-shell-sidebar-drawer-overlay {
     background: transparent;
+  }
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
+    width: min(88vw, max(var(--oui-drawer-size, 300px), 300px));
+    background: var(--color-background, var(--oui-bg));
     border: 0;
-    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.28);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
+    border-radius: 0 14px 14px 0;
+    box-shadow: 14px 0 38px rgba(0, 0, 0, 0.24);
   }
   .oui-app-shell-sidebar-drawer-body {
     display: flex;
     min-height: 0;
     padding: 0;
   }
+  .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+    width: 100%;
+    height: 100%;
+    border-radius: 0 14px 14px 0;
+  }
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-head {
+    flex: 0 0 48px;
+    min-height: 48px;
+    border-bottom: 0;
+    padding: 0 8px;
+  }
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-content {
+    padding: 6px 8px 12px;
+  }
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-indicator {
+    right: 8px;
+    left: 8px;
+  }
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-groups,
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-group {
+    gap: 8px;
+  }
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-item {
+    padding: 0 8px;
+  }
+  .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-footer {
+    padding: 8px;
+  }
   .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
     width: 100%;
   }
@@ -563,26 +750,18 @@
     width: 100%;
     height: 100vh;
     max-height: none;
-    --oui-app-shell-sidebar-head-pad: 18px 16px 12px;
-    --oui-app-shell-sidebar-body-pad: 12px 16px 18px;
-    --oui-app-shell-sidebar-footer-pad: 12px 16px 18px;
-    border-radius: 0 12px 12px 0;
-    background: transparent;
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
+    --oui-app-shell-sidebar-head-pad: 8px;
+    --oui-app-shell-sidebar-body-pad: 6px 8px 12px;
+    --oui-app-shell-sidebar-footer-pad: 8px;
+    border-radius: 0 14px 14px 0;
+    background: var(--color-background, var(--oui-bg));
     box-shadow: none;
   }
   .oui-app-shell-sidebar-separator {
-    margin: 0 16px;
+    margin: 0 8px;
   }
   .oui-app-shell-sidebar::before {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-    display: block;
-    background: color-mix(in srgb, var(--oui-panel) 20%, transparent);
-    backdrop-filter: blur(48px);
-    pointer-events: none;
+    display: none;
   }
   .oui-app-shell-sidebar .oui-app-shell-sidebar-close {
     display: inline-flex;
@@ -601,6 +780,208 @@
     justify-content: flex-start;
   }
 }
+.oui-app-sidebar {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--oui-text);
+  background: var(--color-background, var(--oui-bg));
+}
+
+.oui-app-sidebar-head {
+  display: flex;
+  flex: 0 0 61px;
+  min-height: 61px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-bottom: 1px solid var(--gray-a4, var(--oui-border));
+  padding: 0 16px;
+  background: var(--color-background, var(--oui-bg));
+}
+
+.oui-app-sidebar[data-side=right] .oui-app-sidebar-head {
+  flex-direction: row-reverse;
+}
+
+.oui-app-sidebar-brand {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-app-sidebar[data-side=right] .oui-app-sidebar-brand {
+  flex-direction: row-reverse;
+}
+
+.oui-app-sidebar-logo {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.oui-app-sidebar-logo img {
+  display: block;
+}
+
+.oui-app-sidebar-title {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 18px;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-app-sidebar-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-app-sidebar[data-side=right] .oui-app-sidebar-actions {
+  flex-direction: row-reverse;
+}
+
+.oui-app-sidebar-scroll {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.oui-app-sidebar-scroll > .oui-scroll-area-viewport {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.oui-app-sidebar-content {
+  position: relative;
+  min-width: 0;
+  padding: 16px 16px 24px;
+}
+
+.oui-app-sidebar-indicator {
+  position: absolute;
+  top: 0;
+  right: 16px;
+  left: 16px;
+  z-index: 0;
+  height: var(--oui-app-sidebar-item-h, 40px);
+  border-radius: var(--radius-3, var(--oui-radius-sm));
+  background: var(--gray-a4, var(--oui-soft));
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0);
+  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
+}
+
+.oui-app-sidebar-groups {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.oui-app-sidebar-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.oui-app-sidebar-separator,
+.oui-app-sidebar-footer-separator {
+  width: 100%;
+}
+
+.oui-app-sidebar-nav {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.oui-app-sidebar-item {
+  display: flex;
+  width: 100%;
+  height: var(--oui-app-sidebar-item-h, 40px);
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  border: 0;
+  border-radius: var(--radius-3, var(--oui-radius-sm));
+  padding: 0 12px;
+  color: var(--gray-11, var(--oui-muted));
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 280ms ease;
+}
+
+.oui-app-sidebar[data-side=right] .oui-app-sidebar-item {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+.oui-app-sidebar-item:hover,
+.oui-app-sidebar-item:focus-visible {
+  color: var(--gray-12, var(--oui-text));
+  outline: none;
+}
+
+.oui-app-sidebar-item:focus-visible {
+  box-shadow: var(--oui-ring);
+}
+
+.oui-app-sidebar-item[data-sidebar-active=true] {
+  color: var(--gray-12, var(--oui-text));
+}
+
+.oui-app-sidebar-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.oui-app-sidebar-item-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--oui-app-sidebar-icon-color, currentColor);
+  transition: color 280ms ease;
+}
+
+.oui-app-sidebar-item[data-sidebar-active=true] .oui-app-sidebar-item-icon {
+  color: var(--oui-primary-text);
+}
+
+.oui-app-sidebar-item-label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-app-sidebar[data-side=right] .oui-app-sidebar-item-label {
+  text-align: right;
+}
+
+.oui-app-sidebar-footer {
+  flex: 0 0 auto;
+  padding: 16px;
+}
+
 .oui-button,
 .oui-icon-button {
   position: relative;
@@ -688,66 +1069,232 @@
   width: 42px;
 }
 
-.oui-button-full {
-  width: 100%;
-  min-width: 0;
-}
-
-.oui-button-label {
+.oui-icon-button-badge {
+  position: absolute;
+  top: -7px;
+  right: -10px;
+  z-index: 1;
+  box-sizing: border-box;
   display: inline-flex;
+  min-width: 17px;
+  height: 17px;
   align-items: center;
-  min-height: 1rem;
-  line-height: 1rem;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 0 4px;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1;
+  pointer-events: none;
 }
 
-.oui-button:focus-visible,
-.oui-icon-button:focus-visible,
-.oui-text-field:focus-within,
-.oui-text-area:focus-within,
-.oui-listbox-item:focus-visible,
-.oui-menu-item:focus-visible,
-.oui-tabs-trigger:focus-visible,
-.oui-segmented-item:focus-visible {
-  outline: none;
-  box-shadow: var(--oui-ring);
+.oui-icon-button-badge[data-tone=neutral] {
+  color: var(--oui-text);
+  background: var(--oui-gray-a3, var(--oui-soft));
 }
 
-.oui-button:disabled,
-.oui-icon-button:disabled {
-  cursor: not-allowed;
-  opacity: var(--oui-state-disabled-opacity, 0.56);
+.oui-icon-button-badge[data-tone=primary] {
+  color: var(--oui-primary-text);
+  background: var(--oui-primary-surface);
 }
 
-.oui-button[data-loading=true]:disabled,
-.oui-icon-button[data-loading=true]:disabled {
-  cursor: progress;
-  opacity: var(--oui-state-loading-opacity, 1);
+.oui-icon-button-badge[data-tone=secondary] {
+  color: var(--oui-secondary-text);
+  background: var(--oui-secondary-surface);
 }
 
-.oui-button[data-variant=solid],
-.oui-icon-button[data-variant=solid] {
-  color: #ffffff;
-  background: var(--oui-brand-solid, var(--oui-brand));
-  border-color: var(--oui-brand-solid, var(--oui-brand));
+.oui-icon-button-badge[data-tone=success] {
+  color: var(--oui-success-base);
+  background: var(--oui-success-surface);
 }
 
-.oui-button[data-variant=solid]:not(:disabled):hover,
-.oui-icon-button[data-variant=solid]:not(:disabled):hover {
-  background: var(--oui-brand-solid-hover, var(--oui-brand-strong));
-  border-color: var(--oui-brand-solid-hover, var(--oui-brand-strong));
+.oui-icon-button-badge[data-tone=warning] {
+  color: var(--oui-warning-base);
+  background: var(--oui-warning-surface);
 }
 
-.oui-button[data-variant=soft],
-.oui-icon-button[data-variant=soft] {
-  background: var(--oui-brand-soft);
-  border-color: transparent;
-  color: var(--oui-brand-strong);
+.oui-icon-button-badge[data-tone=danger] {
+  color: var(--oui-danger-base);
+  background: var(--oui-danger-surface);
 }
 
-.oui-button[data-variant=surface],
-.oui-icon-button[data-variant=surface] {
-  background: var(--oui-control-bg, transparent);
-  border-color: var(--oui-border);
+.oui-icon-button-badge[data-tone=info] {
+  color: var(--oui-info-base);
+  background: var(--oui-info-surface);
+}
+
+.oui-icon-button-badge[data-tone=blue] {
+  color: var(--blue-11, var(--oui-text));
+  background: var(--blue-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=sky] {
+  color: var(--sky-11, var(--oui-text));
+  background: var(--sky-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=cyan] {
+  color: var(--cyan-11, var(--oui-text));
+  background: var(--cyan-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=teal] {
+  color: var(--teal-11, var(--oui-text));
+  background: var(--teal-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=indigo] {
+  color: var(--indigo-11, var(--oui-text));
+  background: var(--indigo-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=violet] {
+  color: var(--violet-11, var(--oui-text));
+  background: var(--violet-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=purple] {
+  color: var(--purple-11, var(--oui-text));
+  background: var(--purple-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=iris] {
+  color: var(--iris-11, var(--oui-text));
+  background: var(--iris-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=green] {
+  color: var(--green-11, var(--oui-text));
+  background: var(--green-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=jade] {
+  color: var(--jade-11, var(--oui-text));
+  background: var(--jade-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=mint] {
+  color: var(--mint-11, var(--oui-text));
+  background: var(--mint-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=grass] {
+  color: var(--grass-11, var(--oui-text));
+  background: var(--grass-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=lime] {
+  color: var(--lime-11, var(--oui-text));
+  background: var(--lime-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=yellow] {
+  color: var(--yellow-11, var(--oui-text));
+  background: var(--yellow-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=amber] {
+  color: var(--amber-11, var(--oui-text));
+  background: var(--amber-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=orange] {
+  color: var(--orange-11, var(--oui-text));
+  background: var(--orange-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=brown] {
+  color: var(--brown-11, var(--oui-text));
+  background: var(--brown-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=red] {
+  color: var(--red-11, var(--oui-text));
+  background: var(--red-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=ruby] {
+  color: var(--ruby-11, var(--oui-text));
+  background: var(--ruby-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=crimson] {
+  color: var(--crimson-11, var(--oui-text));
+  background: var(--crimson-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=pink] {
+  color: var(--pink-11, var(--oui-text));
+  background: var(--pink-a3, var(--oui-soft));
+}
+
+.oui-icon-button-badge[data-tone=tomato] {
+  color: var(--tomato-11, var(--oui-text));
+  background: var(--tomato-a3, var(--oui-soft));
+}
+
+.oui-button-full {
+  width: 100%;
+  min-width: 0;
+}
+
+.oui-button-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--oui-button-label-gap, 8px);
+  min-height: 1rem;
+  line-height: 1rem;
+}
+
+.oui-button:focus-visible,
+.oui-icon-button:focus-visible,
+.oui-text-field:focus-within,
+.oui-text-area:focus-within,
+.oui-listbox-item:focus-visible,
+.oui-menu-item:focus-visible,
+.oui-tabs-trigger:focus-visible,
+.oui-segmented-item:focus-visible {
+  outline: none;
+  box-shadow: var(--oui-ring);
+}
+
+.oui-button:disabled,
+.oui-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: var(--oui-state-disabled-opacity, 0.56);
+}
+
+.oui-button[data-loading=true]:disabled,
+.oui-icon-button[data-loading=true]:disabled {
+  cursor: progress;
+  opacity: var(--oui-state-loading-opacity, 1);
+}
+
+.oui-button[data-variant=solid],
+.oui-icon-button[data-variant=solid] {
+  color: var(--oui-primary-contrast, #ffffff);
+  background: var(--oui-primary-base);
+  border-color: var(--oui-primary-base);
+}
+
+.oui-button[data-variant=solid]:not(:disabled):hover,
+.oui-icon-button[data-variant=solid]:not(:disabled):hover {
+  background: color-mix(in srgb, var(--oui-primary-base) 88%, var(--oui-primary-text) 12%);
+  border-color: color-mix(in srgb, var(--oui-primary-base) 88%, var(--oui-primary-text) 12%);
+}
+
+.oui-button[data-variant=soft],
+.oui-icon-button[data-variant=soft] {
+  background: var(--oui-primary-surface);
+  border-color: transparent;
+  color: var(--oui-primary-text);
+}
+
+.oui-button[data-variant=surface],
+.oui-icon-button[data-variant=surface] {
+  background: var(--oui-control-bg, transparent);
+  border-color: var(--oui-border);
   box-shadow: none;
 }
 
@@ -771,6 +1318,32 @@
   box-shadow: none;
 }
 
+.oui-button[data-tone=neutral][data-variant=soft],
+.oui-icon-button[data-tone=neutral][data-variant=soft] {
+  color: var(--oui-text);
+  background: var(--oui-gray-a3, var(--oui-control-hover-bg));
+  border-color: transparent;
+}
+
+.oui-button[data-tone=neutral][data-variant=surface],
+.oui-icon-button[data-tone=neutral][data-variant=surface] {
+  color: var(--oui-text);
+  background: var(--oui-control-bg, transparent);
+  border-color: var(--oui-border);
+  box-shadow: none;
+}
+
+.oui-button[data-tone=neutral][data-variant=outline],
+.oui-icon-button[data-tone=neutral][data-variant=outline] {
+  color: var(--oui-text);
+  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+}
+
+.oui-button[data-tone=neutral][data-variant=ghost],
+.oui-icon-button[data-tone=neutral][data-variant=ghost] {
+  color: var(--oui-text);
+}
+
 .oui-button[data-variant=soft]:not(:disabled):hover,
 .oui-button[data-variant=surface]:not(:disabled):hover,
 .oui-button[data-variant=pad]:not(:disabled):hover,
@@ -784,6 +1357,18 @@
   background: var(--oui-control-hover-bg, var(--oui-gray-a4, var(--oui-soft-hover)));
 }
 
+.oui-button[data-tone=neutral][data-variant=soft]:not(:disabled):hover,
+.oui-button[data-tone=neutral][data-variant=surface]:not(:disabled):hover,
+.oui-button[data-tone=neutral][data-variant=outline]:not(:disabled):hover,
+.oui-button[data-tone=neutral][data-variant=ghost]:not(:disabled):hover,
+.oui-icon-button[data-tone=neutral][data-variant=soft]:not(:disabled):hover,
+.oui-icon-button[data-tone=neutral][data-variant=surface]:not(:disabled):hover,
+.oui-icon-button[data-tone=neutral][data-variant=outline]:not(:disabled):hover,
+.oui-icon-button[data-tone=neutral][data-variant=ghost]:not(:disabled):hover {
+  color: var(--oui-text);
+  background: var(--oui-gray-a4, var(--oui-control-hover-bg));
+}
+
 .oui-button[data-variant=pad]:not(:disabled):hover,
 .oui-icon-button[data-variant=pad]:not(:disabled):hover {
   background: color-mix(in srgb, var(--oui-pad-bg, var(--oui-section-bg)) var(--oui-pad-hover-opacity, var(--oui-section-nested-opacity)), transparent);
@@ -796,51 +1381,231 @@
 
 .oui-button[data-tone=success],
 .oui-icon-button[data-tone=success] {
-  --oui-brand: var(--oui-success);
-  --oui-brand-strong: var(--oui-success);
-  --oui-brand-solid: var(--oui-success);
-  --oui-brand-solid-hover: var(--oui-success);
-  --oui-brand-soft: var(--oui-success-soft);
+  --oui-primary-base: var(--oui-success-base);
+  --oui-primary-text: var(--oui-success-text);
+  --oui-primary-surface: var(--oui-success-surface);
+  --oui-primary-contrast: var(--oui-success-contrast);
 }
 
 .oui-button[data-tone=warning],
 .oui-icon-button[data-tone=warning] {
-  --oui-brand: var(--oui-warning);
-  --oui-brand-strong: var(--oui-warning);
-  --oui-brand-solid: var(--oui-warning);
-  --oui-brand-solid-hover: var(--oui-warning);
-  --oui-brand-soft: var(--oui-warning-soft);
+  --oui-primary-base: var(--oui-warning-base);
+  --oui-primary-text: var(--oui-warning-text);
+  --oui-primary-surface: var(--oui-warning-surface);
+  --oui-primary-contrast: var(--oui-warning-contrast);
 }
 
 .oui-button[data-tone=info],
 .oui-icon-button[data-tone=info] {
-  --oui-brand: var(--oui-info);
-  --oui-brand-strong: var(--oui-info);
-  --oui-brand-solid: var(--oui-info);
-  --oui-brand-solid-hover: var(--oui-info);
-  --oui-brand-soft: var(--oui-info-soft);
+  --oui-primary-base: var(--oui-info-base);
+  --oui-primary-text: var(--oui-info-text);
+  --oui-primary-surface: var(--oui-info-surface);
+  --oui-primary-contrast: var(--oui-info-contrast);
 }
 
 .oui-button[data-tone=danger],
 .oui-icon-button[data-tone=danger] {
-  --oui-brand: var(--oui-danger);
-  --oui-brand-strong: var(--oui-danger);
-  --oui-brand-solid: var(--oui-danger);
-  --oui-brand-solid-hover: var(--oui-danger);
-  --oui-brand-soft: var(--oui-danger-soft);
+  --oui-primary-base: var(--oui-danger-base);
+  --oui-primary-text: var(--oui-danger-text);
+  --oui-primary-surface: var(--oui-danger-surface);
+  --oui-primary-contrast: var(--oui-danger-contrast);
+}
+
+.oui-button[data-tone=secondary],
+.oui-icon-button[data-tone=secondary] {
+  --oui-primary-base: var(--oui-secondary-base);
+  --oui-primary-text: var(--oui-secondary-text);
+  --oui-primary-surface: var(--oui-secondary-surface);
+  --oui-primary-contrast: var(--oui-secondary-contrast);
+}
+
+.oui-button[data-tone=blue],
+.oui-icon-button[data-tone=blue] {
+  --oui-primary-base: var(--blue-9, var(--oui-primary-base));
+  --oui-primary-text: var(--blue-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--blue-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=sky],
+.oui-icon-button[data-tone=sky] {
+  --oui-primary-base: var(--sky-9, var(--oui-primary-base));
+  --oui-primary-text: var(--sky-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--sky-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=cyan],
+.oui-icon-button[data-tone=cyan] {
+  --oui-primary-base: var(--cyan-9, var(--oui-primary-base));
+  --oui-primary-text: var(--cyan-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--cyan-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=teal],
+.oui-icon-button[data-tone=teal] {
+  --oui-primary-base: var(--teal-9, var(--oui-primary-base));
+  --oui-primary-text: var(--teal-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--teal-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=indigo],
+.oui-icon-button[data-tone=indigo] {
+  --oui-primary-base: var(--indigo-9, var(--oui-primary-base));
+  --oui-primary-text: var(--indigo-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--indigo-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=violet],
+.oui-icon-button[data-tone=violet] {
+  --oui-primary-base: var(--violet-9, var(--oui-primary-base));
+  --oui-primary-text: var(--violet-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--violet-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=purple],
+.oui-icon-button[data-tone=purple] {
+  --oui-primary-base: var(--purple-9, var(--oui-primary-base));
+  --oui-primary-text: var(--purple-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--purple-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=iris],
+.oui-icon-button[data-tone=iris] {
+  --oui-primary-base: var(--iris-9, var(--oui-primary-base));
+  --oui-primary-text: var(--iris-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--iris-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=green],
+.oui-icon-button[data-tone=green] {
+  --oui-primary-base: var(--green-9, var(--oui-primary-base));
+  --oui-primary-text: var(--green-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--green-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=jade],
+.oui-icon-button[data-tone=jade] {
+  --oui-primary-base: var(--jade-9, var(--oui-primary-base));
+  --oui-primary-text: var(--jade-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--jade-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=mint],
+.oui-icon-button[data-tone=mint] {
+  --oui-primary-base: var(--mint-9, var(--oui-primary-base));
+  --oui-primary-text: var(--mint-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--mint-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=grass],
+.oui-icon-button[data-tone=grass] {
+  --oui-primary-base: var(--grass-9, var(--oui-primary-base));
+  --oui-primary-text: var(--grass-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--grass-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=lime],
+.oui-icon-button[data-tone=lime] {
+  --oui-primary-base: var(--lime-9, var(--oui-primary-base));
+  --oui-primary-text: var(--lime-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--lime-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=yellow],
+.oui-icon-button[data-tone=yellow] {
+  --oui-primary-base: var(--yellow-9, var(--oui-primary-base));
+  --oui-primary-text: var(--yellow-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--yellow-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=amber],
+.oui-icon-button[data-tone=amber] {
+  --oui-primary-base: var(--amber-9, var(--oui-primary-base));
+  --oui-primary-text: var(--amber-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--amber-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=orange],
+.oui-icon-button[data-tone=orange] {
+  --oui-primary-base: var(--orange-9, var(--oui-primary-base));
+  --oui-primary-text: var(--orange-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--orange-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=brown],
+.oui-icon-button[data-tone=brown] {
+  --oui-primary-base: var(--brown-9, var(--oui-primary-base));
+  --oui-primary-text: var(--brown-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--brown-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=red],
+.oui-icon-button[data-tone=red] {
+  --oui-primary-base: var(--red-9, var(--oui-primary-base));
+  --oui-primary-text: var(--red-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--red-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=ruby],
+.oui-icon-button[data-tone=ruby] {
+  --oui-primary-base: var(--ruby-9, var(--oui-primary-base));
+  --oui-primary-text: var(--ruby-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--ruby-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=crimson],
+.oui-icon-button[data-tone=crimson] {
+  --oui-primary-base: var(--crimson-9, var(--oui-primary-base));
+  --oui-primary-text: var(--crimson-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--crimson-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=pink],
+.oui-icon-button[data-tone=pink] {
+  --oui-primary-base: var(--pink-9, var(--oui-primary-base));
+  --oui-primary-text: var(--pink-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--pink-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
+}
+
+.oui-button[data-tone=tomato],
+.oui-icon-button[data-tone=tomato] {
+  --oui-primary-base: var(--tomato-9, var(--oui-primary-base));
+  --oui-primary-text: var(--tomato-11, var(--oui-primary-text));
+  --oui-primary-surface: var(--tomato-a3, var(--oui-primary-surface));
+  --oui-primary-contrast: #ffffff;
 }
 
 .oui-button[data-tone=success][data-variant=solid],
 .oui-icon-button[data-tone=success][data-variant=solid] {
-  color: var(--oui-success);
-  background: var(--oui-success-soft);
+  color: var(--oui-success-base);
+  background: var(--oui-success-surface);
   border-color: transparent;
 }
 
 .oui-button[data-tone=success][data-variant=solid]:not(:disabled):hover,
 .oui-icon-button[data-tone=success][data-variant=solid]:not(:disabled):hover {
-  color: var(--oui-success);
-  background: color-mix(in srgb, var(--oui-success-soft) 68%, var(--oui-success) 32%);
+  color: var(--oui-success-base);
+  background: color-mix(in srgb, var(--oui-success-surface) 68%, var(--oui-success-base) 32%);
   border-color: transparent;
 }
 
@@ -850,8 +1615,8 @@
 .oui-icon-button[data-tone=success][data-variant=soft]:not(:disabled):hover,
 .oui-icon-button[data-tone=success][data-variant=outline]:not(:disabled):hover,
 .oui-icon-button[data-tone=success][data-variant=ghost]:not(:disabled):hover {
-  color: var(--oui-success);
-  background: color-mix(in srgb, var(--oui-success-soft) 74%, var(--oui-success) 26%);
+  color: var(--oui-success-base);
+  background: color-mix(in srgb, var(--oui-success-surface) 74%, var(--oui-success-base) 26%);
 }
 
 .oui-button[data-tone=danger][data-variant=soft]:not(:disabled):hover,
@@ -860,8 +1625,8 @@
 .oui-icon-button[data-tone=danger][data-variant=soft]:not(:disabled):hover,
 .oui-icon-button[data-tone=danger][data-variant=outline]:not(:disabled):hover,
 .oui-icon-button[data-tone=danger][data-variant=ghost]:not(:disabled):hover {
-  color: var(--oui-danger);
-  background: color-mix(in srgb, var(--oui-danger-soft) 74%, var(--oui-danger) 26%);
+  color: var(--oui-danger-base);
+  background: color-mix(in srgb, var(--oui-danger-surface) 74%, var(--oui-danger-base) 26%);
 }
 
 .oui-button[data-tone=warning][data-variant=soft]:not(:disabled):hover,
@@ -870,8 +1635,8 @@
 .oui-icon-button[data-tone=warning][data-variant=soft]:not(:disabled):hover,
 .oui-icon-button[data-tone=warning][data-variant=outline]:not(:disabled):hover,
 .oui-icon-button[data-tone=warning][data-variant=ghost]:not(:disabled):hover {
-  color: var(--oui-warning);
-  background: color-mix(in srgb, var(--oui-warning-soft) 74%, var(--oui-warning) 26%);
+  color: var(--oui-warning-base);
+  background: color-mix(in srgb, var(--oui-warning-surface) 74%, var(--oui-warning-base) 26%);
 }
 
 .oui-button[data-tone=info][data-variant=soft]:not(:disabled):hover,
@@ -880,33 +1645,55 @@
 .oui-icon-button[data-tone=info][data-variant=soft]:not(:disabled):hover,
 .oui-icon-button[data-tone=info][data-variant=outline]:not(:disabled):hover,
 .oui-icon-button[data-tone=info][data-variant=ghost]:not(:disabled):hover {
-  color: var(--oui-info);
-  background: color-mix(in srgb, var(--oui-info-soft) 74%, var(--oui-info) 26%);
+  color: var(--oui-info-base);
+  background: color-mix(in srgb, var(--oui-info-surface) 74%, var(--oui-info-base) 26%);
 }
 
 .oui-root[data-oui-theme=dark] .oui-button[data-tone=success]:not(:disabled):hover,
 .oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=success]:not(:disabled):hover {
-  color: color-mix(in srgb, var(--oui-success) 72%, white 28%);
+  color: color-mix(in srgb, var(--oui-success-base) 72%, white 28%);
 }
 
 .oui-root[data-oui-theme=dark] .oui-button[data-tone=danger]:not(:disabled):hover,
 .oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=danger]:not(:disabled):hover {
-  color: color-mix(in srgb, var(--oui-danger) 72%, white 28%);
+  color: color-mix(in srgb, var(--oui-danger-base) 72%, white 28%);
 }
 
 .oui-root[data-oui-theme=dark] .oui-button[data-tone=warning]:not(:disabled):hover,
 .oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=warning]:not(:disabled):hover {
-  color: color-mix(in srgb, var(--oui-warning) 72%, white 28%);
+  color: color-mix(in srgb, var(--oui-warning-base) 72%, white 28%);
 }
 
 .oui-root[data-oui-theme=dark] .oui-button[data-tone=info]:not(:disabled):hover,
 .oui-root[data-oui-theme=dark] .oui-icon-button[data-tone=info]:not(:disabled):hover {
-  color: color-mix(in srgb, var(--oui-info) 72%, white 28%);
+  color: color-mix(in srgb, var(--oui-info-base) 72%, white 28%);
 }
 
 .oui-button-label {
   display: inline-flex;
   align-items: center;
+  gap: var(--oui-button-label-gap, 8px);
+}
+
+.oui-icon-text-button {
+  gap: var(--oui-icon-text-button-gap, var(--oui-button-label-gap, 8px));
+}
+
+.oui-icon-text-button-icon,
+.oui-icon-text-button-label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.oui-icon-text-button-icon {
+  flex: 0 0 auto;
+}
+
+.oui-icon-text-button-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .oui-button[data-press-animation=none]:not(:disabled):active,
@@ -934,6 +1721,77 @@
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.06);
 }
 
+.oui-card {
+  display: block;
+  min-width: 0;
+  color: var(--oui-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--oui-radius);
+  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.oui-card[data-size="1"] {
+  padding: 8px;
+}
+
+.oui-card[data-size="2"] {
+  padding: 12px;
+}
+
+.oui-card[data-size="3"] {
+  padding: 16px;
+}
+
+.oui-card[data-size="4"] {
+  padding: 20px;
+}
+
+.oui-card[data-variant=surface] {
+  background: var(--oui-panel);
+  border-color: var(--oui-border);
+}
+
+.oui-card[data-variant=classic] {
+  background: var(--oui-panel);
+  border-color: var(--oui-border);
+  box-shadow: none;
+}
+
+.oui-card[data-variant=soft] {
+  background: var(--oui-pad-bg);
+  border-color: color-mix(in srgb, var(--oui-border) 72%, transparent);
+}
+
+.oui-card[data-interactive=true] {
+  cursor: pointer;
+}
+
+.oui-card[data-interactive=true]:hover {
+  background: var(--oui-control-hover-bg, var(--oui-gray-a4));
+  border-color: color-mix(in srgb, var(--oui-border-strong) 54%, transparent);
+}
+
+.oui-root[data-oui-theme=light] .oui-card[data-variant=surface],
+.oui-root[data-oui-theme=light] .oui-card[data-variant=classic],
+:root[data-oui-theme=light] .oui-card[data-variant=surface],
+:root[data-oui-theme=light] .oui-card[data-variant=classic] {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+@media (hover: hover) {
+  .oui-root[data-oui-theme=light] .oui-card[data-variant=surface][data-interactive=true]:hover,
+  .oui-root[data-oui-theme=light] .oui-card[data-variant=classic][data-interactive=true]:hover,
+  :root[data-oui-theme=light] .oui-card[data-variant=surface][data-interactive=true]:hover,
+  :root[data-oui-theme=light] .oui-card[data-variant=classic][data-interactive=true]:hover {
+    box-shadow: 0 1px 2px color-mix(in srgb, var(--oui-primary-base) 8%, transparent), 0 4px 12px color-mix(in srgb, var(--oui-primary-base) 14%, transparent);
+  }
+}
+a.oui-card {
+  color: inherit;
+  text-decoration: none;
+}
+
 .oui-badge {
   display: inline-flex;
   align-items: center;
@@ -943,6 +1801,7 @@
   border: 1px solid transparent;
   font-weight: 650;
   line-height: 1;
+  transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, opacity 280ms ease;
 }
 
 .oui-badge[data-size="1"] {
@@ -969,43 +1828,588 @@
   font-size: 14px;
 }
 
+.oui-badge-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  color: currentColor;
+}
+
+.oui-badge-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .oui-badge[data-tone=neutral] {
   color: var(--oui-text);
-  background: var(--oui-soft);
+  background: var(--oui-gray-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=neutral][data-variant=solid] {
+  color: #ffffff;
+  background: var(--oui-muted);
+  border-color: var(--oui-muted);
+}
+
+.oui-badge[data-tone=neutral][data-variant=outline] {
+  color: var(--oui-text);
+  background: transparent;
+  border-color: var(--oui-gray-a8, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=neutral][data-variant=surface] {
+  color: var(--oui-text);
+  background: var(--oui-gray-a3, var(--oui-soft));
+  border-color: var(--oui-gray-a8, var(--oui-border));
+}
+
+.oui-badge[data-tone=primary] {
+  color: var(--oui-status-primary-text, var(--oui-primary-text));
+  background: var(--oui-primary-surface);
 }
 
-.oui-badge[data-tone=brand] {
-  color: var(--oui-brand-strong);
-  background: var(--oui-brand-soft);
+.oui-badge[data-tone=secondary] {
+  color: var(--oui-status-secondary-text, var(--oui-secondary-text));
+  background: var(--oui-secondary-surface);
 }
 
 .oui-badge[data-tone=success] {
-  color: var(--oui-success);
-  background: var(--oui-success-soft);
+  color: var(--oui-status-success-text, var(--oui-success-base));
+  background: var(--oui-success-surface);
 }
 
 .oui-badge[data-tone=warning] {
-  color: var(--oui-warning);
-  background: var(--oui-warning-soft);
+  color: var(--oui-status-warning-text, var(--oui-warning-base));
+  background: var(--oui-warning-surface);
 }
 
 .oui-badge[data-tone=danger] {
-  color: var(--oui-danger);
-  background: var(--oui-danger-soft);
+  color: var(--oui-status-danger-text, var(--oui-danger-base));
+  background: var(--oui-danger-surface);
 }
 
 .oui-badge[data-tone=info] {
-  color: var(--oui-info);
-  background: var(--oui-info-soft);
+  color: var(--oui-status-info-text, var(--oui-info-base));
+  background: var(--oui-info-surface);
 }
 
-.oui-text-field,
-.oui-text-area {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  width: auto;
-  min-width: 0;
+.oui-badge[data-tone=blue] {
+  color: var(--blue-11, var(--oui-text));
+  background: var(--blue-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=blue][data-variant=solid] {
+  color: #ffffff;
+  background: var(--blue-9, var(--oui-primary-base));
+  border-color: var(--blue-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=blue][data-variant=outline] {
+  color: var(--blue-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--blue-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=blue][data-variant=surface] {
+  color: var(--blue-11, var(--oui-text));
+  background: var(--blue-a3, var(--oui-soft));
+  border-color: var(--blue-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=sky] {
+  color: var(--sky-11, var(--oui-text));
+  background: var(--sky-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=sky][data-variant=solid] {
+  color: #ffffff;
+  background: var(--sky-9, var(--oui-primary-base));
+  border-color: var(--sky-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=sky][data-variant=outline] {
+  color: var(--sky-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--sky-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=sky][data-variant=surface] {
+  color: var(--sky-11, var(--oui-text));
+  background: var(--sky-a3, var(--oui-soft));
+  border-color: var(--sky-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=cyan] {
+  color: var(--cyan-11, var(--oui-text));
+  background: var(--cyan-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=cyan][data-variant=solid] {
+  color: #ffffff;
+  background: var(--cyan-9, var(--oui-primary-base));
+  border-color: var(--cyan-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=cyan][data-variant=outline] {
+  color: var(--cyan-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--cyan-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=cyan][data-variant=surface] {
+  color: var(--cyan-11, var(--oui-text));
+  background: var(--cyan-a3, var(--oui-soft));
+  border-color: var(--cyan-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=teal] {
+  color: var(--teal-11, var(--oui-text));
+  background: var(--teal-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=teal][data-variant=solid] {
+  color: #ffffff;
+  background: var(--teal-9, var(--oui-primary-base));
+  border-color: var(--teal-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=teal][data-variant=outline] {
+  color: var(--teal-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--teal-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=teal][data-variant=surface] {
+  color: var(--teal-11, var(--oui-text));
+  background: var(--teal-a3, var(--oui-soft));
+  border-color: var(--teal-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=indigo] {
+  color: var(--indigo-11, var(--oui-text));
+  background: var(--indigo-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=indigo][data-variant=solid] {
+  color: #ffffff;
+  background: var(--indigo-9, var(--oui-primary-base));
+  border-color: var(--indigo-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=indigo][data-variant=outline] {
+  color: var(--indigo-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--indigo-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=indigo][data-variant=surface] {
+  color: var(--indigo-11, var(--oui-text));
+  background: var(--indigo-a3, var(--oui-soft));
+  border-color: var(--indigo-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=violet] {
+  color: var(--violet-11, var(--oui-text));
+  background: var(--violet-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=violet][data-variant=solid] {
+  color: #ffffff;
+  background: var(--violet-9, var(--oui-primary-base));
+  border-color: var(--violet-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=violet][data-variant=outline] {
+  color: var(--violet-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--violet-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=violet][data-variant=surface] {
+  color: var(--violet-11, var(--oui-text));
+  background: var(--violet-a3, var(--oui-soft));
+  border-color: var(--violet-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=purple] {
+  color: var(--purple-11, var(--oui-text));
+  background: var(--purple-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=purple][data-variant=solid] {
+  color: #ffffff;
+  background: var(--purple-9, var(--oui-primary-base));
+  border-color: var(--purple-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=purple][data-variant=outline] {
+  color: var(--purple-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--purple-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=purple][data-variant=surface] {
+  color: var(--purple-11, var(--oui-text));
+  background: var(--purple-a3, var(--oui-soft));
+  border-color: var(--purple-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=iris] {
+  color: var(--iris-11, var(--oui-text));
+  background: var(--iris-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=iris][data-variant=solid] {
+  color: #ffffff;
+  background: var(--iris-9, var(--oui-primary-base));
+  border-color: var(--iris-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=iris][data-variant=outline] {
+  color: var(--iris-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--iris-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=iris][data-variant=surface] {
+  color: var(--iris-11, var(--oui-text));
+  background: var(--iris-a3, var(--oui-soft));
+  border-color: var(--iris-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=green] {
+  color: var(--green-11, var(--oui-text));
+  background: var(--green-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=green][data-variant=solid] {
+  color: #ffffff;
+  background: var(--green-9, var(--oui-primary-base));
+  border-color: var(--green-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=green][data-variant=outline] {
+  color: var(--green-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--green-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=green][data-variant=surface] {
+  color: var(--green-11, var(--oui-text));
+  background: var(--green-a3, var(--oui-soft));
+  border-color: var(--green-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=jade] {
+  color: var(--jade-11, var(--oui-text));
+  background: var(--jade-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=jade][data-variant=solid] {
+  color: #ffffff;
+  background: var(--jade-9, var(--oui-primary-base));
+  border-color: var(--jade-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=jade][data-variant=outline] {
+  color: var(--jade-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--jade-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=jade][data-variant=surface] {
+  color: var(--jade-11, var(--oui-text));
+  background: var(--jade-a3, var(--oui-soft));
+  border-color: var(--jade-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=mint] {
+  color: var(--mint-11, var(--oui-text));
+  background: var(--mint-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=mint][data-variant=solid] {
+  color: #ffffff;
+  background: var(--mint-9, var(--oui-primary-base));
+  border-color: var(--mint-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=mint][data-variant=outline] {
+  color: var(--mint-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--mint-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=mint][data-variant=surface] {
+  color: var(--mint-11, var(--oui-text));
+  background: var(--mint-a3, var(--oui-soft));
+  border-color: var(--mint-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=grass] {
+  color: var(--grass-11, var(--oui-text));
+  background: var(--grass-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=grass][data-variant=solid] {
+  color: #ffffff;
+  background: var(--grass-9, var(--oui-primary-base));
+  border-color: var(--grass-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=grass][data-variant=outline] {
+  color: var(--grass-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--grass-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=grass][data-variant=surface] {
+  color: var(--grass-11, var(--oui-text));
+  background: var(--grass-a3, var(--oui-soft));
+  border-color: var(--grass-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=lime] {
+  color: var(--lime-11, var(--oui-text));
+  background: var(--lime-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=lime][data-variant=solid] {
+  color: #ffffff;
+  background: var(--lime-9, var(--oui-primary-base));
+  border-color: var(--lime-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=lime][data-variant=outline] {
+  color: var(--lime-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--lime-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=lime][data-variant=surface] {
+  color: var(--lime-11, var(--oui-text));
+  background: var(--lime-a3, var(--oui-soft));
+  border-color: var(--lime-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=yellow] {
+  color: var(--yellow-11, var(--oui-text));
+  background: var(--yellow-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=yellow][data-variant=solid] {
+  color: #ffffff;
+  background: var(--yellow-9, var(--oui-primary-base));
+  border-color: var(--yellow-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=yellow][data-variant=outline] {
+  color: var(--yellow-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--yellow-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=yellow][data-variant=surface] {
+  color: var(--yellow-11, var(--oui-text));
+  background: var(--yellow-a3, var(--oui-soft));
+  border-color: var(--yellow-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=amber] {
+  color: var(--amber-11, var(--oui-text));
+  background: var(--amber-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=amber][data-variant=solid] {
+  color: #ffffff;
+  background: var(--amber-9, var(--oui-primary-base));
+  border-color: var(--amber-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=amber][data-variant=outline] {
+  color: var(--amber-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--amber-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=amber][data-variant=surface] {
+  color: var(--amber-11, var(--oui-text));
+  background: var(--amber-a3, var(--oui-soft));
+  border-color: var(--amber-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=orange] {
+  color: var(--orange-11, var(--oui-text));
+  background: var(--orange-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=orange][data-variant=solid] {
+  color: #ffffff;
+  background: var(--orange-9, var(--oui-primary-base));
+  border-color: var(--orange-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=orange][data-variant=outline] {
+  color: var(--orange-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--orange-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=orange][data-variant=surface] {
+  color: var(--orange-11, var(--oui-text));
+  background: var(--orange-a3, var(--oui-soft));
+  border-color: var(--orange-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=brown] {
+  color: var(--brown-11, var(--oui-text));
+  background: var(--brown-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=brown][data-variant=solid] {
+  color: #ffffff;
+  background: var(--brown-9, var(--oui-primary-base));
+  border-color: var(--brown-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=brown][data-variant=outline] {
+  color: var(--brown-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--brown-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=brown][data-variant=surface] {
+  color: var(--brown-11, var(--oui-text));
+  background: var(--brown-a3, var(--oui-soft));
+  border-color: var(--brown-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=red] {
+  color: var(--red-11, var(--oui-text));
+  background: var(--red-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=red][data-variant=solid] {
+  color: #ffffff;
+  background: var(--red-9, var(--oui-primary-base));
+  border-color: var(--red-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=red][data-variant=outline] {
+  color: var(--red-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--red-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=red][data-variant=surface] {
+  color: var(--red-11, var(--oui-text));
+  background: var(--red-a3, var(--oui-soft));
+  border-color: var(--red-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=ruby] {
+  color: var(--ruby-11, var(--oui-text));
+  background: var(--ruby-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=ruby][data-variant=solid] {
+  color: #ffffff;
+  background: var(--ruby-9, var(--oui-primary-base));
+  border-color: var(--ruby-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=ruby][data-variant=outline] {
+  color: var(--ruby-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--ruby-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=ruby][data-variant=surface] {
+  color: var(--ruby-11, var(--oui-text));
+  background: var(--ruby-a3, var(--oui-soft));
+  border-color: var(--ruby-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=crimson] {
+  color: var(--crimson-11, var(--oui-text));
+  background: var(--crimson-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=crimson][data-variant=solid] {
+  color: #ffffff;
+  background: var(--crimson-9, var(--oui-primary-base));
+  border-color: var(--crimson-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=crimson][data-variant=outline] {
+  color: var(--crimson-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--crimson-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=crimson][data-variant=surface] {
+  color: var(--crimson-11, var(--oui-text));
+  background: var(--crimson-a3, var(--oui-soft));
+  border-color: var(--crimson-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=pink] {
+  color: var(--pink-11, var(--oui-text));
+  background: var(--pink-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=pink][data-variant=solid] {
+  color: #ffffff;
+  background: var(--pink-9, var(--oui-primary-base));
+  border-color: var(--pink-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=pink][data-variant=outline] {
+  color: var(--pink-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--pink-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=pink][data-variant=surface] {
+  color: var(--pink-11, var(--oui-text));
+  background: var(--pink-a3, var(--oui-soft));
+  border-color: var(--pink-a7, var(--oui-border));
+}
+
+.oui-badge[data-tone=tomato] {
+  color: var(--tomato-11, var(--oui-text));
+  background: var(--tomato-a3, var(--oui-soft));
+}
+
+.oui-badge[data-tone=tomato][data-variant=solid] {
+  color: #ffffff;
+  background: var(--tomato-9, var(--oui-primary-base));
+  border-color: var(--tomato-9, var(--oui-primary-base));
+}
+
+.oui-badge[data-tone=tomato][data-variant=outline] {
+  color: var(--tomato-11, var(--oui-text));
+  background: transparent;
+  border-color: var(--tomato-a7, var(--oui-border-strong));
+}
+
+.oui-badge[data-tone=tomato][data-variant=surface] {
+  color: var(--tomato-11, var(--oui-text));
+  background: var(--tomato-a3, var(--oui-soft));
+  border-color: var(--tomato-a7, var(--oui-border));
+}
+
+.oui-text-field,
+.oui-text-area {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
   color: var(--oui-text);
   background: var(--oui-control-bg, transparent);
   border: 1px solid var(--oui-border);
@@ -1044,7 +2448,7 @@
 
 .oui-text-field[data-invalid=true],
 .oui-text-area[data-invalid=true] {
-  border-color: var(--oui-danger);
+  border-color: var(--oui-danger-base);
 }
 
 .oui-text-field[data-disabled=true] {
@@ -1118,7 +2522,7 @@
 
 .oui-field-required,
 .oui-field-error {
-  color: var(--oui-danger);
+  color: var(--oui-danger-base);
 }
 
 .oui-field-helper {
@@ -1142,7 +2546,7 @@
 .oui-text-area {
   background-clip: border-box;
   background-color: var(--oui-control-bg, transparent);
-  border: 1px solid color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border: 1px solid var(--oui-field-border-color, var(--oui-border));
   border-radius: 6px;
   box-shadow: none;
   outline: none;
@@ -1151,14 +2555,14 @@
 
 .oui-text-field:hover,
 .oui-text-area:hover {
-  border-color: var(--oui-gray-a8);
+  border-color: var(--oui-field-border-hover-color, var(--oui-border-strong));
 }
 
 .oui-text-field:focus-within,
 .oui-text-field:has(.oui-text-field-input:focus),
 .oui-text-area:focus,
 .oui-text-area:focus-within {
-  border-color: var(--oui-brand);
+  border-color: var(--oui-primary-base);
   box-shadow: none;
   outline: none;
 }
@@ -1227,7 +2631,7 @@
 
 .oui-text-field[data-invalid=true],
 .oui-text-area[data-invalid=true] {
-  border-color: var(--oui-danger);
+  border-color: var(--oui-danger-base);
 }
 
 .oui-text-field[data-disabled=true],
@@ -1247,6 +2651,7 @@
 }
 
 .oui-date-picker-trigger {
+  appearance: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1258,6 +2663,7 @@
   padding: 0;
   color: var(--oui-muted);
   background: transparent;
+  font: inherit;
   cursor: pointer;
   transition: background-color 140ms ease, color 140ms ease;
 }
@@ -1269,6 +2675,11 @@
   outline: none;
 }
 
+.oui-date-picker-trigger:disabled {
+  cursor: not-allowed;
+  opacity: var(--oui-state-disabled-opacity, 0.56);
+}
+
 .oui-date-picker-popover {
   width: 292px;
   padding: 0;
@@ -1347,9 +2758,9 @@
 }
 
 .oui-date-picker-day[data-selected=true] {
-  border-color: var(--oui-brand);
-  color: var(--oui-brand-text);
-  background: var(--oui-brand-soft);
+  border-color: var(--oui-primary-base);
+  color: var(--oui-primary-contrast);
+  background: var(--oui-primary-surface);
   font-weight: 760;
 }
 
@@ -1385,12 +2796,12 @@
   width: 32px;
   min-width: 32px;
   background-color: var(--oui-control-bg, transparent);
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: var(--oui-stepper-border-color, var(--oui-field-border-color, var(--oui-border)));
   color: var(--oui-muted);
 }
 
 .oui-stepper .oui-stepper-button:hover:not(:disabled) {
-  border-color: var(--oui-gray-a8);
+  border-color: var(--oui-stepper-border-hover-color, var(--oui-field-border-hover-color, var(--oui-border-strong)));
   color: var(--oui-text);
 }
 
@@ -1445,20 +2856,21 @@
 
 .oui-stepper .oui-stepper-field:focus-within {
   z-index: 3;
-  border-right-color: var(--oui-brand);
-  border-left-color: var(--oui-brand);
+  border-right-color: var(--oui-primary-base);
+  border-left-color: var(--oui-primary-base);
 }
 
 .oui-stepper {
-  --oui-stepper-border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  --oui-stepper-border-color: var(--oui-field-border-color, var(--oui-border));
+  --oui-stepper-border-hover-color: var(--oui-field-border-hover-color, var(--oui-border-strong));
 }
 
 .oui-stepper:hover {
-  --oui-stepper-border-color: var(--oui-gray-a8);
+  --oui-stepper-border-color: var(--oui-stepper-border-hover-color);
 }
 
 .oui-stepper:focus-within {
-  --oui-stepper-border-color: var(--oui-brand);
+  --oui-stepper-border-color: var(--oui-primary-base);
 }
 
 .oui-stepper .oui-stepper-button,
@@ -1474,7 +2886,7 @@
 .oui-stepper .oui-stepper-field,
 .oui-stepper .oui-stepper-field:hover,
 .oui-stepper .oui-stepper-field:focus-within {
-  z-index: auto;
+  z-index: 2;
   margin-right: 0;
   margin-left: 0;
   border-right: 0;
@@ -1483,7 +2895,7 @@
 
 .oui-stepper:focus-within .oui-stepper-button,
 .oui-stepper:focus-within .oui-stepper-field {
-  border-color: var(--oui-brand);
+  border-color: var(--oui-primary-base);
 }
 
 .oui-field-addon {
@@ -1494,25 +2906,173 @@
   font-weight: 650;
 }
 
-.oui-range-field {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+.oui-inline-edit {
+  display: inline-grid;
+  grid-template-columns: minmax(0, auto) auto auto;
+  grid-template-areas: "label extra actions";
   align-items: center;
-  gap: 8px;
+  column-gap: 6px;
+  row-gap: 2px;
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+  border-radius: 6px;
+  padding: 2px 4px;
+  margin: -2px -4px;
 }
 
-.oui-range-field-separator {
-  color: var(--oui-muted);
-  font-size: 12px;
+.oui-inline-edit-compact {
+  grid-template-columns: minmax(0, auto) auto;
+  grid-template-areas: "label actions" "extra extra";
 }
 
-@media (max-width: 560px) {
-  .oui-range-field {
-    grid-template-columns: 1fr;
-  }
-  .oui-range-field-separator {
-    display: none;
+.oui-inline-edit[data-disabled=true] {
+  opacity: 0.72;
+}
+
+.oui-inline-edit-label {
+  grid-area: label;
+  appearance: none;
+  display: inline-block;
+  min-width: 0;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  color: var(--oui-text);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: default;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 140ms ease;
+}
+
+.oui-inline-edit-label:not(:disabled) {
+  cursor: pointer;
+}
+
+.oui-inline-edit:not([data-disabled=true]):hover .oui-inline-edit-label,
+.oui-inline-edit:not([data-disabled=true]):focus-within .oui-inline-edit-label {
+  color: var(--oui-primary-base);
+}
+
+.oui-inline-edit-label > * {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.oui-inline-edit-meta {
+  display: contents;
+}
+
+.oui-inline-edit-extra {
+  grid-area: extra;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  justify-self: start;
+}
+
+.oui-inline-edit-actions {
+  grid-area: actions;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 20px;
+  min-height: 20px;
+  flex: 0 0 auto;
+  justify-self: start;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 140ms ease;
+}
+
+.oui-inline-edit:hover .oui-inline-edit-actions,
+.oui-inline-edit:focus-within .oui-inline-edit-actions,
+.oui-inline-edit[data-busy=true] .oui-inline-edit-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.oui-inline-edit-action {
+  flex: 0 0 auto;
+}
+
+.oui-inline-edit-multi {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.oui-inline-edit-multi[data-clickable=true] {
+  cursor: pointer;
+}
+
+.oui-inline-edit-multi-items {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.oui-inline-edit-multi[data-col=true] .oui-inline-edit-multi-items {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.oui-inline-edit-multi-actions {
+  display: inline-flex;
+  align-items: center;
+  min-width: 20px;
+  min-height: 20px;
+  flex: 0 0 auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 140ms ease;
+}
+
+.oui-inline-edit-multi:hover .oui-inline-edit-multi-actions,
+.oui-inline-edit-multi:focus-within .oui-inline-edit-multi-actions,
+.oui-inline-edit-multi[data-busy=true] .oui-inline-edit-multi-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.oui-inline-edit-empty {
+  color: var(--oui-muted);
+  font-size: 14px;
+}
+
+.oui-range-field {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-range-field-separator {
+  color: var(--oui-muted);
+  font-size: 12px;
+}
+
+@media (max-width: 560px) {
+  .oui-range-field {
+    grid-template-columns: 1fr;
+  }
+  .oui-range-field-separator {
+    display: none;
   }
 }
 .oui-icon-text {
@@ -1542,24 +3102,28 @@
   --oui-icon-text-icon-color: var(--oui-muted);
 }
 
-.oui-icon-text-icon[data-tone=brand] {
-  --oui-icon-text-icon-color: var(--oui-brand-strong);
+.oui-icon-text-icon[data-tone=primary] {
+  --oui-icon-text-icon-color: var(--oui-primary-text);
+}
+
+.oui-icon-text-icon[data-tone=secondary] {
+  --oui-icon-text-icon-color: var(--oui-secondary-text);
 }
 
 .oui-icon-text-icon[data-tone=success] {
-  --oui-icon-text-icon-color: var(--oui-success);
+  --oui-icon-text-icon-color: var(--oui-success-base);
 }
 
 .oui-icon-text-icon[data-tone=warning] {
-  --oui-icon-text-icon-color: var(--oui-warning);
+  --oui-icon-text-icon-color: var(--oui-warning-base);
 }
 
 .oui-icon-text-icon[data-tone=danger] {
-  --oui-icon-text-icon-color: var(--oui-danger);
+  --oui-icon-text-icon-color: var(--oui-danger-base);
 }
 
 .oui-icon-text-icon[data-tone=info] {
-  --oui-icon-text-icon-color: var(--oui-info);
+  --oui-icon-text-icon-color: var(--oui-info-base);
 }
 
 .oui-icon-text-icon[data-spin=true] svg {
@@ -1576,34 +3140,78 @@
   gap: 10px;
   border: 1px solid transparent;
   border-radius: var(--oui-radius);
+  color: var(--oui-text);
   background: var(--oui-section-surface-bg);
   font-size: 14px;
   padding: 12px;
 }
 
+.oui-state-card[data-variant=surface] {
+  border-color: var(--oui-border);
+  background: var(--oui-section-surface-bg);
+}
+
+.oui-state-card[data-variant=outline] {
+  border-color: var(--oui-border-strong);
+  background: transparent;
+}
+
+.oui-state-card[data-variant=ghost] {
+  border-color: transparent;
+  background: transparent;
+}
+
 .oui-state-card[data-compact=true] {
   gap: 8px;
   padding: 9px;
 }
 
-.oui-state-card[data-tone=brand] {
-  background: var(--oui-brand-soft);
+.oui-state-card[data-variant=soft][data-tone=primary] {
+  background: var(--oui-primary-surface);
+}
+
+.oui-state-card[data-variant=soft][data-tone=secondary] {
+  background: var(--oui-secondary-surface);
+}
+
+.oui-state-card[data-variant=soft][data-tone=success] {
+  background: var(--oui-success-surface);
+}
+
+.oui-state-card[data-variant=soft][data-tone=warning] {
+  background: var(--oui-warning-surface);
+}
+
+.oui-state-card[data-variant=soft][data-tone=danger] {
+  background: var(--oui-danger-surface);
+}
+
+.oui-state-card[data-variant=soft][data-tone=info] {
+  background: var(--oui-info-surface);
+}
+
+.oui-state-card[data-variant=outline][data-tone=primary] {
+  border-color: var(--oui-status-primary-border, var(--oui-primary-base));
+}
+
+.oui-state-card[data-variant=outline][data-tone=secondary] {
+  border-color: var(--oui-status-secondary-border, var(--oui-secondary-base));
 }
 
-.oui-state-card[data-tone=success] {
-  background: var(--oui-success-soft);
+.oui-state-card[data-variant=outline][data-tone=success] {
+  border-color: var(--oui-status-success-border, var(--oui-success-base));
 }
 
-.oui-state-card[data-tone=warning] {
-  background: var(--oui-warning-soft);
+.oui-state-card[data-variant=outline][data-tone=warning] {
+  border-color: var(--oui-status-warning-border, var(--oui-warning-base));
 }
 
-.oui-state-card[data-tone=danger] {
-  background: var(--oui-danger-soft);
+.oui-state-card[data-variant=outline][data-tone=danger] {
+  border-color: var(--oui-status-danger-border, var(--oui-danger-base));
 }
 
-.oui-state-card[data-tone=info] {
-  background: var(--oui-info-soft);
+.oui-state-card[data-variant=outline][data-tone=info] {
+  border-color: var(--oui-status-info-border, var(--oui-info-base));
 }
 
 .oui-state-card-main {
@@ -1625,7 +3233,6 @@
 .oui-state-card-description {
   display: block;
   overflow-wrap: anywhere;
-  color: var(--oui-text);
 }
 
 .oui-state-card-action {
@@ -1660,23 +3267,133 @@
 }
 
 .oui-alert[data-tone=success] {
-  border-color: color-mix(in srgb, var(--oui-success) 42%, var(--oui-border));
-  background: var(--oui-success-soft);
+  border-color: color-mix(in srgb, var(--oui-success-base) 42%, var(--oui-border));
+  background: var(--oui-success-surface);
 }
 
 .oui-alert[data-tone=warning] {
-  border-color: color-mix(in srgb, var(--oui-warning) 42%, var(--oui-border));
-  background: var(--oui-warning-soft);
+  border-color: color-mix(in srgb, var(--oui-warning-base) 42%, var(--oui-border));
+  background: var(--oui-warning-surface);
 }
 
 .oui-alert[data-tone=danger] {
-  border-color: color-mix(in srgb, var(--oui-danger) 42%, var(--oui-border));
-  background: var(--oui-danger-soft);
+  border-color: color-mix(in srgb, var(--oui-danger-base) 42%, var(--oui-border));
+  background: var(--oui-danger-surface);
 }
 
 .oui-alert[data-tone=info] {
-  border-color: color-mix(in srgb, var(--oui-info) 42%, var(--oui-border));
-  background: var(--oui-info-soft);
+  border-color: color-mix(in srgb, var(--oui-info-base) 42%, var(--oui-border));
+  background: var(--oui-info-surface);
+}
+
+.oui-alert[data-tone=blue] {
+  border-color: color-mix(in srgb, var(--blue-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--blue-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=sky] {
+  border-color: color-mix(in srgb, var(--sky-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--sky-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=cyan] {
+  border-color: color-mix(in srgb, var(--cyan-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--cyan-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=teal] {
+  border-color: color-mix(in srgb, var(--teal-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--teal-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=indigo] {
+  border-color: color-mix(in srgb, var(--indigo-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--indigo-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=violet] {
+  border-color: color-mix(in srgb, var(--violet-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--violet-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=purple] {
+  border-color: color-mix(in srgb, var(--purple-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--purple-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=iris] {
+  border-color: color-mix(in srgb, var(--iris-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--iris-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=green] {
+  border-color: color-mix(in srgb, var(--green-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--green-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=jade] {
+  border-color: color-mix(in srgb, var(--jade-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--jade-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=mint] {
+  border-color: color-mix(in srgb, var(--mint-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--mint-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=grass] {
+  border-color: color-mix(in srgb, var(--grass-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--grass-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=lime] {
+  border-color: color-mix(in srgb, var(--lime-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--lime-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=yellow] {
+  border-color: color-mix(in srgb, var(--yellow-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--yellow-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=amber] {
+  border-color: color-mix(in srgb, var(--amber-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--amber-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=orange] {
+  border-color: color-mix(in srgb, var(--orange-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--orange-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=brown] {
+  border-color: color-mix(in srgb, var(--brown-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--brown-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=red] {
+  border-color: color-mix(in srgb, var(--red-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--red-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=ruby] {
+  border-color: color-mix(in srgb, var(--ruby-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--ruby-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=crimson] {
+  border-color: color-mix(in srgb, var(--crimson-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--crimson-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=pink] {
+  border-color: color-mix(in srgb, var(--pink-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--pink-a3, var(--oui-info-surface));
+}
+
+.oui-alert[data-tone=tomato] {
+  border-color: color-mix(in srgb, var(--tomato-9, var(--oui-info-base)) 42%, var(--oui-border));
+  background: var(--tomato-a3, var(--oui-info-surface));
 }
 
 .oui-alert-icon,
@@ -1749,8 +3466,8 @@
 
 .oui-checkbox[data-checked=true] .oui-checkbox-box,
 .oui-radio[data-checked=true] .oui-radio-dot {
-  border-color: var(--oui-brand);
-  background: var(--oui-brand);
+  border-color: var(--oui-primary-base);
+  background: var(--oui-primary-base);
 }
 
 .oui-radio[data-checked=true] .oui-radio-dot::after {
@@ -1798,7 +3515,7 @@
 }
 
 .oui-switch[data-checked=true] .oui-switch-track {
-  background: var(--oui-brand);
+  background: var(--oui-primary-base);
 }
 
 .oui-switch[data-checked=true] .oui-switch-thumb {
@@ -1866,7 +3583,7 @@
 
 .oui-combobox-trigger[data-state=open],
 .oui-combobox-trigger[data-state=open]:hover {
-  border-color: var(--oui-brand);
+  border-color: var(--oui-primary-base);
   box-shadow: none;
 }
 
@@ -1919,7 +3636,7 @@
   padding: 0;
   overflow: hidden;
   color: var(--oui-text);
-  background: var(--oui-bg);
+  background: var(--oui-floating-bg, var(--oui-bg));
 }
 
 .oui-combobox-search-wrap {
@@ -1936,7 +3653,7 @@
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-gray-a8) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8)) transparent;
 }
 
 .oui-combobox-options,
@@ -2022,7 +3739,7 @@
 .oui-combobox-check {
   flex: 0 0 auto;
   margin-right: 10px;
-  color: var(--oui-brand-strong);
+  color: var(--oui-primary-text);
 }
 
 .oui-combobox-option-action {
@@ -2178,8 +3895,8 @@
 }
 
 .oui-multi-select-option[data-selected=true] .oui-multi-select-check {
-  border-color: var(--oui-brand);
-  background: var(--oui-brand);
+  border-color: var(--oui-primary-base);
+  background: var(--oui-primary-base);
 }
 
 .oui-button.oui-combobox-trigger[data-variant=surface],
@@ -2204,7 +3921,7 @@
 .oui-button.oui-combobox-trigger[data-state=open]:focus-visible,
 .oui-button.oui-combobox-trigger[data-state=open]:not(:disabled):hover {
   background-color: var(--oui-control-bg, transparent);
-  border-color: var(--oui-brand);
+  border-color: var(--oui-primary-base);
   box-shadow: none;
   outline: none;
 }
@@ -2252,6 +3969,7 @@
 }
 
 .oui-checkbox-box {
+  position: relative;
   border-radius: 4px;
   overflow: hidden;
 }
@@ -2261,6 +3979,7 @@
 }
 
 .oui-checkbox-box svg {
+  position: absolute;
   opacity: 0;
   transform: scale(0.72);
   transition: opacity 140ms ease, transform 160ms ease;
@@ -2271,17 +3990,19 @@
   border-color: var(--oui-gray-a8);
 }
 
-.oui-checkbox[data-checked=true] .oui-checkbox-box {
-  border-color: var(--oui-brand);
-  background: var(--oui-brand);
+.oui-checkbox[data-checked=true] .oui-checkbox-box,
+.oui-checkbox[data-indeterminate=true] .oui-checkbox-box {
+  border-color: var(--oui-primary-base);
+  background: var(--oui-primary-base);
 }
 
 .oui-radio[data-checked=true] .oui-radio-dot {
-  border-color: var(--oui-brand);
-  background: var(--oui-brand);
+  border-color: var(--oui-primary-base);
+  background: var(--oui-primary-base);
 }
 
-.oui-checkbox[data-checked=true] .oui-checkbox-box svg {
+.oui-checkbox[data-checked=true] .oui-checkbox-check,
+.oui-checkbox[data-indeterminate=true] .oui-checkbox-minus {
   opacity: 1;
   transform: scale(1);
 }
@@ -2289,7 +4010,7 @@
 .oui-checkbox:focus-within .oui-checkbox-box,
 .oui-radio:focus-within .oui-radio-dot,
 .oui-switch:focus-within .oui-switch-track {
-  border-color: var(--oui-brand);
+  border-color: var(--oui-primary-base);
   box-shadow: none;
 }
 
@@ -2321,8 +4042,8 @@
 }
 
 .oui-switch[data-checked=true] .oui-switch-track {
-  border-color: var(--oui-brand);
-  background: var(--oui-brand);
+  border-color: var(--oui-primary-base);
+  background: var(--oui-primary-base);
 }
 
 .oui-switch[data-checked=true] .oui-switch-thumb {
@@ -2421,10 +4142,11 @@
   align-items: center;
   gap: 8px;
   flex: 0 0 auto;
-  min-height: 34px;
+  box-sizing: border-box;
+  height: 34px;
   border: 0;
   border-radius: 6px;
-  padding: 8px 14px;
+  padding: 0 14px;
   color: var(--oui-muted);
   background: transparent;
   box-shadow: none;
@@ -2458,7 +4180,7 @@
 }
 
 .oui-tabs-trigger[data-active=true] .oui-tabs-trigger-icon {
-  color: var(--oui-brand);
+  color: var(--oui-primary-text);
 }
 
 .oui-tabs-trigger-label {
@@ -2469,13 +4191,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 20px;
-  height: 20px;
+  min-width: 16px;
+  height: 16px;
   border-radius: 999px;
-  padding: 0 6px;
+  padding: 0 5px;
   color: var(--oui-muted);
   background: var(--oui-gray-a4);
-  font-size: 12px;
+  font-size: 10px;
+  font-weight: 650;
   line-height: 1;
 }
 
@@ -2488,54 +4211,203 @@
   padding-top: 2px;
 }
 
-.oui-overlay-root {
-  position: fixed;
-  inset: 0;
-  z-index: var(--oui-z-overlay, 1000);
-  pointer-events: none;
+.oui-tabs-compound {
+  min-width: 0;
 }
 
-.oui-overlay-root > * {
-  pointer-events: auto;
+.oui-tabs-compound-shell {
+  position: relative;
+  min-width: 0;
+  margin-inline: -8px;
+  padding-inline: 8px;
+  overflow: visible;
 }
 
-.oui-select {
-  display: inline-flex;
-  align-items: center;
+.oui-tabs-list-scroll {
+  position: relative;
+  display: flex;
   gap: 4px;
   min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 2px var(--oui-tabs-extra-padding-right, 2px) 2px 2px;
+  scrollbar-width: none;
 }
 
-.oui-select > .oui-popover-trigger {
-  flex: 1 1 auto;
-  min-width: 0;
+.oui-tabs-list-scroll[data-overflow=true] {
+  padding-left: 36px;
+  padding-right: max(36px, var(--oui-tabs-extra-padding-right, 2px));
 }
 
-.oui-select-content,
-.oui-combobox-content {
-  min-width: 220px;
+.oui-tabs-list-scroll::-webkit-scrollbar {
+  display: none;
 }
 
-.oui-popover-trigger,
-.oui-tooltip-trigger {
-  display: inline-flex;
-  min-width: 0;
+.oui-tabs-edge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 42px;
+  z-index: 2;
+  pointer-events: none;
 }
 
-.oui-popover-content,
-.oui-tooltip-content {
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
-  border: 1px solid var(--oui-border);
-  border-radius: var(--oui-radius);
-  box-shadow: var(--oui-shadow-md);
-  transform-origin: top center;
-  will-change: opacity, transform;
+.oui-tabs-edge-left {
+  left: 0;
+  background: linear-gradient(90deg, var(--oui-panel-solid, var(--oui-bg)) 0%, color-mix(in srgb, var(--oui-panel-solid, var(--oui-bg)) 78%, transparent) 62%, transparent 100%);
 }
 
-.oui-popover-content {
-  min-width: 180px;
-  padding: 6px;
+.oui-tabs-edge-right {
+  right: 0;
+  background: linear-gradient(270deg, var(--oui-panel-solid, var(--oui-bg)) 0%, color-mix(in srgb, var(--oui-panel-solid, var(--oui-bg)) 78%, transparent) 62%, transparent 100%);
+}
+
+.oui-tabs-scroll-button {
+  position: absolute;
+  top: 50%;
+  z-index: 3;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  transform: translateY(-50%);
+  box-shadow: var(--oui-shadow-md);
+}
+
+.oui-tabs-scroll-button-left {
+  left: 4px;
+}
+
+.oui-tabs-scroll-button-right {
+  right: 4px;
+}
+
+.oui-tabs-compound-active-indicator,
+.oui-tabs-compound-hover-indicator {
+  position: absolute;
+  border-radius: 6px;
+  pointer-events: none;
+  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1), height 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
+}
+
+.oui-tabs-compound-active-indicator {
+  z-index: 0;
+  background: var(--oui-gray-a4);
+}
+
+.oui-tabs-compound-hover-indicator {
+  z-index: 0;
+  background: var(--oui-gray-a3);
+  opacity: 0;
+}
+
+.oui-tabs-compound-hover-indicator[data-visible=true] {
+  opacity: 1;
+}
+
+.oui-tabs-trigger[data-size="3"] {
+  height: 40px;
+  padding-inline: 15px;
+  font-size: 16px;
+}
+
+.oui-tabs-trigger[data-size="3"]:has(.oui-tabs-trigger-icon) {
+  padding-left: 11px;
+}
+
+.oui-tabs-trigger[data-size="2"]:has(.oui-tabs-trigger-icon) {
+  padding-left: 10px;
+}
+
+.oui-tabs-count-badge {
+  box-sizing: border-box;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 20px;
+  height: 20px;
+  min-height: 20px;
+  padding: 0 6px !important;
+  line-height: 1;
+}
+
+.oui-tabs-compound-panel,
+.oui-tabs-compound-panel-inner {
+  min-width: 0;
+}
+
+.oui-grid {
+  grid-template-columns: var(--oui-grid-columns, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .oui-grid {
+    grid-template-columns: var(--oui-grid-columns-sm, var(--oui-grid-columns, minmax(0, 1fr)));
+  }
+}
+@media (min-width: 768px) {
+  .oui-grid {
+    grid-template-columns: var(--oui-grid-columns-md, var(--oui-grid-columns-sm, var(--oui-grid-columns, minmax(0, 1fr))));
+  }
+}
+@media (min-width: 1024px) {
+  .oui-grid {
+    grid-template-columns: var(--oui-grid-columns-lg, var(--oui-grid-columns-md, var(--oui-grid-columns-sm, var(--oui-grid-columns, minmax(0, 1fr)))));
+  }
+}
+@media (min-width: 1280px) {
+  .oui-grid {
+    grid-template-columns: var(--oui-grid-columns-xl, var(--oui-grid-columns-lg, var(--oui-grid-columns-md, var(--oui-grid-columns-sm, var(--oui-grid-columns, minmax(0, 1fr))))));
+  }
+}
+.oui-overlay-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--oui-z-overlay, 1000);
+  pointer-events: none;
+}
+
+.oui-overlay-root > * {
+  pointer-events: auto;
+}
+
+.oui-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.oui-select > .oui-popover-trigger {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.oui-select-content,
+.oui-combobox-content {
+  min-width: 220px;
+}
+
+.oui-popover-trigger,
+.oui-tooltip-trigger {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.oui-popover-content,
+.oui-tooltip-content {
+  color: var(--oui-text);
+  background: var(--oui-floating-bg, var(--oui-bg));
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  box-shadow: var(--oui-shadow-md);
+  transform-origin: top center;
+  will-change: opacity, transform;
+}
+
+.oui-popover-content {
+  min-width: 180px;
+  padding: 6px;
 }
 
 .oui-popover-content[data-state=opening],
@@ -2630,7 +4502,7 @@
   overflow: auto;
   padding-right: 2px;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-gray-a8, var(--oui-border-strong)) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
 }
 
 .oui-command-palette-results::-webkit-scrollbar {
@@ -2644,10 +4516,14 @@
 .oui-command-palette-results::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
   border-radius: 999px;
-  background-color: var(--oui-gray-a8, var(--oui-border-strong));
+  background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
   background-clip: content-box;
 }
 
+.oui-command-palette-results::-webkit-scrollbar-thumb:hover {
+  background-color: var(--oui-scrollbar-thumb-hover, var(--oui-border-strong));
+}
+
 .oui-command-palette-collapse {
   width: 100%;
 }
@@ -2674,7 +4550,7 @@
 }
 
 .oui-command-palette-group-title[data-recent=true] {
-  color: var(--oui-brand-strong);
+  color: var(--oui-primary-text);
 }
 
 .oui-command-palette-items {
@@ -2721,7 +4597,7 @@
 }
 
 .oui-command-palette-item[data-selected=true] .oui-command-palette-item-icon {
-  color: var(--oui-brand-strong);
+  color: var(--oui-primary-text);
 }
 
 .oui-command-palette-item-main {
@@ -2815,7 +4691,7 @@
 }
 
 .oui-menu-item[data-tone=danger] {
-  color: var(--oui-danger);
+  color: var(--oui-danger-base);
 }
 
 .oui-menu-separator {
@@ -2963,27 +4839,27 @@
   position: fixed;
   z-index: var(--oui-z-toast, 2147483000);
   display: flex;
-  width: min(420px, 100vw - 24px);
+  width: min(380px, 100vw - 32px);
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   pointer-events: none;
 }
 
 .oui-toast-viewport[data-position^=top] {
-  top: 20px;
+  top: 16px;
 }
 
 .oui-toast-viewport[data-position^=bottom] {
-  bottom: 20px;
+  bottom: 16px;
 }
 
 .oui-toast-viewport[data-position$=left] {
-  left: 20px;
+  left: 16px;
   align-items: flex-start;
 }
 
 .oui-toast-viewport[data-position$=right] {
-  right: 20px;
+  right: 16px;
   align-items: flex-end;
 }
 
@@ -2997,9 +4873,9 @@
   position: relative;
   isolation: isolate;
   width: 100%;
-  animation: ouiToastIn var(--oui-toast-animation-duration, 520ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation: ouiToastIn var(--oui-toast-animation-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1) both;
   pointer-events: none;
-  will-change: filter, opacity, transform;
+  will-change: opacity, transform;
 }
 
 .oui-toast-backdrop {
@@ -3008,8 +4884,8 @@
   z-index: 0;
   border-radius: 14px;
   background: transparent;
-  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
-  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
+  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
+  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
   pointer-events: none;
 }
 
@@ -3021,16 +4897,16 @@
   justify-content: space-between;
   gap: 12px;
   border: 1px solid var(--oui-toast-custom-border-color, var(--oui-toast-border-color, var(--oui-border)));
-  border-radius: 8px;
+  border-radius: var(--oui-radius-xl, 12px);
   width: 100%;
   isolation: isolate;
-  overflow: visible;
-  padding: 11px 12px 12px;
+  overflow: hidden;
+  padding: 16px;
   color: var(--oui-text);
   background: var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg)));
   box-shadow: var(--oui-toast-shadow, 0 10px 26px rgba(0, 0, 0, 0.18));
-  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
-  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px));
+  backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
+  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
   transform-origin: var(--oui-toast-origin, center);
   pointer-events: auto;
 }
@@ -3092,7 +4968,38 @@
 }
 
 .oui-toast-frame[data-state=closing] {
-  animation: ouiToastOut var(--oui-toast-exit-duration, 260ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ouiToastOut var(--oui-toast-exit-duration, 320ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.oui-toast-content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 12px;
+}
+
+.oui-toast-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 26px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  color: var(--oui-info-base);
+  line-height: 1;
+}
+
+.oui-toast-icon[data-tone=success] {
+  color: var(--oui-success-base);
+}
+
+.oui-toast-icon[data-tone=warning] {
+  color: var(--oui-warning-base);
+}
+
+.oui-toast-icon[data-tone=danger] {
+  color: var(--oui-danger-base);
 }
 
 .oui-toast-main {
@@ -3105,15 +5012,15 @@
 
 .oui-toast-title {
   color: var(--oui-text);
-  font-size: 13px;
-  font-weight: 560;
-  line-height: 1.25;
+  font-size: 14px;
+  font-weight: 650;
+  line-height: 1.3;
 }
 
 .oui-toast-message {
   color: var(--oui-muted);
-  font-size: 12px;
-  line-height: 1.4;
+  font-size: 14px;
+  line-height: 1.35;
 }
 
 .oui-toast-action {
@@ -3130,54 +5037,53 @@
   left: 0;
   width: 100%;
   height: var(--oui-toast-progress-height, 1px);
-  background: var(--oui-toast-progress-color, var(--oui-brand-strong));
-  border-radius: 0 0 inherit inherit;
+  background: var(--oui-toast-progress-color, var(--oui-primary-text));
   transform-origin: left center;
   animation: ouiToastProgress var(--oui-toast-duration, 4200ms) linear forwards;
   pointer-events: none;
 }
 
 .oui-toast[data-tone=success] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-success-soft) 34%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-success) 16%, var(--oui-border)));
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-success-surface) 34%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-success-base) 16%, var(--oui-border)));
 }
 
 .oui-toast[data-tone=success] .oui-toast-progress {
-  background: var(--oui-toast-progress-color, var(--oui-success));
+  background: var(--oui-toast-progress-color, var(--oui-success-base));
 }
 
 .oui-toast[data-tone=warning] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-warning-soft) 32%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-warning) 18%, var(--oui-border)));
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-warning-surface) 32%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-warning-base) 18%, var(--oui-border)));
 }
 
 .oui-toast[data-tone=warning] .oui-toast-progress {
-  background: var(--oui-toast-progress-color, var(--oui-warning));
+  background: var(--oui-toast-progress-color, var(--oui-warning-base));
 }
 
 .oui-toast[data-tone=danger] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-danger-soft) 32%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-danger) 18%, var(--oui-border)));
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-danger-surface) 32%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-danger-base) 18%, var(--oui-border)));
 }
 
 .oui-toast[data-tone=danger] .oui-toast-progress {
-  background: var(--oui-toast-progress-color, var(--oui-danger));
+  background: var(--oui-toast-progress-color, var(--oui-danger-base));
 }
 
 .oui-toast[data-tone=info] {
-  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-info-soft) 30%, transparent);
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-info) 16%, var(--oui-border)));
+  --oui-toast-tone-bg: color-mix(in srgb, var(--oui-info-surface) 30%, transparent);
+  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-info-base) 16%, var(--oui-border)));
 }
 
 .oui-toast[data-tone=info] .oui-toast-progress {
-  background: var(--oui-toast-progress-color, var(--oui-info));
+  background: var(--oui-toast-progress-color, var(--oui-info-base));
 }
 
 .oui-popover-content,
 .oui-tooltip-content {
   border-color: var(--oui-gray-a8);
   background: var(--oui-floating-bg, var(--oui-bg));
-  box-shadow: var(--oui-shadow-md);
+  box-shadow: var(--oui-floating-shadow, 0 8px 20px var(--oui-shadow-soft, rgba(0, 0, 0, 0.32)));
 }
 
 .oui-menu.oui-action-menu-content {
@@ -3296,16 +5202,16 @@
 }
 
 .oui-menu-item[data-tone=danger] {
-  color: var(--oui-danger);
+  color: var(--oui-danger-base);
 }
 
 .oui-menu-item[data-tone=danger] .oui-menu-icon {
-  color: var(--oui-danger);
+  color: var(--oui-danger-base);
 }
 
 .oui-menu-item[data-tone=danger]:hover,
 .oui-menu-item[data-tone=danger]:focus-visible {
-  background: var(--oui-danger-soft);
+  background: var(--oui-danger-surface);
 }
 
 .oui-context-menu-content {
@@ -3375,7 +5281,8 @@
 .oui-select-content,
 .oui-popover-content.oui-combobox-content,
 .oui-popover-content.oui-select-content {
-  background: var(--oui-bg);
+  color: var(--oui-text);
+  background: var(--oui-floating-bg, var(--oui-bg));
 }
 
 .oui-menu.oui-action-menu-content,
@@ -3385,6 +5292,11 @@
   border-radius: 6px;
 }
 
+.oui-menu.oui-action-menu-content,
+.oui-context-menu-content {
+  box-shadow: var(--oui-floating-shadow, 0 8px 20px var(--oui-shadow-soft, rgba(0, 0, 0, 0.32)));
+}
+
 .oui-menu-row {
   position: relative;
 }
@@ -3426,6 +5338,125 @@
   pointer-events: none;
 }
 
+.oui-special-modal-layer {
+  overflow: hidden;
+  overscroll-behavior: contain;
+  padding: 12px 24px;
+}
+
+.oui-special-modal {
+  max-height: min(90vh, 100vh - 24px);
+  min-width: 0;
+  overflow: hidden;
+  background: var(--oui-panel);
+  border-color: color-mix(in srgb, var(--oui-gray-a8, var(--oui-border-strong)) 48%, transparent);
+  border-radius: 10px;
+  box-shadow: var(--oui-special-modal-shadow, 0 8px 20px var(--oui-shadow-soft, rgba(0, 0, 0, 0.48)));
+}
+
+.oui-special-modal-size-full {
+  width: min(100vw - 48px, 1920px) !important;
+}
+
+.oui-special-modal-scroll-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.oui-special-modal-scroll-body .oui-special-modal-body {
+  min-height: 0;
+  overflow: auto;
+}
+
+.oui-special-modal-scroll-content {
+  overflow: auto;
+}
+
+.oui-special-modal-scroll-content .oui-special-modal-body {
+  overflow: visible;
+}
+
+.oui-special-modal-header,
+.oui-special-modal-footer {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex: 0 0 auto;
+}
+
+.oui-special-modal-header {
+  padding: 12px 14px 8px;
+}
+
+.oui-special-modal-footer {
+  padding: 10px 14px 12px;
+}
+
+.oui-special-modal-body {
+  min-width: 0;
+  padding: 10px 14px 12px;
+}
+
+.oui-special-modal-density-compact .oui-special-modal-header {
+  padding: 10px 12px 6px;
+}
+
+.oui-special-modal-density-compact .oui-special-modal-body {
+  padding: 8px 12px 10px;
+}
+
+.oui-special-modal-density-compact .oui-special-modal-footer {
+  padding: 8px 12px 10px;
+}
+
+.oui-special-modal-title-wrap {
+  min-width: 0;
+}
+
+.oui-special-modal-title {
+  margin: 0;
+  color: var(--oui-text);
+  font-size: var(--oui-heading-size, 18px);
+  font-weight: var(--oui-weight-bold, 760);
+  line-height: var(--oui-heading-line-height, 1.18);
+  letter-spacing: 0;
+}
+
+.oui-special-modal-meta {
+  margin-top: 4px;
+  color: var(--oui-muted);
+  font-size: var(--oui-compact-size, 13px);
+  line-height: 1.35;
+}
+
+.oui-special-modal-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.oui-special-modal-close {
+  border: 0;
+}
+
+@media (max-width: 768px) {
+  .oui-special-modal-layer {
+    padding: 0;
+  }
+  .oui-special-modal {
+    width: 100dvw !important;
+    max-width: 100dvw !important;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+  }
+  .oui-special-modal-size-full {
+    width: 100dvw !important;
+  }
+}
 .oui-drawer-layer {
   position: fixed;
   inset: 0;
@@ -3520,8 +5551,20 @@
   transform: translate(0, 0);
 }
 
-.oui-drawer-panel[data-state=opening] {
-  transition: transform var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease);
+.oui-drawer-panel[data-side=left][data-state=opening] {
+  animation: ouiDrawerLeftIn var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease) forwards;
+}
+
+.oui-drawer-panel[data-side=right][data-state=opening] {
+  animation: ouiDrawerRightIn var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease) forwards;
+}
+
+.oui-drawer-panel[data-side=top][data-state=opening] {
+  animation: ouiDrawerTopIn var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease) forwards;
+}
+
+.oui-drawer-panel[data-side=bottom][data-state=opening] {
+  animation: ouiDrawerBottomIn var(--oui-drawer-duration, 260ms) var(--oui-drawer-ease, ease) forwards;
 }
 
 .oui-drawer-panel[data-state=closing] {
@@ -3602,6 +5645,38 @@
     opacity: 0;
   }
 }
+@keyframes ouiDrawerLeftIn {
+  from {
+    transform: translateX(-105%);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes ouiDrawerRightIn {
+  from {
+    transform: translateX(105%);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes ouiDrawerTopIn {
+  from {
+    transform: translateY(-105%);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes ouiDrawerBottomIn {
+  from {
+    transform: translateY(105%);
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
 .oui-data-table-shell {
   display: flex;
   min-width: 0;
@@ -3643,7 +5718,7 @@
   background: var(--oui-data-table-row-base-bg);
   min-height: 0;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-gray-a8, var(--oui-border-strong)) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
 }
 
 .oui-data-table-wrap:focus,
@@ -3725,7 +5800,7 @@
 .oui-data-table-resize:hover::after,
 .oui-data-table-resize:focus-visible::after,
 .oui-data-table th[data-resizing=true] .oui-data-table-resize::after {
-  background: color-mix(in srgb, var(--oui-brand) 70%, transparent);
+  background: color-mix(in srgb, var(--oui-primary-base) 70%, transparent);
 }
 
 .oui-data-table td {
@@ -3781,7 +5856,7 @@
 }
 
 .oui-data-table tbody tr[data-active=true] {
-  outline: 2px solid color-mix(in srgb, var(--oui-brand) 42%, transparent);
+  outline: 2px solid color-mix(in srgb, var(--oui-primary-base) 42%, transparent);
   outline-offset: -2px;
 }
 
@@ -3882,7 +5957,7 @@
 }
 
 .oui-data-table-sort[data-active=true] {
-  color: var(--oui-brand-strong);
+  color: var(--oui-primary-text);
 }
 
 .oui-data-table-sort-placeholder {
@@ -3921,12 +5996,12 @@
   min-height: 28px;
   border: 3px solid transparent;
   border-radius: 999px;
-  background-color: var(--oui-gray-a8, var(--oui-border-strong));
+  background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
   background-clip: content-box;
 }
 
 .oui-data-table-wrap::-webkit-scrollbar-thumb:hover {
-  background-color: var(--oui-border-strong);
+  background-color: var(--oui-scrollbar-thumb-hover, var(--oui-border-strong));
 }
 
 .oui-data-table-group-row td {
@@ -4062,6 +6137,76 @@
   border-bottom: 0;
 }
 
+.oui-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--oui-text);
+  font-size: 13px;
+}
+
+.oui-table[data-variant=surface] {
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  background: var(--oui-panel);
+  overflow: hidden;
+}
+
+.oui-table th,
+.oui-table td {
+  border-bottom: 1px solid var(--oui-border);
+  vertical-align: middle;
+  text-align: left;
+}
+
+.oui-table[data-size="1"] th,
+.oui-table[data-size="1"] td {
+  padding: 7px 9px;
+}
+
+.oui-table[data-size="2"] th,
+.oui-table[data-size="2"] td {
+  padding: 9px 11px;
+}
+
+.oui-table[data-size="3"] th,
+.oui-table[data-size="3"] td {
+  padding: 11px 13px;
+}
+
+.oui-table[data-size="4"] th,
+.oui-table[data-size="4"] td {
+  padding: 13px 15px;
+}
+
+.oui-table th {
+  color: var(--oui-muted);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.oui-table tr:last-child td,
+.oui-table tr:last-child th[scope=row] {
+  border-bottom: 0;
+}
+
+.oui-table-cell[data-align=center],
+.oui-table-column-header-cell[data-align=center],
+.oui-table-row-header-cell[data-align=center] {
+  text-align: center;
+}
+
+.oui-table-cell[data-align=right],
+.oui-table-column-header-cell[data-align=right],
+.oui-table-row-header-cell[data-align=right] {
+  text-align: right;
+}
+
+.oui-table-row-header-cell {
+  color: var(--oui-text);
+  font-weight: 650;
+}
+
 .oui-scroll-area {
   position: relative;
   min-height: 0;
@@ -4075,7 +6220,29 @@
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-gray-a8, var(--oui-border-strong)) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+}
+
+.oui-scroll-area[data-scrollbars=vertical] > .oui-scroll-area-viewport {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.oui-scroll-area[data-scrollbars=horizontal] > .oui-scroll-area-viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.oui-scroll-area[data-scrollbars=both] > .oui-scroll-area-viewport {
+  overflow: auto;
+}
+
+.oui-scroll-area[data-scrollbars=vertical][data-type=scroll] > .oui-scroll-area-viewport {
+  overflow-y: scroll;
+}
+
+.oui-scroll-area[data-scrollbars=horizontal][data-type=scroll] > .oui-scroll-area-viewport {
+  overflow-x: scroll;
 }
 
 .oui-scroll-area-highlight-overlay {
@@ -4113,14 +6280,14 @@
   min-height: 28px;
   border: 3px solid transparent;
   border-radius: 999px;
-  background-color: var(--oui-gray-a8, var(--oui-border-strong));
+  background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
   background-clip: content-box;
 }
 
 .oui-scroll-area-viewport::-webkit-scrollbar-thumb:hover,
 .oui-combobox-scroll::-webkit-scrollbar-thumb:hover,
 .oui-modal-body::-webkit-scrollbar-thumb:hover {
-  background-color: var(--oui-border-strong);
+  background-color: var(--oui-scrollbar-thumb-hover, var(--oui-border-strong));
 }
 
 .oui-highlight {
@@ -4211,296 +6378,6 @@
   white-space: nowrap;
 }
 
-.oui-status-badge {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 6px;
-  border-radius: 999px;
-  background: var(--oui-soft);
-  color: var(--oui-text);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 5px 8px;
-}
-
-.oui-status-badge[data-tone=success] {
-  color: var(--oui-success);
-  background: var(--oui-success-soft);
-}
-
-.oui-status-badge[data-tone=warning] {
-  color: var(--oui-warning);
-  background: var(--oui-warning-soft);
-}
-
-.oui-status-badge[data-tone=danger] {
-  color: var(--oui-danger);
-  background: var(--oui-danger-soft);
-}
-
-.oui-status-badge[data-tone=info] {
-  color: var(--oui-info);
-  background: var(--oui-info-soft);
-}
-
-.oui-workflow-summary {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.oui-workflow-summary .oui-badge strong {
-  font-weight: 800;
-}
-
-.oui-timeline {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.oui-timeline-item {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: 18px minmax(0, 1fr);
-  gap: 10px;
-}
-
-.oui-timeline-marker {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 10px;
-  height: 10px;
-  margin-top: 5px;
-  border-radius: 999px;
-  background: var(--oui-brand);
-  box-shadow: 0 0 0 4px var(--oui-brand-soft);
-  color: var(--oui-brand-strong);
-  font-size: 10px;
-}
-
-.oui-timeline-item[data-tone=success] .oui-timeline-marker {
-  background: var(--oui-success);
-  box-shadow: 0 0 0 4px var(--oui-success-soft);
-}
-
-.oui-timeline-item[data-tone=warning] .oui-timeline-marker {
-  background: var(--oui-warning);
-  box-shadow: 0 0 0 4px var(--oui-warning-soft);
-}
-
-.oui-timeline-item[data-tone=danger] .oui-timeline-marker {
-  background: var(--oui-danger);
-  box-shadow: 0 0 0 4px var(--oui-danger-soft);
-}
-
-.oui-timeline-item[data-tone=info] .oui-timeline-marker {
-  background: var(--oui-info);
-  box-shadow: 0 0 0 4px var(--oui-info-soft);
-}
-
-.oui-timeline-content {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.oui-timeline-time {
-  color: var(--oui-muted);
-  font-size: 12px;
-}
-
-.oui-pipeline {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.oui-pipeline > .oui-tooltip-trigger {
-  display: inline-flex;
-  min-width: var(--oui-pipeline-step-min-width, 130px);
-  flex: 1 1 140px;
-}
-
-.oui-pipeline-step {
-  appearance: none;
-  display: flex;
-  min-width: var(--oui-pipeline-step-min-width, 130px);
-  flex: 1 1 140px;
-  align-items: flex-start;
-  gap: 8px;
-  border: 1px solid var(--oui-border);
-  border-radius: var(--oui-radius-sm);
-  background: var(--oui-pad-bg);
-  color: var(--oui-text);
-  cursor: default;
-  font: inherit;
-  padding: 9px 10px;
-  text-align: left;
-}
-
-.oui-pipeline-step[data-clickable=true] {
-  cursor: pointer;
-}
-
-.oui-pipeline-step[data-clickable=true]:hover {
-  background: var(--oui-control-hover-bg);
-}
-
-.oui-pipeline-step:focus-visible {
-  outline: none;
-  box-shadow: var(--oui-ring);
-}
-
-.oui-pipeline-step:disabled {
-  opacity: 0.68;
-}
-
-.oui-pipeline-step[data-loading=true] {
-  cursor: progress;
-}
-
-.oui-pipeline-step[data-active=true] {
-  border-color: color-mix(in srgb, var(--oui-brand) 48%, var(--oui-border));
-  background: var(--oui-brand-soft);
-}
-
-.oui-pipeline-step[data-status=done] {
-  border-color: color-mix(in srgb, var(--oui-success) 42%, var(--oui-border));
-}
-
-.oui-pipeline-step[data-status=blocked] {
-  border-color: color-mix(in srgb, var(--oui-warning) 42%, var(--oui-border));
-}
-
-.oui-pipeline-step[data-status=error] {
-  border-color: color-mix(in srgb, var(--oui-danger) 42%, var(--oui-border));
-}
-
-.oui-pipeline-step[data-status=processing] .oui-pipeline-dot svg {
-  animation: ouiSpin 900ms linear infinite;
-}
-
-.oui-pipeline-dot {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 999px;
-  background: var(--oui-soft);
-  color: var(--oui-muted);
-}
-
-.oui-pipeline-step[data-tone=success] .oui-pipeline-dot {
-  background: var(--oui-success-soft);
-  color: var(--oui-success);
-}
-
-.oui-pipeline-step[data-tone=warning] .oui-pipeline-dot {
-  background: var(--oui-warning-soft);
-  color: var(--oui-warning);
-}
-
-.oui-pipeline-step[data-tone=danger] .oui-pipeline-dot {
-  background: var(--oui-danger-soft);
-  color: var(--oui-danger);
-}
-
-.oui-pipeline-step[data-tone=info] .oui-pipeline-dot,
-.oui-pipeline-step[data-tone=brand] .oui-pipeline-dot {
-  background: var(--oui-brand-soft);
-  color: var(--oui-brand-strong);
-}
-
-.oui-pipeline-step-main {
-  display: flex;
-  min-width: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.oui-pipeline-label,
-.oui-pipeline-step-label {
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.oui-pipeline-detail,
-.oui-pipeline-description,
-.oui-pipeline-step-description {
-  color: var(--oui-muted);
-  font-size: 12px;
-}
-
-.oui-pipeline-meta {
-  color: var(--oui-muted);
-  font-size: 12px;
-}
-
-.oui-pipeline-tooltip-wrap,
-.oui-lifecycle-action-tooltip-wrap {
-  display: inline-flex;
-  min-width: 0;
-  flex: 1 1 140px;
-}
-
-.oui-pipeline > .oui-tooltip-trigger > .oui-pipeline-tooltip-wrap {
-  flex: 1 1 auto;
-}
-
-.oui-pipeline-tooltip-wrap > .oui-pipeline-step {
-  width: 100%;
-  height: 100%;
-}
-
-.oui-lifecycle-panel {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 10px;
-  border: 1px solid var(--oui-border);
-  border-radius: var(--oui-radius);
-  background: var(--oui-section-surface-bg);
-  padding: 12px;
-}
-
-.oui-lifecycle-panel-head,
-.oui-lifecycle-panel-actions {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.oui-lifecycle-reasons {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.oui-lifecycle-panel-actions {
-  justify-content: flex-end;
-}
-
-.oui-lifecycle-panel-head > span {
-  color: var(--oui-muted);
-  font-size: 12px;
-}
-
 @keyframes ouiOverlayIn {
   from {
     opacity: 0;
@@ -4524,25 +6401,21 @@
 @keyframes ouiToastIn {
   from {
     opacity: 0;
-    filter: blur(6px);
-    transform: translate3d(var(--oui-toast-enter-x, 0), var(--oui-toast-enter-y, 0), 0) scale(0.985);
+    transform: translate3d(var(--oui-toast-enter-x, 0), var(--oui-toast-enter-y, 0), 0);
   }
   to {
     opacity: 1;
-    filter: blur(0);
-    transform: translate3d(0, 0, 0) scale(1);
+    transform: translate3d(0, 0, 0);
   }
 }
 @keyframes ouiToastOut {
   from {
     opacity: 1;
-    filter: blur(0);
-    transform: translate3d(0, 0, 0) scale(1);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    opacity: 1;
-    filter: blur(0);
-    transform: translate3d(var(--oui-toast-exit-x, 0), var(--oui-toast-exit-y, 0), 0) scale(1);
+    opacity: 0;
+    transform: translate3d(var(--oui-toast-exit-x, 0), var(--oui-toast-exit-y, 0), 0);
   }
 }
 @keyframes ouiToastProgress {