npm - @kushagradhawan/kookie-ui - Versions diffs - 0.3.21 → 0.3.23 - Mend

@kushagradhawan/kookie-ui 0.3.21 → 0.3.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (548) hide show

package/components.css CHANGED Viewed

@@ -1520,19 +1520,16 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-AccordionRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AccordionRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-AccordionRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AccordionRoot:where(.rt-r-size-1) {
     border-radius: var(--radius-1);
@@ -1627,24 +1624,21 @@
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
             box-shadow: inset 0 0 0 1px var(--accent-a6);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
+    backdrop-filter: var(--backdrop-filter-components);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-surface)):where([data-panel-background='solid'],[data-material='solid']) {
     background-color: var(--accent-2);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
             box-shadow: inset 0 0 0 1px var(--accent-6);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :where(.rt-AccordionRoot:where(.rt-variant-surface)):where([data-panel-background='translucent'],[data-material='translucent']) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
             box-shadow: inset 0 0 0 1px var(--accent-a6);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-classic)) {
     background-color: var(--color-surface-solid);
@@ -1655,20 +1649,17 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) :where(.rt-AccordionRoot:where(.rt-variant-classic)) {
     background-color: var(--color-surface-translucent);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
+    backdrop-filter: var(--backdrop-filter-components);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-classic)):where([data-panel-background='solid'],[data-material='solid']) {
     background-color: var(--color-surface-solid);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :where(.rt-AccordionRoot:where(.rt-variant-classic)):where([data-panel-background='translucent'],[data-material='translucent']) {
     background-color: var(--color-surface-translucent);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-soft)) {
     background-color: var(--accent-2);
@@ -1677,20 +1668,17 @@
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) :where(.rt-AccordionRoot:where(.rt-variant-soft)) {
     background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
+    backdrop-filter: var(--backdrop-filter-components);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-soft)):where([data-panel-background='solid'],[data-material='solid']) {
     background-color: var(--accent-2);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :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%);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-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);
@@ -1705,16 +1693,14 @@
 :where(.rt-AccordionRoot:where(.rt-variant-outline)):where([data-panel-background='solid'],[data-material='solid']) {
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
             box-shadow: inset 0 0 0 1px var(--accent-6);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :where(.rt-AccordionRoot:where(.rt-variant-outline)):where([data-panel-background='translucent'],[data-material='translucent']) {
     -webkit-box-shadow: inset 0 0 0 1px var(--accent-a6);
             box-shadow: inset 0 0 0 1px var(--accent-a6);
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 :where(.rt-AccordionRoot:where(.rt-variant-ghost)) {
     background-color: transparent;
@@ -2054,7 +2040,7 @@
                 animation: none;
     }
 }
-@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+@supports not (backdrop-filter: blur(1px)) {
     :where(.rt-AccordionRoot[data-material='translucent']) {
         background-color: var(--accent-2);
     }
@@ -2078,8 +2064,7 @@
     }
     :where(.rt-AccordionRoot[data-material='translucent']) {
         background-color: Canvas;
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
     }
 }
 @media (hover: hover) {
@@ -2173,15 +2158,6 @@
     position: absolute;
     inset: 0;
 }
-.rt-BaseDialogScroll--detached {
-    position: fixed;
-    inset: 0;
-    z-index: 100;
-}
-.rt-BaseDialogScroll--detached:where(:has([data-state='closed'])) {
-    pointer-events: none;
-    visibility: hidden;
-}
 .rt-BaseDialogScrollPadding {
     -webkit-box-flex: 1;
         -ms-flex-positive: 1;
@@ -2239,6 +2215,7 @@
     }
 }
 .rt-BaseDialogContent {
+    --backdrop-filter-components-enabled: none;
     margin: auto;
     width: 100%;
     z-index: 1;
@@ -2258,18 +2235,15 @@
     outline: none;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseDialogContent {
-    -webkit-backdrop-filter: var(--backdrop-filter-dialog);
-            backdrop-filter: var(--backdrop-filter-dialog);
+    backdrop-filter: var(--backdrop-filter-dialog);
 }
 .rt-BaseDialogContent:where([data-panel-background='solid'],[data-material='solid']) {
     background-color: var(--color-dialog-solid);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
 }
 .rt-BaseDialogContent:where([data-panel-background='translucent'],[data-material='translucent']) {
     background-color: var(--color-dialog-translucent);
-    -webkit-backdrop-filter: var(--backdrop-filter-dialog);
-            backdrop-filter: var(--backdrop-filter-dialog);
+    backdrop-filter: var(--backdrop-filter-dialog);
 }
 .rt-BaseDialogContent:where(.rt-r-size-1) {
     --dialog-content-padding: var(--space-5);
@@ -2401,7 +2375,7 @@
                 animation: rt-dialog-content-hide var(--motion-duration-small) var(--motion-spring-snappy);
     }
 }
-@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+@supports not (backdrop-filter: blur(1px)) {
     :where(.rt-BaseDialogContent[data-material='translucent']),
   :where(.rt-BaseDialogContent[data-panel-background='translucent']) {
         background-color: var(--color-dialog-solid);
@@ -2466,19 +2440,16 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-AvatarRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AvatarRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-AvatarRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-AvatarRoot:where(button),
 .rt-AvatarRoot:where(a),
@@ -3393,23 +3364,20 @@
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-Badge {
     --material-blend: 60%;
     --material-alpha: 1;
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-Badge:where([data-panel-background='solid'],[data-material='solid']) {
     --material-blend: 100%;
     --material-alpha: 0;
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-Badge:where([data-panel-background='translucent'],[data-material='translucent']) {
     --material-blend: 60%;
     --material-alpha: 1;
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 @media (prefers-reduced-motion: reduce) {
     .rt-Badge {
@@ -3862,19 +3830,16 @@
             flex-direction: row-reverse;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseButton {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseButton:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-BaseButton:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 @media (forced-colors: active) {
     .rt-BaseButton {
@@ -3903,8 +3868,7 @@
     .rt-BaseButton {
         -webkit-transition: none;
         transition: none;
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
         -webkit-animation: none;
                 animation: none;
     }
@@ -5003,23 +4967,20 @@
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-CalloutRoot {
     --material-blend: 60%;
     --material-alpha: 1;
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-CalloutRoot:where([data-panel-background='solid'],[data-material='solid']) {
     --material-blend: 100%;
     --material-alpha: 0;
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-CalloutRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
     --material-blend: 60%;
     --material-alpha: 1;
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-CalloutRoot:where(.rt-high-contrast) {
     color: var(--accent-12);
@@ -5461,18 +5422,15 @@
     z-index: -1;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseCard::before {
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 .rt-BaseCard:where([data-material='solid'],[data-panel-background='solid'])::before {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
 }
 .rt-BaseCard:where([data-material='translucent'],[data-panel-background='translucent'])::before {
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 .rt-BaseCard:where(:-moz-any-link,button,label) {
     cursor: pointer;
@@ -5878,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);
@@ -5911,18 +5870,15 @@
     outline-offset: var(--v-focus-offset);
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseCard:where(.rt-variant-ghost) {
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    backdrop-filter: var(--backdrop-filter-panel);
+    --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
 }
 .rt-BaseCard:where(.rt-variant-ghost):where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
 }
 .rt-BaseCard:where(.rt-variant-ghost):where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
-    --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
+    backdrop-filter: var(--backdrop-filter-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) {
@@ -5972,8 +5928,7 @@
     }
 }
 :where(.rt-PopoverContent,.rt-BaseDialogContent,.rt-BaseMenuContent,.rt-DropdownMenuContent,.rt-ContextMenuContent,.rt-AlertDialogContent,.rt-HoverCardContent,.rt-TooltipContent,.rt-Card) .rt-BaseCard:where(.rt-variant-ghost) {
-    -webkit-backdrop-filter: none !important;
-            backdrop-filter: none !important;
+    backdrop-filter: none !important;
 }
 .rt-BaseCard:where(.rt-variant-classic) {
     --card-border-width: 1px;
@@ -6105,19 +6060,16 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseCheckboxRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseCheckboxRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-BaseCheckboxRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseCheckboxRoot::before {
     content: '';
@@ -7178,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);
@@ -7194,8 +7147,7 @@
     overflow: hidden;
     z-index: 200;
     background-color: var(--color-panel);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
     -webkit-box-shadow: var(--shadow-5);
             box-shadow: var(--shadow-5);
     -webkit-transition: var(--transition-background-blur);
@@ -7211,19 +7163,16 @@
         -webkit-transition: none;
         transition: none;
         will-change: auto;
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
     }
 }
 .rt-BaseMenuContent:where([data-panel-background='solid']) {
     background-color: var(--color-panel-solid);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
 }
 .rt-BaseMenuContent:where([data-panel-background='translucent']) {
     background-color: var(--color-panel-translucent);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
 }
 .rt-BaseMenuViewport {
     -webkit-box-flex: 1;
@@ -7281,8 +7230,7 @@
     .rt-BaseMenuItem {
         -webkit-transition: none;
         transition: none;
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
     }
 }
 .rt-BaseMenuShortcut {
@@ -8067,8 +8015,7 @@
     .rt-BaseMenuContent:where(.rt-variant-solid,.rt-variant-soft) :where(.rt-BaseMenuSubTrigger) {
         -webkit-transition: none;
         transition: none;
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
     }
 }
 :where([data-panel-background='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-solid,.rt-variant-soft) :where(.rt-BaseMenuSubTrigger)) {
@@ -8087,8 +8034,7 @@
 }
 :is(.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuSubTrigger[data-state='open'])):where([data-panel-background='solid']) {
     background-color: var(--gray-3);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuSubTrigger[data-state='open'])):where([data-panel-background='translucent']) {
@@ -8138,8 +8084,7 @@
 }
 :is(.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuSubTrigger[data-state='open'])):where([data-panel-background='solid']) {
     background-color: var(--accent-3);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuSubTrigger[data-state='open'])):where([data-panel-background='translucent']) {
@@ -8153,8 +8098,7 @@
 }
 :is(.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted])):where([data-panel-background='solid']) {
     background-color: var(--accent-4);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted])):where([data-panel-background='translucent']) {
@@ -8891,13 +8835,11 @@
     }
 }
 .rt-DialogOverlay::before {
-    -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
-            backdrop-filter: var(--backdrop-filter-components) !important;
+    backdrop-filter: var(--backdrop-filter-components) !important;
 }
-@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+@supports not (backdrop-filter: blur(1px)) {
     .rt-DialogOverlay::before {
-        -webkit-backdrop-filter: none !important;
-                backdrop-filter: none !important;
+        backdrop-filter: none !important;
     }
 }
 .rt-DropdownMenuContent {
@@ -9128,19 +9070,16 @@
     }
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-TextFieldRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-TextFieldRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-TextFieldRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 @supports selector(:has(*)) {
     .rt-TextFieldRoot:where(:has(.rt-TextFieldInput:focus)) {
@@ -12587,9 +12526,9 @@
     }
 }
 .rt-PopoverContent {
+    --backdrop-filter-components-enabled: none;
     background-color: var(--color-panel);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
     -webkit-box-shadow: var(--shadow-5);
             box-shadow: var(--shadow-5);
     min-width: var(--radix-popover-trigger-width);
@@ -12618,13 +12557,11 @@
 }
 .rt-PopoverContent:where([data-panel-background='solid']) {
     background-color: var(--color-panel-solid);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
 }
 .rt-PopoverContent:where([data-panel-background='translucent']) {
     background-color: var(--color-panel-translucent);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
 }
 .rt-PopoverContent:where([data-has-toolbar]) {
     padding-top: var(--popover-toolbar-offset, var(--popover-content-padding));
@@ -12818,25 +12755,24 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-ProgressRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ProgressRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-ProgressRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-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);
 }
@@ -12854,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) {
@@ -13264,19 +13210,16 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-BaseRadioRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseRadioRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-BaseRadioRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-BaseRadioRoot:where(:disabled,[data-disabled]) {
     cursor: var(--cursor-disabled);
@@ -13897,13 +13840,11 @@
     border-end-end-radius: 0;
 }
 .rt-SheetOverlay::before {
-    -webkit-backdrop-filter: var(--backdrop-filter-components) !important;
-            backdrop-filter: var(--backdrop-filter-components) !important;
+    backdrop-filter: var(--backdrop-filter-components) !important;
 }
-@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+@supports not (backdrop-filter: blur(1px)) {
     .rt-SheetOverlay::before {
-        -webkit-backdrop-filter: none !important;
-                backdrop-filter: none !important;
+        backdrop-filter: none !important;
     }
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -14184,23 +14125,19 @@
     grid-auto-columns: minmax(var(--segmented-control-height), 1fr);
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SegmentedControlRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SegmentedControlRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-SegmentedControlRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-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 {
-    -webkit-backdrop-filter: none !important;
-            backdrop-filter: none !important;
+    backdrop-filter: none !important;
 }
 .rt-SegmentedControlRoot:where([data-disabled]) {
     color: var(--gray-a8);
@@ -15265,19 +15202,16 @@
     color: var(--gray-12);
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SelectTrigger {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SelectTrigger:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-SelectTrigger:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SelectTrigger:where(.rt-high-contrast) :where(.rt-SelectTriggerInner) {
     color: var(--accent-12);
@@ -15308,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);
@@ -15315,8 +15250,7 @@
     overflow: hidden;
     z-index: 200;
     background-color: var(--color-panel);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
     -webkit-box-shadow: var(--shadow-5);
             box-shadow: var(--shadow-5);
 }
@@ -16842,6 +16776,7 @@
     height: 100%;
 }
 .rt-SidebarContainer {
+    --backdrop-filter-components-enabled: none;
     --sidebar-base-border-radius: 0;
     display: -webkit-box;
     display: -ms-flexbox;
@@ -16853,8 +16788,7 @@
     height: 100%;
     width: 100%;
     background-color: var(--color-panel);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
     border-radius: inherit;
     -webkit-box-flex: 1;
         -ms-flex: 1;
@@ -16900,8 +16834,7 @@
             box-sizing: border-box;
     min-height: 0;
     background-color: transparent !important;
-    -webkit-backdrop-filter: none !important;
-            backdrop-filter: none !important;
+    backdrop-filter: none !important;
     -webkit-box-shadow: none !important;
             box-shadow: none !important;
     border-radius: 0 !important;
@@ -17527,12 +17460,10 @@
 }
 :where([data-panel-background='translucent']) .rt-SidebarContainer {
     --sidebar-border-color: var(--gray-a6);
-    -webkit-backdrop-filter: var(--backdrop-filter-panel);
-            backdrop-filter: var(--backdrop-filter-panel);
+    backdrop-filter: var(--backdrop-filter-panel);
 }
 .rt-SidebarContainer:where([data-panel-background='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-panel: none;
 }
 .rt-SidebarContainer:where(.rt-variant-outline) {
@@ -18577,8 +18508,7 @@
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-solid),.rt-SidebarContent:where(.rt-menu-variant-solid),.rt-SidebarFooter:where(.rt-menu-variant-solid)) :where(.rt-SidebarMenuSubTrigger[data-state='open'])):where([data-panel-background='solid']) {
     background-color: var(--gray-3);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-solid),.rt-SidebarContent:where(.rt-menu-variant-solid),.rt-SidebarFooter:where(.rt-menu-variant-solid)) :where(.rt-SidebarMenuSubTrigger[data-state='open'])):where([data-panel-background='translucent']) {
@@ -18702,8 +18632,7 @@
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-soft),.rt-SidebarContent:where(.rt-menu-variant-soft),.rt-SidebarFooter:where(.rt-menu-variant-soft)) :where(.rt-SidebarMenuSubTrigger[data-state='open'])):where([data-panel-background='solid']) {
     background-color: var(--accent-3);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-soft),.rt-SidebarContent:where(.rt-menu-variant-soft),.rt-SidebarFooter:where(.rt-menu-variant-soft)) :where(.rt-SidebarMenuSubTrigger[data-state='open'])):where([data-panel-background='translucent']) {
@@ -18721,8 +18650,7 @@
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-soft),.rt-SidebarContent:where(.rt-menu-variant-soft),.rt-SidebarFooter:where(.rt-menu-variant-soft)) :where(.rt-SidebarMenuButton:where([data-highlighted],:hover):not([data-disabled]))):where([data-panel-background='solid']) {
     background-color: var(--accent-4);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-soft),.rt-SidebarContent:where(.rt-menu-variant-soft),.rt-SidebarFooter:where(.rt-menu-variant-soft)) :where(.rt-SidebarMenuButton:where([data-highlighted],:hover):not([data-disabled]))):where([data-panel-background='translucent']) {
@@ -18743,8 +18671,7 @@
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-soft),.rt-SidebarContent:where(.rt-menu-variant-soft),.rt-SidebarFooter:where(.rt-menu-variant-soft)) :where(.rt-SidebarMenuButton[data-active])):where([data-panel-background='solid']) {
     background-color: var(--accent-3);
     color: var(--accent-12);
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 :is(:is(.rt-SidebarHeader:where(.rt-menu-variant-soft),.rt-SidebarContent:where(.rt-menu-variant-soft),.rt-SidebarFooter:where(.rt-menu-variant-soft)) :where(.rt-SidebarMenuButton[data-active])):where([data-panel-background='translucent']) {
@@ -19103,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;
@@ -19122,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;
@@ -19153,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;
@@ -19172,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;
@@ -19203,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);
@@ -19212,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;
@@ -19233,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;
@@ -19242,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;
@@ -19256,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;
@@ -19310,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;
@@ -19329,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;
@@ -19361,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;
@@ -19381,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],
@@ -19650,19 +19603,16 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SliderRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SliderRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-SliderRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SliderRoot:where([data-orientation='horizontal']) {
     width: -webkit-fill-available;
@@ -20283,19 +20233,16 @@
     isolation: isolate;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-SwitchRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SwitchRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-SwitchRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-SwitchRoot::before {
     content: '';
@@ -20815,44 +20762,37 @@
     }
     :where([data-panel-background='translucent']) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--gray-a3);
-        -webkit-backdrop-filter: var(--backdrop-filter-components);
-                backdrop-filter: var(--backdrop-filter-components);
+        backdrop-filter: var(--backdrop-filter-components);
     }
     :where(.rt-BaseTabList[data-panel-background='solid']) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--gray-a3);
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
         --backdrop-filter-components: none;
     }
     :where(.rt-BaseTabList[data-panel-background='translucent']) :is(.rt-BaseTabListTrigger:where(:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--gray-a3);
-        -webkit-backdrop-filter: var(--backdrop-filter-components);
-                backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        backdrop-filter: var(--backdrop-filter-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)) {
-        -webkit-backdrop-filter: none !important;
-                backdrop-filter: none !important;
+        backdrop-filter: none !important;
     }
     .rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
         background-color: var(--accent-a3);
     }
     :where([data-panel-background='translucent']) :is(.rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--accent-a3);
-        -webkit-backdrop-filter: var(--backdrop-filter-components);
-                backdrop-filter: var(--backdrop-filter-components);
+        backdrop-filter: var(--backdrop-filter-components);
     }
     :where(.rt-BaseTabList[data-panel-background='solid']) :is(.rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--accent-a3);
-        -webkit-backdrop-filter: none;
-                backdrop-filter: none;
+        backdrop-filter: none;
         --backdrop-filter-components: none;
     }
     :where(.rt-BaseTabList[data-panel-background='translucent']) :is(.rt-BaseTabListTrigger:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner)) {
         background-color: var(--accent-a3);
-        -webkit-backdrop-filter: var(--backdrop-filter-components);
-                backdrop-filter: var(--backdrop-filter-components);
-        --backdrop-filter-components: blur(var(--backdrop-blur-components));
+        backdrop-filter: var(--backdrop-filter-components);
+        --backdrop-filter-components: var(--backdrop-filter-components-enabled);
     }
 }
 .rt-BaseTabListTrigger:where([data-state='active'],[data-active]) {
@@ -21224,13 +21164,13 @@
     }
 }
 .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);
     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;
 }
@@ -21275,19 +21215,16 @@
     --material-alpha: 1;
 }
 :where([data-panel-background='translucent'],[data-material='translucent']) .rt-TextAreaRoot {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-TextAreaRoot:where([data-panel-background='solid'],[data-material='solid']) {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-TextAreaRoot:where([data-panel-background='translucent'],[data-material='translucent']) {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-TextAreaRoot:where(:focus-within) {
     outline: 2px solid var(--v-focus-color, var(--focus-8));
@@ -22421,13 +22358,11 @@
     isolation: isolate;
 }
 .rt-ChatbarRoot:where([data-panel-background='translucent'], [data-material='translucent']) .rt-ChatbarBox {
-    -webkit-backdrop-filter: var(--backdrop-filter-components);
-            backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
 }
 .rt-ChatbarRoot:where([data-panel-background='solid'], [data-material='solid']) .rt-ChatbarBox {
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+    backdrop-filter: none;
     --backdrop-filter-components: none;
 }
 .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {