@typlog/ui 0.12.0 → 0.12.2

package/components.css

@@ -4,17 +4,21 @@
   z-index: 0;
 }
 
+@layer components {
 .ui-Avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    flex-shrink: 0;
+    border-radius: var(--avatar-border-radius);
+    letter-spacing: var(--avatar-letter-spacing);
+}
 }
 .ui-Avatar > img {
   width: 100%;
@@ -49,8 +53,8 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-1);
   --avatar-ring-width: 1px;
   --avatar-ring-offset: 1px;
-  border-radius: max(var(--radius-2), var(--radius-full));
-  letter-spacing: var(--letter-spacing-1);
+  --avatar-border-radius: max(var(--radius-2), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-1);
 }
 .ui-Avatar:where(.r-size-2) {
   --avatar-size: var(--space-6);
@@ -58,8 +62,8 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-2);
   --avatar-ring-width: 2px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-2), var(--radius-full));
-  letter-spacing: var(--letter-spacing-2);
+  --avatar-border-radius: max(var(--radius-2), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-2);
 }
 .ui-Avatar:where(.r-size-3) {
   --avatar-size: var(--space-7);
@@ -67,8 +71,8 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-3);
   --avatar-ring-width: 2px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-3), var(--radius-full));
-  letter-spacing: var(--letter-spacing-3);
+  --avatar-border-radius: max(var(--radius-3), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-3);
 }
 .ui-Avatar:where(.r-size-4) {
   --avatar-size: var(--space-8);
@@ -76,48 +80,48 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-4);
   --avatar-ring-width: 2px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-3), var(--radius-full));
-  letter-spacing: var(--letter-spacing-4);
+  --avatar-border-radius: max(var(--radius-3), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-4);
 }
 .ui-Avatar:where(.r-size-5) {
   --avatar-size: var(--space-9);
   --avatar-fallback-one-letter-font-size: var(--font-size-6);
   --avatar-ring-width: 3px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-4), var(--radius-full));
-  letter-spacing: var(--letter-spacing-6);
+  --avatar-border-radius: max(var(--radius-4), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-6);
 }
 .ui-Avatar:where(.r-size-6) {
   --avatar-size: 80px;
   --avatar-fallback-one-letter-font-size: var(--font-size-7);
   --avatar-ring-width: 3px;
   --avatar-ring-offset: 3px;
-  border-radius: max(var(--radius-5), var(--radius-full));
-  letter-spacing: var(--letter-spacing-7);
+  --avatar-border-radius: max(var(--radius-5), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-7);
 }
 .ui-Avatar:where(.r-size-7) {
   --avatar-size: 96px;
   --avatar-fallback-one-letter-font-size: var(--font-size-7);
   --avatar-ring-width: 3px;
   --avatar-ring-offset: 3px;
-  border-radius: max(var(--radius-5), var(--radius-full));
-  letter-spacing: var(--letter-spacing-7);
+  --avatar-border-radius: max(var(--radius-5), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-7);
 }
 .ui-Avatar:where(.r-size-8) {
   --avatar-size: 128px;
   --avatar-fallback-one-letter-font-size: var(--font-size-8);
   --avatar-ring-width: 4px;
   --avatar-ring-offset: 3px;
-  border-radius: max(var(--radius-6), var(--radius-full));
-  letter-spacing: var(--letter-spacing-8);
+  --avatar-border-radius: max(var(--radius-6), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-8);
 }
 .ui-Avatar:where(.r-size-9) {
   --avatar-size: 160px;
   --avatar-fallback-one-letter-font-size: var(--font-size-9);
   --avatar-ring-width: 4px;
   --avatar-ring-offset: 4px;
-  border-radius: max(var(--radius-6), var(--radius-full));
-  letter-spacing: var(--letter-spacing-9);
+  --avatar-border-radius: max(var(--radius-6), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-9);
 }
 .ui-Avatar:where(.r-variant-ring) {
   outline-color: var(--accent-9);
@@ -521,6 +525,12 @@
   padding: 0;
 }
 
+.ui-Button.ui-CloseButton {
+  height: var(--button-height);
+  width: var(--button-height);
+  padding: 0;
+}
+
 .ui-root {
   --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
   --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
@@ -668,24 +678,31 @@
   box-sizing: border-box;
   padding-top: var(--space-6);
 }
+@layer components {
 .ui-DialogPopup {
-  width: 100%;
-  max-height: calc(100vh - var(--space-6) * 2);
-  position: relative;
-  box-sizing: border-box;
-  overflow: auto;
-  text-align: left;
-  box-sizing: border-box;
-  background-color: var(--color-panel-solid);
-  outline: none;
-  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);
+    width: 100%;
+    max-height: calc(100vh - var(--space-6) * 2);
+    position: relative;
+    box-sizing: border-box;
+    overflow: auto;
+    text-align: left;
+    box-sizing: border-box;
+    background-color: var(--color-panel-solid);
+    outline: none;
+    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);
+}
+: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-3);
+  --dialog-popup-padding: var(--space-4);
   --dialog-popup-radius: var(--radius-4);
   --dialog-popup-max-width: 450px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -703,7 +720,7 @@
   --dialog-popup-max-height: calc(100vh - 100px);
 }
 .ui-DialogPopup:where(.r-size-4) {
-  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-padding: var(--space-5);
   --dialog-popup-radius: var(--radius-5);
   --dialog-popup-max-width: 1200px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -714,11 +731,6 @@
   --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;
@@ -726,10 +738,12 @@
     padding-left: var(--space-4);
     padding-right: var(--space-4);
 }
+@layer components {
 .ui-DialogPopup {
-    box-shadow: var(--shadow-6);
-    border-bottom-left-radius: var(--dialog-popup-radius);
-    border-bottom-right-radius: var(--dialog-popup-radius);
+      box-shadow: var(--shadow-6);
+      border-bottom-left-radius: var(--dialog-popup-radius);
+      border-bottom-right-radius: var(--dialog-popup-radius);
+}
 }
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -829,7 +843,6 @@ to {
   box-sizing: border-box;
   overflow: hidden;
   border-radius: var(--menu-content-border-radius);
-
   box-shadow: var(--shadow-5);
   background-color: var(--color-panel-solid);
 }
@@ -932,17 +945,19 @@ to {
   background-color: var(--gray-a6);
 }
 
+@layer components {
 .ui-PopoverPopup {
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-5);
-  min-width: var(--reka-popover-trigger-width);
-  max-width: var(--reka-popover-content-available-width);
-  outline: 0;
-  overflow: auto;
-  position: relative;
-  box-sizing: border-box;
-  transform-origin: var(--reka-popover-content-transform-origin);
-  padding: var(--popover-popup-padding);
+    background-color: var(--color-panel-solid);
+    box-shadow: var(--shadow-5);
+    min-width: var(--reka-popover-trigger-width);
+    max-width: var(--reka-popover-content-available-width);
+    outline: 0;
+    overflow: auto;
+    position: relative;
+    box-sizing: border-box;
+    transform-origin: var(--reka-popover-content-transform-origin);
+    padding: var(--popover-popup-padding);
+}
 }
 .ui-PopoverPopup:where(.r-size-1) {
   border-radius: var(--radius-4);
@@ -952,9 +967,6 @@ to {
   border-radius: var(--radius-5);
   --popover-popup-padding: var(--space-4);
 }
-.ui-PopoverPopup:where(.p-0) {
-  --popover-popup-padding: 0;
-}
 
 .ui-root {
   --switch-disabled-blend-mode: multiply;
@@ -2858,12 +2870,14 @@ to {
   --radio-size: calc(var(--space-4) * 1.25);
 }
 
+@layer components {
 .ui-RadioGroupItem {
-  display: inline-flex;
-  align-items: center;
-  gap: .5em;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: .5em;
+    width: -moz-fit-content;
+    width: fit-content;
+}
 }
 
 .ui-RadioCardsRoot:where(.r-size-1) {
@@ -2878,19 +2892,21 @@ to {
   --card-padding: var(--space-5);
   --card-border-radius: max(var(--radius-5), var(--radius-full));
 }
+@layer components {
 .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%;
+    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);
@@ -2907,11 +2923,6 @@ to {
   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%;
 }
@@ -2920,15 +2931,17 @@ to {
   box-shadow: 0 0 0 1px var(--accent-10);
 }
 
+@layer components {
 .ui-RadioTabsRoot {
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  box-sizing: border-box;
-  padding: var(--radio-tabs-list-padding);
-  border-radius: var(--radio-tabs-list-radius);
-  font-size: var(--radio-tabs-font-size);
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--radio-tabs-list-padding);
+    border-radius: var(--radio-tabs-list-radius);
+    font-size: var(--radio-tabs-font-size);
+}
 }
 .ui-RadioTabsRoot:where(.r-size-1) {
   --radio-tabs-font-size: var(--font-size-1);
@@ -2992,68 +3005,87 @@ to {
 }
 }
 
-.ui-TabList {
-  justify-content: flex-start;
-  position: relative;
-  overflow-x: auto;
-  white-space: nowrap;
-  font-style: normal;
-  scrollbar-width: none;
-}
 .ui-TabList::-webkit-scrollbar {
   display: none;
 }
 .ui-TabList:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
+  --tab-font-size: var(--font-size-1);
+  --tab-line-height: var(--line-height-1);
+  --tab-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-item-radius: max(var(--radius-1), var(--radius-full));
   --tab-inner-padding-x: var(--space-1);
   --tab-inner-height: var(--space-5);
 }
 .ui-TabList:where(.r-size-2) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
+  --tab-font-size: var(--font-size-2);
+  --tab-line-height: var(--line-height-2);
+  --tab-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-item-radius: max(var(--radius-2), var(--radius-full));
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  transition-property: width, transform;
-  transform: translateX(var(--reka-tabs-indicator-position));
-  width: var(--reka-tabs-indicator-size);
+.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);
 }
-
-/** classic & surface */
+@layer components {
+.ui-TabList {
+    justify-content: flex-start;
+    position: relative;
+    overflow-x: auto;
+    white-space: nowrap;
+    font-style: normal;
+    scrollbar-width: none;
+    font-size: var(--tab-font-size);
+    line-height: var(--tab-line-height);
+    letter-spacing: var(--tab-letter-spacing);
+}
+
+  /** 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);
+    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);
+    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);
+    --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) {
+    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-TabsIndicator {
+  position: absolute;
+  left: 0;
+  transition-property: width, transform;
+  transform: translateX(var(--reka-tabs-indicator-position));
+  width: var(--reka-tabs-indicator-size);
 }
 .ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
   top: 0;
@@ -3073,20 +3105,6 @@ to {
   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);
@@ -3338,22 +3356,24 @@ to {
   height: 0;
 }
 
+@layer components {
 .ui-AccordionTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: initial;
-  width: 100%;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  font-size: var(--accordion-trigger-font-size);
-  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);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: initial;
+    width: 100%;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    font-size: var(--accordion-trigger-font-size);
+    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;
@@ -3366,25 +3386,25 @@ to {
   --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-padding-y: var(--space-2);
+  --collapsible-padding-x: var(--space-3);
   --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-padding-y: var(--space-3);
+  --collapsible-padding-x: var(--space-4);
   --collapsible-radius: max(var(--radius-2), var(--radius-full))
 }
 .ui-CollapsibleRoot:where(.r-size-3) {
-  --collapsible-font-size: var(--font-size-5);
+  --collapsible-font-size: var(--font-size-4);
   --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-y: var(--space-3);
   --collapsible-padding-x: var(--space-4);
-  --collapsible-radius: max(var(--radius-3), var(--radius-full))
+  --collapsible-radius: max(var(--radius-4), var(--radius-full))
 }
 .ui-CollapsibleRoot:where(.r-size-4) {
   --collapsible-font-size: var(--font-size-7);
@@ -3394,13 +3414,23 @@ to {
   --collapsible-padding-x: var(--space-5);
   --collapsible-radius: max(var(--radius-4), var(--radius-full))
 }
+.ui-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface) {
+  --collapsible-trigger-background-color: var(--accent-a2);
+  --collapsible-trigger-hover-background-color: var(--accent-a3);
+  --collapsible-trigger-open-background-color: var(--accent-a3);
+  --collapsible-trigger-open-text-color: var(--accent-a11);
+
+  border-radius: var(--collapsible-radius);
+}
 .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-CollapsibleRoot:where(.r-variant-soft, .r-variant-surface):where([data-accent-color="gray"]) {
+  --collapsible-trigger-open-text-color: var(--accent-12);
+}
 
 .ui-CollapsibleIndicator {
   display: inline-flex;
@@ -3430,41 +3460,39 @@ to {
   text-align: initial;
 }
 :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger {
+  background-color: var(--collapsible-trigger-background-color);
   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);
+  transition: border-radius 0.2s ease;
 }
-: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:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where(:hover) {
+  background-color: var(--collapsible-trigger-hover-background-color);
 }
-: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);
+:where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleTrigger:where([data-state="open"]) {
+  background-color: var(--collapsible-trigger-open-background-color);
+  color: var(--collapsible-trigger-open-text-color);
+  border-radius: var(--collapsible-radius) var(--collapsible-radius) 0 0;
 }
 
 @keyframes collapsible-down {
 from {
     height: 0;
+    opacity: 1;
 }
 to {
     height: var(--reka-collapsible-content-height);
+    opacity: 1;
 }
 }
 @keyframes collapsible-up {
 from {
+    opacity: 1;
     height: var(--reka-collapsible-content-height);
 }
 to {
+    opacity: 0;
     height: 0;
 }
 }
@@ -3478,7 +3506,10 @@ to {
   animation: collapsible-down 0.2s ease-out;
 }
 .ui-CollapsibleContent:where([data-state="closed"]) {
-  animation: collapsible-up 0.2s ease-out;
+  animation: collapsible-up 0.2s ease-in;
+}
+:where(.ui-CollapsibleRoot.r-variant-soft) .ui-CollapsibleContent {
+  background-color: var(--accent-a2);
 }
 :where(.ui-CollapsibleRoot:not(.r-variant-ghost)) .ui-CollapsibleContent {
   padding-inline: var(--collapsible-padding-x);
@@ -3594,9 +3625,20 @@ to {
   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::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  height: calc(var(--toast-gap) + 1px);
+  bottom: 100%;
+  width: 100%;
+}
 .ui-ToastItem:where([data-swipe="move"]) {
   transition: none;
 }
+.ui-ToastItem:where([data-visible="false"]) {
+  display: none;
+}
 :where(.ui-ToastViewport[data-x-position="left"]) .ui-ToastItem {
   left: 0;
 }
@@ -3638,6 +3680,7 @@ to {
 .ui-ToastItem:where([data-swipe-direction="bottom"]) {
   --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
 }
+.ui-ToastItem:where([data-state="closed"]),
 .ui-ToastItem:where([data-swipe="closed"]) {
   animation: ui-fade-out 100ms ease-in;
 }