@chakra-ui/panda-preset 3.28.1 → 3.30.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/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

@@ -0,0 +1,79 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const carouselSlotRecipe = def.defineSlotRecipe({
+  className: "carousel",
+  slots: [
+    "root",
+    "itemGroup",
+    "item",
+    "control",
+    "nextTrigger",
+    "prevTrigger",
+    "indicatorGroup",
+    "indicator",
+    "autoplayTrigger",
+    "progressText",
+    "progressText",
+    "autoplayIndicator"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "2",
+      _horizontal: {
+        flexDirection: "column"
+      },
+      _vertical: {
+        flexDirection: "row"
+      }
+    },
+    item: {
+      _horizontal: {
+        width: "100%"
+      },
+      _vertical: {
+        height: "100%"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      _horizontal: {
+        flexDirection: "row",
+        width: "100%"
+      },
+      _vertical: {
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      justifyContent: "center",
+      gap: "3",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    indicator: {
+      width: "2.5",
+      height: "2.5",
+      borderRadius: "full",
+      bg: "colorPalette.subtle",
+      cursor: "button",
+      _current: {
+        bg: "colorPalette.solid"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
+exports.carouselSlotRecipe = carouselSlotRecipe;

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

@@ -39,6 +39,17 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
         layerStyle: "disabled"
       }
     },
+    control: {
+      pos: "relative",
+      "--padding-factor": "1",
+      "--combobox-input-padding-end": "var(--combobox-input-padding-x)",
+      "&:has([data-part=trigger]), &:has([data-part=clear-trigger])": {
+        "--combobox-input-padding-end": "calc(var(--combobox-input-height) * var(--padding-factor))"
+      },
+      "&:has([data-part=trigger]):has([data-part=clear-trigger]:not([hidden]))": {
+        "--padding-factor": "1.5"
+      }
+    },
     input: {
       display: "flex",
       alignItems: "center",
@@ -46,7 +57,8 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
       background: "bg.panel",
       width: "full",
       minH: "var(--combobox-input-height)",
-      px: "var(--combobox-input-padding-x)",
+      ps: "var(--combobox-input-padding-x)",
+      pe: "var(--combobox-input-padding-end)",
       "--input-height": "var(--combobox-input-height)",
       borderRadius: "l2",
       outline: 0,
@@ -78,9 +90,6 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
       focusRingWidth: "2px",
       rounded: "l1"
     },
-    control: {
-      pos: "relative"
-    },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",

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

@@ -8,6 +8,7 @@ var avatar = require('./avatar.cjs');
 var blockquote = require('./blockquote.cjs');
 var breadcrumb = require('./breadcrumb.cjs');
 var card = require('./card.cjs');
+var carousel = require('./carousel.cjs');
 var checkbox = require('./checkbox.cjs');
 var checkboxCard = require('./checkbox-card.cjs');
 var codeBlock = require('./code-block.cjs');
@@ -40,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');
@@ -61,6 +63,7 @@ const slotRecipes = {
   blockquote: blockquote.blockquoteSlotRecipe,
   breadcrumb: breadcrumb.breadcrumbSlotRecipe,
   card: card.cardSlotRecipe,
+  carousel: carousel.carouselSlotRecipe,
   checkbox: checkbox.checkboxSlotRecipe,
   checkboxCard: checkboxCard.checkboxCardSlotRecipe,
   codeBlock: codeBlock.codeBlockSlotRecipe,
@@ -91,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/popover.cjs

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

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",

package/dist/esm/semantic-tokens/colors.js

@@ -212,6 +212,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.gray.400}",
         _dark: "{colors.gray.400}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.gray.200}",
+        _dark: "{colors.gray.800}"
+      }
     }
   },
   red: {
@@ -256,6 +262,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.red.500}",
         _dark: "{colors.red.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.red.500}",
+        _dark: "{colors.red.400}"
+      }
     }
   },
   orange: {
@@ -300,6 +312,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.orange.500}",
         _dark: "{colors.orange.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.orange.500}",
+        _dark: "{colors.orange.400}"
+      }
     }
   },
   green: {
@@ -344,6 +362,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.green.500}",
         _dark: "{colors.green.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.green.500}",
+        _dark: "{colors.green.400}"
+      }
     }
   },
   blue: {
@@ -388,6 +412,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.blue.500}",
         _dark: "{colors.blue.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.blue.500}",
+        _dark: "{colors.blue.400}"
+      }
     }
   },
   yellow: {
@@ -432,6 +462,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.yellow.500}",
         _dark: "{colors.yellow.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.yellow.500}",
+        _dark: "{colors.yellow.500}"
+      }
     }
   },
   teal: {
@@ -476,6 +512,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.teal.500}",
         _dark: "{colors.teal.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.teal.500}",
+        _dark: "{colors.teal.400}"
+      }
     }
   },
   purple: {
@@ -520,6 +562,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.purple.500}",
         _dark: "{colors.purple.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.purple.500}",
+        _dark: "{colors.purple.400}"
+      }
     }
   },
   pink: {
@@ -564,6 +612,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.pink.500}",
         _dark: "{colors.pink.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.pink.500}",
+        _dark: "{colors.pink.400}"
+      }
     }
   },
   cyan: {
@@ -608,6 +662,12 @@ const colors = defineSemanticTokens.colors({
         _light: "{colors.cyan.500}",
         _dark: "{colors.cyan.500}"
       }
+    },
+    border: {
+      value: {
+        _light: "{colors.cyan.500}",
+        _dark: "{colors.cyan.400}"
+      }
     }
   }
 });

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

@@ -100,7 +100,9 @@ const alertSlotRecipe = 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/esm/slot-recipes/avatar.js

@@ -105,7 +105,9 @@ const avatarSlotRecipe = 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/esm/slot-recipes/carousel.js

@@ -0,0 +1,77 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const carouselSlotRecipe = defineSlotRecipe({
+  className: "carousel",
+  slots: [
+    "root",
+    "itemGroup",
+    "item",
+    "control",
+    "nextTrigger",
+    "prevTrigger",
+    "indicatorGroup",
+    "indicator",
+    "autoplayTrigger",
+    "progressText",
+    "progressText",
+    "autoplayIndicator"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      gap: "2",
+      _horizontal: {
+        flexDirection: "column"
+      },
+      _vertical: {
+        flexDirection: "row"
+      }
+    },
+    item: {
+      _horizontal: {
+        width: "100%"
+      },
+      _vertical: {
+        height: "100%"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      _horizontal: {
+        flexDirection: "row",
+        width: "100%"
+      },
+      _vertical: {
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      justifyContent: "center",
+      gap: "3",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    indicator: {
+      width: "2.5",
+      height: "2.5",
+      borderRadius: "full",
+      bg: "colorPalette.subtle",
+      cursor: "button",
+      _current: {
+        bg: "colorPalette.solid"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
+export { carouselSlotRecipe };

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

@@ -37,6 +37,17 @@ const comboboxSlotRecipe = defineSlotRecipe({
         layerStyle: "disabled"
       }
     },
+    control: {
+      pos: "relative",
+      "--padding-factor": "1",
+      "--combobox-input-padding-end": "var(--combobox-input-padding-x)",
+      "&:has([data-part=trigger]), &:has([data-part=clear-trigger])": {
+        "--combobox-input-padding-end": "calc(var(--combobox-input-height) * var(--padding-factor))"
+      },
+      "&:has([data-part=trigger]):has([data-part=clear-trigger]:not([hidden]))": {
+        "--padding-factor": "1.5"
+      }
+    },
     input: {
       display: "flex",
       alignItems: "center",
@@ -44,7 +55,8 @@ const comboboxSlotRecipe = defineSlotRecipe({
       background: "bg.panel",
       width: "full",
       minH: "var(--combobox-input-height)",
-      px: "var(--combobox-input-padding-x)",
+      ps: "var(--combobox-input-padding-x)",
+      pe: "var(--combobox-input-padding-end)",
       "--input-height": "var(--combobox-input-height)",
       borderRadius: "l2",
       outline: 0,
@@ -76,9 +88,6 @@ const comboboxSlotRecipe = defineSlotRecipe({
       focusRingWidth: "2px",
       rounded: "l1"
     },
-    control: {
-      pos: "relative"
-    },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",

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

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

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

@@ -6,6 +6,7 @@ import { avatarSlotRecipe } from './avatar.js';
 import { blockquoteSlotRecipe } from './blockquote.js';
 import { breadcrumbSlotRecipe } from './breadcrumb.js';
 import { cardSlotRecipe } from './card.js';
+import { carouselSlotRecipe } from './carousel.js';
 import { checkboxSlotRecipe } from './checkbox.js';
 import { checkboxCardSlotRecipe } from './checkbox-card.js';
 import { codeBlockSlotRecipe } from './code-block.js';
@@ -38,6 +39,7 @@ import { scrollAreaSlotRecipe } from './scroll-area.js';
 import { segmentGroupSlotRecipe } from './segment-group.js';
 import { selectSlotRecipe } from './select.js';
 import { sliderSlotRecipe } from './slider.js';
+import { splitterSlotRecipe } from './splitter.js';
 import { statSlotRecipe } from './stat.js';
 import { statusSlotRecipe } from './status.js';
 import { stepsSlotRecipe } from './steps.js';
@@ -59,6 +61,7 @@ const slotRecipes = {
   blockquote: blockquoteSlotRecipe,
   breadcrumb: breadcrumbSlotRecipe,
   card: cardSlotRecipe,
+  carousel: carouselSlotRecipe,
   checkbox: checkboxSlotRecipe,
   checkboxCard: checkboxCardSlotRecipe,
   codeBlock: codeBlockSlotRecipe,
@@ -89,6 +92,7 @@ const slotRecipes = {
   select: selectSlotRecipe,
   combobox: comboboxSlotRecipe,
   slider: sliderSlotRecipe,
+  splitter: splitterSlotRecipe,
   stat: statSlotRecipe,
   steps: stepsSlotRecipe,
   swittch: switchSlotRecipe,

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

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

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

@@ -0,0 +1,85 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const splitterSlotRecipe = 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"
+      }
+    }
+  }
+});
+
+export { splitterSlotRecipe };

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

@@ -122,8 +122,10 @@ const tagSlotRecipe = 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/esm/slot-recipes/tags-input.js

@@ -63,8 +63,13 @@ const tagsInputSlotRecipe = defineSlotRecipe({
         display: "none"
       }
     },
+    item: {
+      maxWidth: "100%",
+      minWidth: "0"
+    },
     itemText: {
-      lineClamp: "1"
+      lineClamp: "1",
+      minWidth: "0"
     },
     itemInput: {
       outline: "none",
@@ -81,12 +86,14 @@ const tagsInputSlotRecipe = 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/esm/slot-recipes/tooltip.js

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

package/dist/types/semantic-tokens/colors.d.ts

@@ -210,6 +210,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     red: {
         contrast: {
@@ -254,6 +260,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     orange: {
         contrast: {
@@ -298,6 +310,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     green: {
         contrast: {
@@ -342,6 +360,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     blue: {
         contrast: {
@@ -386,6 +410,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     yellow: {
         contrast: {
@@ -430,6 +460,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     teal: {
         contrast: {
@@ -474,6 +510,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     purple: {
         contrast: {
@@ -518,6 +560,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     pink: {
         contrast: {
@@ -562,6 +610,12 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
     cyan: {
         contrast: {
@@ -606,5 +660,11 @@ export declare const colors: {
                 _dark: string;
             };
         };
+        border: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
     };
 };

package/dist/types/semantic-tokens/index.d.ts

@@ -211,6 +211,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         red: {
             contrast: {
@@ -255,6 +261,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         orange: {
             contrast: {
@@ -299,6 +311,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         green: {
             contrast: {
@@ -343,6 +361,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         blue: {
             contrast: {
@@ -387,6 +411,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         yellow: {
             contrast: {
@@ -431,6 +461,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         teal: {
             contrast: {
@@ -475,6 +511,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         purple: {
             contrast: {
@@ -519,6 +561,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         pink: {
             contrast: {
@@ -563,6 +611,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
         cyan: {
             contrast: {
@@ -607,6 +661,12 @@ export declare const semanticTokens: {
                     _dark: string;
                 };
             };
+            border: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
         };
     };
     shadows: {

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

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

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

@@ -6,6 +6,7 @@ export declare const slotRecipes: {
     blockquote: import("@pandacss/types").SlotRecipeConfig;
     breadcrumb: import("@pandacss/types").SlotRecipeConfig;
     card: import("@pandacss/types").SlotRecipeConfig;
+    carousel: import("@pandacss/types").SlotRecipeConfig;
     checkbox: import("@pandacss/types").SlotRecipeConfig;
     checkboxCard: import("@pandacss/types").SlotRecipeConfig;
     codeBlock: import("@pandacss/types").SlotRecipeConfig;
@@ -36,6 +37,7 @@ export declare const slotRecipes: {
     select: import("@pandacss/types").SlotRecipeConfig;
     combobox: import("@pandacss/types").SlotRecipeConfig;
     slider: import("@pandacss/types").SlotRecipeConfig;
+    splitter: import("@pandacss/types").SlotRecipeConfig;
     stat: import("@pandacss/types").SlotRecipeConfig;
     steps: import("@pandacss/types").SlotRecipeConfig;
     swittch: import("@pandacss/types").SlotRecipeConfig;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.28.1",
+  "version": "3.30.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.28.1"
+    "@chakra-ui/cli": "3.30.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",