@womp/kookie-ui 0.3.24 → 0.3.26

package/styles.css

@@ -3548,6 +3548,9 @@
   --backdrop-blur-components: var(--blur-4);
   --backdrop-blur-panel: var(--blur-5);
   --backdrop-blur-dialog: var(--blur-6);
+  --backdrop-filter-components-enabled: blur(var(--backdrop-blur-components));
+  --backdrop-filter-panel-enabled: blur(var(--backdrop-blur-panel));
+  --backdrop-filter-dialog-enabled: blur(var(--backdrop-blur-dialog));
   --surface-opacity-light: var(--opacity-5);
   --surface-opacity-heavy: var(--opacity-6);
   --surface-opacity-dark: var(--opacity-7);
@@ -3814,9 +3817,9 @@
   --color-panel: var(--color-panel-translucent);
   --color-surface: var(--color-surface-translucent);
   --color-dialog: var(--color-dialog-translucent);
-  --backdrop-filter-panel: blur(var(--backdrop-blur-panel));
-  --backdrop-filter-components: blur(var(--backdrop-blur-components));
-  --backdrop-filter-dialog: blur(var(--backdrop-blur-dialog));
+  --backdrop-filter-panel: var(--backdrop-filter-panel-enabled);
+  --backdrop-filter-components: var(--backdrop-filter-components-enabled);
+  --backdrop-filter-dialog: var(--backdrop-filter-dialog-enabled);
   --material-blend: 60%;
   --material-alpha: 1;
 }
@@ -5031,6 +5034,16 @@
 }
 [data-blur='none']{
   --blur-factor: 0;
+  --backdrop-filter-components-enabled: none;
+  --backdrop-filter-panel-enabled: none;
+  --backdrop-filter-dialog-enabled: none;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .radix-themes{
+    --backdrop-filter-components-enabled: none;
+    --backdrop-filter-panel-enabled: none;
+    --backdrop-filter-dialog-enabled: none;
+  }
 }
 [data-blur='small']{
   --blur-factor: 0.75;
@@ -6586,7 +6599,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;
@@ -6594,7 +6607,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);
@@ -6703,7 +6716,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);
@@ -6724,7 +6737,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);
@@ -6743,7 +6756,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);
@@ -6765,7 +6778,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;
@@ -7280,6 +7293,7 @@
   }
 }
 .rt-BaseDialogContent{
+  --backdrop-filter-components-enabled: none;
   margin: auto;
   width: 100%;
   z-index: 1;
@@ -7505,7 +7519,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;
@@ -7513,7 +7527,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),
@@ -8407,7 +8421,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%;
@@ -8419,7 +8433,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{
@@ -8873,7 +8887,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;
@@ -8881,7 +8895,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{
@@ -10010,7 +10024,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%;
@@ -10022,7 +10036,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);
@@ -10465,14 +10479,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;
@@ -10878,6 +10892,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);
@@ -10912,14 +10927,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){
@@ -11102,7 +11117,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;
@@ -11110,7 +11125,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: '';
@@ -12171,6 +12186,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);
@@ -14111,7 +14127,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;
@@ -14119,7 +14135,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)){
@@ -17566,6 +17582,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);
@@ -17795,7 +17812,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;
@@ -17803,13 +17820,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);
 }
@@ -17827,38 +17846,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){
@@ -18238,7 +18267,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;
@@ -18246,7 +18275,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);
@@ -19153,7 +19182,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;
@@ -19161,7 +19190,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;
@@ -20230,7 +20259,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;
@@ -20238,7 +20267,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);
@@ -20269,6 +20298,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);
@@ -21802,6 +21832,7 @@
   height: 100%;
 }
 .rt-SidebarContainer{
+  --backdrop-filter-components-enabled: none;
   --sidebar-base-border-radius: 0;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -24055,18 +24086,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;
@@ -24074,24 +24108,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;
@@ -24105,18 +24142,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;
@@ -24124,24 +24162,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;
@@ -24155,8 +24200,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);
@@ -24164,15 +24207,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;
@@ -24185,8 +24228,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;
@@ -24194,6 +24245,8 @@
 .rt-ShellSidebarContent[data-visible]{
   opacity: 1;
   pointer-events: auto;
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
 }
 .rt-ShellSidebarContent[data-phase='hiding']{
   opacity: 0;
@@ -24208,13 +24261,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;
@@ -24262,18 +24308,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;
@@ -24281,24 +24328,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;
@@ -24313,18 +24363,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;
@@ -24333,16 +24384,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],
@@ -24603,7 +24660,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;
@@ -24611,7 +24668,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;
@@ -25233,7 +25290,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;
@@ -25241,7 +25298,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: '';
@@ -25771,7 +25828,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;
@@ -25791,7 +25848,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]){
@@ -26163,6 +26220,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);
@@ -26214,7 +26272,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;
@@ -26222,7 +26280,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));
@@ -27357,7 +27415,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;