@typlog/ui 0.12.2 → 0.12.3

package/components.css

@@ -149,18 +149,20 @@
   box-shadow: inset 0 0 1px var(--accent-a8);
 }
 
+@layer components {
 .ui-Badge {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  font-weight: var(--font-weight-medium);
-  font-style: normal;
-  flex-shrink: 0;
-  line-height: 1;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    font-weight: var(--font-weight-medium);
+    font-style: normal;
+    flex-shrink: 0;
+    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);
@@ -541,12 +543,14 @@
   --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
   --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
 }
+@layer components {
 .ui-ScrollArea {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
 }
 .ui-ScrollAreaViewport {
   display: flex;
@@ -554,6 +558,13 @@
   width: 100%;
   height: 100%;
 }
+.ui-ScrollAreaViewport > div {
+  display: block;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  width: 100%;
+  flex-grow: 1;
+}
 .ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
   position: absolute;
   inset: 0;
@@ -638,6 +649,59 @@
   background-color: var(--gray-a9);
 }
 
+.ui-Tooltip {
+  box-sizing: border-box;
+  padding: var(--space-1) var(--space-2);
+  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']) {
+    animation-name: ui-slide-from-top, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
+    animation-name: ui-slide-from-bottom, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
+    animation-name: ui-slide-from-left, ui-fade-in;
+}
+.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
+    animation-name: ui-slide-from-right, ui-fade-in;
+}
+}
+.ui-TooltipText {
+  color: var(--gray-1);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  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);
+}
+
+@layer components {
+.ui-DialogCloseButton {
+    position: absolute;
+    top: calc(var(--dialog-popup-padding) / 2);
+    right: calc(var(--dialog-popup-padding) / 2);
+}
+}
+
 .ui-DialogTitle {
   font-size: var(--font-size-4);
   font-weight: var(--font-weight-semibold);
@@ -695,11 +759,6 @@
     max-height: var(--dialog-popup-max-height);
     padding: var(--dialog-popup-padding);
 }
-:where(.ui-DialogPopup) .ui-CloseButton {
-    position: absolute;
-    top: calc(var(--dialog-popup-padding) / 2);
-    right: calc(var(--dialog-popup-padding) / 2);
-}
 }
 .ui-DialogPopup:where(.r-size-1) {
   --dialog-popup-padding: var(--space-4);
@@ -968,6 +1027,175 @@ to {
   --popover-popup-padding: var(--space-4);
 }
 
+.ui-NavigationMenuRoot {
+  position: relative;
+  z-index: 1;
+}
+.ui-NavigationMenuViewport {
+  position: absolute;
+  margin-top: 10px;
+  top: 100%;
+  left: var(--reka-navigation-menu-viewport-left);
+  height: var(--reka-navigation-menu-viewport-height);
+  background-color: white;
+  border-radius: var(--radius-4);
+  overflow: hidden;
+  box-shadow: var(--shadow-3);
+  width: 100%;
+  max-width: var(--reka-navigation-menu-viewport-width);
+  transition: width, height, 300ms ease;
+  transform-origin: top center;
+}
+.ui-NavigationMenuViewport:where([data-state="open"]) {
+  animation: navigation-menu-viewport-scale-in 200ms ease;
+}
+.ui-NavigationMenuViewport:where([data-state="closed"]) {
+  animation: navigation-menu-viewport-scale-out 200ms ease;
+}
+@keyframes navigation-menu-viewport-scale-in {
+from {
+    opacity: 0;
+    transform: rotateX(-30deg) scale(0.9);
+}
+to {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+}
+}
+@keyframes navigation-menu-viewport-scale-out {
+from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+}
+to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+}
+}
+
+@layer components {
+.ui-NavigationMenuList {
+    display: flex;
+    gap: var(--navigation-menu-gap);
+}
+}
+.ui-NavigationMenuList:where(.r-size-1) {
+  --navigation-menu-gap: calc(var(--space-1) / 2);
+  --navigation-menu-height: var(--space-5);
+  --navigation-menu-padding-x: var(--space-2);
+  --navigation-menu-font-size: var(--font-size-1);
+  --navigation-menu-line-height: var(--line-height-1);
+  --navigation-menu-letter-spacing: var(--letter-spacing-1);
+  --navigation-menu-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-NavigationMenuList:where(.r-size-2) {
+  --navigation-menu-gap: var(--space-1);
+  --navigation-menu-height: var(--space-6);
+  --navigation-menu-padding-x: var(--space-3);
+  --navigation-menu-font-size: var(--font-size-2);
+  --navigation-menu-line-height: var(--line-height-2);
+  --navigation-menu-letter-spacing: var(--letter-spacing-2);
+  --navigation-menu-radius: max(var(--radius-2), var(--radius-full));
+}
+.ui-NavigationMenuList:where(.r-size-3) {
+  --navigation-menu-gap: calc(var(--space-1) * 1.5);
+  --navigation-menu-height: var(--space-7);
+  --navigation-menu-padding-x: var(--space-4);
+  --navigation-menu-font-size: var(--font-size-3);
+  --navigation-menu-line-height: var(--line-height-3);
+  --navigation-menu-letter-spacing: var(--letter-spacing-3);
+  --navigation-menu-radius: max(var(--radius-3), var(--radius-full));
+}
+.ui-NavigationMenuIndicator {
+  position: absolute;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 10px;
+  top: 100%;
+  overflow: hidden;
+  z-index: 1;
+  transition: width, transform 250ms ease;
+  width: var(--reka-navigation-menu-indicator-size);
+  transform: translateX(var(--reka-navigation-menu-indicator-position));
+}
+.ui-NavigationMenuIndicator:where([data-state="visible"]) {
+  animation: ui-fade-in 200ms ease;
+}
+.ui-NavigationMenuIndicator:where([data-state="hidden"]) {
+  animation: ui-fade-out 200ms ease;
+}
+.ui-NavigationMenuIndicator:before {
+  content: '';
+  position: relative;
+  top: 70%;
+  background-color: var(--color-panel-solid);
+  border: 1px solid var(--gray-a4);
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+}
+@layer components {
+.ui-NavigationMenuTrigger,
+  .ui-NavigationMenuLink {
+    display: inline-flex;
+    gap: var(--space-1);
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    vertical-align: top;
+    font-style: normal;
+    text-align: center;
+    white-space: nowrap;
+    font-weight: var(--font-weight-medium);
+    height: var(--navigation-menu-height);
+    padding-left: var(--navigation-menu-padding-x);
+    padding-right: var(--navigation-menu-padding-x);
+    font-size: var(--navigation-menu-font-size);
+    line-height: var(--navigation-menu-line-height);
+    letter-spacing: var(--navigation-menu-letter-spacing);
+    border-radius: var(--navigation-menu-radius);
+}
+.ui-NavigationMenuTrigger:where(:hover),
+  .ui-NavigationMenuLink:where(:hover) {
+    background-color: var(--accent-a2);
+}
+}
+
+.ui-NavigationMenuTriggerArrow {
+  transform: rotate(0deg);
+  transition: transform 250ms ease;
+}
+:where(.ui-NavigationMenuTrigger[data-state="open"]) .ui-NavigationMenuTriggerArrow {
+  transform: rotate(-180deg);
+}
+
+@layer components {
+.ui-NavigationMenuContent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    animation: var(--navigation-menu-content-animation);
+}
+}
+.ui-NavigationMenuContent:where([data-motion="from-start"]) {
+  --navigation-menu-content-animation: enterFromLeft 250ms ease;
+}
+.ui-NavigationMenuContent:where([data-motion="to-start"]) {
+  --navigation-menu-content-animation: exitToLeft 250ms ease;
+}
+.ui-NavigationMenuContent:where([data-motion="from-end"]) {
+  --navigation-menu-content-animation: enterFromRight 250ms ease;
+}
+.ui-NavigationMenuContent:where([data-motion="to-end"]) {
+  --navigation-menu-content-animation: exitToRight 250ms ease;
+}
+
 .ui-root {
   --switch-disabled-blend-mode: multiply;
   --switch-high-contrast-checked-color-overlay: var(--black-a8);
@@ -1144,16 +1372,18 @@ to {
   transition: none;
 }
 
+@layer components {
 .ui-Checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  cursor: default;
-  height: var(--checkbox-size);
-  border-radius: var(--checkbox-border-radius);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    cursor: default;
+    height: var(--checkbox-size);
+    border-radius: var(--checkbox-border-radius);
+}
 }
 .ui-Checkbox::before {
   content: '';
@@ -1234,29 +1464,33 @@ to {
   color: var(--gray-a8);
 }
 
+@layer components {
 .ui-Toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    border-radius: var(--toggle-border-radius);
+    font-size: var(--toggle-font-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+}
 }
 .ui-Toggle:where(.r-size-1) {
-  border-radius: max(var(--radius-1), var(--radius-full));
-  font-size: var(--font-size-1);
+  --toggle-border-radius: max(var(--radius-1), var(--radius-full));
+  --toggle-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-border-radius: max(var(--radius-2), var(--radius-full));
+  --toggle-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-border-radius: max(var(--radius-3), var(--radius-full));
+  --toggle-font-size: var(--font-size-6);
   --toggle-size: var(--space-7);
 }
 
@@ -1319,14 +1553,16 @@ to {
   color: var(--gray-1);
 }
 
+@layer components {
 .ui-ToggleGroupRoot {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  height: var(--toggle-group-height);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    height: var(--toggle-group-height);
+}
 }
 .ui-ToggleGroupRoot:where(.r-size-1) {
   font-size: var(--font-size-1);
@@ -1367,15 +1603,17 @@ to {
   --toggle-item-size: var(--toggle-group-height);
 }
 
+@layer components {
 .ui-ToggleGroupItem {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  width: var(--toggle-item-size);
-  height: var(--toggle-item-size);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    width: var(--toggle-item-size);
+    height: var(--toggle-item-size);
+}
 }
 .ui-ToggleGroupRoot:where(.r-variant-solid, .r-variant-surface, .r-variant-outline) :where(.ui-ToggleGroupItem:first-child) {
   border-top-left-radius: var(--toggle-radius);
@@ -2026,11 +2264,14 @@ to {
   --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
   --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
-
-  overflow: hidden;
-  box-shadow: var(--shadow-5);
-  background-color: var(--color-panel-solid);
-  box-sizing: border-box;
+}
+@layer components {
+.ui-SelectContent {
+    overflow: hidden;
+    box-shadow: var(--shadow-5);
+    background-color: var(--color-panel-solid);
+    box-sizing: border-box;
+}
 }
 .ui-SelectContent:where([data-side]) {
   min-width: var(--reka-select-trigger-width);
@@ -2061,21 +2302,23 @@ to {
   border-radius: var(--radius-4);
 }
 
+@layer components {
 .ui-SelectTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  vertical-align: top;
-  font-weight: var(--font-weight-regular);
-  font-style: normal;
-  text-align: start;
-  color: var(--gray-12);
-  box-sizing: border-box;
-  height: var(--select-trigger-height);
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    vertical-align: top;
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+    text-align: start;
+    color: var(--gray-12);
+    box-sizing: border-box;
+    height: var(--select-trigger-height);
+}
 }
 .ui-SelectTriggerInner {
   overflow: hidden;
@@ -2215,20 +2458,22 @@ to {
   color: var(--gray-a9);
 }
 
+@layer components {
 .ui-SelectItem {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
-  position: relative;
-  box-sizing: border-box;
-  outline: none;
-  scroll-margin: var(--select-content-padding) 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
+    display: flex;
+    align-items: center;
+    height: var(--select-item-height);
+    padding-left: var(--select-item-indicator-width);
+    padding-right: var(--select-item-indicator-width);
+    position: relative;
+    box-sizing: border-box;
+    outline: none;
+    scroll-margin: var(--select-content-padding) 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
+}
 }
 .ui-SelectItem:where([data-disabled]) {
   cursor: not-allowed;
@@ -2283,17 +2528,19 @@ to {
   background-color: var(--accent-a4);
 }
 
+@layer components {
 .ui-SelectLabel {
-  display: flex;
-  align-items: center;
-  height: var(--select-item-height);
-  padding-left: var(--select-item-indicator-width);
-  padding-right: var(--select-item-indicator-width);
-  color: var(--gray-a10);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
+    display: flex;
+    align-items: center;
+    height: var(--select-item-height);
+    padding-left: var(--select-item-indicator-width);
+    padding-right: var(--select-item-indicator-width);
+    color: var(--gray-a10);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    cursor: default;
+}
 }
 .ui-SelectItem + .ui-SelectLabel {
   margin-top: var(--space-2);
@@ -2310,21 +2557,25 @@ to {
   line-height: var(--line-height-2);
 }
 
+@layer components {
 .ui-SelectSeparator {
-  height: 1px;
-  margin-top: var(--space-2);
-  margin-bottom: var(--space-2);
-  margin-left: var(--select-item-indicator-width);
-  margin-right: var(--select-separator-margin-right);
-  background-color: var(--gray-a6);
+    height: 1px;
+    margin-top: var(--space-2);
+    margin-bottom: var(--space-2);
+    margin-left: var(--select-item-indicator-width);
+    margin-right: var(--select-separator-margin-right);
+    background-color: var(--gray-a6);
+}
 }
 
+@layer components {
 .ui-ComboboxRoot {
-  width: -moz-fit-content;
-  width: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
 }
 .ui-ComboboxRoot:where(.r-multiple) {
-  width: auto;
+    width: auto;
+}
 }
 .ui-ComboboxRoot:where(.r-size-1) {
   --combobox-field-height: var(--space-5);
@@ -2412,21 +2663,23 @@ to {
 .ui-ComboboxValuesItem:where([aria-current="true"]) {
   background-color: var(--red-a9);
 }
+@layer components {
 .ui-ComboboxInput {
-  text-align: inherit;
-  border: none;
-  padding: 0;
-  width: 100%;
-  font-size: 1em;
-  background-color: transparent;
-  border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
-  text-indent: var(--combobox-field-padding);
-  height: var(--combobox-input-height);
-  cursor: auto;
+    text-align: inherit;
+    border: none;
+    padding: 0;
+    width: 100%;
+    font-size: 1em;
+    background-color: transparent;
+    border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
+    text-indent: var(--combobox-field-padding);
+    height: var(--combobox-input-height);
+    cursor: auto;
 
-  /* Reset size 2 padding bottom */
-  padding-bottom: 0px;
-  /* Safari credentials autofill icon */
+    /* 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);
@@ -2581,11 +2834,14 @@ to {
   --scrollarea-scrollbar-vertical-margin-bottom: var(--combobox-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--combobox-content-padding);
   --scrollarea-scrollbar-horizontal-margin-right: var(--combobox-content-padding);
-
-  overflow: hidden;
-  box-shadow: var(--shadow-5);
-  background-color: var(--color-panel-solid);
-  box-sizing: border-box;
+}
+@layer components {
+.ui-ComboboxContent {
+    overflow: hidden;
+    box-shadow: var(--shadow-5);
+    background-color: var(--color-panel-solid);
+    box-sizing: border-box;
+}
 }
 .ui-ComboboxContent:where([data-side]) {
   min-width: var(--reka-combobox-trigger-width);
@@ -2662,25 +2918,27 @@ to {
   --combobox-highlighted-text-color: var(--accent-12);
 }
 
+@layer components {
 .ui-ComboboxItem {
-  display: flex;
-  align-items: center;
-  height: var(--combobox-item-height);
-  padding-left: var(--combobox-indicator-width);
-  padding-right: var(--combobox-indicator-width);
-  position: relative;
-  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;
+    display: flex;
+    align-items: center;
+    height: var(--combobox-item-height);
+    padding-left: var(--combobox-indicator-width);
+    padding-right: var(--combobox-indicator-width);
+    position: relative;
+    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;
 
-  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);
+    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;
@@ -2705,40 +2963,44 @@ to {
   height: var(--combobox-indicator-icon-height);
 }
 
+@layer components {
 .ui-ComboboxLabel {
-  display: flex;
-  align-items: center;
-  height: var(--combobox-item-height);
-  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;
+    display: flex;
+    align-items: center;
+    height: var(--combobox-item-height);
+    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);
+    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);
 }
 
+@layer components {
 .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);
+    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;
@@ -3005,10 +3267,10 @@ to {
 }
 }
 
-.ui-TabList::-webkit-scrollbar {
+.ui-TabsList::-webkit-scrollbar {
   display: none;
 }
-.ui-TabList:where(.r-size-1) {
+.ui-TabsList:where(.r-size-1) {
   --tab-font-size: var(--font-size-1);
   --tab-line-height: var(--line-height-1);
   --tab-letter-spacing: var(--letter-spacing-1);
@@ -3019,7 +3281,7 @@ to {
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
-.ui-TabList:where(.r-size-2) {
+.ui-TabsList:where(.r-size-2) {
   --tab-font-size: var(--font-size-2);
   --tab-line-height: var(--line-height-2);
   --tab-letter-spacing: var(--letter-spacing-2);
@@ -3030,12 +3292,12 @@ to {
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
-.ui-TabList:where(.r-variant-surface.r-size-1),
-.ui-TabList:where(.r-variant-soft.r-size-1) {
+.ui-TabsList:where(.r-variant-surface.r-size-1),
+.ui-TabsList:where(.r-variant-soft.r-size-1) {
   --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
 }
 @layer components {
-.ui-TabList {
+.ui-TabsList {
     justify-content: flex-start;
     position: relative;
     overflow-x: auto;
@@ -3048,34 +3310,33 @@ to {
 }
 
   /** classic & surface */
-.ui-TabList:where(.r-variant-surface, .r-variant-classic) {
+.ui-TabsList: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) {
+.ui-TabsList: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) {
+.ui-TabsList:where(.r-variant-surface) {
     --tab-item-radius: 0;
     --tab-inner-height: var(--tab-height);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
 }
 
   /** soft & outline */
-.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
+.ui-TabsList: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) {
+.ui-TabsList:where(.r-variant-soft) {
     padding-left: var(--tab-padding-x);
     padding-right: var(--tab-padding-x);
 }
@@ -3087,13 +3348,13 @@ to {
   transform: translateX(var(--reka-tabs-indicator-position));
   width: var(--reka-tabs-indicator-size);
 }
-.ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
+.ui-TabsList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
   top: 0;
-  height: var(--tab-inner-height);
+  height: var(--tab-height);
   background-color: var(--accent-a3);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-classic) :where(.ui-TabsIndicator) {
+.ui-TabsList: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);
@@ -3105,14 +3366,14 @@ to {
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
+.ui-TabsList: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) {
+.ui-TabsList:where(.r-variant-outline) :where(.ui-TabsIndicator) {
   bottom: 0;
   height: 2px;
   background-color: var(--accent-indicator);
@@ -3120,7 +3381,7 @@ to {
 }
 
 /** high contrast */
-:where(.ui-TabList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
+:where(.ui-TabsList.r-variant-outline.r-high-contrast) .ui-TabsIndicator {
   background-color: var(--accent-12);
 }
 
@@ -3172,13 +3433,13 @@ to {
   word-spacing: var(--tab-active-word-spacing);
 }
 @media (hover: hover) {
-.ui-TabList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
+.ui-TabsList:where(.r-variant-outline, .r-variant-classic) :where(.ui-TabTrigger:hover) {
     color: var(--gray-12);
 }
-.ui-TabList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger:hover) {
+.ui-TabsList: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) {
+.ui-TabsList: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) {
@@ -3189,20 +3450,20 @@ to {
   outline: 2px solid var(--focus-8);
   outline-offset: -2px;
 }
-.ui-TabList:where(.r-variant-outline) :where(.ui-TabTrigger) {
+.ui-TabsList: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']) {
+.ui-TabsList: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) {
+.ui-TabsList: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) {
+.ui-TabsList: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']) {
+.ui-TabsList:where(.r-variant-surface, .r-variant-soft) :where(.ui-TabTrigger[data-state='active']) {
   color: var(--accent-a11);
 }
 
@@ -3285,10 +3546,12 @@ to {
     height: 0;
 }
 }
+@layer components {
 .ui-AccordionContent {
-  overflow: hidden;
-  font-weight: var(--font-weight-regular);
-  font-size: var(--accordion-content-font-size);
+    overflow: hidden;
+    font-weight: var(--font-weight-regular);
+    font-size: var(--accordion-content-font-size);
+}
 }
 .ui-AccordionContent:where([data-state="open"]) {
   animation: accordion-down 0.2s ease-out;
@@ -3432,28 +3695,37 @@ to {
   --collapsible-trigger-open-text-color: var(--accent-12);
 }
 
+@layer components {
 .ui-CollapsibleIndicator {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--collapsible-indicator-icon-size);
-  transition: transform 0.2s ease;
-  color: var(--gray-10);
+    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([aria-expanded="false"]) .ui-CollapsibleIndicator,
+:where([data-state="closed"]) .ui-CollapsibleIndicator {
+  transform: rotate(0);
+}
+:where([aria-expanded="true"]) .ui-CollapsibleIndicator,
 :where([data-state="open"]) .ui-CollapsibleIndicator {
   transform: rotate(90deg);
 }
 
+@layer components {
 .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);
+    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;
@@ -3496,11 +3768,13 @@ to {
     height: 0;
 }
 }
+@layer components {
 .ui-CollapsibleContent {
-  overflow: hidden;
-  font-size: var(--collapsible-font-size);
-  font-weight: var(--font-weight-regular);
-  padding-block: var(--collapsible-padding-y);
+    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;
@@ -3845,8 +4119,7 @@ to {
   border: 1px solid var(--gray-a5);
   border-radius: var(--table-border-radius);
   background-color: var(--color-panel);
-  -webkit-backdrop-filter: var(--backdrop-filter-panel);
-          backdrop-filter: var(--backdrop-filter-panel);
+  backdrop-filter: var(--backdrop-filter-panel);
   background-clip: padding-box;
   position: relative;
 }
@@ -3869,18 +4142,20 @@ to {
   --scrollarea-scrollbar-horizontal-margin-right: 0;
 }
 
+@layer components {
 .ui-Separator {
-  display: block;
-  box-sizing: border-box;
-  background-color: var(--accent-a6);
+    display: block;
+    box-sizing: border-box;
+    background-color: var(--accent-a6);
 }
-.ui-Separator[aria-orientation="horizontal"] {
-  width: var(--separator-size, auto);
-  height: 1px;
+.ui-Separator:where([aria-orientation="horizontal"]) {
+    width: var(--separator-size, auto);
+    height: 1px;
+}
+.ui-Separator:where([aria-orientation="vertical"]) {
+    width: 1px;
+    height: var(--separator-size, auto);
 }
-.ui-Separator[aria-orientation="vertical"] {
-  width: 1px;
-  height: var(--separator-size, auto);
 }
 .ui-Separator:where(.r-size-1) {
   --separator-size: var(--space-4);
@@ -3895,51 +4170,6 @@ to {
   --separator-size: 100%;
 }
 
-.ui-Tooltip {
-  box-sizing: border-box;
-  padding: var(--space-1) var(--space-2);
-  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']) {
-    animation-name: ui-slide-from-top, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='bottom']) {
-    animation-name: ui-slide-from-bottom, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='left']) {
-    animation-name: ui-slide-from-left, ui-fade-in;
-}
-.ui-Tooltip:where([data-state='delayed-open']):where([data-side='right']) {
-    animation-name: ui-slide-from-right, ui-fade-in;
-}
-}
-.ui-TooltipText {
-  color: var(--gray-1);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  cursor: default;
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  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);
-}
-
 .ui-Quota {
   position: relative;
   overflow: hidden;