@typlog/ui 0.11.8 → 0.12.0

package/components.css

@@ -37,10 +37,10 @@
   border-radius: inherit;
   text-transform: uppercase;
 }
-.ui-Avatar > span.r-count-1 {
+.ui-Avatar > :where(span.r-count-1) {
   font-size: var(--avatar-fallback-one-letter-font-size);
 }
-.ui-Avatar > span.r-count-2 {
+.ui-Avatar > :where(span.r-count-2) {
   font-size: var(--avatar-fallback-two-letters-font-size, var(--avatar-fallback-one-letter-font-size));
 }
 .ui-Avatar:where(.r-size-1) {
@@ -134,6 +134,16 @@
   background-color: var(--accent-a3);
   color: var(--accent-a11);
 }
+.ui-Avatar:where(.r-variant-outline) > span {
+  box-shadow: inset 0 0 1px var(--accent-a8);
+  color: var(--accent-a11);
+}
+.ui-Avatar:where(.r-variant-surface) > span {
+  background-color: var(--accent-surface);
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
+  box-shadow: inset 0 0 1px var(--accent-a8);
+}
 
 .ui-Badge {
   display: inline-flex;
@@ -145,6 +155,8 @@
   line-height: 1;
   height: -moz-fit-content;
   height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .ui-Badge:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -154,6 +166,9 @@
   gap: calc(var(--space-1) * 1.5);
   border-radius: max(var(--radius-1), var(--radius-full));
 }
+.ui-Badge:where(.r-size-1):where([data-radius="full"]) {
+  padding: calc(var(--space-1) * 0.5) var(--space-2);
+}
 .ui-Badge:where(.r-size-2) {
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
@@ -162,6 +177,9 @@
   gap: calc(var(--space-1) * 1.5);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
+.ui-Badge:where(.r-size-2):where([data-radius="full"]) {
+  padding: var(--space-1) calc(var(--space-2) * 1.25);
+}
 .ui-Badge:where(.r-size-3) {
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
@@ -170,6 +188,9 @@
   gap: var(--space-2);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
+.ui-Badge:where(.r-size-3):where([data-radius="full"]) {
+  padding: var(--space-1) calc(var(--space-2) * 1.5);
+}
 .ui-Badge:where(.r-variant-solid) {
   background-color: var(--accent-9);
   color: var(--accent-contrast);
@@ -210,131 +231,6 @@
   color: var(--accent-12);
 }
 
-.ui-Inset {
-  box-sizing: border-box;
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-  overflow: hidden;
-  margin-top: var(--margin-top-override, var(--margin-top));
-  margin-right: var(--margin-right-override, var(--margin-right));
-  margin-bottom: var(--margin-bottom-override, var(--margin-bottom));
-  margin-left: var(--margin-left-override, var(--margin-left));
-}
-.ui-Inset > * {
-  --margin-top-override: initial;
-  --margin-right-override: initial;
-  --margin-bottom-override: initial;
-  --margin-left-override: initial;
-}
-.ui-Inset:where(.r-clip-border-box) {
-  --inset-border-radius-calc: calc(var(--inset-border-radius, 0px) - var(--inset-border-width, 0px));
-  --inset-padding-top-calc: var(--inset-padding-top, 0px);
-  --inset-padding-right-calc: var(--inset-padding-right, 0px);
-  --inset-padding-bottom-calc: var(--inset-padding-bottom, 0px);
-  --inset-padding-left-calc: var(--inset-padding-left, 0px);
-}
-.ui-Inset:where(.r-clip-padding-box) {
-  --inset-border-radius-calc: var(--inset-border-radius, 0px);
-  --inset-padding-top-calc: calc(var(--inset-padding-top, 0px) + var(--inset-border-width, 0px));
-  --inset-padding-right-calc: calc(var(--inset-padding-right, 0px) + var(--inset-border-width, 0px));
-  --inset-padding-bottom-calc: calc(var(--inset-padding-bottom, 0px) + var(--inset-border-width, 0px));
-  --inset-padding-left-calc: calc(var(--inset-padding-left, 0px) + var(--inset-border-width, 0px));
-}
-.ui-Inset:where(.r-side-top) {
-  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
-  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
-  --margin-bottom-override: var(--margin-bottom);
-  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
-  border-top-left-radius: var(--inset-border-radius-calc);
-  border-top-right-radius: var(--inset-border-radius-calc);
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-.ui-Inset:where(.r-side-bottom) {
-  --margin-top-override: var(--margin-top);
-  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
-  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-  border-bottom-left-radius: var(--inset-border-radius-calc);
-  border-bottom-right-radius: var(--inset-border-radius-calc);
-}
-.ui-Inset:where(.r-side-left) {
-  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
-  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
-  --margin-right-override: var(--margin-right);
-  border-top-left-radius: var(--inset-border-radius-calc);
-  border-top-right-radius: 0px;
-  border-bottom-left-radius: var(--inset-border-radius-calc);
-  border-bottom-right-radius: 0px;
-}
-.ui-Inset:where(.r-side-right) {
-  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
-  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
-  --margin-left-override: var(--margin-left);
-  border-top-left-radius: 0px;
-  border-top-right-radius: var(--inset-border-radius-calc);
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: var(--inset-border-radius-calc);
-}
-.ui-Inset:where(.r-side-x) {
-  --margin-top-override: var(--margin-top);
-  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
-  --margin-bottom-override: var(--margin-bottom);
-  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
-  border-radius: 0px;
-}
-.ui-Inset:where(.r-side-y) {
-  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
-  --margin-right-override: var(--margin-right);
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
-  --margin-left-override: var(--margin-left);
-  border-radius: 0px;
-}
-.ui-Inset:where(.r-side-all) {
-  --margin-top-override: calc(var(--margin-top) - var(--inset-padding-top-calc));
-  --margin-right-override: calc(var(--margin-right) - var(--inset-padding-right-calc));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--inset-padding-bottom-calc));
-  --margin-left-override: calc(var(--margin-left) - var(--inset-padding-left-calc));
-  border-radius: var(--inset-border-radius-calc);
-}
-
-.ui-Card {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  font-style: normal;
-  text-align: start;
-  box-sizing: border-box;
-  border-radius: var(--card-border-radius);
-  padding: var(--card-padding);
-  border-color: var(--card-border-color, var(--gray-a5));
-  border-width: var(--card-border-width, 1px);
-  border-style: solid;
-  --inset-padding-top: var(--card-padding);
-  --inset-padding-right: var(--card-padding);
-  --inset-padding-bottom: var(--card-padding);
-  --inset-padding-left: var(--card-padding);
-}
-.ui-Card:where(:-moz-any-link, button, label):where(:hover) {
-  --card-border-color: var(--gray-a7);
-}
-.ui-Card:where(:any-link, button, label):where(:hover) {
-  --card-border-color: var(--gray-a7);
-}
-.ui-Card:where(:-moz-any-link, button, label):where(:focus-visible) {
-  --card-border-color: var(--focus-8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-.ui-Card:where(:any-link, button, label):where(:focus-visible) {
-  --card-border-color: var(--focus-8);
-  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
 .ui-Card:where(.r-size-1) {
   --card-padding: var(--space-3);
   --card-border-radius: max(var(--radius-4), var(--radius-full));
@@ -365,31 +261,6 @@
 .ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
   border-color: var(--gray-a5);
 }
-
-.ui-CardHead {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: calc(0px - var(--card-padding));
-  margin-right: calc(0px - var(--card-padding));
-  margin-top: calc(0px - var(--card-padding));
-  padding: var(--card-padding);
-  --card-head-border-color: var(--card-border-color, var(--gray-a5));
-  border-bottom: 1px solid var(--card-head-border-color);
-}
-.ui-CardHead:where(:-moz-any-link, button, label):where(:hover) {
-  background-color: var(--accent-a3);
-}
-.ui-CardHead:where(:any-link, button, label):where(:hover) {
-  background-color: var(--accent-a3);
-}
-.ui-CardHead:where(:-moz-any-link, button, label):where(:focus-visible) {
-  background-color: var(--accent-a4);
-}
-.ui-CardHead:where(:any-link, button, label):where(:focus-visible) {
-  background-color: var(--accent-a4);
-}
-
 .ui-Button {
   display: inline-flex;
   align-items: center;
@@ -650,44 +521,6 @@
   padding: 0;
 }
 
-.ui-SocialButton {
-  background-color: var(--social-button-background-color);
-  color: var(--social-button-text-color);
-  box-shadow: 0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D122E inset;
-  --social-button-background-color: black;
-  --social-button-text-color: white;
-  --social-button-hover-filter: brightness(0.92) saturate(1.1);
-}
-@media (hover: hover) {
-.ui-SocialButton:where(:hover) {
-    filter: var(--social-button-hover-filter);
-}
-}
-.ui-SocialButton:where(.r-brand-google) {
-  background-color: var(--color-background);
-  --social-button-text-color: var(--gray-12);
-}
-.ui-SocialButton:where(.r-brand-facebook) {
-  --social-button-background-color: #1877F2;
-}
-.ui-SocialButton:where(.r-brand-github) {
-  --social-button-background-color: #333;
-}
-.ui-SocialButton:where(.r-brand-slack) {
-  --social-button-background-color: #611f69;
-}
-.ui-SocialButton:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
-}
-.ui-SocialButton:where(:active) {
-  box-shadow: var(--shadow-1);
-}
-.ui-SocialButton:where([data-disabled]) {
-  color: var(--gray-a10);
-  background-color: var(--gray-a2);
-}
-
 .ui-root {
   --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
   --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
@@ -809,7 +642,6 @@
 .ui-DialogTitle + .ui-DialogDescription {
   margin-top: var(--space-2);
 }
-
 .ui-DialogOverlay {
   position: fixed;
   inset: 0;
@@ -836,57 +668,68 @@
   box-sizing: border-box;
   padding-top: var(--space-6);
 }
-.ui-DialogContent {
-  --inset-padding-top: var(--dialog-content-padding);
-  --inset-padding-right: var(--dialog-content-padding);
-  --inset-padding-bottom: var(--dialog-content-padding);
-  --inset-padding-left: var(--dialog-content-padding);
-
+.ui-DialogPopup {
   width: 100%;
   max-height: calc(100vh - var(--space-6) * 2);
   position: relative;
   box-sizing: border-box;
   overflow: auto;
   text-align: left;
-  padding: var(--dialog-content-padding);
   box-sizing: border-box;
   background-color: var(--color-panel-solid);
   outline: none;
-  border-top-left-radius: var(--dialog-content-radius);
-  border-top-right-radius: var(--dialog-content-radius);
-}
-.ui-DialogContent:where(.r-size-1) {
-  --dialog-content-radius: var(--radius-4);
-  --dialog-content-padding: var(--space-2);
-}
-.ui-DialogContent:where(.r-size-2) {
-  --dialog-content-radius: var(--radius-4);
-  --dialog-content-padding: var(--space-3);
-}
-.ui-DialogContent:where(.r-size-3) {
-  --dialog-content-radius: var(--radius-5);
-  --dialog-content-padding: var(--space-4);
-}
-.ui-DialogContent:where(.r-size-4) {
-  --dialog-content-radius: var(--radius-5);
-  --dialog-content-padding: var(--space-5);
-}
-.ui-DialogContentClose {
-  position: absolute;
-  top: calc(var(--dialog-content-padding) / 1.5);
-  right: var(--dialog-content-padding);
-}
-@media (min-width: 520px) {
+  border-top-left-radius: var(--dialog-popup-radius);
+  border-top-right-radius: var(--dialog-popup-radius);
+  max-width: var(--dialog-popup-max-width);
+  max-height: var(--dialog-popup-max-height);
+  padding: var(--dialog-popup-padding);
+}
+.ui-DialogPopup:where(.r-size-1) {
+  --dialog-popup-padding: var(--space-3);
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-2) {
+  --dialog-popup-padding: var(--space-4);
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 600px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-3) {
+  --dialog-popup-padding: var(--space-5);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: 860px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-4) {
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: 1200px;
+  --dialog-popup-max-height: calc(100vh - 100px);
+}
+.ui-DialogPopup:where(.r-size-5) {
+  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-radius: var(--radius-5);
+  --dialog-popup-max-width: none;
+  --dialog-popup-max-height: calc(100vh - 64px);
+}
+
+/* special handle for tailwindcss p-0, when css priority doesn't work */
+.ui-DialogPopup:where(.p-0) {
+  --dialog-popup-padding: 0;
+}
+@media (min-width: 450px) {
 .ui-DialogContainer {
     justify-content: center;
     padding-bottom: max(var(--space-6), 6vh);
     padding-left: var(--space-4);
     padding-right: var(--space-4);
 }
-.ui-DialogContent {
+.ui-DialogPopup {
     box-shadow: var(--shadow-6);
-    border-bottom-left-radius: var(--dialog-content-radius);
-    border-bottom-right-radius: var(--dialog-content-radius);
+    border-bottom-left-radius: var(--dialog-popup-radius);
+    border-bottom-right-radius: var(--dialog-popup-radius);
 }
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -901,21 +744,21 @@ to {
 @keyframes ui-dialog-content-show {
 from {
       opacity: 0.1;
-      transform: translateY(var(--space-6));
+      transform: translate3d(0, var(--space-6), 0);
 }
 to {
       opacity: 1;
-      transform: translateY(0);
+      transform: translate3d(0, 0, 0);
 }
 }
 @keyframes ui-dialog-content-hide {
 from {
       opacity: 1;
-      transform: translateY(0);
+      transform: translate3d(0, 0, 0);
 }
 to {
-      opacity: 0.1;
-      transform: translateY(var(--space-6));
+      opacity: 1;
+      transform: translate3d(0, var(--space-5), 0);
 }
 }
 .ui-DialogOverlay[data-state='closed'] {
@@ -927,11 +770,51 @@ to {
 .ui-DialogOverlay[data-state='closed']::before {
     animation: ui-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogOverlay[data-state='open'] :where(.ui-DialogContent) {
+.ui-DialogPopup:where([data-state="open"]) {
     animation: ui-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.ui-DialogOverlay[data-state='closed'] :where(.ui-DialogContent) {
-    animation: ui-dialog-content-hide 150ms cubic-bezier(0.16, 1, 0.3, 1);
+.ui-DialogPopup:where([data-state="closed"]) {
+    animation: ui-dialog-content-hide 100ms linear;
+}
+}
+
+.ui-AlertPopup {
+  --dialog-popup-radius: var(--radius-4);
+  --dialog-popup-max-width: 450px;
+}
+@media (prefers-reduced-motion: no-preference) {
+.ui-PopperContent {
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ui-PopperContent:where([data-state='open']) {
+    animation-duration: 160ms;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-in;
+}
+.ui-PopperContent:where([data-state='closed']) {
+    animation-duration: 100ms;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
+    animation-name: ui-slide-from-top, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-out;
+}
+.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-out;
 }
 }
 
@@ -945,10 +828,10 @@ to {
   flex-direction: column;
   box-sizing: border-box;
   overflow: hidden;
+  border-radius: var(--menu-content-border-radius);
 
-  --menu-bg: var(--color-panel-solid);
   box-shadow: var(--shadow-5);
-  background-color: var(--menu-bg);
+  background-color: var(--color-panel-solid);
 }
 .ui-MenuViewport {
   flex: 1 1 0%;
@@ -963,17 +846,39 @@ to {
 }
 .ui-MenuContent:where(.r-size-1) {
   --menu-content-padding: var(--space-1);
+  --menu-content-border-radius: var(--radius-3);
+
   --menu-item-padding-left: calc(var(--space-5) / 1.2);
   --menu-item-padding-right: var(--space-2);
   --menu-item-height: var(--space-5);
-  border-radius: var(--radius-3);
+  --menu-item-font-size: var(--font-size-1);
+  --menu-item-line-height: var(--line-height-1);
+  --menu-item-letter-spacing: var(--letter-spacing-1);
+  --menu-item-border-radius: var(--radius-1);
 }
 .ui-MenuContent:where(.r-size-2) {
   --menu-content-padding: var(--space-2);
+  --menu-content-border-radius: var(--radius-4);
+
   --menu-item-padding-left: var(--space-3);
   --menu-item-padding-right: var(--space-3);
   --menu-item-height: var(--space-6);
-  border-radius: var(--radius-4);
+  --menu-item-font-size: var(--font-size-2);
+  --menu-item-line-height: var(--line-height-2);
+  --menu-item-letter-spacing: var(--letter-spacing-2);
+  --menu-item-border-radius: var(--radius-2);
+}
+.ui-MenuContent:where(.r-variant-solid) {
+  --menu-item-highlighted-background-color: var(--accent-9);
+  --menu-item-highlighted-text-color: var(--accent-contrast);
+}
+.ui-MenuContent:where(.r-variant-solid.r-high-contrast) {
+  --menu-item-highlighted-background-color: var(--accent-12);
+  --menu-item-highlighted-text-color: var(--accent-1);
+}
+.ui-MenuContent:where(.r-variant-soft) {
+  --menu-item-highlighted-background-color: var(--accent-a4);
+  --menu-item-highlighted-text-color: var(--accent-a11);
 }
 
 .ui-MenuItem {
@@ -991,13 +896,18 @@ to {
      -moz-user-select: none;
           user-select: none;
   cursor: default;
-  color: var(--gray-a11);
+  color: var(--gray-12);
+  font-size: var(--menu-item-font-size);
+  line-height: var(--menu-item-line-height);
+  letter-spacing: var(--menu-item-letter-spacing);
+  border-radius: var(--menu-item-border-radius);
 }
 .ui-MenuShortcut {
   display: flex;
   align-items: center;
   margin-left: auto;
   padding-left: var(--space-4);
+  color: var(--gray-a11);
 }
 .ui-MenuItem:where([data-accent-color]) {
   color: var(--accent-a11);
@@ -1005,39 +915,24 @@ to {
 .ui-MenuItem:where([data-disabled]) {
   color: var(--gray-a8);
 }
+.ui-MenuItem:where([data-highlighted]) {
+  background-color: var(--menu-item-highlighted-background-color);
+  color: var(--menu-item-highlighted-text-color);
+}
 .ui-MenuItem:where([data-disabled], [data-highlighted]) :where(.ui-MenuShortcut) {
   color: inherit;
 }
-.ui-MenuItem:where([data-size="1"]) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: var(--radius-1);
-}
-.ui-MenuItem:where([data-size="2"]) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: var(--radius-2);
-}
-.ui-MenuItem:where([data-variant="solid"]):where([data-highlighted]) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-.ui-MenuItem:where([data-variant="solid"]):where([data-high-contrast]):where([data-highlighted]) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
-}
-.ui-MenuItem:where([data-variant="soft"]):where([data-highlighted]) {
-  background-color: var(--accent-a4);
-}
 
-.ui-PopoverContent {
-  --inset-padding-top: var(--popover-content-padding);
-  --inset-padding-right: var(--popover-content-padding);
-  --inset-padding-bottom: var(--popover-content-padding);
-  --inset-padding-left: var(--popover-content-padding);
+.ui-DropdownMenuSeparator {
+  height: 1px;
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+  margin-left: var(--menu-item-padding-left);
+  margin-right: var(--menu-item-padding-right);
+  background-color: var(--gray-a6);
+}
 
+.ui-PopoverPopup {
   background-color: var(--color-panel-solid);
   box-shadow: var(--shadow-5);
   min-width: var(--reka-popover-trigger-width);
@@ -1045,60 +940,20 @@ to {
   outline: 0;
   overflow: auto;
   position: relative;
-  padding: var(--popover-content-padding);
   box-sizing: border-box;
   transform-origin: var(--reka-popover-content-transform-origin);
+  padding: var(--popover-popup-padding);
 }
-.ui-PopoverContent:where(.r-size-1) {
-  --popover-content-padding: var(--space-3);
+.ui-PopoverPopup:where(.r-size-1) {
   border-radius: var(--radius-4);
+  --popover-popup-padding: var(--space-2);
 }
-.ui-PopoverContent:where(.r-size-2) {
-  --popover-content-padding: var(--space-4);
-  border-radius: var(--radius-4);
-}
-.ui-PopoverContent:where(.r-size-3) {
-  --popover-content-padding: var(--space-5);
-  border-radius: var(--radius-5);
-}
-.ui-PopoverContent:where(.r-size-4) {
-  --popover-content-padding: var(--space-6);
+.ui-PopoverPopup:where(.r-size-2) {
   border-radius: var(--radius-5);
+  --popover-popup-padding: var(--space-4);
 }
-@media (prefers-reduced-motion: no-preference) {
-.ui-PopperContent {
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ui-PopperContent:where([data-state='open']) {
-    animation-duration: 160ms;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='open']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-in;
-}
-.ui-PopperContent:where([data-state='closed']) {
-    animation-duration: 100ms;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='top']) {
-    animation-name: ui-slide-from-top, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-out;
-}
-.ui-PopperContent:where([data-state='closed']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-out;
-}
+.ui-PopoverPopup:where(.p-0) {
+  --popover-popup-padding: 0;
 }
 
 .ui-root {
@@ -1379,14 +1234,17 @@ to {
 }
 .ui-Toggle:where(.r-size-1) {
   border-radius: max(var(--radius-1), var(--radius-full));
+  font-size: var(--font-size-1);
   --toggle-size: var(--space-5);
 }
 .ui-Toggle:where(.r-size-2) {
   border-radius: max(var(--radius-2), var(--radius-full));
+  font-size: var(--font-size-3);
   --toggle-size: var(--space-6);
 }
 .ui-Toggle:where(.r-size-3) {
   border-radius: max(var(--radius-3), var(--radius-full));
+  font-size: var(--font-size-6);
   --toggle-size: var(--space-7);
 }
 
@@ -1456,32 +1314,45 @@ to {
   justify-content: center;
   vertical-align: top;
   flex-shrink: 0;
-  height: var(--toggle-size);
+  height: var(--toggle-group-height);
 }
 .ui-ToggleGroupRoot:where(.r-size-1) {
+  font-size: var(--font-size-1);
   --toggle-radius: max(var(--radius-1), var(--radius-full));
-  --toggle-size: var(--space-5);
+  --toggle-group-height: var(--space-5);
+  --toggle-group-soft-padding: 1px;
 }
 .ui-ToggleGroupRoot:where(.r-size-2) {
+  font-size: var(--font-size-3);
   --toggle-radius: max(var(--radius-2), var(--radius-full));
-  --toggle-size: var(--space-6);
+  --toggle-group-height: var(--space-6);
+  --toggle-group-soft-padding: 2px;
 }
 .ui-ToggleGroupRoot:where(.r-size-3) {
+  font-size: var(--font-size-6);
   --toggle-radius: max(var(--radius-3), var(--radius-full));
-  --toggle-size: var(--space-7);
+  --toggle-group-height: var(--space-7);
+  --toggle-group-soft-padding: 3px;
 }
-.ui-ToggleGroupRoot:where(.r-variant-solid) {
+.ui-ToggleGroupRoot:where(.r-variant-solid),
+.ui-ToggleGroupRoot:where(.r-variant-outline),
+.ui-ToggleGroupRoot:where(.r-variant-surface) {
   border-radius: var(--toggle-radius);
   background-color: var(--color-panel-solid);
   box-shadow: var(--shadow-2);
+  --toggle-item-size: var(--toggle-group-height);
 }
 .ui-ToggleGroupRoot:where(.r-variant-soft) {
   border-radius: var(--toggle-radius);
   background-color: var(--color-panel-translucent);
   box-shadow: var(--shadow-2);
+  padding: var(--toggle-group-soft-padding);
+  gap: var(--toggle-group-soft-padding);
+  --toggle-item-size: calc(var(--toggle-group-height) - 2 * var(--toggle-group-soft-padding));
 }
 .ui-ToggleGroupRoot:where(.r-variant-ghost) {
   gap: calc(var(--space-1) / 2);
+  --toggle-item-size: var(--toggle-group-height);
 }
 
 .ui-ToggleGroupItem {
@@ -1491,18 +1362,18 @@ to {
   justify-content: center;
   vertical-align: top;
   flex-shrink: 0;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
+  width: var(--toggle-item-size);
+  height: var(--toggle-item-size);
 }
-.ui-ToggleGroupItem:where(:first-child) {
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
   border-top-left-radius: var(--toggle-radius);
   border-bottom-left-radius: var(--toggle-radius);
 }
-.ui-ToggleGroupItem:where(:last-child) {
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:last-child) {
   border-top-right-radius: var(--toggle-radius);
   border-bottom-right-radius: var(--toggle-radius);
 }
-.ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem) {
+.ui-ToggleGroupRoot:where(.r-variant-soft, .r-variant-ghost) :where(.ui-ToggleGroupItem) {
   border-radius: var(--toggle-radius);
 }
 
@@ -1524,13 +1395,16 @@ to {
   background-color: var(--accent-a4);
 }
 
-/** solid & ghost */
+/** solid, surface ghost */
 @media (hover: hover) {
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline, .r-variant-ghost) :where(.ui-ToggleGroupItem:hover) {
     background-color: var(--accent-a3);
 }
 }
-.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
+:where(.ui-ToggleGroupRoot.r-variant-surface, .r-variant-outline) .ui-ToggleGroupItem + .ui-ToggleGroupItem {
+  box-shadow: inset 1px 0 0 0 var(--gray-a4);
+}
+.ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outoine, .r-variant-ghost) :where(.ui-ToggleGroupItem:focus-visible) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
@@ -1538,6 +1412,9 @@ to {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
 }
+.ui-ToggleGroupRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem[data-disabled]) {
+  color: var(--gray-a8);
+}
 .ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-disabled]) {
   color: var(--gray-a8);
   background-color: transparent;
@@ -1547,6 +1424,13 @@ to {
   color: var(--accent-contrast);
   box-shadow: var(--shadow-1);
 }
+.ui-ToggleGroupRoot:where(.r-variant-surface) :where(.ui-ToggleGroupItem[data-state="on"]) {
+  background-color: var(--accent-a3);
+  color: var(--accent-a11);
+}
+.ui-ToggleGroupRoot:where(.r-variant-outline) :where(.ui-ToggleGroupItem[data-state="on"]) {
+  color: var(--accent-a11);
+}
 .ui-ToggleGroupRoot:where(.r-variant-ghost) :where(.ui-ToggleGroupItem[data-state="on"]) {
   background-color: var(--accent-a4);
 }
@@ -1922,7 +1806,6 @@ to {
   font-style: normal;
   text-align: start;
   overflow: hidden;
-  padding: var(--text-area-border-width);
   width: 100%;
 }
 .ui-TextAreaInput {
@@ -1941,6 +1824,9 @@ to {
   outline: none;
   box-shadow: none;
 }
+.ui-TextAreaInput:where(:disabled) {
+  cursor: not-allowed;
+}
 .ui-TextAreaInput::-webkit-scrollbar {
   width: var(--space-3);
   height: var(--space-3);
@@ -2012,13 +1898,11 @@ to {
 .ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput::placeholder {
   color: var(--gray-a10);
 }
-.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput:where(:disabled, :-moz-read-only) {
+.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:-moz-read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
-.ui-TextArea:where(.r-variant-surface) .ui-TextAreaInput:where(:disabled, :read-only) {
+.ui-TextArea:where(.r-variant-surface) :where(.ui-TextAreaInput:read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
 .ui-TextArea:where(.r-variant-soft) {
   --text-area-border-width: 0px;
@@ -2043,11 +1927,11 @@ to {
   color: var(--accent-12);
   opacity: 0.65;
 }
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput:where(:disabled, :-moz-read-only) {
+.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:-moz-read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
   box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
-.ui-TextArea:where(.r-variant-soft) .ui-TextAreaInput:where(:disabled, :read-only) {
+.ui-TextArea:where(.r-variant-soft) :where(.ui-TextAreaInput:read-only) {
   background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
   box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
 }
@@ -2082,7 +1966,7 @@ to {
 .ui-ColorField:where(.r-variant-ring) {
   --color-input-size: calc(var(--color-field-size) - var(--color-field-border-width) * 4);
   --color-input-radius: calc(var(--color-field-radius) - 2px);
-  border: var(--color-field-border-width) solid var(--color-field-border-color);
+  border: var(--color-field-border-width) solid var(--color-field-color);
 }
 .ui-ColorFieldInput {
   -webkit-appearance: none;
@@ -2178,6 +2062,8 @@ to {
   font-style: normal;
   text-align: start;
   color: var(--gray-12);
+  box-sizing: border-box;
+  height: var(--select-trigger-height);
 }
 .ui-SelectTriggerInner {
   overflow: hidden;
@@ -2186,73 +2072,51 @@ to {
 }
 .ui-SelectIcon {
   flex-shrink: 0;
-}
-.ui-SelectTrigger:where(:not(.r-variant-ghost)).ui-SelectIcon {
   opacity: 0.9;
-}
-.ui-SelectTrigger:where(:not(.r-variant-ghost)) {
-  box-sizing: border-box;
-  height: var(--select-trigger-height);
-}
-.ui-SelectTrigger:where(.r-variant-ghost) {
-  box-sizing: content-box;
-  height: -moz-fit-content;
-  height: fit-content;
-  padding: var(--select-trigger-ghost-padding-y) var(--select-trigger-ghost-padding-x);
-  margin: calc(0px - var(--select-trigger-ghost-padding-y)) calc(0px - var(--select-trigger-ghost-padding-x));
+  width: var(--select-icon-size);
+  height: var(--select-icon-size);
 }
 .ui-SelectTrigger:where(.r-size-1) {
   --select-trigger-height: var(--space-5);
+  --select-trigger-padding-x: var(--space-2);
+  --select-trigger-ghost-padding-x: var(--space-2);
+  --select-trigger-ghost-padding-y: var(--space-1);
+  --select-icon-size: 9px;
+
   gap: var(--space-1);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
   border-radius: max(var(--radius-1), var(--radius-full));
 }
-.ui-SelectTrigger:where(.r-size-1):where(.r-variant-ghost) {
-  --select-trigger-ghost-padding-x: var(--space-2);
-  --select-trigger-ghost-padding-y: var(--space-1);
-}
-.ui-SelectTrigger:where(.r-size-1):where(:not(.r-variant-ghost)) {
-  padding-left: var(--space-2);
-  padding-right: var(--space-2);
-}
 .ui-SelectTrigger:where(.r-size-2) {
   --select-trigger-height: var(--space-6);
+  --select-trigger-padding-x: var(--space-3);
+  --select-trigger-ghost-padding-x: var(--space-2);
+  --select-trigger-ghost-padding-y: var(--space-1);
+  --select-icon-size: 10px;
+
   gap: calc(var(--space-1) * 1.5);
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
   letter-spacing: var(--letter-spacing-2);
   border-radius: max(var(--radius-2), var(--radius-full));
 }
-.ui-SelectTrigger:where(.r-size-1):where(.r-variant-ghost) {
-  --select-trigger-ghost-padding-x: var(--space-2);
-  --select-trigger-ghost-padding-y: var(--space-1);
-}
-.ui-SelectTrigger:where(.r-size-2):where(:not(.r-variant-ghost)) {
-  padding-left: var(--space-3);
-  padding-right: var(--space-3);
-}
 .ui-SelectTrigger:where(.r-size-3) {
   --select-trigger-height: var(--space-7);
+  --select-trigger-padding-x: var(--space-4);
+  --select-trigger-ghost-padding-x: var(--space-3);
+  --select-trigger-ghost-padding-y: calc(var(--space-1) * 1.5);
+  --select-icon-size: 11px;
+
   gap: var(--space-2);
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
   letter-spacing: var(--letter-spacing-3);
   border-radius: max(var(--radius-3), var(--radius-full));
 }
-.ui-SelectTrigger:where(.r-size-3):where(.r-variant-ghost) {
-  --select-trigger-ghost-padding-x: var(--space-3);
-  --select-trigger-ghost-padding-y: calc(var(--space-1) * 1.5);
-}
-.ui-SelectTrigger:where(.r-size-3):where(:not(.r-variant-ghost)) {
-  padding-left: var(--space-4);
-  padding-right: var(--space-4);
-}
-.ui-SelectTrigger:where(.r-size-3) .ui-SelectIcon {
-  width: 11px;
-  height: 11px;
-}
+
+/** surface */
 .ui-SelectTrigger:where(.r-variant-surface) {
   --select-trigger-border-width: 1px;
   --select-trigger-border-color: var(--gray-a7);
@@ -2260,6 +2124,8 @@ to {
   color: var(--gray-12);
   background-color: var(--color-surface);
   border: var(--select-trigger-border-width) solid var(--select-trigger-border-color);
+  padding-left: var(--select-trigger-padding-x);
+  padding-right: var(--select-trigger-padding-x);
 }
 .ui-SelectTrigger:where(.r-variant-surface):where(:focus-visible) {
   --select-trigger-border-color: var(--focus-a8);
@@ -2281,6 +2147,8 @@ to {
 .ui-SelectTrigger:where(.r-variant-surface):where([data-placeholder]) .ui-SelectTriggerInner {
   color: var(--gray-a10);
 }
+
+/** soft and ghost */
 .ui-SelectTrigger:where(.r-variant-soft),
 .ui-SelectTrigger:where(.r-variant-ghost) {
   color: var(--accent-12);
@@ -2297,6 +2165,8 @@ to {
 }
 .ui-SelectTrigger:where(.r-variant-soft) {
   background-color: var(--accent-a3);
+  padding-left: var(--select-trigger-padding-x);
+  padding-right: var(--select-trigger-padding-x);
 }
 @media (hover: hover) {
 .ui-SelectTrigger:where(.r-variant-soft):hover {
@@ -2313,6 +2183,10 @@ to {
   color: var(--gray-a11);
   background-color: var(--gray-a3);
 }
+.ui-SelectTrigger:where(.r-variant-ghost) {
+  padding: var(--select-trigger-ghost-padding-y) var(--select-trigger-ghost-padding-x);
+  margin: calc(0px - var(--select-trigger-ghost-padding-y)) calc(0px - var(--select-trigger-ghost-padding-x));
+}
 @media (hover: hover) {
 .ui-SelectTrigger:where(.r-variant-ghost):hover {
     background-color: var(--accent-a3);
@@ -2433,7 +2307,57 @@ to {
   background-color: var(--gray-a6);
 }
 
-.ui-ComboboxField {
+.ui-ComboboxRoot {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.ui-ComboboxRoot:where(.r-multiple) {
+  width: auto;
+}
+.ui-ComboboxRoot:where(.r-size-1) {
+  --combobox-field-height: var(--space-5);
+  --combobox-field-padding: calc(var(--space-1) * 1.5);
+  --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
+  --combobox-field-native-icon-size: var(--space-3);
+  --combobox-field-font-size: var(--font-size-1);
+  --combobox-field-letter-spacing: var(--letter-spacing-1);
+
+  --combobox-trigger-gap: var(--space-2);
+  --combobox-trigger-padding-x: var(--space-1);
+
+  --combobox-decoration-container-padding-right: 0px;
+  --combobox-decoration-container-margin-right: -2px;
+}
+.ui-ComboboxRoot:where(.r-size-2) {
+  --combobox-field-height: var(--space-6);
+  --combobox-field-padding: var(--space-2);
+  --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
+  --combobox-field-native-icon-size: var(--space-4);
+  --combobox-field-font-size: var(--font-size-2);
+  --combobox-field-letter-spacing: var(--letter-spacing-2);
+
+  --combobox-trigger-gap: var(--space-2);
+  --combobox-trigger-padding-x: var(--space-2);
+
+  --combobox-decoration-container-padding-right: 2px;
+  --combobox-decoration-container-margin-right: 0px;
+}
+.ui-ComboboxRoot:where(.r-size-3) {
+  --combobox-field-height: var(--space-7);
+  --combobox-field-padding: var(--space-3);
+  --combobox-field-border-radius: max(var(--radius-3), var(--radius-full));
+  --combobox-field-native-icon-size: var(--space-4);
+  --combobox-field-font-size: var(--font-size-3);
+  --combobox-field-letter-spacing: var(--letter-spacing-3);
+
+  --combobox-trigger-gap: var(--space-3);
+  --combobox-trigger-padding-x: var(--space-3);
+
+  --combobox-decoration-container-padding-right: 5px;
+  --combobox-decoration-container-margin-right: 0px;
+}
+
+.ui-ComboboxField {
   display: flex;
   align-items: stretch;
   font-weight: var(--font-weight-regular);
@@ -2443,6 +2367,8 @@ to {
   height: var(--combobox-field-height);
   padding: var(--combobox-field-border-width);
   border-radius: var(--combobox-field-border-radius);
+  font-size: var(--combobox-field-font-size);
+  letter-spacing: var(--combobox-field-letter-spacing);
 }
 .ui-ComboboxField:where([data-multiple="true"]) {
   height: auto;
@@ -2483,8 +2409,12 @@ to {
   background-color: transparent;
   border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
   text-indent: var(--combobox-field-padding);
-  height: calc(var(--combobox-field-height) - var(--space-1));
+  height: var(--combobox-input-height);
   cursor: auto;
+
+  /* Reset size 2 padding bottom */
+  padding-bottom: 0px;
+  /* Safari credentials autofill icon */
 }
 .ui-ComboboxField:where([data-multiple="true"]) :where(.ui-ComboboxInput) {
   text-indent: calc(var(--combobox-field-padding) / 2);
@@ -2524,86 +2454,31 @@ to {
   order: 0;
   margin-left: 0;
   margin-right: calc(var(--combobox-field-border-width) * -1);
-  height: calc(var(--combobox-field-height) - 4px);
-}
-:where(.r-size-1) .ui-ComboboxField {
-  --combobox-field-height: var(--space-5);
-  --combobox-field-padding: calc(var(--space-1) * 1.5 - var(--combobox-field-border-width));
-  --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
-  --combobox-field-native-icon-size: var(--space-3);
-  font-size: var(--font-size-1);
-  letter-spacing: var(--letter-spacing-1);
-}
-:where(.r-size-1) .ui-ComboboxField :where(.ui-ComboboxTrigger) {
-  gap: var(--space-2);
-  padding-left: var(--space-1);
-  padding-right: var(--space-1);
-}
-:where(.r-size-1) .ui-ComboboxField :where(.ui-ComboboxInput) {
-  /* Reset size 2 padding bottom */
-  padding-bottom: 0px;
-  /* Safari credentials autofill icon */
-}
-:where(.r-size-1) .ui-ComboboxField :where(.ui-ComboboxInput)::-webkit-textfield-decoration-container {
-  padding-right: 0px;
-  margin-right: -2px;
-}
-:where(.r-size-2) .ui-ComboboxField {
-  --combobox-field-height: var(--space-6);
-  --combobox-field-padding: calc(var(--space-2) - var(--combobox-field-border-width));
-  --combobox-field-border-radius: max(var(--radius-2), var(--radius-full));
-  --combobox-field-native-icon-size: var(--space-4);
-  font-size: var(--font-size-2);
-  letter-spacing: var(--letter-spacing-2);
-}
-:where(.r-size-2) .ui-ComboboxField :where(.ui-ComboboxInput) {
-  /* Avoid 1px baseline jitter when layout around the text field is subpixel-sized (e.g. vh units). */
-  /* Works because as of Nov 2023, Chrome computes input text bounding box height as 16.5px on @2x screens. */
-  padding-bottom: 0.5px;
-  /* Safari credentials autofill icon */
-}
-:where(.r-size-2) .ui-ComboboxField :where(.ui-ComboboxInput)::-webkit-textfield-decoration-container {
-  padding-right: 2px;
-  margin-right: 0px;
-}
-:where(.r-size-2) .ui-ComboboxField :where(.ui-ComboboxTrigger) {
-  gap: var(--space-2);
-  padding-left: var(--space-2);
-  padding-right: var(--space-2);
-}
-:where(.r-size-3) .ui-ComboboxField {
-  --combobox-field-height: var(--space-7);
-  --combobox-field-padding: calc(var(--space-3) - var(--combobox-field-border-width));
-  --combobox-field-border-radius: max(var(--radius-3), var(--radius-full));
-  --combobox-field-native-icon-size: var(--space-4);
-  font-size: var(--font-size-3);
-  letter-spacing: var(--letter-spacing-3);
-}
-:where(.r-size-3) .ui-ComboboxField :where(.ui-ComboboxInput) {
-  /* Reset size 2 padding bottom */
-  padding-bottom: 0px;
-  /* Safari credentials autofill icon */
-}
-:where(.r-size-3) .ui-ComboboxField :where(.ui-ComboboxInput)::-webkit-textfield-decoration-container {
-  padding-right: 5px;
-  margin-right: 0px;
+  height: var(--combobox-trigger-height);
+
+  gap: var(--combobox-trigger-gap);
+  padding-left: var(--combobox-trigger-padding-x);
+  padding-right: var(--combobox-trigger-padding-x);
 }
-:where(.r-size-3) .ui-ComboboxField :where(.ui-ComboboxTrigger) {
-  gap: var(--space-3);
-  padding-left: var(--space-3);
-  padding-right: var(--space-3);
+.ui-ComboboxInput::-webkit-textfield-decoration-container {
+  padding-right: var(--combobox-decoration-container-padding-right);
+  margin-right: var(--combobox-decoration-container-margin-right);
 }
 .ui-ComboboxField:where(.r-variant-surface) {
   --combobox-field-selection-color: var(--focus-a5);
   --combobox-field-focus-color: var(--focus-a8);
   --combobox-field-border-width: 1px;
   --combobox-field-border-color: var(--gray-a7);
+  --combobox-input-height: calc(var(--combobox-field-height) - var(--space-1));
+  --combobox-trigger-height: calc(var(--combobox-field-height) - var(--space-1));
+
   /* Blend inner shadow with page background */
   background-clip: content-box;
   background-color: var(--color-surface);
   box-sizing: border-box;
   border: var(--combobox-field-border-width) solid var(--combobox-field-border-color);
   color: var(--gray-12);
+  padding: calc(var(--combobox-field-border-width) - var(--combobox-field-border-width));
 }
 @supports selector(:has(*)) {
 .ui-ComboboxField:where(.r-variant-surface):where(:has(.ui-ComboboxInput:focus)) {
@@ -2631,9 +2506,12 @@ to {
   --combobox-field-selection-color: var(--accent-a5);
   --combobox-field-focus-color: var(--accent-8);
   --combobox-field-border-width: 0px;
+  --combobox-input-height: var(--combobox-field-height);
+  --combobox-trigger-height: var(--combobox-field-height);
+
   background-color: var(--accent-a3);
   color: var(--accent-12);
-  /* prettier-ignore */
+  padding: var(--combobox-field-border-width);
 }
 @supports selector(:has(*)) {
 .ui-ComboboxField:where(.r-variant-soft):where(:has(.ui-ComboboxInput:focus)) {
@@ -2707,31 +2585,77 @@ to {
   box-sizing: border-box;
   padding: var(--combobox-content-padding);
 }
-.ui-ComboboxContent:has(.ui-ScrollAreaScrollbar[data-orientation='vertical']) .ui-ComboboxViewport {
+.ui-ComboboxContent:where(:has(.ui-ScrollAreaScrollbar[data-orientation='vertical'])) :where(.ui-ComboboxViewport) {
   padding-right: var(--space-3);
 }
 .ui-ComboboxContent:where(.r-size-1) {
   --combobox-content-padding: var(--space-1);
+
   --combobox-item-height: var(--space-5);
-  --combobox-item-indicator-width: calc(var(--space-5) / 1.2);
+  --combobox-item-font-size: var(--font-size-1);
+  --combobox-item-line-height: var(--line-height-1);
+  --combobox-item-letter-spacing: var(--letter-spacing-1);
+  --combobox-item-radius: var(--radius-1);
+
+  --combobox-indicator-width: calc(var(--space-5) / 1.2);
+  --combobox-indicator-icon-width: calc(8px * var(--scaling));
+  --combobox-indicator-icon-height: calc(8px * var(--scaling));
+
   --combobox-separator-margin-right: var(--space-2);
+
+  --combobox-label-font-size: var(--font-size-1);
+  --combobox-label-letter-spacing: var(--letter-spacing-1);
+  --combobox-label-line-height: var(--line-height-1);
+
   border-radius: var(--radius-3);
 }
+.ui-ComboboxContent:where(.r-size-2) {
+  --combobox-item-font-size: var(--font-size-2);
+  --combobox-item-letter-spacing: var(--letter-spacing-2);
+}
+.ui-ComboboxContent:where(.r-size-3) {
+  --combobox-item-font-size: var(--font-size-3);
+  --combobox-item-letter-spacing: var(--letter-spacing-3);
+}
 .ui-ComboboxContent:where(.r-size-2),
 .ui-ComboboxContent:where(.r-size-3) {
   --combobox-content-padding: var(--space-2);
+  --combobox-item-radius: var(--radius-2);
   --combobox-item-height: var(--space-6);
-  --combobox-item-indicator-width: var(--space-5);
+  --combobox-item-line-height: var(--line-height-2);
+  --combobox-indicator-width: var(--space-5);
+  --combobox-indicator-icon-width: calc(10px * var(--scaling));
+  --combobox-indicator-icon-height: calc(10px * var(--scaling));
   --combobox-separator-margin-right: var(--space-3);
+
+  --combobox-label-font-size: var(--font-size-2);
+  --combobox-label-letter-spacing: var(--letter-spacing-2);
+  --combobox-label-line-height: var(--line-height-2);
+
   border-radius: var(--radius-4);
 }
+.ui-ComboboxContent:where(.r-variant-solid) {
+  --combobox-highlighted-background-color: var(--accent-9);
+  --combobox-highlighted-text-color: var(--accent-contrast);
+}
+.ui-ComboboxContent:where(.r-variant-solid.r-high-contrast) {
+  --combobox-highlighted-background-color: var(--accent-12);
+  --combobox-highlighted-text-color: var(--accent-1);
+}
+.ui-ComboboxContent:where(.r-variant-soft) {
+  --combobox-highlighted-background-color: var(--accent-a3);
+  --combobox-highlighted-text-color: var(--accent-a11);
+}
+.ui-ComboboxContent:where(.r-variant-soft.r-high-contrast) {
+  --combobox-highlighted-text-color: var(--accent-12);
+}
 
 .ui-ComboboxItem {
   display: flex;
   align-items: center;
   height: var(--combobox-item-height);
-  padding-left: var(--combobox-item-indicator-width);
-  padding-right: var(--combobox-item-indicator-width);
+  padding-left: var(--combobox-indicator-width);
+  padding-right: var(--combobox-indicator-width);
   position: relative;
   box-sizing: border-box;
   outline: none;
@@ -2740,88 +2664,71 @@ to {
      -moz-user-select: none;
           user-select: none;
   cursor: default;
+
+  font-size: var(--combobox-item-font-size);
+  line-height: var(--combobox-item-line-height);
+  letter-spacing: var(--combobox-item-letter-spacing);
+  border-radius: var(--combobox-item-radius);
 }
 .ui-ComboboxItem:where([data-disabled]) {
   cursor: not-allowed;
 }
+.ui-ComboboxItem:where([data-disabled]) {
+  color: var(--gray-a8);
+}
+.ui-ComboboxItem:where([data-highlighted]) {
+  background-color: var(--combobox-highlighted-background-color);
+  color: var(--combobox-highlighted-text-color);
+}
 .ui-ComboboxItemIndicator {
   position: absolute;
   left: 0;
-  width: var(--combobox-item-indicator-width);
+  width: var(--combobox-indicator-width);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.ui-ComboboxItem:where([data-disabled]) {
-  color: var(--gray-a8);
-}
-:where(.r-size-1) .ui-ComboboxItem {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: var(--radius-1);
-}
-:where(.r-size-1) .ui-ComboboxItemIndicatorIcon {
-  width: calc(8px * var(--scaling));
-  height: calc(8px * var(--scaling));
-}
-:where(.r-size-2) .ui-ComboboxItem {
-  line-height: var(--line-height-2);
-  border-radius: var(--radius-2);
-  font-size: var(--font-size-2);
-  letter-spacing: var(--letter-spacing-2);
-}
-:where(.r-size-2) .ui-ComboboxItemIndicatorIcon,
-:where(.r-size-3) .ui-ComboboxItemIndicatorIcon {
-  width: calc(10px * var(--scaling));
-  height: calc(10px * var(--scaling));
-}
-:where(.r-size-3) .ui-ComboboxItem {
-  line-height: var(--line-height-2);
-  border-radius: var(--radius-2);
-  font-size: var(--font-size-3);
-  letter-spacing: var(--letter-spacing-3);
-}
-:where(.r-variant-solid) .ui-ComboboxItem[data-highlighted] {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-:where(.r-variant-solid):where(.r-high-contrast) .ui-ComboboxItem[data-highlighted] {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
-}
-:where(.r-variant-soft) .ui-ComboboxItem[data-highlighted] {
-  background-color: var(--accent-a4);
+.ui-ComboboxItemIndicatorIcon {
+  width: var(--combobox-indicator-icon-width);
+  height: var(--combobox-indicator-icon-height);
 }
 
 .ui-ComboboxLabel {
   display: flex;
   align-items: center;
   height: var(--combobox-item-height);
-  padding-left: calc(var(--combobox-item-indicator-width) / 2);
-  padding-right: var(--combobox-item-indicator-width);
+  padding-left: calc(var(--combobox-indicator-width) / 2);
+  padding-right: var(--combobox-indicator-width);
   color: var(--gray-a10);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   cursor: default;
+
+  font-size: var(--combobox-label-font-size);
+  letter-spacing: var(--combobox-label-letter-spacing);
+  line-height: var(--combobox-label-line-height);
 }
 .ui-SelectItem + .ui-ComboboxLabel {
   margin-top: var(--space-2);
 }
-:where(.r-size-1) .ui-ComboboxLabel {
-  font-size: var(--font-size-1);
-  letter-spacing: var(--letter-spacing-1);
-  line-height: var(--line-height-1);
-}
-:where(.r-size-2) .ui-ComboboxLabel,
-:where(.r-size-3) .ui-ComboboxLabel {
-  font-size: var(--font-size-2);
-  letter-spacing: var(--letter-spacing-2);
-  line-height: var(--line-height-2);
-}
 
-.ui-Radio {
+.ui-ComboboxEmpty {
+  box-sizing: border-box;
+  outline: none;
+  scroll-margin: var(--combobox-content-padding) 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+  padding-left: calc(var(--combobox-indicator-width) / 2);
+  padding-right: var(--combobox-indicator-width);
+  font-size: var(--combobox-item-font-size);
+  line-height: var(--combobox-item-line-height);
+  letter-spacing: var(--combobox-item-letter-spacing);
+  color: var(--gray-11);
+}
+.ui-RadioBase {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -2834,25 +2741,37 @@ to {
   border: none;
   box-shadow: none;
 }
-.ui-Radio:checked {
+.ui-RadioBase:where(.r-size-1) {
+  --radio-size: calc(var(--space-4) * 0.875);
+}
+.ui-RadioBase:where(.r-size-2) {
+  --radio-size: var(--space-4);
+}
+.ui-RadioBase:where(.r-size-3) {
+  --radio-size: calc(var(--space-4) * 1.25);
+}
+.ui-RadioBase:checked {
   /* reset for tailwind */
   background-image: none;
 }
-.ui-Radio:focus {
+.ui-RadioBase:focus {
   /* reset for tailwind */
   box-shadow: none;
 }
-.ui-Radio:where(:disabled, [data-disabled]) {
+.ui-RadioBase:where(:focus-visible) {
+  outline: none;
+}
+.ui-RadioBase:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
 }
-.ui-Radio::before {
+.ui-RadioBase::before {
   content: '';
   display: block;
   height: var(--radio-size);
   width: var(--radio-size);
   border-radius: 100%;
 }
-.ui-Radio::after {
+.ui-RadioBase::after {
   pointer-events: none;
   position: absolute;
   height: var(--radio-size);
@@ -2861,135 +2780,225 @@ to {
   /* Scale via transform to achieve perfect sub-pixel positioning */
   transform: scale(0.4);
 }
-.ui-Radio:where(:checked, [data-state='checked'])::after {
+.ui-RadioBase:where(:checked, [data-state='checked'])::after {
   content: '';
 }
-.ui-Radio:where(:focus-visible)::before {
+.ui-RadioBase:where(:focus-visible)::before {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
-.ui-Radio:where(.r-size-1) {
-  --radio-size: calc(var(--space-4) * 0.875);
-}
-.ui-Radio:where(.r-size-2) {
-  --radio-size: var(--space-4);
-}
-.ui-Radio:where(.r-size-3) {
-  --radio-size: calc(var(--space-4) * 1.25);
-}
-.ui-Radio:where(.r-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
+:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:not(:checked), [data-state='unchecked'])::before,
+.ui-RadioBase:where(.r-variant-surface):where(:not(:checked), [data-state='unchecked'])::before {
   background-color: var(--color-surface);
   box-shadow: inset 0 0 0 1px var(--gray-a7);
 }
-.ui-Radio:where(.r-variant-surface):where(:checked, [data-state='checked'])::before {
+:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
+.ui-RadioBase:where(.r-variant-surface):where(:checked, [data-state='checked'])::before {
   background-color: var(--accent-indicator);
 }
-.ui-Radio:where(.r-variant-surface)::after {
+:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase::after,
+.ui-RadioBase:where(.r-variant-surface)::after {
   background-color: var(--accent-contrast);
 }
-.ui-Radio:where(.r-variant-surface):where(.r-high-contrast):where(:checked, [data-state='checked'])::before {
+:where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase:where(:checked, [data-state='checked'])::before,
+.ui-RadioBase:where(.r-variant-surface.r-high-contrast):where(:checked, [data-state='checked'])::before {
   background-color: var(--accent-12);
 }
-.ui-Radio:where(.r-variant-surface):where(.r-high-contrast)::after {
+:where(.ui-RadioGroupRoot.r-variant-surface.r-high-contrast) .ui-RadioBase::after,
+.ui-RadioBase:where(.r-variant-surface.r-high-contrast)::after {
   background-color: var(--accent-1);
 }
-.ui-Radio:where(.r-variant-surface):where(:disabled, [data-disabled])::before {
+:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::before,
+.ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::before {
   box-shadow: inset 0 0 0 1px var(--gray-a6);
   background-color: var(--gray-a3);
 }
-.ui-Radio:where(.r-variant-surface):where(:disabled, [data-disabled])::after {
+:where(.ui-RadioGroupRoot.r-variant-surface) .ui-RadioBase:where(:disabled, [data-disabled])::after,
+.ui-RadioBase:where(.r-variant-surface):where(:disabled, [data-disabled])::after {
   background-color: var(--gray-a8);
 }
-.ui-Radio:where(.r-variant-soft)::before {
+:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::before,
+.ui-RadioBase:where(.r-variant-soft)::before {
   background-color: var(--accent-a4);
 }
-.ui-Radio:where(.r-variant-soft)::after {
+:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase::after,
+.ui-RadioBase:where(.r-variant-soft)::after {
   background-color: var(--accent-a11);
 }
-.ui-Radio:where(.r-variant-soft):where(.r-high-contrast)::after {
+:where(.ui-RadioGroupRoot.r-variant-soft.r-high-contrast) .ui-RadioBase::after,
+.ui-RadioBase:where(.r-variant-soft.r-high-contrast)::after {
   background-color: var(--accent-12);
 }
-.ui-Radio:where(.r-variant-soft):where(:focus-visible)::before {
+:where(.ui-RadioGroupRoot.r-variant-soft:focus-visible) .ui-RadioBase::before,
+.ui-RadioBase:where(.r-variant-soft:focus-visible)::before {
   outline-color: var(--accent-a8);
 }
-.ui-Radio:where(.r-variant-soft):where(:disabled, [data-disabled])::before {
+:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::before,
+.ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::before {
   background-color: var(--gray-a3);
 }
-.ui-Radio:where(.r-variant-soft):where(:disabled, [data-disabled])::after {
+:where(.ui-RadioGroupRoot.r-variant-soft) .ui-RadioBase:where(:disabled, [data-disabled])::after,
+.ui-RadioBase:where(.r-variant-soft):where(:disabled, [data-disabled])::after {
   background-color: var(--gray-a8);
 }
 
+.ui-Radio {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.ui-RadioGroupRoot:where(.r-size-1) {
+  --radio-size: calc(var(--space-4) * 0.875);
+}
+.ui-RadioGroupRoot:where(.r-size-2) {
+  --radio-size: var(--space-4);
+}
+.ui-RadioGroupRoot:where(.r-size-3) {
+  --radio-size: calc(var(--space-4) * 1.25);
+}
+
 .ui-RadioGroupItem {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: .5em;
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.ui-RadioCardsItem .ui-Card {
+.ui-RadioCardsRoot:where(.r-size-1) {
+  --card-padding: var(--space-3);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-RadioCardsRoot:where(.r-size-2) {
+  --card-padding: var(--space-4);
+  --card-border-radius: max(var(--radius-4), var(--radius-full));
+}
+.ui-RadioCardsRoot:where(.r-size-3) {
+  --card-padding: var(--space-5);
+  --card-border-radius: max(var(--radius-5), var(--radius-full));
+}
+.ui-BaseCard {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  font-style: normal;
+  text-align: start;
+  box-sizing: border-box;
+  border-radius: var(--card-border-radius);
+  padding: var(--card-padding);
+  border-color: var(--card-border-color, var(--gray-a5));
+  border-width: var(--card-border-width, 1px);
+  border-style: solid;
   width: 100%;
+}
+.ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
+  --card-border-color: var(--gray-a7);
+}
+.ui-BaseCard:where(:any-link, button, label):where(:hover) {
+  --card-border-color: var(--gray-a7);
+}
+.ui-BaseCard:where(:-moz-any-link, button, label):where(:focus-visible) {
+  --card-border-color: var(--focus-8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+.ui-BaseCard:where(:any-link, button, label):where(:focus-visible) {
+  --card-border-color: var(--focus-8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+/** special enhancement for tailwindcss */
+.ui-BaseCard:where(.p-0) {
+  --card-padding: 0;
+}
+
+.ui-RadioCardsItem {
   height: 100%;
 }
-.ui-RadioCardsItem:where([data-state="checked"]) .ui-Card {
+.ui-RadioCardsItem:where([data-state="checked"]) {
   --card-border-color: var(--accent-10);
   box-shadow: 0 0 0 1px var(--accent-10);
 }
 
-.ui-RadioTabsList {
-  display: flex;
+.ui-RadioTabsRoot {
+  display: inline-flex;
+  width: -moz-fit-content;
+  width: fit-content;
   align-items: center;
   box-sizing: border-box;
-  background-color: var(--gray-a3);
   padding: var(--radio-tabs-list-padding);
   border-radius: var(--radio-tabs-list-radius);
+  font-size: var(--radio-tabs-font-size);
 }
-.ui-RadioTabsList:where(.r-size-1) {
+.ui-RadioTabsRoot:where(.r-size-1) {
+  --radio-tabs-font-size: var(--font-size-1);
   --radio-tabs-list-padding: var(--space-1);
-  --radio-tabs-list-radius: var(--radius-2);
+  --radio-tabs-list-radius: max(var(--radius-2), var(--radius-full));
   --radio-tabs-item-padding: 3px 6px;
-  --radio-tabs-item-radius: var(--radius-1);
+  --radio-tabs-item-radius: max(var(--radius-1), var(--radius-full));
 }
-.ui-RadioTabsList:where(.r-size-2) {
+.ui-RadioTabsRoot:where(.r-size-2) {
+  --radio-tabs-font-size: var(--font-size-2);
   --radio-tabs-list-padding: var(--space-1);
-  --radio-tabs-list-radius: var(--radius-4);
+  --radio-tabs-list-radius: max(var(--radius-3), var(--radius-full));
   --radio-tabs-item-padding: 4px 8px;
-  --radio-tabs-item-radius: var(--radius-2);
+  --radio-tabs-item-radius: max(var(--radius-2), var(--radius-full));
 }
-.ui-RadioTabsList [role="radio"] {
-  display: flex;
+.ui-RadioTabsRoot:where(.r-variant-surface) {
+  background-color: var(--accent-surface);
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+}
+.ui-RadioTabsRoot:where(.r-variant-classic) {
+  background-color: var(--accent-a3);
+}
+.ui-RadioTabsRoot:where(.r-variant-soft) {
+  background-color: var(--accent-a3);
+}
+
+.ui-RadioTabsItem {
+  display: inline-flex;
   flex-grow: 1;
   justify-content: center;
   align-items: center;
+  color: var(--gray-a11);
   padding: var(--radio-tabs-item-padding);
   border-radius: var(--radio-tabs-item-radius);
 }
-.ui-RadioTabsList [data-state="checked"] {
+.ui-RadioTabsItem:where([data-state="unchecked"]) {
+  letter-spacing: var(--tab-inactive-letter-spacing);
+  word-spacing: var(--tab-inactive-word-spacing);
+}
+.ui-RadioTabsItem:where([data-state="checked"]) {
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--tab-active-letter-spacing);
+  word-spacing: var(--tab-active-word-spacing);
+}
+.ui-RadioTabsRoot:where(.r-variant-classic) :where(.ui-RadioTabsItem[data-state="checked"]) {
   color: var(--gray-12);
   background-color: var(--color-background);
   box-shadow: var(--shadow-2);
 }
+.ui-RadioTabsRoot:where(.r-variant-soft) :where(.ui-RadioTabsItem[data-state="checked"]),
+.ui-RadioTabsRoot:where(.r-variant-surface) :where(.ui-RadioTabsItem[data-state="checked"]) {
+  color: var(--accent-a11);
+  background-color: var(--accent-a3);
+}
+@media (hover: hover) {
+:where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
+    color: var(--gray-12);
+}
+:where(.ui-RadioTabsRoot.r-variant-classic) .ui-RadioTabsItem:where(:hover) {
+    color: var(--gray-12);
+}
+}
 
 .ui-TabList {
-  position: relative;
-  display: flex;
   justify-content: flex-start;
+  position: relative;
   overflow-x: auto;
   white-space: nowrap;
   font-style: normal;
   scrollbar-width: none;
-  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
-}
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: 2px;
-  transition-property: width, transform;
-  transition-duration: 300ms;
-  width: var(--reka-tabs-indicator-size);
-  background-color: var(--accent-indicator);
-  transform: translateX(var(--reka-tabs-indicator-position));
 }
 .ui-TabList::-webkit-scrollbar {
   display: none;
@@ -3000,9 +3009,10 @@ to {
   letter-spacing: var(--letter-spacing-1);
   --tab-height: var(--space-6);
   --tab-padding-x: var(--space-1);
+  --tab-radius: max(var(--radius-2), var(--radius-full));
+  --tab-item-radius: var(--radius-1);
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
-  --tab-inner-border-radius: var(--radius-1);
 }
 .ui-TabList:where(.r-size-2) {
   font-size: var(--font-size-2);
@@ -3010,20 +3020,92 @@ to {
   letter-spacing: var(--letter-spacing-2);
   --tab-height: var(--space-7);
   --tab-padding-x: var(--space-2);
+  --tab-radius: max(var(--radius-3), var(--radius-full));
+  --tab-item-radius: var(--radius-2);
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
-  --tab-inner-border-radius: var(--radius-2);
 }
-:where(.ui-TabList.r-high-contrast) .ui-TabsIndicator {
-  background-color: var(--accent-12);
+.ui-TabsIndicator {
+  position: absolute;
+  left: 0;
+  transition-property: width, transform;
+  transform: translateX(var(--reka-tabs-indicator-position));
+  width: var(--reka-tabs-indicator-size);
 }
 
-.ui-root {
-  --tab-active-letter-spacing: -0.01em;
-  --tab-active-word-spacing: 0em;
-  --tab-inactive-letter-spacing: 0em;
-  --tab-inactive-word-spacing: 0em;
+/** classic & surface */
+.ui-TabList:where(.r-variant-surface, .r-variant-classic) {
+  position: relative;
+  display: inline-flex;
+  width: -moz-fit-content;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  border-radius: var(--tab-radius);
+}
+.ui-TabList:where(.r-variant-classic) {
+  background-color: var(--accent-a3);
+  padding-left: var(--tab-padding-x);
+  padding-right: var(--tab-padding-x);
+}
+.ui-TabList:where(.r-variant-surface) {
+  --tab-item-radius: 0;
+  --tab-inner-height: var(--tab-height);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
+.ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
+  top: 0;
+  height: var(--tab-inner-height);
+  background-color: var(--accent-a3);
+  transition-duration: 100ms;
+}
+.ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
+  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
+  height: var(--tab-inner-height);
+  background-color: var(--color-panel-solid);
+  box-shadow:
+    0 0 0 0.5px var(--black-a1),
+    0 1px 1px 0 var(--gray-a2),
+    0 2px 1px -1px var(--black-a1),
+    0 1px 3px 0 var(--black-a1);
+  border-radius: var(--tab-item-radius);
+  transition-duration: 100ms;
+}
+.ui-TabList:where(.r-variant-surface.r-size-1),
+.ui-TabList:where(.r-variant-soft.r-size-1) {
+  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
+}
+
+/** soft & outline */
+.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
+  display: flex;
+  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+}
+.ui-TabList:where(.r-variant-soft) {
+  padding-left: var(--tab-padding-x);
+  padding-right: var(--tab-padding-x);
+}
+.ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
+  top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
+  height: var(--tab-inner-height);
+  background-color: var(--accent-a3);
+  border-radius: var(--tab-item-radius);
+  transition-duration: 100ms;
+}
+.ui-TabList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
+  bottom: 0;
+  height: 2px;
+  background-color: var(--accent-indicator);
+  transition-duration: 300ms;
+}
+
+/** high contrast */
+:where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
+  background-color: var(--accent-12);
+}
+
 .ui-TabTrigger {
   display: flex;
   align-items: center;
@@ -3035,8 +3117,6 @@ to {
           user-select: none;
   box-sizing: border-box;
   height: var(--tab-height);
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
   color: var(--gray-a11);
   outline: none;
 }
@@ -3053,7 +3133,7 @@ to {
   height: var(--tab-inner-height);
   padding-left: var(--tab-inner-padding-x);
   padding-right: var(--tab-inner-padding-x);
-  border-radius: var(--tab-inner-border-radius);
+  border-radius: var(--tab-item-radius);
 }
 .ui-TabTriggerInner {
   position: absolute;
@@ -3074,23 +3154,39 @@ to {
   word-spacing: var(--tab-active-word-spacing);
 }
 @media (hover: hover) {
-.ui-TabTrigger:where(:hover) {
+.ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
     color: var(--gray-12);
 }
-.ui-TabTrigger:where(:not(:disabled):hover) :where(.ui-TabTriggerInner) {
+.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
+    color: var(--accent-a11);
+}
+.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger:not(:disabled):hover) :where(.ui-TabTriggerInner) {
     background-color: var(--gray-a3);
 }
 .ui-TabTrigger:where(:focus-visible:hover) :where(.ui-TabTriggerInner) {
     background-color: var(--accent-a3);
 }
 }
-.ui-TabTrigger:where([data-state='active']) {
-  color: var(--gray-12);
-}
 .ui-TabTrigger:where(:focus-visible) :where(.ui-TabTriggerInner) {
   outline: 2px solid var(--focus-8);
   outline-offset: -2px;
 }
+.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger) {
+  padding-left: var(--tab-padding-x);
+  padding-right: var(--tab-padding-x);
+}
+.ui-TabList:where(.r-variant-classic, .r-variant-outline) :where(.ui-TabTrigger[data-state='active']) {
+  color: var(--gray-12);
+}
+.ui-TabList:where(.r-variant-soft) :where(.ui-TabTrigger + .ui-TabTrigger) {
+  margin-left: calc(var(--tab-padding-x) / 2)
+}
+.ui-TabList:where(.r-variant-surface) :where(.ui-TabTrigger + .ui-TabTrigger) {
+  box-shadow: inset 1px 0 0 var(--gray-a4);
+}
+.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
+  color: var(--accent-a11);
+}
 
 .ui-Editable:where(.r-size-1) {
   --editable-padding-x: var(--space-1);
@@ -3132,17 +3228,23 @@ to {
 .ui-AccordionRoot:where(.r-size-1) {
   --accordion-padding: var(--space-3);
   --accordion-trigger-font-size: var(--font-size-3);
+  --accordion-trigger-gap: var(--space-1);
   --accordion-content-font-size: var(--font-size-2);
+  --accordion-indicator-line-width: 1px;
 }
 .ui-AccordionRoot:where(.r-size-2) {
   --accordion-padding: var(--space-4);
   --accordion-trigger-font-size: var(--font-size-4);
+  --accordion-trigger-gap: var(--space-2);
   --accordion-content-font-size: var(--font-size-3);
+  --accordion-indicator-line-width: 1px;
 }
 .ui-AccordionRoot:where(.r-size-3) {
   --accordion-padding: var(--space-5);
   --accordion-trigger-font-size: var(--font-size-5);
+  --accordion-trigger-gap: var(--space-3);
   --accordion-content-font-size: var(--font-size-4);
+  --accordion-indicator-line-width: 2px;
 }
 
 .ui-AccordionItem + .ui-AccordionItem {
@@ -3180,87 +3282,67 @@ to {
   padding-bottom: var(--accordion-padding);
 }
 
-.ui-PlusMinusIcon {
-  position: relative;
-  width: var(--plus-minus-icon-size);
-  height: var(--plus-minus-icon-size);
-  cursor: pointer;
-  display: inline-block;
-  --plus-minus-icon-color: var(--gray-11);
+.ui-AccordionIndicator {
+  display: inline-flex;
+  align-items: center;
+  --accordion-indicator-color: var(--gray-10);
 }
-.ui-PlusMinusIcon:where([data-accent-color]) {
-  --plus-minus-icon-color: var(--accent-9);
+.ui-AccordionIndicator:where([data-side="left"]) {
+  order: -1;
 }
-.ui-PlusMinusIcon:where(.r-size-1) {
-  --plus-minus-icon-size: var(--font-size-3);
-  --plus-minus-line-width: 1px;
+.ui-AccordionIndicator:where([data-side="right"]) {
+  order: 0;
 }
-.ui-PlusMinusIcon:where(.r-size-2) {
-  --plus-minus-icon-size: var(--font-size-4);
-  --plus-minus-line-width: 1px;
+.ui-AccordionIndicator-chevron {
+  transition: transform 0.2s ease;
+  font-size: var(--accordion-indicator-icon-size);
+  color: var(--accordion-indicator-color);
 }
-.ui-PlusMinusIcon:where(.r-size-3) {
-  --plus-minus-icon-size: var(--font-size-5);
-  --plus-minus-line-width: 2px;
+:where([data-state="open"]) .ui-AccordionIndicator-chevron {
+  transform: rotate(90deg);
 }
-.ui-PlusMinusIcon:where(.r-size-4) {
-  --plus-minus-icon-size: var(--font-size-6);
-  --plus-minus-line-width: 2px;
+.ui-AccordionIndicator-plus {
+  position: relative;
+  width: calc(var(--accordion-indicator-icon-size) - var(--space-1));
+  height: calc(var(--accordion-indicator-icon-size) - var(--space-1));
+  cursor: pointer;
+  display: inline-block;
 }
-.ui-PlusMinusIcon-1,
-.ui-PlusMinusIcon-2 {
+.ui-AccordionIndicator-plus-1,
+.ui-AccordionIndicator-plus-2 {
   position: absolute;
-  background-color: var(--plus-minus-icon-color);
+  background-color: var(--accordion-indicator-color);
   border-radius: 2px;
   transition: transform 0.3s, opacity 0.3s;
 }
-.ui-PlusMinusIcon-1 {
+.ui-AccordionIndicator-plus-1 {
   top: 50%;
   left: 0;
   width: 100%;
-  height: var(--plus-minus-line-width);
+  height: var(--accordion-indicator-line-width);
   transform: translateY(-50%) rotate(0deg);
 }
-.ui-PlusMinusIcon-2 {
+.ui-AccordionIndicator-plus-2 {
   top: 0;
   left: 50%;
-  width: var(--plus-minus-line-width);
+  width: var(--accordion-indicator-line-width);
   height: 100%;
   transform: translateX(-50%) rotate(0deg);
 }
-:where([data-state="open"]) .ui-PlusMinusIcon-1,
-:where([aria-plus-minused="true"]) .ui-PlusMinusIcon-1 {
+:where([data-state="open"]) .ui-AccordionIndicator-plus-1 {
   transform: translateY(-50%) rotate(180deg);
 }
-:where([data-state="open"]) .ui-PlusMinusIcon-2,
-:where([aria-plus-minused="true"]) .ui-PlusMinusIcon-2 {
+:where([data-state="open"]) .ui-AccordionIndicator-plus-2 {
   transform: translateX(-50%) rotate(90deg);
   opacity: 0;
   height: 0;
 }
 
-.ui-ChevronIcon {
-  transition: transform 0.2s ease;
-}
-.ui-ChevronIcon:where([data-arrow-transform="down-up"]) {
-  transform: rotate(90deg);
-}
-.ui-ChevronIcon:where([data-arrow-transform="up-down"]) {
-  transform: rotate(-90deg);
-}
-:where([data-state="open"]) .ui-ChevronIcon:where([data-arrow-transform="right-down"]),
-:where([data-state="open"]) .ui-ChevronIcon:where([data-arrow-transform="up-down"]) {
-  transform: rotate(90deg);
-}
-:where([data-state="open"]) .ui-ChevronIcon:where([data-arrow-transform="right-up"]),
-:where([data-state="open"]) .ui-ChevronIcon:where([data-arrow-transform="down-up"]) {
-  transform: rotate(-90deg);
-}
-
 .ui-AccordionTrigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  text-align: initial;
   width: 100%;
   cursor: pointer;
   -webkit-user-select: none;
@@ -3270,10 +3352,105 @@ to {
   padding-top: var(--accordion-padding);
   padding-bottom: var(--accordion-padding);
   font-weight: var(--font-weight-medium);
+  gap: var(--accordion-trigger-gap);
+  --accordion-indicator-icon-size: var(--accordion-trigger-font-size);
 }
 .ui-AccordionTrigger:hover {
   text-decoration: underline;
 }
+.ui-AccordionTriggerText {
+  flex-grow: 1;
+}
+
+.ui-CollapsibleRoot:where(.r-size-1) {
+  --collapsible-font-size: var(--font-size-2);
+  --collapsible-trigger-gap: calc(var(--space-1) / 2);
+  --collapsible-indicator-icon-size: var(--font-size-2);
+  --collapsible-padding-y: var(--space-1);
+  --collapsible-padding-x: var(--space-2);
+  --collapsible-radius: max(var(--radius-1), var(--radius-full))
+}
+.ui-CollapsibleRoot:where(.r-size-2) {
+  --collapsible-font-size: var(--font-size-3);
+  --collapsible-trigger-gap: var(--space-1);
+  --collapsible-indicator-icon-size: var(--font-size-3);
+  --collapsible-padding-y: var(--space-2);
+  --collapsible-padding-x: var(--space-3);
+  --collapsible-radius: max(var(--radius-2), var(--radius-full))
+}
+.ui-CollapsibleRoot:where(.r-size-3) {
+  --collapsible-font-size: var(--font-size-5);
+  --collapsible-trigger-gap: calc(var(--space-2) * 3 / 4);
+  --collapsible-indicator-icon-size: var(--font-size-5);
+  --collapsible-padding-y: var(--space-2);
+  --collapsible-padding-x: var(--space-4);
+  --collapsible-radius: max(var(--radius-3), var(--radius-full))
+}
+.ui-CollapsibleRoot:where(.r-size-4) {
+  --collapsible-font-size: var(--font-size-7);
+  --collapsible-trigger-gap: var(--space-2);
+  --collapsible-indicator-icon-size: var(--font-size-7);
+  --collapsible-padding-y: var(--space-3);
+  --collapsible-padding-x: var(--space-5);
+  --collapsible-radius: max(var(--radius-4), var(--radius-full))
+}
+.ui-CollapsibleRoot:where(.r-variant-surface) {
+  box-shadow: inset 0 0 0 1px var(--gray-a4);
+  border-radius: var(--collapsible-radius);
+}
+.ui-CollapsibleRoot:where(.r-variant-surface):where([data-state="open"]) {
+  box-shadow: inset 0 0 0 1px var(--gray-a5);
+}
+
+.ui-CollapsibleIndicator {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--collapsible-indicator-icon-size);
+  transition: transform 0.2s ease;
+  color: var(--gray-10);
+}
+.ui-CollapsibleIndicator:where([data-side="left"]) {
+  order: -1;
+}
+:where([data-state="open"]) .ui-CollapsibleIndicator {
+  transform: rotate(90deg);
+}
+
+.ui-CollapsibleTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: initial;
+  gap: var(--collapsible-trigger-gap);
+  font-size: var(--collapsible-font-size);
+  font-weight: var(--font-weight-medium);
+}
+.ui-CollapsibleTriggerText {
+  flex-grow: 1;
+  text-align: initial;
+}
+:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger {
+  padding-block: var(--collapsible-padding-y);
+  padding-inline: var(--collapsible-padding-x);
+  width: 100%;
+}
+:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger {
+  background: var(--accent-a2);
+  border-radius: var(--collapsible-radius);
+}
+:where(.ui-CollapsibleRoot.r-variant-surface) .ui-CollapsibleTrigger {
+  border-top-left-radius: var(--collapsible-radius);
+  border-top-right-radius: var(--collapsible-radius);
+  background: var(--accent-a2);
+}
+:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger:where(:hover) {
+  background: var(--accent-a3);
+}
+:where(.ui-CollapsibleRoot.r-variant-surface) .ui-CollapsibleTrigger:where([data-state="open"]),
+:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleTrigger:where([data-state="open"]) {
+  background: var(--accent-a3);
+  color: var(--accent-a11);
+}
 
 @keyframes collapsible-down {
 from {
@@ -3293,7 +3470,9 @@ to {
 }
 .ui-CollapsibleContent {
   overflow: hidden;
+  font-size: var(--collapsible-font-size);
   font-weight: var(--font-weight-regular);
+  padding-block: var(--collapsible-padding-y);
 }
 .ui-CollapsibleContent:where([data-state="open"]) {
   animation: collapsible-down 0.2s ease-out;
@@ -3301,6 +3480,9 @@ to {
 .ui-CollapsibleContent:where([data-state="closed"]) {
   animation: collapsible-up 0.2s ease-out;
 }
+:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleContent {
+  padding-inline: var(--collapsible-padding-x);
+}
 
 .ui-Pagination {
   display: flex;
@@ -3322,6 +3504,237 @@ to {
   gap: 0;
 }
 
+.ui-root {
+  --spinner-animation-duration: 800ms;
+  --spinner-opacity: 0.65;
+}
+.ui-SpinnerIcon {
+  display: inline-block;
+  position: relative;
+  opacity: var(--spinner-opacity);
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+  transform: scale(0.8334);
+}
+.ui-SpinnerLeaf {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 12.5% / 2);
+  width: 12.5%;
+  height: 100%;
+  animation: ui-spinner-leaf-fade var(--spinner-animation-duration) linear infinite;
+}
+.ui-SpinnerLeaf::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 30%;
+  border-radius: var(--radius-1);
+  background-color: currentColor;
+}
+.ui-SpinnerLeaf:where(:nth-child(1)) {
+  transform: rotate(0deg);
+  animation-delay: calc(-8 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(2)) {
+  transform: rotate(45deg);
+  animation-delay: calc(-7 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(3)) {
+  transform: rotate(90deg);
+  animation-delay: calc(-6 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(4)) {
+  transform: rotate(135deg);
+  animation-delay: calc(-5 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(5)) {
+  transform: rotate(180deg);
+  animation-delay: calc(-4 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(6)) {
+  transform: rotate(225deg);
+  animation-delay: calc(-3 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(7)) {
+  transform: rotate(270deg);
+  animation-delay: calc(-2 / 8 * var(--spinner-animation-duration));
+}
+.ui-SpinnerLeaf:where(:nth-child(8)) {
+  transform: rotate(315deg);
+  animation-delay: calc(-1 / 8 * var(--spinner-animation-duration));
+}
+@keyframes ui-spinner-leaf-fade {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0.25;
+}
+}
+
+.ui-ToastItem {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: var(--toast-gap);
+  left: auto;
+  right: auto;
+  bottom: auto;
+  top: auto;
+  width: 100%;
+  background: var(--color-panel-solid);
+  box-shadow: 0 4px 12px var(--gray-a4);
+  border: 1px solid var(--gray-a3);
+  border-radius: var(--radius-3);
+  padding: var(--space-4);
+  opacity: 1;
+  z-index: calc(0 - var(--toast-index));
+  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s;
+  --toast-collapse-scale: calc(max(0, 1 - (var(--toast-index) * 0.06)));
+}
+.ui-ToastItem:where([data-swipe="move"]) {
+  transition: none;
+}
+:where(.ui-ToastViewport[data-x-position="left"]) .ui-ToastItem {
+  left: 0;
+}
+:where(.ui-ToastViewport[data-x-position="right"]) .ui-ToastItem {
+  right: 0;
+}
+:where(.ui-ToastViewport[data-y-position="top"]) .ui-ToastItem {
+  top: 0;
+  --toast-expanded-offset-y: calc(var(--toast-offset-y) + var(--toast-index) * var(--toast-gap) + var(--reka-toast-swipe-move-y, 0px));
+}
+:where(.ui-ToastViewport[data-y-position="bottom"]) .ui-ToastItem {
+  bottom: 0;
+  --toast-expanded-offset-y: calc(var(--toast-offset-y) * -1 + var(--toast-index) * var(--toast-gap) * -1 + var(--reka-toast-swipe-move-y, 0px));
+}
+:where(.ui-ToastViewport[data-y-position="top"]) .ui-ToastItem:where([data-expanded="false"]) {
+  transform:
+    translateX(var(--reka-toast-swipe-move-x, 0px))
+    translateY(calc(var(--reka-toast-swipe-move-y, 0px) + (min(var(--toast-index), 10) * 20%)))
+    scale(var(--toast-collapse-scale));
+}
+:where(.ui-ToastViewport[data-y-position="bottom"]) .ui-ToastItem:where([data-expanded="false"]) {
+  transform:
+    translateX(var(--reka-toast-swipe-move-x, 0px))
+    translateY(calc(var(--reka-toast-swipe-move-y, 0px) + var(--toast-offset-y) * -0.2))
+    scale(var(--toast-collapse-scale));
+}
+.ui-ToastItem:where([data-expanded="true"]) {
+  transform: translateX(var(--reka-toast-swipe-move-x, 0px)) translateY(var(--toast-expanded-offset-y));
+}
+.ui-ToastItem:where([data-swipe-direction="left"]) {
+  --toast-item-swipe-to-x: calc(0 - 100% - var(--toast-x-position))
+}
+.ui-ToastItem:where([data-swipe-direction="right"]) {
+  --toast-item-swipe-to-x: calc(100% + var(--toast-x-position))
+}
+.ui-ToastItem:where([data-swipe-direction="top"]) {
+  --toast-item-swipe-to-y: calc(0 - 100% - var(--toast-y-position))
+}
+.ui-ToastItem:where([data-swipe-direction="bottom"]) {
+  --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
+}
+.ui-ToastItem:where([data-swipe="closed"]) {
+  animation: ui-fade-out 100ms ease-in;
+}
+.ui-ToastItem:where([data-swipe-direction="left"][data-swipe="end"]),
+.ui-ToastItem:where([data-swipe-direction="right"][data-swipe="end"]) {
+  animation: toast-swipe-x 100ms ease-out;
+}
+.ui-ToastItem:where([data-swipe-direction="top"][data-swipe="end"]),
+.ui-ToastItem:where([data-swipe-direction="bottom"][data-swipe="end"]) {
+  animation: toast-swipe-y 100ms ease-out;
+}
+@keyframes toast-swipe-x {
+from {
+    transform: translateX(var(--reka-toast-swipe-end-x)) translateY(var(--toast-expanded-offset-y));
+}
+to {
+    transform: translateX(var(--toast-item-swipe-to-x)) translateY(var(--toast-expanded-offset-y));
+}
+}
+@keyframes toast-swipe-y {
+from {
+    transform: translateY(var(--reka-toast-swipe-end-y));
+}
+to {
+    transform: translateY(var(--toast-item-swipe-to-y));
+}
+}
+.ui-ToastContent {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.ui-ToastIcon {
+  display: inline-flex;
+  align-items: center;
+  font-size: calc(var(--toast-title-font-size) + 4px);
+  color: var(--accent-a9);
+  vertical-align: middle;
+}
+.ui-ToastTitle {
+  font-size: var(--toast-title-font-size);
+  font-weight: var(--font-weight-medium);
+}
+.ui-ToastDescription {
+  font-size: var(--toast-description-font-size);
+  color: var(--gray-10);
+}
+
+.ui-ToastViewport {
+  position: fixed;
+  margin: 0 auto;
+  top: auto;
+  left: auto;
+  bottom: auto;
+  right: auto;
+  max-width: calc(100vw - var(--toast-x-position) - var(--space-4));
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  width: var(--toast-width);
+  --toast-x-position: var(--space-4);
+  --toast-y-position: var(--space-4);
+}
+.ui-ToastViewport:where(.r-size-1) {
+  --toast-width: 300px;
+  --toast-gap: var(--space-2);
+  --toast-title-font-size: var(--font-size-2);
+  --toast-description-font-size: var(--font-size-1);
+}
+.ui-ToastViewport:where(.r-size-2) {
+  --toast-width: 340px;
+  --toast-gap: var(--space-3);
+  --toast-title-font-size: var(--font-size-3);
+  --toast-description-font-size: var(--font-size-1);
+}
+.ui-ToastViewport:where(.r-size-3) {
+  --toast-width: 380px;
+  --toast-gap: var(--space-4);
+  --toast-title-font-size: var(--font-size-4);
+  --toast-description-font-size: var(--font-size-3);
+}
+.ui-ToastViewport:where([data-x-position="left"]) {
+  left: var(--toast-x-position);
+}
+.ui-ToastViewport:where([data-x-position="right"]) {
+  right: var(--toast-x-position);
+}
+.ui-ToastViewport:where([data-y-position="top"]) {
+  top: var(--toast-y-position);
+}
+.ui-ToastViewport:where([data-y-position="bottom"]) {
+  bottom: var(--toast-y-position);
+}
+
 .ui-TableContent {
   --table-row-background-color: transparent;
   --table-row-box-shadow: inset 0 -1px var(--gray-a5);
@@ -3442,11 +3855,11 @@ to {
 .ui-Tooltip {
   box-sizing: border-box;
   padding: var(--space-1) var(--space-2);
-  background-color: var(--gray-12);
   border-radius: var(--radius-2);
   transform-origin: var(--reka-tooltip-content-transform-origin);
   animation-duration: 140ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  background-color: var(--accent-11);
 }
 @media (prefers-reduced-motion: no-preference) {
 .ui-Tooltip:where([data-state='delayed-open']):where([data-side='top']) {
@@ -3473,6 +3886,14 @@ to {
   letter-spacing: var(--letter-spacing-1);
 }
 .ui-TooltipArrow {
+  fill: var(--accent-11);
+}
+
+/* special handle for gray color */
+.ui-Tooltip:where([data-accent-color="gray"]) {
+  background-color: var(--gray-12);
+}
+.ui-Tooltip:where([data-accent-color="gray"]) :where(.ui-TooltipArrow) {
   fill: var(--gray-12);
 }
 
@@ -3490,19 +3911,6 @@ to {
   height: 100%;
 }
 
-.ui-Spinner {
-  color: var(--gray-10);
-}
-.ui-Spinner:where(.r-size-1) {
-  font-size: var(--space-3);
-}
-.ui-Spinner:where(.r-size-2) {
-  font-size: var(--space-4);
-}
-.ui-Spinner:where(.r-size-3) {
-  font-size: calc(1.25 * var(--space-4));
-}
-
 .ui-SavingIndicator {
   display: inline-flex;
   align-items: center;
@@ -3512,6 +3920,7 @@ to {
 }
 .ui-SavingIndicator:where([data-status="saving"]) {
   color: var(--gray-10);
+  animation: ui-spin 2s infinite linear;
 }
 .ui-SavingIndicator:where([data-status="saved"]) {
   color: var(--green-10);
@@ -3525,35 +3934,3 @@ to {
 .ui-SavingIndicator:where(.r-size-3) {
   font-size: calc(1.25 * var(--space-4));
 }
-
-.ui-IconCircle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--radius-full);
-  box-sizing: border-box;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
-  background-color: var(--accent-a3);
-  color: var(--accent-11);
-  font-size: var(--icon-circle-size);
-  padding: var(--icon-circle-padding);
-}
-.ui-IconCircle:where(.r-size-1) {
-  --icon-circle-size: 10px;
-  --icon-circle-padding: 2px;
-}
-.ui-IconCircle:where(.r-size-2) {
-  --icon-circle-size: 12px;
-  --icon-circle-padding: 3px;
-}
-.ui-IconCircle:where(.r-size-3) {
-  --icon-circle-size: 14px;
-  --icon-circle-padding: 4px;
-}
-.ui-IconCircle:where(.r-variant-glow) {
-  box-shadow: 0 0 0 calc(var(--icon-circle-padding) - 1px) var(--accent-a2);
-}