@chakra-ui/panda-preset 3.29.0 → 3.31.0

package/dist/cjs/recipes/badge.cjs

@@ -27,8 +27,10 @@ const badgeRecipe = def.defineRecipe({
       },
       outline: {
         color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
         shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted"
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
       },
       surface: {
         bg: "colorPalette.subtle",

package/dist/cjs/recipes/button.cjs

@@ -150,7 +150,9 @@ const buttonRecipe = def.defineRecipe({
       },
       outline: {
         borderWidth: "1px",
-        borderColor: "colorPalette.muted",
+        "--outline-color-legacy": "colors.colorPalette.muted",
+        "--outline-color": "colors.colorPalette.border",
+        borderColor: "var(--outline-color, var(--outline-color-legacy))",
         color: "colorPalette.fg",
         _hover: {
           bg: "colorPalette.subtle"

package/dist/cjs/recipes/code.cjs

@@ -23,8 +23,10 @@ const codeRecipe = def.defineRecipe({
       },
       outline: {
         color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
         shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted"
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
       },
       surface: {
         bg: "colorPalette.subtle",

package/dist/cjs/semantic-tokens/colors.cjs

@@ -214,6 +214,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.gray.400}",
         _dark: "{colors.gray.400}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.gray.200}",
+        _dark: "{colors.gray.800}"
+      }
     }
   },
   red: {
@@ -258,6 +264,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.red.500}",
         _dark: "{colors.red.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.red.500}",
+        _dark: "{colors.red.400}"
+      }
     }
   },
   orange: {
@@ -302,6 +314,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.orange.500}",
         _dark: "{colors.orange.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.orange.500}",
+        _dark: "{colors.orange.400}"
+      }
     }
   },
   green: {
@@ -346,6 +364,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.green.500}",
         _dark: "{colors.green.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.green.500}",
+        _dark: "{colors.green.400}"
+      }
     }
   },
   blue: {
@@ -390,6 +414,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.blue.500}",
         _dark: "{colors.blue.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.blue.500}",
+        _dark: "{colors.blue.400}"
+      }
     }
   },
   yellow: {
@@ -434,6 +464,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.yellow.500}",
         _dark: "{colors.yellow.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.yellow.500}",
+        _dark: "{colors.yellow.500}"
+      }
     }
   },
   teal: {
@@ -478,6 +514,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.teal.500}",
         _dark: "{colors.teal.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.teal.500}",
+        _dark: "{colors.teal.400}"
+      }
     }
   },
   purple: {
@@ -522,6 +564,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.purple.500}",
         _dark: "{colors.purple.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.purple.500}",
+        _dark: "{colors.purple.400}"
+      }
     }
   },
   pink: {
@@ -566,6 +614,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.pink.500}",
         _dark: "{colors.pink.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.pink.500}",
+        _dark: "{colors.pink.400}"
+      }
     }
   },
   cyan: {
@@ -610,6 +664,12 @@ const colors = def.defineSemanticTokens.colors({
         _light: "{colors.cyan.500}",
         _dark: "{colors.cyan.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.cyan.500}",
+        _dark: "{colors.cyan.400}"
+      }
     }
   }
 });

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/alert.cjs

@@ -102,7 +102,9 @@ const alertSlotRecipe = def.defineSlotRecipe({
         root: {
           color: "colorPalette.fg",
           shadow: "inset 0 0 0px 1px var(--shadow-color)",
-          shadowColor: "colorPalette.muted"
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
+          shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
         },
         indicator: {
           color: "colorPalette.fg"

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

@@ -107,7 +107,9 @@ const avatarSlotRecipe = def.defineSlotRecipe({
         root: {
           color: "colorPalette.fg",
           borderWidth: "1px",
-          borderColor: "colorPalette.muted"
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
+          borderColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
         }
       }
     },

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

@@ -14,7 +14,10 @@ const carouselSlotRecipe = def.defineSlotRecipe({
     "prevTrigger",
     "indicatorGroup",
     "indicator",
-    "autoplayTrigger"
+    "autoplayTrigger",
+    "progressText",
+    "progressText",
+    "autoplayIndicator"
   ],
   base: {
     root: {

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/hover-card.cjs

@@ -35,7 +35,7 @@ const hoverCardSlotRecipe = def.defineSlotRecipe({
     },
     arrowTip: {
       borderTopWidth: "0.5px",
-      borderInlineStartWidth: "0.5px"
+      borderLeftWidth: "0.5px"
     }
   },
   variants: {

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

@@ -41,6 +41,7 @@ var scrollArea = require('./scroll-area.cjs');
 var segmentGroup = require('./segment-group.cjs');
 var select = require('./select.cjs');
 var slider = require('./slider.cjs');
+var splitter = require('./splitter.cjs');
 var stat = require('./stat.cjs');
 var status = require('./status.cjs');
 var steps = require('./steps.cjs');
@@ -93,6 +94,7 @@ const slotRecipes = {
   select: select.selectSlotRecipe,
   combobox: combobox.comboboxSlotRecipe,
   slider: slider.sliderSlotRecipe,
+  splitter: splitter.splitterSlotRecipe,
   stat: stat.statSlotRecipe,
   steps: steps.stepsSlotRecipe,
   swittch: _switch.switchSlotRecipe,

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

@@ -25,7 +25,8 @@ 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)",
@@ -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/popover.cjs

@@ -70,7 +70,7 @@ const popoverSlotRecipe = def.defineSlotRecipe({
     },
     arrowTip: {
       borderTopWidth: "1px",
-      borderInlineStartWidth: "1px"
+      borderLeftWidth: "1px"
     }
   },
   variants: {

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/cjs/slot-recipes/splitter.cjs

@@ -0,0 +1,87 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const splitterSlotRecipe = def.defineSlotRecipe({
+  slots: [
+    "root",
+    "panel",
+    "resizeTrigger",
+    "resizeTriggerIndicator",
+    "resizeTriggerSeparator",
+    "resizeTriggerIndicator"
+  ],
+  className: "splitter",
+  base: {
+    resizeTrigger: {
+      "--splitter-border-color": "colors.border",
+      "--splitter-thumb-color": "colors.bg",
+      "--splitter-thumb-size": "sizes.2",
+      "--splitter-thumb-inset": "calc(var(--splitter-thumb-size) * -0.5)",
+      "--splitter-border-size": "1px",
+      "--splitter-handle-size": "sizes.6",
+      outline: "0",
+      display: "grid",
+      placeItems: "center",
+      position: "relative",
+      _focus: {
+        "--splitter-border-color": "colors.border.emphasized",
+        "--splitter-thumb-color": "colors.colorPalette.subtle"
+      },
+      _dragging: {
+        "--splitter-thumb-color": "colors.colorPalette.focusRing"
+      },
+      _horizontal: {
+        minWidth: "var(--splitter-thumb-size)",
+        marginInline: "var(--splitter-thumb-inset)"
+      },
+      _vertical: {
+        minHeight: "var(--splitter-thumb-size)",
+        marginBlock: "var(--splitter-thumb-inset)"
+      }
+    },
+    resizeTriggerSeparator: {
+      position: "absolute",
+      bg: "var(--splitter-border-color)",
+      "[data-part='resize-trigger'][data-orientation=horizontal] &": {
+        insetInlineEnd: "calc(var(--splitter-thumb-size) * 0.5)",
+        insetBlock: "0",
+        insetInlineStart: "auto",
+        w: "var(--splitter-border-size)"
+      },
+      "[data-part='resize-trigger'][data-orientation=vertical] &": {
+        insetBlockEnd: "calc(var(--splitter-thumb-size) * 0.5)",
+        insetInline: "0",
+        insetBlockStart: "auto",
+        h: "var(--splitter-border-size)"
+      }
+    },
+    resizeTriggerIndicator: {
+      position: "relative",
+      rounded: "full",
+      bg: "var(--splitter-thumb-color)",
+      shadow: "xs",
+      borderWidth: "1px",
+      zIndex: "1",
+      "[data-part='resize-trigger'][data-orientation=horizontal] &": {
+        w: "full",
+        h: "var(--splitter-handle-size)"
+      },
+      "[data-part='resize-trigger'][data-orientation=vertical] &": {
+        w: "var(--splitter-handle-size)",
+        h: "full"
+      },
+      "[data-part='resize-trigger'][data-focus]:focus-visible &": {
+        outlineWidth: "2px",
+        outlineColor: "colorPalette.focusRing",
+        outlineStyle: "solid"
+      },
+      "[data-part='resize-trigger'][data-disabled] &": {
+        visibility: "hidden"
+      }
+    }
+  }
+});
+
+exports.splitterSlotRecipe = splitterSlotRecipe;

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

@@ -124,8 +124,10 @@ const tagSlotRecipe = def.defineSlotRecipe({
       outline: {
         root: {
           color: "colorPalette.fg",
+          "--outline-shadow-legacy": "colors.colorPalette.muted",
+          "--outline-shadow": "colors.colorPalette.border",
           shadow: "inset 0 0 0px 1px var(--shadow-color)",
-          shadowColor: "colorPalette.muted"
+          shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
         }
       },
       surface: {

package/dist/cjs/slot-recipes/tags-input.cjs

@@ -65,8 +65,13 @@ const tagsInputSlotRecipe = def.defineSlotRecipe({
         display: "none"
       }
     },
+    item: {
+      maxWidth: "100%",
+      minWidth: "0"
+    },
     itemText: {
-      lineClamp: "1"
+      lineClamp: "1",
+      minWidth: "0"
     },
     itemInput: {
       outline: "none",
@@ -83,12 +88,14 @@ const tagsInputSlotRecipe = def.defineSlotRecipe({
       alignItems: "center",
       gap: "1",
       rounded: "l1",
-      px: "var(--tags-input-item-px)"
+      px: "var(--tags-input-item-px)",
+      maxWidth: "100%"
     },
     itemDeleteTrigger: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      flexShrink: "0",
       boxSize: "calc(var(--tags-input-item-height) / 1.5)",
       cursor: {
         base: "button",

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

@@ -35,7 +35,7 @@ const tooltipSlotRecipe = def.defineSlotRecipe({
     },
     arrowTip: {
       borderTopWidth: "1px",
-      borderInlineStartWidth: "1px",
+      borderLeftWidth: "1px",
       borderColor: "var(--tooltip-bg)"
     }
   }

package/dist/esm/recipes/badge.js

@@ -25,8 +25,10 @@ const badgeRecipe = defineRecipe({
       },
       outline: {
         color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
         shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted"
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
       },
       surface: {
         bg: "colorPalette.subtle",

package/dist/esm/recipes/button.js

@@ -148,7 +148,9 @@ const buttonRecipe = defineRecipe({
       },
       outline: {
         borderWidth: "1px",
-        borderColor: "colorPalette.muted",
+        "--outline-color-legacy": "colors.colorPalette.muted",
+        "--outline-color": "colors.colorPalette.border",
+        borderColor: "var(--outline-color, var(--outline-color-legacy))",
         color: "colorPalette.fg",
         _hover: {
           bg: "colorPalette.subtle"

package/dist/esm/recipes/code.js

@@ -21,8 +21,10 @@ const codeRecipe = defineRecipe({
       },
       outline: {
         color: "colorPalette.fg",
+        "--outline-shadow-legacy": "colors.colorPalette.muted",
+        "--outline-shadow": "colors.colorPalette.border",
         shadow: "inset 0 0 0px 1px var(--shadow-color)",
-        shadowColor: "colorPalette.muted"
+        shadowColor: "var(--outline-shadow, var(--outline-shadow-legacy))"
       },
       surface: {
         bg: "colorPalette.subtle",