@womp/kookie-ui 0.3.25 → 0.4.0

package/components.css

@@ -1087,10 +1087,10 @@
     letter-spacing: var(--letter-spacing, inherit);
 }
 .rt-Text:where(.rt-r-ff-sans) {
-    font-family: var(--default-font-family-sans);
+    font-family: var(--font-sans);
 }
 .rt-Text:where(.rt-r-ff-mono) {
-    font-family: var(--default-font-family-mono);
+    font-family: var(--font-mono);
 }
 .rt-Text:where(.rt-r-ff-serif) {
     font-family: var(--font-serif);
@@ -1521,7 +1521,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-AccordionRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AccordionRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -1529,7 +1529,7 @@
 }
 .rt-AccordionRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AccordionRoot:where(.rt-r-size-1) {
     border-radius: var(--radius-1);
@@ -1638,7 +1638,7 @@
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
             box-shadow: inset 0 0 0 1px var(--accent-a6);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-classic)) {
     background-color: var(--color-surface-solid);
@@ -1659,7 +1659,7 @@
 :where(.rt-AccordionRoot:where(.rt-variant-classic)):where([data-panel-background='translucent'],[data-material='translucent']) {
     background-color: var(--color-surface-translucent);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-soft)) {
     background-color: var(--accent-2);
@@ -1678,7 +1678,7 @@
 :where(.rt-AccordionRoot:where(.rt-variant-soft)):where([data-panel-background='translucent'],[data-material='translucent']) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-outline)) {
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
@@ -1700,7 +1700,7 @@
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
             box-shadow: inset 0 0 0 1px var(--accent-a6);
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-ghost)) {
     background-color: transparent;
@@ -2215,6 +2215,7 @@
     }
 }
 .rt-BaseDialogContent {
+    --backdrop-filter-components-enabled: none;
     margin: auto;
     width: 100%;
     z-index: 1;
@@ -2440,7 +2441,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-AvatarRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AvatarRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -2448,7 +2449,7 @@
 }
 .rt-AvatarRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AvatarRoot:where(button),
 .rt-AvatarRoot:where(a),
@@ -3364,7 +3365,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-Badge:where([data-panel-background='solid'],[data-material='solid']) {
     --material-blend: 100%;
@@ -3376,7 +3377,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 @media (prefers-reduced-motion: reduce) {
     .rt-Badge {
@@ -3830,7 +3831,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseButton {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseButton:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -3838,7 +3839,7 @@
 }
 .rt-BaseButton:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 @media (forced-colors: active) {
     .rt-BaseButton {
@@ -4967,7 +4968,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-CalloutRoot:where([data-panel-background='solid'],[data-material='solid']) {
     --material-blend: 100%;
@@ -4979,7 +4980,7 @@
     --material-blend: 60%;
     --material-alpha: 1;
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-CalloutRoot:where(.rt-high-contrast) {
     color: var(--accent-12);
@@ -5422,14 +5423,14 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseCard::before {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 .rt-BaseCard:where([data-material='solid'],[data-panel-background='solid'])::before {
     backdrop-filter: none;
 }
 .rt-BaseCard:where([data-material='translucent'],[data-panel-background='translucent'])::before {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 .rt-BaseCard:where(:-moz-any-link,button,label) {
     cursor: pointer;
@@ -5835,6 +5836,7 @@
             box-shadow: inset 0 0 0 var(--base-card-border-width) color-mix(in srgb, var(--v-border-active-a) calc(var(--material-alpha) * 40%), var(--v-border-active) var(--material-blend));
 }
 .rt-BaseCard:where(.rt-variant-ghost) {
+    --backdrop-filter-components-enabled: none;
     --card-border-width: 0px;
     --v-bg-hover: var(--gray-3);
     --v-bg-hover-a: var(--gray-a3);
@@ -5869,14 +5871,14 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseCard:where(.rt-variant-ghost) {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 .rt-BaseCard:where(.rt-variant-ghost):where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
 }
 .rt-BaseCard:where(.rt-variant-ghost):where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 @media (hover: hover) {
     .rt-BaseCard:where(.rt-variant-ghost):where(:-moz-any-link,button,label):where(:hover) {
@@ -6059,7 +6061,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseCheckboxRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseCheckboxRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -6067,7 +6069,7 @@
 }
 .rt-BaseCheckboxRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseCheckboxRoot::before {
     content: '';
@@ -7128,6 +7130,7 @@
     }
 }
 .rt-BaseMenuContent {
+    --backdrop-filter-components-enabled: none;
     --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
     --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
     --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
@@ -9068,7 +9071,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-TextFieldRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-TextFieldRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -9076,7 +9079,7 @@
 }
 .rt-TextFieldRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 @supports selector(:has(*)) {
     .rt-TextFieldRoot:where(:has(.rt-TextFieldInput:focus)) {
@@ -10435,10 +10438,10 @@
     line-height: var(--line-height);
 }
 .rt-Heading:where(.rt-r-ff-sans) {
-    font-family: var(--default-font-family-sans);
+    font-family: var(--font-sans);
 }
 .rt-Heading:where(.rt-r-ff-mono) {
-    font-family: var(--default-font-family-mono);
+    font-family: var(--font-mono);
 }
 .rt-Heading:where(.rt-r-ff-serif) {
     font-family: var(--font-serif);
@@ -12523,6 +12526,7 @@
     }
 }
 .rt-PopoverContent {
+    --backdrop-filter-components-enabled: none;
     background-color: var(--color-panel);
     backdrop-filter: var(--backdrop-filter-panel);
     -webkit-box-shadow: var(--shadow-5);
@@ -12752,7 +12756,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-ProgressRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ProgressRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -12760,13 +12764,15 @@
 }
 .rt-ProgressRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ProgressIndicator {
     display: block;
     height: var(--position-full);
-    width: max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height));
+    width: var(--position-full);
     border-radius: var(--progress-indicator-radius);
+    -webkit-transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
+            transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
     -webkit-transition: var(--transition-progress);
     transition: var(--transition-progress);
 }
@@ -12784,38 +12790,48 @@
 }
 @-webkit-keyframes rt-progress-indicator-indeterminate-grow {
     0% {
-        width: calc(var(--progress-scale-initial) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
     }
     20% {
-        width: calc(var(--progress-scale-step-1) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
     }
     30% {
-        width: calc(var(--progress-scale-step-2) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
     }
     40%,
   50% {
-        width: calc(var(--progress-scale-step-3) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
     }
     100% {
-        width: calc(var(--progress-scale-final) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
     }
 }
 @keyframes rt-progress-indicator-indeterminate-grow {
     0% {
-        width: calc(var(--progress-scale-initial) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
     }
     20% {
-        width: calc(var(--progress-scale-step-1) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-step-1) * 100%));
     }
     30% {
-        width: calc(var(--progress-scale-step-2) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-step-2) * 100%));
     }
     40%,
   50% {
-        width: calc(var(--progress-scale-step-3) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-step-3) * 100%));
     }
     100% {
-        width: calc(var(--progress-scale-final) * 100%);
+        -webkit-transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
+                transform: translateX(calc(-100% + var(--progress-scale-final) * 100%));
     }
 }
 .rt-ProgressRoot:where(.rt-r-size-1) {
@@ -13195,7 +13211,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseRadioRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseRadioRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -13203,7 +13219,7 @@
 }
 .rt-BaseRadioRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseRadioRoot:where(:disabled,[data-disabled]) {
     cursor: var(--cursor-disabled);
@@ -14110,7 +14126,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SegmentedControlRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SegmentedControlRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -14118,7 +14134,7 @@
 }
 .rt-SegmentedControlRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-PopoverContent,.rt-BaseDialogContent,.rt-BaseMenuContent,.rt-DropdownMenuContent,.rt-ContextMenuContent,.rt-AlertDialogContent,.rt-HoverCardContent,.rt-TooltipContent,.rt-Card) .rt-SegmentedControlRoot {
     backdrop-filter: none !important;
@@ -15187,7 +15203,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SelectTrigger {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SelectTrigger:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -15195,7 +15211,7 @@
 }
 .rt-SelectTrigger:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SelectTrigger:where(.rt-high-contrast) :where(.rt-SelectTriggerInner) {
     color: var(--accent-12);
@@ -15226,6 +15242,7 @@
     height: var(--trigger-icon-size-default);
 }
 .rt-SelectContent {
+    --backdrop-filter-components-enabled: none;
     --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
     --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
     --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
@@ -16759,6 +16776,7 @@
     height: 100%;
 }
 .rt-SidebarContainer {
+    --backdrop-filter-components-enabled: none;
     --sidebar-base-border-radius: 0;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -19012,18 +19030,21 @@
             flex-direction: column;
     height: 100%;
     overflow: hidden;
-    -webkit-transition: width var(--motion-duration-small) var(--motion-ease-standard);
-    transition: width var(--motion-duration-small) var(--motion-ease-standard);
+    position: relative;
+    z-index: 2;
 }
 .rt-ShellRail[data-mode='expanded'] {
     width: var(--rail-size, 64px);
 }
 .rt-ShellRail[data-mode='collapsed'] {
     width: 0px;
-    -webkit-transition-delay: var(--motion-duration-small);
-            transition-delay: var(--motion-duration-small);
+    -webkit-transition: width 0s var(--motion-duration-small);
+    transition: width 0s var(--motion-duration-small);
 }
 .rt-ShellRailContent {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -19031,24 +19052,27 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    width: var(--rail-size, 64px);
+    width: 100%;
     height: 100%;
     gap: var(--space-2);
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+}
+:where([dir='rtl']) .rt-ShellRailContent {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
 }
 .rt-ShellRailContent[data-visible] {
     opacity: 1;
     pointer-events: auto;
-}
-.rt-ShellRail[data-mode='collapsed'] .rt-ShellRailContent {
-    opacity: 0;
-    width: 0;
-    visibility: hidden;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
 }
 .rt-ShellPanel {
     display: -webkit-box;
@@ -19062,18 +19086,19 @@
     overflow: visible;
     position: relative;
     z-index: 1;
-    -webkit-transition: width var(--motion-duration-small) var(--motion-ease-standard);
-    transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellPanel[data-visible] {
     width: var(--panel-size, 288px);
 }
 .rt-ShellPanel:not([data-visible]) {
     width: 0px;
-    -webkit-transition-delay: var(--motion-duration-small);
-            transition-delay: var(--motion-duration-small);
+    -webkit-transition: width 0s var(--motion-duration-small);
+    transition: width 0s var(--motion-duration-small);
 }
 .rt-ShellPanelContent {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -19081,24 +19106,31 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    width: var(--panel-size, 288px);
+    width: 100%;
     height: 100%;
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+}
+:where([dir='rtl']) .rt-ShellPanelContent {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
 }
 .rt-ShellPanelContent[data-visible] {
     opacity: 1;
     pointer-events: auto;
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
 }
-.rt-ShellPanel:not([data-visible]) .rt-ShellPanelContent {
-    opacity: 0;
-    width: 0;
-    visibility: hidden;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+:where([dir='rtl']) .rt-ShellPanelContent[data-visible] {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
 }
 .rt-ShellSidebar {
     display: -webkit-box;
@@ -19112,8 +19144,6 @@
     overflow: visible;
     position: relative;
     z-index: 1;
-    -webkit-transition: width var(--motion-duration-small) var(--motion-ease-standard);
-    transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellSidebar[data-mode='expanded'] {
     width: var(--sidebar-size, 288px);
@@ -19121,15 +19151,15 @@
 .rt-ShellSidebar[data-mode='thin'] {
     width: var(--sidebar-thin-size, 64px);
 }
-.rt-ShellSidebar[data-mode='thin'] .rt-ShellSidebarContent {
-    width: var(--sidebar-thin-size, 64px);
-}
 .rt-ShellSidebar[data-mode='collapsed'] {
     width: 0px;
-    -webkit-transition-delay: var(--motion-duration-small);
-            transition-delay: var(--motion-duration-small);
+    -webkit-transition: width 0s var(--motion-duration-small);
+    transition: width 0s var(--motion-duration-small);
 }
 .rt-ShellSidebarContent {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -19142,8 +19172,16 @@
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+}
+:where([dir='rtl']) .rt-ShellSidebarContent {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
 }
 .rt-ShellSidebar[data-mode='thin'] .rt-ShellResizer {
     display: none;
@@ -19151,6 +19189,8 @@
 .rt-ShellSidebarContent[data-visible] {
     opacity: 1;
     pointer-events: auto;
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
 }
 .rt-ShellSidebarContent[data-phase='hiding'] {
     opacity: 0;
@@ -19165,13 +19205,6 @@
     -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
     transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
 }
-.rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
-    opacity: 0;
-    width: 0;
-    visibility: hidden;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-}
 .rt-ShellSidebar[data-presentation='stacked'] {
     position: absolute;
     inset-block: 0;
@@ -19219,18 +19252,19 @@
     overflow: visible;
     position: relative;
     z-index: 1;
-    -webkit-transition: width var(--motion-duration-small) var(--motion-ease-standard);
-    transition: width var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellInspector[data-mode='expanded'] {
     width: var(--inspector-size, 320px);
 }
 .rt-ShellInspector[data-mode='collapsed'] {
     width: 0px;
-    -webkit-transition-delay: var(--motion-duration-small);
-            transition-delay: var(--motion-duration-small);
+    -webkit-transition: width 0s var(--motion-duration-small);
+    transition: width 0s var(--motion-duration-small);
 }
 .rt-ShellInspectorContent {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -19238,24 +19272,27 @@
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    width: var(--inspector-size, 320px);
+    width: 100%;
     height: 100%;
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+}
+:where([dir='rtl']) .rt-ShellInspectorContent {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
 }
 .rt-ShellInspectorContent[data-visible] {
     opacity: 1;
     pointer-events: auto;
-}
-.rt-ShellInspector[data-mode='collapsed'] .rt-ShellInspectorContent {
-    opacity: 0;
-    width: 0;
-    visibility: hidden;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
 }
 .rt-ShellBottom {
     display: -webkit-box;
@@ -19270,18 +19307,19 @@
     -ms-flex-negative: 0;
         flex-shrink: 0;
     position: relative;
-    -webkit-transition: height var(--motion-duration-small) var(--motion-ease-standard);
-    transition: height var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellBottom[data-mode='expanded'] {
     height: var(--bottom-size, 200px);
 }
 .rt-ShellBottom[data-mode='collapsed'] {
     height: 0px;
-    -webkit-transition-delay: var(--motion-duration-small);
-            transition-delay: var(--motion-duration-small);
+    -webkit-transition: height 0s var(--motion-duration-small);
+    transition: height 0s var(--motion-duration-small);
 }
 .rt-ShellBottomContent {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -19290,16 +19328,22 @@
         -ms-flex-direction: column;
             flex-direction: column;
     width: 100%;
-    height: var(--bottom-size, 200px);
+    height: 100%;
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
-    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
-    transition: opacity var(--motion-duration-small) var(--motion-ease-standard) var(--motion-duration-small);
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+    -webkit-transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard);
+    transition: transform var(--motion-duration-small) var(--motion-ease-standard), opacity var(--motion-duration-small) var(--motion-ease-standard), -webkit-transform var(--motion-duration-small) var(--motion-ease-standard);
 }
 .rt-ShellBottomContent[data-visible] {
     opacity: 1;
     pointer-events: auto;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
 }
 .rt-ShellPanel[data-resizing],
 .rt-ShellSidebar[data-resizing],
@@ -19560,7 +19604,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SliderRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SliderRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -19568,7 +19612,7 @@
 }
 .rt-SliderRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SliderRoot:where([data-orientation='horizontal']) {
     width: -webkit-fill-available;
@@ -20190,7 +20234,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SwitchRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SwitchRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -20198,7 +20242,7 @@
 }
 .rt-SwitchRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SwitchRoot::before {
     content: '';
@@ -20728,7 +20772,7 @@
     :where(.rt-BaseTabList[data-panel-background='translucent']) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--gray-a3);
         backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
     }
     :where(.rt-PopoverContent,.rt-BaseDialogContent,.rt-BaseMenuContent,.rt-DropdownMenuContent,.rt-ContextMenuContent,.rt-AlertDialogContent,.rt-HoverCardContent,.rt-TooltipContent,.rt-Card) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
         backdrop-filter: none !important;
@@ -20748,7 +20792,7 @@
     :where(.rt-BaseTabList[data-panel-background='translucent']) :is(.rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--accent-a3);
         backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
     }
 }
 .rt-BaseTabListTrigger:where([data-state='active'],[data-active]) {
@@ -21120,6 +21164,7 @@
     }
 }
 .rt-TableRoot:where(.rt-variant-surface) {
+    --backdrop-filter-components-enabled: none;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     border: 1px solid var(--gray-a5);
@@ -21171,7 +21216,7 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-TextAreaRoot {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-TextAreaRoot:where([data-panel-background='solid'],[data-material='solid']) {
     backdrop-filter: none;
@@ -21179,7 +21224,7 @@
 }
 .rt-TextAreaRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-TextAreaRoot:where(:focus-within) {
     outline: 2px solid var(--v-focus-color, var(--focus-8));
@@ -22314,7 +22359,7 @@
 }
 .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox {
     backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ChatbarRoot:where([data-panel-background='solid'], [data-material='solid']) .rt-ChatbarBox {
     backdrop-filter: none;