@chakra-ui/panda-preset 3.30.0 → 3.32.0

package/dist/cjs/global-css.cjs

@@ -6,29 +6,29 @@ var def = require('./def.cjs');
 const globalCss = def.defineGlobalStyles({
   "*": {
     fontFeatureSettings: '"cv11"',
-    "--ring-inset": "var(--empty,/*!*/ /*!*/)",
+    "--ring-inset": "var(--empty, )",
     "--ring-offset-width": "0px",
     "--ring-offset-color": "#fff",
     "--ring-color": "rgba(66, 153, 225, 0.6)",
     "--ring-offset-shadow": "0 0 #0000",
     "--ring-shadow": "0 0 #0000",
-    "--brightness": "var(--empty,/*!*/ /*!*/)",
-    "--contrast": "var(--empty,/*!*/ /*!*/)",
-    "--grayscale": "var(--empty,/*!*/ /*!*/)",
-    "--hue-rotate": "var(--empty,/*!*/ /*!*/)",
-    "--invert": "var(--empty,/*!*/ /*!*/)",
-    "--saturate": "var(--empty,/*!*/ /*!*/)",
-    "--sepia": "var(--empty,/*!*/ /*!*/)",
-    "--drop-shadow": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-blur": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-brightness": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-contrast": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-grayscale": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-hue-rotate": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-invert": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-opacity": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-saturate": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-sepia": "var(--empty,/*!*/ /*!*/)",
+    "--brightness": "var(--empty, )",
+    "--contrast": "var(--empty, )",
+    "--grayscale": "var(--empty, )",
+    "--hue-rotate": "var(--empty, )",
+    "--invert": "var(--empty, )",
+    "--saturate": "var(--empty, )",
+    "--sepia": "var(--empty, )",
+    "--drop-shadow": "var(--empty, )",
+    "--backdrop-blur": "var(--empty, )",
+    "--backdrop-brightness": "var(--empty, )",
+    "--backdrop-contrast": "var(--empty, )",
+    "--backdrop-grayscale": "var(--empty, )",
+    "--backdrop-hue-rotate": "var(--empty, )",
+    "--backdrop-invert": "var(--empty, )",
+    "--backdrop-opacity": "var(--empty, )",
+    "--backdrop-saturate": "var(--empty, )",
+    "--backdrop-sepia": "var(--empty, )",
     "--global-font-mono": "fonts.mono",
     "--global-font-body": "fonts.body",
     "--global-color-border": "colors.border"

package/dist/cjs/keyframes.cjs

@@ -89,10 +89,10 @@ const keyframes = {
   },
   "collapse-width": {
     from: {
-      height: "var(--width)"
+      width: "var(--width)"
     },
     to: {
-      height: "var(--collapsed-width, 0)"
+      width: "var(--collapsed-width, 0)"
     }
   },
   "fade-in": {
@@ -254,6 +254,22 @@ const keyframes = {
     to: {
       scale: "0.95"
     }
+  },
+  marqueeX: {
+    from: {
+      transform: "translateX(0%)"
+    },
+    to: {
+      transform: "translateX(var(--marquee-translate))"
+    }
+  },
+  marqueeY: {
+    from: {
+      transform: "translateY(0%)"
+    },
+    to: {
+      transform: "translateY(var(--marquee-translate))"
+    }
   }
 };
 

package/dist/cjs/slot-recipes/action-bar.cjs

@@ -16,11 +16,9 @@ const actionBarSlotRecipe = def.defineSlotRecipe({
     positioner: {
       position: "fixed",
       display: "flex",
-      justifyContent: "center",
       pointerEvents: "none",
       insetInline: "0",
-      top: "unset",
-      bottom: "calc(env(safe-area-inset-bottom) + 20px)"
+      "--action-bar-offset": "spacing.4"
     },
     content: {
       bg: "bg.panel",
@@ -59,6 +57,33 @@ const actionBarSlotRecipe = def.defineSlotRecipe({
       borderWidth: "1px",
       borderStyle: "dashed"
     }
+  },
+  variants: {
+    placement: {
+      bottom: {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "center"
+        }
+      },
+      "bottom-start": {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "flex-start",
+          ps: "var(--action-bar-offset)"
+        }
+      },
+      "bottom-end": {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "flex-end",
+          pe: "var(--action-bar-offset)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
   }
 });
 

package/dist/cjs/slot-recipes/color-picker.cjs

@@ -97,7 +97,8 @@ const colorPickerSlotRecipe = def.defineSlotRecipe({
       width: "64",
       p: "4",
       gap: "3",
-      zIndex: "dropdown",
+      "--color-picker-z-index": "zIndex.popover",
+      zIndex: "calc(var(--color-picker-z-index) + var(--layer-index, 0))",
       _open: {
         animationStyle: "slide-fade-in",
         animationDuration: "fast"

package/dist/cjs/slot-recipes/combobox.cjs

@@ -111,7 +111,8 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
       background: "bg.panel",
       display: "flex",
       flexDirection: "column",
-      zIndex: "dropdown",
+      "--combobox-z-index": "zIndex.popover",
+      zIndex: "calc(var(--combobox-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
       outline: 0,
       maxH: "96",

package/dist/cjs/slot-recipes/dialog.cjs

@@ -43,7 +43,7 @@ const dialogSlotRecipe = def.defineSlotRecipe({
       position: "fixed",
       left: 0,
       top: 0,
-      "--dialog-z-index": "zIndex.modal",
+      "--dialog-z-index": "zIndex.popover",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       justifyContent: "center",
       overscrollBehaviorY: "none"
@@ -57,7 +57,7 @@ const dialogSlotRecipe = def.defineSlotRecipe({
       borderRadius: "l3",
       textStyle: "sm",
       my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
+      "--dialog-z-index": "zIndex.popover",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       bg: "bg.panel",
       boxShadow: "lg",

package/dist/cjs/slot-recipes/drawer.cjs

@@ -26,7 +26,7 @@ const drawerSlotRecipe = def.defineSlotRecipe({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "overlay",
+      zIndex: "var(--z-index)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -43,7 +43,8 @@ const drawerSlotRecipe = def.defineSlotRecipe({
       position: "fixed",
       insetInlineStart: 0,
       top: 0,
-      zIndex: "modal",
+      "--drawer-z-index": "zIndex.popover",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       overscrollBehaviorY: "none"
     },
     content: {
@@ -52,7 +53,8 @@ const drawerSlotRecipe = def.defineSlotRecipe({
       position: "relative",
       width: "100%",
       outline: 0,
-      zIndex: "modal",
+      "--drawer-z-index": "zIndex.popover",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       textStyle: "sm",
       maxH: "100dvh",
       color: "inherit",

package/dist/cjs/slot-recipes/hover-card.cjs

@@ -17,7 +17,8 @@ const hoverCardSlotRecipe = def.defineSlotRecipe({
       boxShadow: "lg",
       maxWidth: "80",
       borderRadius: "l3",
-      zIndex: "popover",
+      "--hover-card-z-index": "zIndex.popover",
+      zIndex: "calc(var(--hover-card-z-index) + var(--layer-index, 0))",
       transformOrigin: "var(--transform-origin)",
       outline: "0",
       _open: {

package/dist/cjs/slot-recipes/index.cjs

@@ -26,6 +26,7 @@ var fileUpload = require('./file-upload.cjs');
 var hoverCard = require('./hover-card.cjs');
 var list = require('./list.cjs');
 var listbox = require('./listbox.cjs');
+var marquee = require('./marquee.cjs');
 var menu = require('./menu.cjs');
 var nativeSelect = require('./native-select.cjs');
 var numberInput = require('./number-input.cjs');
@@ -108,7 +109,8 @@ const slotRecipes = {
   timeline: timeline.timelineSlotRecipe,
   colorPicker: colorPicker.colorPickerSlotRecipe,
   qrCode: qrCode.qrCodeSlotRecipe,
-  treeView: treeView.treeViewSlotRecipe
+  treeView: treeView.treeViewSlotRecipe,
+  marquee: marquee.marqueeSlotRecipe
 };
 
 exports.slotRecipes = slotRecipes;

package/dist/cjs/slot-recipes/marquee.cjs

@@ -0,0 +1,93 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const marqueeSlotRecipe = def.defineSlotRecipe({
+  className: "marquee",
+  slots: ["root", "viewport", "content", "edge", "item"],
+  base: {
+    root: {
+      position: "relative",
+      width: "100%",
+      "--marquee-edge-color": "colors.bg",
+      "--marquee-edge-size": "20%",
+      "&[data-paused]": {
+        animationPlayState: "paused !important",
+        "& *": {
+          animationPlayState: "paused !important"
+        }
+      }
+    },
+    viewport: {
+      overflow: "hidden",
+      display: "flex",
+      width: "100%",
+      height: "100%"
+    },
+    content: {
+      display: "flex",
+      minWidth: "max-content",
+      animationTimingFunction: "linear",
+      animationFillMode: "forwards",
+      animationDuration: "var(--marquee-duration)",
+      animationDelay: "var(--marquee-delay)",
+      animationIterationCount: "var(--marquee-loop-count)",
+      _motionReduce: {
+        animation: "none !important"
+      },
+      "&[data-side='start'], &[data-side='end']": {
+        animationName: "marqueeX"
+      },
+      "&[data-side='top'], &[data-side='bottom']": {
+        animationName: "marqueeY"
+      },
+      "&[data-reverse]": {
+        animationDirection: "reverse"
+      },
+      "&[data-orientation='horizontal']": {
+        flexDirection: "row"
+      },
+      "&[data-orientation='vertical']": {
+        flexDirection: "column"
+      }
+    },
+    edge: {
+      position: "absolute",
+      zIndex: "1",
+      pointerEvents: "none",
+      "&[data-side='start']": {
+        width: "var(--marquee-edge-size)",
+        insetY: "0",
+        insetInlineStart: "0",
+        background: "linear-gradient(to right, var(--marquee-edge-color, white), transparent)",
+        _rtl: {
+          background: "linear-gradient(to left, var(--marquee-edge-color, white), transparent)"
+        }
+      },
+      "&[data-side='end']": {
+        width: "var(--marquee-edge-size)",
+        insetY: "0",
+        insetInlineEnd: "0",
+        background: "linear-gradient(to left, var(--marquee-edge-color, white), transparent)",
+        _rtl: {
+          background: "linear-gradient(to right, var(--marquee-edge-color, white), transparent)"
+        }
+      },
+      "&[data-side='top']": {
+        height: "var(--marquee-edge-size)",
+        insetX: "0",
+        top: "0",
+        background: "linear-gradient(to bottom, var(--marquee-edge-color, white), transparent)"
+      },
+      "&[data-side='bottom']": {
+        height: "var(--marquee-edge-size)",
+        insetX: "0",
+        bottom: "0",
+        background: "linear-gradient(to top, var(--marquee-edge-color, white), transparent)"
+      }
+    }
+  }
+});
+
+exports.marqueeSlotRecipe = marqueeSlotRecipe;

package/dist/cjs/slot-recipes/menu.cjs

@@ -25,11 +25,12 @@ const menuSlotRecipe = def.defineSlotRecipe({
   base: {
     content: {
       outline: 0,
-      bg: "bg.panel",
+      "--menu-bg": "colors.bg.panel",
+      bg: "var(--menu-bg)",
       boxShadow: "lg",
       color: "fg",
       maxHeight: "var(--available-height)",
-      "--menu-z-index": "zIndex.dropdown",
+      "--menu-z-index": "zIndex.popover",
       zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
       overflow: "hidden",
@@ -97,6 +98,14 @@ const menuSlotRecipe = def.defineSlotRecipe({
       bg: "bg.muted",
       my: "1",
       mx: "-1"
+    },
+    arrow: {
+      "--arrow-size": "sizes.3",
+      "--arrow-background": "var(--menu-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "1px",
+      borderLeftWidth: "1px"
     }
   },
   variants: {

package/dist/cjs/slot-recipes/native-select.cjs

@@ -82,6 +82,14 @@ const nativeSelectSlotRecipe = def.defineSlotRecipe({
           color: "fg",
           focusRingWidth: "2px"
         }
+      },
+      ghost: {
+        field: {
+          bg: "transparent",
+          _expanded: {
+            bg: "bg.muted"
+          }
+        }
       }
     },
     size: {

package/dist/cjs/slot-recipes/radio-card.cjs

@@ -35,8 +35,7 @@ const radioCardSlotRecipe = def.defineSlotRecipe({
         bg: "colorPalette.muted/20"
       },
       _disabled: {
-        opacity: "0.8",
-        borderColor: "border.disabled"
+        opacity: "0.5"
       },
       _checked: {
         zIndex: "1"
@@ -240,6 +239,11 @@ const radioCardSlotRecipe = def.defineSlotRecipe({
             borderColor: "colorPalette.solid"
           }
         },
+        itemControl: {
+          _disabled: {
+            bg: "unset"
+          }
+        },
         itemIndicator: {
           bg: "bg",
           borderWidth: "1px",

package/dist/cjs/slot-recipes/select.cjs

@@ -77,7 +77,8 @@ const selectSlotRecipe = def.defineSlotRecipe({
       background: "bg.panel",
       display: "flex",
       flexDirection: "column",
-      zIndex: "dropdown",
+      "--select-z-index": "zIndex.popover",
+      zIndex: "calc(var(--select-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
       outline: 0,
       maxH: "96",
@@ -168,6 +169,14 @@ const selectSlotRecipe = def.defineSlotRecipe({
           borderColor: "transparent",
           bg: "bg.muted"
         }
+      },
+      ghost: {
+        trigger: {
+          bg: "transparent",
+          _expanded: {
+            bg: "bg.muted"
+          }
+        }
       }
     },
     size: {

package/dist/cjs/slot-recipes/slider.cjs

@@ -16,7 +16,8 @@ const sliderSlotRecipe = def.defineSlotRecipe({
     "markerGroup",
     "marker",
     "draggingIndicator",
-    "markerIndicator"
+    "markerIndicator",
+    "markerLabel"
   ],
   base: {
     root: {
@@ -79,11 +80,10 @@ const sliderSlotRecipe = def.defineSlotRecipe({
       outline: 0,
       zIndex: "2",
       borderRadius: "full",
+      transition: "shadow",
       _focusVisible: {
-        ring: "2px",
-        ringColor: "colorPalette.focusRing",
-        ringOffset: "2px",
-        ringOffsetColor: "bg"
+        ring: "3px",
+        ringColor: "colorPalette.focusRing/50"
       }
     }
   },
@@ -163,7 +163,7 @@ const sliderSlotRecipe = def.defineSlotRecipe({
           flexDirection: "column",
           height: "100%",
           minWidth: "var(--slider-thumb-size)",
-          "&[data-has-mark-label], &:has(.slider__marker-label)": {
+          "&:has(.slider__markerLabel)": {
             marginEnd: "4"
           }
         },
@@ -187,7 +187,7 @@ const sliderSlotRecipe = def.defineSlotRecipe({
           flexDirection: "row",
           width: "100%",
           minHeight: "var(--slider-thumb-size)",
-          "&[data-has-mark-label], &:has(.slider__marker-label)": {
+          "&:has(.slider__markerLabel)": {
             marginBottom: "4"
           }
         },

package/dist/esm/global-css.js

@@ -4,29 +4,29 @@ import { defineGlobalStyles } from './def.js';
 const globalCss = defineGlobalStyles({
   "*": {
     fontFeatureSettings: '"cv11"',
-    "--ring-inset": "var(--empty,/*!*/ /*!*/)",
+    "--ring-inset": "var(--empty, )",
     "--ring-offset-width": "0px",
     "--ring-offset-color": "#fff",
     "--ring-color": "rgba(66, 153, 225, 0.6)",
     "--ring-offset-shadow": "0 0 #0000",
     "--ring-shadow": "0 0 #0000",
-    "--brightness": "var(--empty,/*!*/ /*!*/)",
-    "--contrast": "var(--empty,/*!*/ /*!*/)",
-    "--grayscale": "var(--empty,/*!*/ /*!*/)",
-    "--hue-rotate": "var(--empty,/*!*/ /*!*/)",
-    "--invert": "var(--empty,/*!*/ /*!*/)",
-    "--saturate": "var(--empty,/*!*/ /*!*/)",
-    "--sepia": "var(--empty,/*!*/ /*!*/)",
-    "--drop-shadow": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-blur": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-brightness": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-contrast": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-grayscale": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-hue-rotate": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-invert": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-opacity": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-saturate": "var(--empty,/*!*/ /*!*/)",
-    "--backdrop-sepia": "var(--empty,/*!*/ /*!*/)",
+    "--brightness": "var(--empty, )",
+    "--contrast": "var(--empty, )",
+    "--grayscale": "var(--empty, )",
+    "--hue-rotate": "var(--empty, )",
+    "--invert": "var(--empty, )",
+    "--saturate": "var(--empty, )",
+    "--sepia": "var(--empty, )",
+    "--drop-shadow": "var(--empty, )",
+    "--backdrop-blur": "var(--empty, )",
+    "--backdrop-brightness": "var(--empty, )",
+    "--backdrop-contrast": "var(--empty, )",
+    "--backdrop-grayscale": "var(--empty, )",
+    "--backdrop-hue-rotate": "var(--empty, )",
+    "--backdrop-invert": "var(--empty, )",
+    "--backdrop-opacity": "var(--empty, )",
+    "--backdrop-saturate": "var(--empty, )",
+    "--backdrop-sepia": "var(--empty, )",
     "--global-font-mono": "fonts.mono",
     "--global-font-body": "fonts.body",
     "--global-color-border": "colors.border"

package/dist/esm/keyframes.js

@@ -87,10 +87,10 @@ const keyframes = {
   },
   "collapse-width": {
     from: {
-      height: "var(--width)"
+      width: "var(--width)"
     },
     to: {
-      height: "var(--collapsed-width, 0)"
+      width: "var(--collapsed-width, 0)"
     }
   },
   "fade-in": {
@@ -252,6 +252,22 @@ const keyframes = {
     to: {
       scale: "0.95"
     }
+  },
+  marqueeX: {
+    from: {
+      transform: "translateX(0%)"
+    },
+    to: {
+      transform: "translateX(var(--marquee-translate))"
+    }
+  },
+  marqueeY: {
+    from: {
+      transform: "translateY(0%)"
+    },
+    to: {
+      transform: "translateY(var(--marquee-translate))"
+    }
   }
 };
 

package/dist/esm/slot-recipes/action-bar.js

@@ -14,11 +14,9 @@ const actionBarSlotRecipe = defineSlotRecipe({
     positioner: {
       position: "fixed",
       display: "flex",
-      justifyContent: "center",
       pointerEvents: "none",
       insetInline: "0",
-      top: "unset",
-      bottom: "calc(env(safe-area-inset-bottom) + 20px)"
+      "--action-bar-offset": "spacing.4"
     },
     content: {
       bg: "bg.panel",
@@ -57,6 +55,33 @@ const actionBarSlotRecipe = defineSlotRecipe({
       borderWidth: "1px",
       borderStyle: "dashed"
     }
+  },
+  variants: {
+    placement: {
+      bottom: {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "center"
+        }
+      },
+      "bottom-start": {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "flex-start",
+          ps: "var(--action-bar-offset)"
+        }
+      },
+      "bottom-end": {
+        positioner: {
+          bottom: "calc(env(safe-area-inset-bottom) + var(--action-bar-offset))",
+          justifyContent: "flex-end",
+          pe: "var(--action-bar-offset)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
   }
 });
 

package/dist/esm/slot-recipes/color-picker.js

@@ -95,7 +95,8 @@ const colorPickerSlotRecipe = defineSlotRecipe({
       width: "64",
       p: "4",
       gap: "3",
-      zIndex: "dropdown",
+      "--color-picker-z-index": "zIndex.popover",
+      zIndex: "calc(var(--color-picker-z-index) + var(--layer-index, 0))",
       _open: {
         animationStyle: "slide-fade-in",
         animationDuration: "fast"

package/dist/esm/slot-recipes/combobox.js

@@ -109,7 +109,8 @@ const comboboxSlotRecipe = defineSlotRecipe({
       background: "bg.panel",
       display: "flex",
       flexDirection: "column",
-      zIndex: "dropdown",
+      "--combobox-z-index": "zIndex.popover",
+      zIndex: "calc(var(--combobox-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
       outline: 0,
       maxH: "96",

package/dist/esm/slot-recipes/dialog.js

@@ -41,7 +41,7 @@ const dialogSlotRecipe = defineSlotRecipe({
       position: "fixed",
       left: 0,
       top: 0,
-      "--dialog-z-index": "zIndex.modal",
+      "--dialog-z-index": "zIndex.popover",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       justifyContent: "center",
       overscrollBehaviorY: "none"
@@ -55,7 +55,7 @@ const dialogSlotRecipe = defineSlotRecipe({
       borderRadius: "l3",
       textStyle: "sm",
       my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.modal",
+      "--dialog-z-index": "zIndex.popover",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       bg: "bg.panel",
       boxShadow: "lg",

package/dist/esm/slot-recipes/drawer.js

@@ -24,7 +24,7 @@ const drawerSlotRecipe = defineSlotRecipe({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "overlay",
+      zIndex: "var(--z-index)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -41,7 +41,8 @@ const drawerSlotRecipe = defineSlotRecipe({
       position: "fixed",
       insetInlineStart: 0,
       top: 0,
-      zIndex: "modal",
+      "--drawer-z-index": "zIndex.popover",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       overscrollBehaviorY: "none"
     },
     content: {
@@ -50,7 +51,8 @@ const drawerSlotRecipe = defineSlotRecipe({
       position: "relative",
       width: "100%",
       outline: 0,
-      zIndex: "modal",
+      "--drawer-z-index": "zIndex.popover",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       textStyle: "sm",
       maxH: "100dvh",
       color: "inherit",

package/dist/esm/slot-recipes/hover-card.js

@@ -15,7 +15,8 @@ const hoverCardSlotRecipe = defineSlotRecipe({
       boxShadow: "lg",
       maxWidth: "80",
       borderRadius: "l3",
-      zIndex: "popover",
+      "--hover-card-z-index": "zIndex.popover",
+      zIndex: "calc(var(--hover-card-z-index) + var(--layer-index, 0))",
       transformOrigin: "var(--transform-origin)",
       outline: "0",
       _open: {

package/dist/esm/slot-recipes/index.js

@@ -24,6 +24,7 @@ import { fileUploadSlotRecipe } from './file-upload.js';
 import { hoverCardSlotRecipe } from './hover-card.js';
 import { listSlotRecipe } from './list.js';
 import { listboxSlotRecipe } from './listbox.js';
+import { marqueeSlotRecipe } from './marquee.js';
 import { menuSlotRecipe } from './menu.js';
 import { nativeSelectSlotRecipe } from './native-select.js';
 import { numberInputSlotRecipe } from './number-input.js';
@@ -106,7 +107,8 @@ const slotRecipes = {
   timeline: timelineSlotRecipe,
   colorPicker: colorPickerSlotRecipe,
   qrCode: qrCodeSlotRecipe,
-  treeView: treeViewSlotRecipe
+  treeView: treeViewSlotRecipe,
+  marquee: marqueeSlotRecipe
 };
 
 export { slotRecipes };

package/dist/esm/slot-recipes/marquee.js

@@ -0,0 +1,91 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const marqueeSlotRecipe = defineSlotRecipe({
+  className: "marquee",
+  slots: ["root", "viewport", "content", "edge", "item"],
+  base: {
+    root: {
+      position: "relative",
+      width: "100%",
+      "--marquee-edge-color": "colors.bg",
+      "--marquee-edge-size": "20%",
+      "&[data-paused]": {
+        animationPlayState: "paused !important",
+        "& *": {
+          animationPlayState: "paused !important"
+        }
+      }
+    },
+    viewport: {
+      overflow: "hidden",
+      display: "flex",
+      width: "100%",
+      height: "100%"
+    },
+    content: {
+      display: "flex",
+      minWidth: "max-content",
+      animationTimingFunction: "linear",
+      animationFillMode: "forwards",
+      animationDuration: "var(--marquee-duration)",
+      animationDelay: "var(--marquee-delay)",
+      animationIterationCount: "var(--marquee-loop-count)",
+      _motionReduce: {
+        animation: "none !important"
+      },
+      "&[data-side='start'], &[data-side='end']": {
+        animationName: "marqueeX"
+      },
+      "&[data-side='top'], &[data-side='bottom']": {
+        animationName: "marqueeY"
+      },
+      "&[data-reverse]": {
+        animationDirection: "reverse"
+      },
+      "&[data-orientation='horizontal']": {
+        flexDirection: "row"
+      },
+      "&[data-orientation='vertical']": {
+        flexDirection: "column"
+      }
+    },
+    edge: {
+      position: "absolute",
+      zIndex: "1",
+      pointerEvents: "none",
+      "&[data-side='start']": {
+        width: "var(--marquee-edge-size)",
+        insetY: "0",
+        insetInlineStart: "0",
+        background: "linear-gradient(to right, var(--marquee-edge-color, white), transparent)",
+        _rtl: {
+          background: "linear-gradient(to left, var(--marquee-edge-color, white), transparent)"
+        }
+      },
+      "&[data-side='end']": {
+        width: "var(--marquee-edge-size)",
+        insetY: "0",
+        insetInlineEnd: "0",
+        background: "linear-gradient(to left, var(--marquee-edge-color, white), transparent)",
+        _rtl: {
+          background: "linear-gradient(to right, var(--marquee-edge-color, white), transparent)"
+        }
+      },
+      "&[data-side='top']": {
+        height: "var(--marquee-edge-size)",
+        insetX: "0",
+        top: "0",
+        background: "linear-gradient(to bottom, var(--marquee-edge-color, white), transparent)"
+      },
+      "&[data-side='bottom']": {
+        height: "var(--marquee-edge-size)",
+        insetX: "0",
+        bottom: "0",
+        background: "linear-gradient(to top, var(--marquee-edge-color, white), transparent)"
+      }
+    }
+  }
+});
+
+export { marqueeSlotRecipe };

package/dist/esm/slot-recipes/menu.js

@@ -23,11 +23,12 @@ const menuSlotRecipe = defineSlotRecipe({
   base: {
     content: {
       outline: 0,
-      bg: "bg.panel",
+      "--menu-bg": "colors.bg.panel",
+      bg: "var(--menu-bg)",
       boxShadow: "lg",
       color: "fg",
       maxHeight: "var(--available-height)",
-      "--menu-z-index": "zIndex.dropdown",
+      "--menu-z-index": "zIndex.popover",
       zIndex: "calc(var(--menu-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
       overflow: "hidden",
@@ -95,6 +96,14 @@ const menuSlotRecipe = defineSlotRecipe({
       bg: "bg.muted",
       my: "1",
       mx: "-1"
+    },
+    arrow: {
+      "--arrow-size": "sizes.3",
+      "--arrow-background": "var(--menu-bg)"
+    },
+    arrowTip: {
+      borderTopWidth: "1px",
+      borderLeftWidth: "1px"
     }
   },
   variants: {

package/dist/esm/slot-recipes/native-select.js

@@ -80,6 +80,14 @@ const nativeSelectSlotRecipe = defineSlotRecipe({
           color: "fg",
           focusRingWidth: "2px"
         }
+      },
+      ghost: {
+        field: {
+          bg: "transparent",
+          _expanded: {
+            bg: "bg.muted"
+          }
+        }
       }
     },
     size: {

package/dist/esm/slot-recipes/radio-card.js

@@ -33,8 +33,7 @@ const radioCardSlotRecipe = defineSlotRecipe({
         bg: "colorPalette.muted/20"
       },
       _disabled: {
-        opacity: "0.8",
-        borderColor: "border.disabled"
+        opacity: "0.5"
       },
       _checked: {
         zIndex: "1"
@@ -238,6 +237,11 @@ const radioCardSlotRecipe = defineSlotRecipe({
             borderColor: "colorPalette.solid"
           }
         },
+        itemControl: {
+          _disabled: {
+            bg: "unset"
+          }
+        },
         itemIndicator: {
           bg: "bg",
           borderWidth: "1px",

package/dist/esm/slot-recipes/select.js

@@ -75,7 +75,8 @@ const selectSlotRecipe = defineSlotRecipe({
       background: "bg.panel",
       display: "flex",
       flexDirection: "column",
-      zIndex: "dropdown",
+      "--select-z-index": "zIndex.popover",
+      zIndex: "calc(var(--select-z-index) + var(--layer-index, 0))",
       borderRadius: "l2",
       outline: 0,
       maxH: "96",
@@ -166,6 +167,14 @@ const selectSlotRecipe = defineSlotRecipe({
           borderColor: "transparent",
           bg: "bg.muted"
         }
+      },
+      ghost: {
+        trigger: {
+          bg: "transparent",
+          _expanded: {
+            bg: "bg.muted"
+          }
+        }
       }
     },
     size: {

package/dist/esm/slot-recipes/slider.js

@@ -14,7 +14,8 @@ const sliderSlotRecipe = defineSlotRecipe({
     "markerGroup",
     "marker",
     "draggingIndicator",
-    "markerIndicator"
+    "markerIndicator",
+    "markerLabel"
   ],
   base: {
     root: {
@@ -77,11 +78,10 @@ const sliderSlotRecipe = defineSlotRecipe({
       outline: 0,
       zIndex: "2",
       borderRadius: "full",
+      transition: "shadow",
       _focusVisible: {
-        ring: "2px",
-        ringColor: "colorPalette.focusRing",
-        ringOffset: "2px",
-        ringOffsetColor: "bg"
+        ring: "3px",
+        ringColor: "colorPalette.focusRing/50"
       }
     }
   },
@@ -161,7 +161,7 @@ const sliderSlotRecipe = defineSlotRecipe({
           flexDirection: "column",
           height: "100%",
           minWidth: "var(--slider-thumb-size)",
-          "&[data-has-mark-label], &:has(.slider__marker-label)": {
+          "&:has(.slider__markerLabel)": {
             marginEnd: "4"
           }
         },
@@ -185,7 +185,7 @@ const sliderSlotRecipe = defineSlotRecipe({
           flexDirection: "row",
           width: "100%",
           minHeight: "var(--slider-thumb-size)",
-          "&[data-has-mark-label], &:has(.slider__marker-label)": {
+          "&:has(.slider__markerLabel)": {
             marginBottom: "4"
           }
         },

package/dist/types/keyframes.d.ts

@@ -86,10 +86,10 @@ export declare const keyframes: {
     };
     "collapse-width": {
         from: {
-            height: string;
+            width: string;
         };
         to: {
-            height: string;
+            width: string;
         };
     };
     "fade-in": {
@@ -252,4 +252,20 @@ export declare const keyframes: {
             scale: string;
         };
     };
+    marqueeX: {
+        from: {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    marqueeY: {
+        from: {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
 };

package/dist/types/slot-recipes/index.d.ts

@@ -52,4 +52,5 @@ export declare const slotRecipes: {
     colorPicker: import("@pandacss/types").SlotRecipeConfig;
     qrCode: import("@pandacss/types").SlotRecipeConfig;
     treeView: import("@pandacss/types").SlotRecipeConfig;
+    marquee: import("@pandacss/types").SlotRecipeConfig;
 };

package/dist/types/slot-recipes/marquee.d.ts

@@ -0,0 +1 @@
+export declare const marqueeSlotRecipe: import("@pandacss/types").SlotRecipeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.30.0",
+  "version": "3.32.0",
   "description": "Panda preset for Chakra UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "globby": "14.1.0",
-    "@chakra-ui/cli": "3.30.0"
+    "@chakra-ui/cli": "3.32.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",