@orcestr/ui 0.1.0 → 0.1.1

package/dist/styles/orcestr-ui.css

@@ -60,8 +60,9 @@
   --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-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 95%, var(--oui-text) 5%);
+  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 92%, var(--oui-text) 8%);
+  --oui-scrollbar-track: transparent;
   --oui-skeleton-shimmer: rgb(255 255 255 / 18%);
   --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%);
@@ -164,8 +165,9 @@
   --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-scrollbar-thumb: color-mix(in srgb, var(--oui-bg) 96%, var(--oui-text) 4%);
+  --oui-scrollbar-thumb-hover: color-mix(in srgb, var(--oui-bg) 93%, var(--oui-text) 7%);
+  --oui-scrollbar-track: transparent;
   --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%);
@@ -344,6 +346,8 @@
 }
 
 .oui-app-shell {
+  position: relative;
+  isolation: isolate;
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
@@ -354,16 +358,20 @@
 
 .oui-app-shell-frame {
   display: grid;
+  width: 100%;
   grid-template-columns: minmax(220px, var(--oui-app-shell-sidebar-width, 260px)) minmax(0, 1fr);
   gap: 0;
   height: calc(100vh - var(--oui-app-shell-inset, 28px) * 2);
   min-height: 0;
   max-width: var(--oui-app-shell-max-width, 1440px);
   margin: 0 auto;
+  transition: grid-template-columns 340ms ease;
 }
 
 .oui-app-shell-main {
   display: flex;
+  grid-column: 2;
+  grid-row: 1;
   min-width: 0;
   height: 100%;
   min-height: 0;
@@ -372,15 +380,64 @@
 }
 
 .oui-app-shell-sidebar-desktop {
+  grid-column: 1;
+  grid-row: 1;
+  width: 100%;
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
+  transform: translateX(0);
+  transition: transform 340ms ease, opacity 220ms ease;
+}
+
+.oui-app-shell-drawer-root {
+  position: absolute;
+  inset: 0;
+  z-index: 80;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.oui-app-shell-drawer-root .oui-drawer-layer {
+  position: absolute;
+  inset: 0;
+}
+
+.oui-app-shell[data-desktop-sidebar-open=false] .oui-app-shell-frame {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.oui-app-shell[data-desktop-sidebar-open=false] .oui-app-shell-sidebar-desktop {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--oui-app-shell-sidebar-width, 260px) * -1));
+}
+
+.oui-app-shell[data-sidebar-side=right] .oui-app-shell-frame {
+  grid-template-columns: minmax(0, 1fr) minmax(220px, var(--oui-app-shell-sidebar-width, 260px));
+}
+
+.oui-app-shell[data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-frame {
+  grid-template-columns: minmax(0, 1fr) 0;
+}
+
+.oui-app-shell[data-sidebar-side=right] .oui-app-shell-sidebar-desktop {
+  grid-column: 2;
+}
+
+.oui-app-shell[data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-sidebar-desktop {
+  transform: translateX(var(--oui-app-shell-sidebar-width, 260px));
+}
+
+.oui-app-shell[data-sidebar-side=right] .oui-app-shell-main {
+  grid-column: 1;
 }
 
 .oui-app-shell-header {
   position: relative;
   z-index: 65;
   display: flex;
-  min-height: 56px;
+  min-height: var(--oui-app-shell-header-h, 56px);
   align-items: center;
   justify-content: space-between;
   gap: 10px;
@@ -393,6 +450,10 @@
   display: none;
 }
 
+.oui-app-shell-header-nav-button[data-navigation-visibility=mobile] {
+  display: none;
+}
+
 .oui-app-shell-header-title {
   min-width: 0;
   flex: 1 1 auto;
@@ -409,6 +470,7 @@
   flex: 0 0 auto;
   align-items: center;
   gap: 8px;
+  margin-left: auto;
 }
 
 .oui-app-shell-sidebar {
@@ -666,6 +728,179 @@
   gap: 8px;
 }
 
+.oui-app-shell[data-sidebar-mode=mobile] {
+  padding: 0;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header {
+  min-height: var(--oui-app-shell-header-h, 48px);
+  gap: 8px;
+  padding: 6px 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header > .oui-icon-button {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  flex: 0 0 32px;
+  align-self: center;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-frame {
+  width: 100%;
+  height: 100vh;
+  grid-template-columns: 1fr;
+  grid-template-rows: minmax(0, 1fr);
+  max-width: none;
+  margin: 0;
+  transition: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile][data-sidebar-side=right] .oui-app-shell-frame,
+.oui-app-shell[data-sidebar-mode=mobile][data-desktop-sidebar-open=false] .oui-app-shell-frame,
+.oui-app-shell[data-sidebar-mode=mobile][data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-frame {
+  grid-template-columns: 1fr;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header[data-visibility=mobile] {
+  display: flex;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-header-nav-button[data-navigation-visibility=mobile] {
+  display: inline-flex;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-desktop {
+  display: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-main {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-backdrop.oui-app-shell-sidebar-drawer-overlay {
+  background: transparent;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left],
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
+  width: min(88vw, max(var(--oui-drawer-size, 300px), 300px));
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
+  border-radius: 0 14px 14px 0;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
+  border-radius: 14px 0 0 14px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body {
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+  background: transparent;
+  padding: 0;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+  width: 100%;
+  height: 100%;
+  border-radius: 0 14px 14px 0;
+  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+  border-radius: 14px 0 0 14px;
+  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .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[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-content {
+  padding: 6px 8px 12px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-indicator {
+  right: 8px;
+  left: 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-groups,
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-group {
+  gap: 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-item {
+  padding: 0 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-footer {
+  padding: 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+  width: 100%;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+  border-radius: 14px 0 0 14px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar {
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  --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(--oui-bg);
+  box-shadow: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar {
+  border-radius: 14px 0 0 14px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar-separator {
+  margin: 0 8px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar::before {
+  display: none;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-sidebar .oui-app-shell-sidebar-close {
+  display: inline-flex;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-content-scroll > .oui-scroll-area-viewport {
+  scroll-padding: 12px 10px 18px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-content {
+  padding: 12px 10px 18px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-page-title-block {
+  flex-direction: column;
+  gap: 10px;
+}
+
+.oui-app-shell[data-sidebar-mode=mobile] .oui-page-title-actions {
+  justify-content: flex-start;
+}
+
 @media (max-width: 860px) {
   .oui-app-shell {
     padding: 0;
@@ -689,10 +924,19 @@
     grid-template-rows: minmax(0, 1fr);
     max-width: none;
     margin: 0;
+    transition: none;
+  }
+  .oui-app-shell[data-sidebar-side=right] .oui-app-shell-frame,
+  .oui-app-shell[data-desktop-sidebar-open=false] .oui-app-shell-frame,
+  .oui-app-shell[data-sidebar-side=right][data-desktop-sidebar-open=false] .oui-app-shell-frame {
+    grid-template-columns: 1fr;
   }
   .oui-app-shell-header[data-visibility=mobile] {
     display: flex;
   }
+  .oui-app-shell-header-nav-button[data-navigation-visibility=mobile] {
+    display: inline-flex;
+  }
   .oui-app-shell-sidebar-desktop {
     display: none;
   }
@@ -703,22 +947,35 @@
   .oui-drawer-backdrop.oui-app-shell-sidebar-drawer-overlay {
     background: transparent;
   }
-  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left],
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
     width: min(88vw, max(var(--oui-drawer-size, 300px), 300px));
-    background: var(--color-background, var(--oui-bg));
+    background: transparent;
     border: 0;
+    box-shadow: none;
+  }
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=left] {
     border-radius: 0 14px 14px 0;
-    box-shadow: 14px 0 38px rgba(0, 0, 0, 0.24);
+  }
+  .oui-drawer-panel.oui-app-shell-sidebar-drawer-panel[data-side=right] {
+    border-radius: 14px 0 0 14px;
   }
   .oui-app-shell-sidebar-drawer-body {
     display: flex;
     min-height: 0;
+    overflow: hidden;
+    background: transparent;
     padding: 0;
   }
   .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
     width: 100%;
     height: 100%;
     border-radius: 0 14px 14px 0;
+    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.08);
+  }
+  .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-sidebar {
+    border-radius: 14px 0 0 14px;
+    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
   }
   .oui-app-shell-sidebar-drawer-body .oui-app-sidebar-head {
     flex: 0 0 48px;
@@ -746,17 +1003,23 @@
   .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
     width: 100%;
   }
+  .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar-drawer-body > .oui-app-shell-sidebar {
+    border-radius: 14px 0 0 14px;
+  }
   .oui-app-shell-sidebar {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     max-height: none;
     --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));
+    background: var(--oui-bg);
     box-shadow: none;
   }
+  .oui-drawer-panel[data-side=right] .oui-app-shell-sidebar {
+    border-radius: 14px 0 0 14px;
+  }
   .oui-app-shell-sidebar-separator {
     margin: 0 8px;
   }
@@ -787,19 +1050,19 @@
   flex-direction: column;
   overflow: hidden;
   color: var(--oui-text);
-  background: var(--color-background, var(--oui-bg));
+  background: var(--oui-bg);
 }
 
 .oui-app-sidebar-head {
   display: flex;
-  flex: 0 0 61px;
-  min-height: 61px;
+  flex: 0 0 var(--oui-app-shell-header-h, 61px);
+  min-height: var(--oui-app-shell-header-h, 61px);
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  border-bottom: 1px solid var(--gray-a4, var(--oui-border));
+  border-bottom: 1px solid var(--oui-border);
   padding: 0 16px;
-  background: var(--color-background, var(--oui-bg));
+  background: var(--oui-bg);
 }
 
 .oui-app-sidebar[data-side=right] .oui-app-sidebar-head {
@@ -874,7 +1137,7 @@
   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));
+  background: var(--oui-soft);
   opacity: 0;
   pointer-events: none;
   transform: translateY(0);
@@ -919,7 +1182,7 @@
   border: 0;
   border-radius: var(--radius-3, var(--oui-radius-sm));
   padding: 0 12px;
-  color: var(--gray-11, var(--oui-muted));
+  color: var(--oui-muted);
   background: transparent;
   font: inherit;
   text-align: left;
@@ -935,7 +1198,7 @@
 
 .oui-app-sidebar-item:hover,
 .oui-app-sidebar-item:focus-visible {
-  color: var(--gray-12, var(--oui-text));
+  color: var(--oui-text);
   outline: none;
 }
 
@@ -944,7 +1207,7 @@
 }
 
 .oui-app-sidebar-item[data-sidebar-active=true] {
-  color: var(--gray-12, var(--oui-text));
+  color: var(--oui-text);
 }
 
 .oui-app-sidebar-item:disabled {
@@ -3522,8 +3785,7 @@ a.oui-card {
   transform: translateX(18px);
 }
 
-.oui-segmented,
-.oui-tabs-list {
+.oui-segmented {
   display: inline-flex;
   align-items: center;
   gap: 3px;
@@ -3534,8 +3796,7 @@ a.oui-card {
   padding: 3px;
 }
 
-.oui-segmented-item,
-.oui-tabs-trigger {
+.oui-segmented-item {
   border: 0;
   border-radius: var(--oui-radius-sm);
   padding: 7px 11px;
@@ -3548,8 +3809,7 @@ a.oui-card {
   transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
 }
 
-.oui-segmented-item[data-active=true],
-.oui-tabs-trigger[data-active=true] {
+.oui-segmented-item[data-active=true] {
   color: var(--oui-text);
   background: var(--oui-control-hover-bg, var(--oui-gray-a4, var(--oui-soft)));
   box-shadow: var(--oui-shadow-sm);
@@ -3566,8 +3826,7 @@ a.oui-card {
 }
 
 .oui-button[data-variant=surface],
-.oui-icon-button[data-variant=surface],
-.oui-combobox-trigger {
+.oui-icon-button[data-variant=surface] {
   background-color: var(--oui-control-bg, transparent);
   border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
   box-shadow: none;
@@ -3575,18 +3834,11 @@ a.oui-card {
 }
 
 .oui-button[data-variant=surface]:not(:disabled):hover,
-.oui-icon-button[data-variant=surface]:not(:disabled):hover,
-.oui-combobox-trigger:not(:disabled):hover {
+.oui-icon-button[data-variant=surface]:not(:disabled):hover {
   border-color: var(--oui-gray-a8);
   background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
 }
 
-.oui-combobox-trigger[data-state=open],
-.oui-combobox-trigger[data-state=open]:hover {
-  border-color: var(--oui-primary-base);
-  box-shadow: none;
-}
-
 .oui-combobox-trigger .oui-button-label {
   flex: 1 1 auto;
   min-width: 0;
@@ -3631,12 +3883,38 @@ a.oui-card {
 
 .oui-combobox-content,
 .oui-select-content {
+  --oui-selection-content-text: var(--oui-text, #202020);
+  --oui-selection-content-bg: var(--oui-floating-bg, var(--oui-bg, #ffffff));
+  --oui-selection-option-hover-bg: var(--oui-control-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 8%, transparent));
+  --oui-selection-option-selected-bg: var(--oui-selected-bg, color-mix(in srgb, var(--oui-selection-content-text) 10%, transparent));
+  --oui-selection-option-selected-hover-bg: var(--oui-control-hover-bg, color-mix(in srgb, var(--oui-selection-content-text) 13%, transparent));
+  --oui-selection-check-color: var(--oui-primary-text, #0d74ce);
   min-width: 280px;
   max-width: min(420px, 100vw - 24px);
   padding: 0;
   overflow: hidden;
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
+  color: var(--oui-selection-content-text);
+  background: var(--oui-selection-content-bg);
+}
+
+.oui-combobox-content[data-oui-theme=light],
+.oui-select-content[data-oui-theme=light] {
+  --oui-selection-content-text: #202020;
+  --oui-selection-content-bg: #ffffff;
+  --oui-selection-option-hover-bg: #0000000f;
+  --oui-selection-option-selected-bg: #008ff519;
+  --oui-selection-option-selected-hover-bg: #008ff526;
+  --oui-selection-check-color: #0d74ce;
+}
+
+.oui-combobox-content[data-oui-theme=dark],
+.oui-select-content[data-oui-theme=dark] {
+  --oui-selection-content-text: #eeeeee;
+  --oui-selection-content-bg: #0c0c0f;
+  --oui-selection-option-hover-bg: #ffffff12;
+  --oui-selection-option-selected-bg: #0077ff3a;
+  --oui-selection-option-selected-hover-bg: #0077ff52;
+  --oui-selection-check-color: #70b8ff;
 }
 
 .oui-combobox-search-wrap {
@@ -3653,7 +3931,7 @@ a.oui-card {
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8)) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8)) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-combobox-options,
@@ -3674,7 +3952,7 @@ a.oui-card {
   border: 0;
   border-radius: 6px;
   padding: 0;
-  color: var(--oui-text);
+  color: var(--oui-selection-content-text, var(--oui-text, #202020));
   background: transparent;
   font: inherit;
   font-size: 14px;
@@ -3713,33 +3991,33 @@ a.oui-card {
 .oui-combobox-option[data-highlighted=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item:hover,
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-highlighted=true] {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+  background: var(--oui-selection-option-hover-bg);
 }
 
 .oui-combobox-option[data-selected=true]:hover,
 .oui-combobox-option[data-selected=true][data-highlighted=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true]:hover,
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true][data-highlighted=true] {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+  background: var(--oui-selection-option-selected-hover-bg);
 }
 
 .oui-combobox-option[data-selected=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true] {
-  color: var(--oui-text);
-  background: color-mix(in srgb, var(--oui-text) 7%, transparent);
+  color: var(--oui-selection-content-text, var(--oui-text, #202020));
+  background: var(--oui-selection-option-selected-bg);
 }
 
 .oui-combobox-option[data-selected=true]:hover,
 .oui-combobox-option[data-selected=true][data-highlighted=true],
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true]:hover,
 .oui-listbox.oui-combobox-options .oui-listbox-item[data-selected=true][data-highlighted=true] {
-  background: var(--oui-control-hover-bg, var(--oui-gray-a3));
+  background: var(--oui-selection-option-selected-hover-bg);
 }
 
 .oui-combobox-check {
   flex: 0 0 auto;
   margin-right: 10px;
-  color: var(--oui-primary-text);
+  color: var(--oui-selection-check-color);
 }
 
 .oui-combobox-option-action {
@@ -3902,17 +4180,18 @@ a.oui-card {
 .oui-button.oui-combobox-trigger[data-variant=surface],
 .oui-button.oui-combobox-trigger {
   background-color: var(--oui-control-bg, transparent);
-  border-color: color-mix(in srgb, var(--oui-gray-a8) 48%, transparent);
+  border-color: var(--oui-field-border-color, var(--oui-border));
   border-radius: 6px;
   box-shadow: none;
+  font-weight: 400;
   outline: none;
   transition: border-color 280ms ease, background-color 180ms ease;
 }
 
 .oui-button.oui-combobox-trigger[data-variant=surface]:not(:disabled):hover,
 .oui-button.oui-combobox-trigger:not(:disabled):hover {
-  background-color: var(--oui-control-hover-bg, var(--oui-gray-a4));
-  border-color: var(--oui-gray-a8);
+  background-color: var(--oui-control-bg, transparent);
+  border-color: var(--oui-field-border-hover-color, var(--oui-border-strong));
   box-shadow: none;
 }
 
@@ -4062,6 +4341,7 @@ a.oui-card {
 }
 
 .oui-collapse {
+  display: grid;
   overflow: hidden;
   min-width: 0;
   min-height: 0;
@@ -4076,6 +4356,10 @@ a.oui-card {
   transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+.oui-collapse[data-animate=false] .oui-collapse-content {
+  transition: none;
+}
+
 .oui-collapse[data-state=open] .oui-collapse-content {
   opacity: 1;
   transform: translateY(0);
@@ -4117,17 +4401,17 @@ a.oui-card {
   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;
+  transition: left 460ms cubic-bezier(0.22, 1, 0.36, 1), top 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1), height 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
 }
 
 .oui-tabs-active-indicator {
   z-index: 0;
-  background: var(--oui-gray-a4);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
 }
 
 .oui-tabs-hover-indicator {
   z-index: 0;
-  background: var(--oui-gray-a3);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
   opacity: 0;
 }
 
@@ -4168,10 +4452,6 @@ a.oui-card {
   outline: none;
 }
 
-.oui-tabs-trigger[data-active=true] {
-  font-weight: 500;
-}
-
 .oui-tabs-trigger-icon {
   display: inline-flex;
   align-items: center;
@@ -4286,17 +4566,17 @@ a.oui-card {
   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;
+  transition: left 460ms cubic-bezier(0.22, 1, 0.36, 1), top 460ms cubic-bezier(0.22, 1, 0.36, 1), width 460ms cubic-bezier(0.22, 1, 0.36, 1), height 460ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
 }
 
 .oui-tabs-compound-active-indicator {
   z-index: 0;
-  background: var(--oui-gray-a4);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
 }
 
 .oui-tabs-compound-hover-indicator {
   z-index: 0;
-  background: var(--oui-gray-a3);
+  background: var(--oui-border, var(--oui-pad-hover-bg, var(--oui-control-hover-bg, var(--oui-gray-a3))));
   opacity: 0;
 }
 
@@ -4396,9 +4676,9 @@ a.oui-card {
 
 .oui-popover-content,
 .oui-tooltip-content {
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
-  border: 1px solid var(--oui-border);
+  color: var(--oui-text, #202020);
+  background: var(--oui-floating-bg, var(--oui-bg, #ffffff));
+  border: 1px solid var(--oui-border, rgba(0, 0, 0, 0.0901960784));
   border-radius: var(--oui-radius);
   box-shadow: var(--oui-shadow-md);
   transform-origin: top center;
@@ -4446,7 +4726,7 @@ a.oui-card {
   border: 0;
   border-radius: var(--oui-radius-sm);
   padding: 7px 9px;
-  color: var(--oui-text);
+  color: var(--oui-text, #202020);
   background: transparent;
   font: inherit;
   font-size: 13px;
@@ -4463,8 +4743,8 @@ a.oui-card {
 }
 
 .oui-listbox-item[data-selected=true] {
-  color: var(--oui-text);
-  background: color-mix(in srgb, var(--oui-text) 7%, transparent);
+  color: var(--oui-text, #202020);
+  background: color-mix(in srgb, var(--oui-text, #202020) 7%, transparent);
 }
 
 .oui-listbox-item[data-selected=true]:hover,
@@ -4502,7 +4782,7 @@ a.oui-card {
   overflow: auto;
   padding-right: 2px;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-command-palette-results::-webkit-scrollbar {
@@ -4510,7 +4790,7 @@ a.oui-card {
 }
 
 .oui-command-palette-results::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--oui-scrollbar-track, transparent);
 }
 
 .oui-command-palette-results::-webkit-scrollbar-thumb {
@@ -4835,107 +5115,83 @@ a.oui-card {
   padding: 18px;
 }
 
-.oui-toast-viewport {
+.oui-toast-stack {
   position: fixed;
   z-index: var(--oui-z-toast, 2147483000);
   display: flex;
-  width: min(380px, 100vw - 32px);
+  width: min(380px, calc(100vw - 32px));
   flex-direction: column;
   gap: 8px;
   pointer-events: none;
 }
 
-.oui-toast-viewport[data-position^=top] {
+.oui-toast-stack[data-position^=top] {
   top: 16px;
 }
 
-.oui-toast-viewport[data-position^=bottom] {
+.oui-toast-stack[data-position^=bottom] {
   bottom: 16px;
 }
 
-.oui-toast-viewport[data-position$=left] {
+.oui-toast-stack[data-position$=left] {
   left: 16px;
   align-items: flex-start;
 }
 
-.oui-toast-viewport[data-position$=right] {
+.oui-toast-stack[data-position$=right] {
   right: 16px;
   align-items: flex-end;
 }
 
-.oui-toast-viewport[data-position$=center] {
+.oui-toast-stack[data-position$=center] {
   left: 50%;
   align-items: center;
   transform: translateX(-50%);
 }
 
-.oui-toast-frame {
+.oui-toast-viewport {
   position: relative;
-  isolation: isolate;
   width: 100%;
+  overflow: hidden;
+  border-radius: var(--oui-radius-xl, 12px);
+  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));
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
   animation: ouiToastIn var(--oui-toast-animation-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1) both;
   pointer-events: none;
   will-change: opacity, transform;
 }
 
-.oui-toast-backdrop {
-  position: absolute;
-  inset: -10px;
-  z-index: 0;
-  border-radius: 14px;
-  background: transparent;
-  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;
-}
-
 .oui-toast {
   position: relative;
-  z-index: 1;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
-  border: 1px solid var(--oui-toast-custom-border-color, var(--oui-toast-border-color, var(--oui-border)));
+  border: 0;
   border-radius: var(--oui-radius-xl, 12px);
   width: 100%;
   isolation: isolate;
   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)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--oui-toast-effective-blur, 0px)) saturate(180%);
+  background: color-mix(in srgb, var(--oui-toast-tone-color, var(--oui-info-base)) 5%, transparent);
+  box-shadow: none;
   transform-origin: var(--oui-toast-origin, center);
   pointer-events: auto;
 }
 
-.oui-toast::after {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--oui-toast-tone-bg, transparent);
-  content: "";
-  pointer-events: none;
-}
-
 .oui-toast[data-clickable=true] {
   cursor: pointer;
 }
 
-.oui-toast[data-clickable=true]:hover {
-  border-color: var(--oui-toast-custom-border-color, color-mix(in srgb, var(--oui-border) 78%, var(--oui-text)));
-  background: color-mix(in srgb, var(--oui-toast-bg, var(--oui-floating-bg, var(--oui-bg))) 92%, var(--oui-text) 8%);
-}
-
-.oui-root[data-oui-theme=light] .oui-toast,
-:root[data-oui-theme=light] .oui-toast {
+.oui-root[data-oui-theme=light] .oui-toast-viewport,
+:root[data-oui-theme=light] .oui-toast-viewport {
   box-shadow: var(--oui-toast-shadow, 0 10px 24px rgba(15, 23, 42, 0.12));
 }
 
-.oui-toast-frame[data-position$=right] {
+.oui-toast-viewport[data-position$=right] {
   --oui-toast-enter-x: calc(100% + 32px);
   --oui-toast-enter-y: 0;
   --oui-toast-exit-x: calc(100% + 32px);
@@ -4943,7 +5199,7 @@ a.oui-card {
   --oui-toast-origin: right center;
 }
 
-.oui-toast-frame[data-position$=left] {
+.oui-toast-viewport[data-position$=left] {
   --oui-toast-enter-x: calc(-100% - 32px);
   --oui-toast-enter-y: 0;
   --oui-toast-exit-x: calc(-100% - 32px);
@@ -4951,7 +5207,7 @@ a.oui-card {
   --oui-toast-origin: left center;
 }
 
-.oui-toast-frame[data-position=top-center] {
+.oui-toast-viewport[data-position=top-center] {
   --oui-toast-enter-x: 0;
   --oui-toast-enter-y: calc(-100% - 32px);
   --oui-toast-exit-x: 0;
@@ -4959,7 +5215,7 @@ a.oui-card {
   --oui-toast-origin: top center;
 }
 
-.oui-toast-frame[data-position=bottom-center] {
+.oui-toast-viewport[data-position=bottom-center] {
   --oui-toast-enter-x: 0;
   --oui-toast-enter-y: calc(100% + 32px);
   --oui-toast-exit-x: 0;
@@ -4967,7 +5223,7 @@ a.oui-card {
   --oui-toast-origin: bottom center;
 }
 
-.oui-toast-frame[data-state=closing] {
+.oui-toast-viewport[data-state=closing] {
   animation: ouiToastOut var(--oui-toast-exit-duration, 320ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
@@ -4990,18 +5246,34 @@ a.oui-card {
   line-height: 1;
 }
 
+.oui-toast[data-tone=success] {
+  --oui-toast-tone-color: var(--oui-success-base);
+}
+
 .oui-toast-icon[data-tone=success] {
   color: var(--oui-success-base);
 }
 
+.oui-toast[data-tone=warning] {
+  --oui-toast-tone-color: var(--oui-warning-base);
+}
+
 .oui-toast-icon[data-tone=warning] {
   color: var(--oui-warning-base);
 }
 
+.oui-toast[data-tone=danger] {
+  --oui-toast-tone-color: var(--oui-danger-base);
+}
+
 .oui-toast-icon[data-tone=danger] {
   color: var(--oui-danger-base);
 }
 
+.oui-toast[data-tone=info] {
+  --oui-toast-tone-color: var(--oui-info-base);
+}
+
 .oui-toast-main {
   display: flex;
   min-width: 0;
@@ -5043,38 +5315,22 @@ a.oui-card {
   pointer-events: none;
 }
 
-.oui-toast[data-tone=success] {
-  --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:hover .oui-toast-progress {
+  animation-play-state: paused;
 }
 
 .oui-toast[data-tone=success] .oui-toast-progress {
   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-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-base));
 }
 
-.oui-toast[data-tone=danger] {
-  --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-base));
 }
 
-.oui-toast[data-tone=info] {
-  --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-base));
 }
@@ -5281,8 +5537,8 @@ a.oui-card {
 .oui-select-content,
 .oui-popover-content.oui-combobox-content,
 .oui-popover-content.oui-select-content {
-  color: var(--oui-text);
-  background: var(--oui-floating-bg, var(--oui-bg));
+  color: var(--oui-selection-content-text, var(--oui-text, #202020));
+  background: var(--oui-selection-content-bg, var(--oui-floating-bg, var(--oui-bg, #ffffff)));
 }
 
 .oui-menu.oui-action-menu-content,
@@ -5718,7 +5974,7 @@ a.oui-card {
   background: var(--oui-data-table-row-base-bg);
   min-height: 0;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-data-table-wrap:focus,
@@ -5989,7 +6245,7 @@ a.oui-card {
 }
 
 .oui-data-table-wrap::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--oui-scrollbar-track, transparent);
 }
 
 .oui-data-table-wrap::-webkit-scrollbar-thumb {
@@ -6220,7 +6476,7 @@ a.oui-card {
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) transparent;
+  scrollbar-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong))) var(--oui-scrollbar-track, transparent);
 }
 
 .oui-scroll-area[data-scrollbars=vertical] > .oui-scroll-area-viewport {
@@ -6271,7 +6527,7 @@ a.oui-card {
 .oui-scroll-area-viewport::-webkit-scrollbar-track,
 .oui-combobox-scroll::-webkit-scrollbar-track,
 .oui-modal-body::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--oui-scrollbar-track, transparent);
 }
 
 .oui-scroll-area-viewport::-webkit-scrollbar-thumb,
@@ -6282,6 +6538,7 @@ a.oui-card {
   border-radius: 999px;
   background-color: var(--oui-scrollbar-thumb, var(--oui-gray-a8, var(--oui-border-strong)));
   background-clip: content-box;
+  transition: background-color 180ms ease;
 }
 
 .oui-scroll-area-viewport::-webkit-scrollbar-thumb:hover,