cetec-design-system 1.2.0 → 1.2.1-next.1

package/dist/{cetec-preset-kUkA_FyU.js → cetec-preset-BB-QcJUK.js}

@@ -264,21 +264,42 @@ const keyframes = defineKeyframes({
   modalScaleIn: {
     "0%": {
       opacity: "0",
-      transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)"
+      transform: "scale(0.95) translateY(20px)"
     },
     "100%": {
       opacity: "1",
-      transform: "translate(-50%, -50%) scale(1) translateY(0)"
+      transform: "scale(1) translateY(0)"
     }
   },
   modalScaleOut: {
     "0%": {
       opacity: "1",
-      transform: "translate(-50%, -50%) scale(1) translateY(0)"
+      transform: "scale(1) translateY(0)"
     },
     "100%": {
       opacity: "0",
-      transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)"
+      transform: "scale(0.95) translateY(20px)"
+    }
+  },
+  /** Top-aligned modal: horizontal center only (see modal recipe `position: top`) */
+  modalScaleInTop: {
+    "0%": {
+      opacity: "0",
+      transform: "scale(0.97) translateY(-40px)"
+    },
+    "100%": {
+      opacity: "1",
+      transform: "scale(1) translateY(0)"
+    }
+  },
+  modalScaleOutTop: {
+    "0%": {
+      opacity: "1",
+      transform: "scale(1) translateY(0)"
+    },
+    "100%": {
+      opacity: "0",
+      transform: "scale(0.97) translateY(-40px)"
     }
   }
 });
@@ -5130,80 +5151,75 @@ const cardRecipe = defineRecipe({
     },
     interactive: {
       true: {
-        cursor: "pointer"
-      }
-    }
-  },
-  compoundVariants: [
-    // Default + interactive
-    {
-      variant: "default",
-      interactive: true,
-      css: {
-        ...interactiveHoverStyles,
-        _disabled: {
-          _hover: {
-            boxShadow: "raised"
-          }
-        }
-      }
-    },
-    // Flat + interactive
-    {
-      variant: "flat",
-      interactive: true,
-      css: {
-        ...interactiveHoverStyles,
-        _disabled: {
-          _hover: {
-            boxShadow: "none"
-          }
-        }
-      }
-    },
-    // Sunken + interactive
-    {
-      variant: "sunken",
-      interactive: true,
-      css: {
-        ...interactiveHoverStyles,
-        _disabled: {
-          _hover: {
-            boxShadow: "none"
-          }
-        }
-      }
-    },
-    // Ghost + interactive
-    {
-      variant: "ghost",
-      interactive: true,
-      css: {
         ...interactiveHoverStyles,
+        cursor: "pointer",
         _disabled: {
           _hover: {
-            boxShadow: "none"
-          }
-        }
-      }
-    },
-    // Overlay + interactive
-    {
-      variant: "overlay",
-      interactive: true,
-      css: {
-        _disabled: {
-          _hover: {
-            boxShadow: "raised"
+            boxShadow: "initial"
           }
         }
       }
     }
-  ],
+  },
   defaultVariants: {
     variant: "default"
   }
 });
+const listDensityVars = {
+  compact: {
+    "--list-item-slot-margin": "token(sizes.5)",
+    "--list-item-padding-y": "token(sizes.3)",
+    "--list-item-padding-x": "token(sizes.10)",
+    "--list-item-icon-size": "token(sizes.24)",
+    "--list-item-label-size": "token(sizes.16)",
+    "--list-item-description-size": "token(sizes.12)",
+    "--list-group-label-padding-x": "token(sizes.10)",
+    "--list-group-label-padding-top": "token(sizes.8)",
+    "--list-group-label-padding-bottom": "token(sizes.2)",
+    "--list-group-label-size": "token(sizes.12)",
+    "--list-group-divider-margin-y": "token(sizes.4)",
+    "--list-group-divider-margin-x": "token(sizes.10)"
+  },
+  comfortable: {
+    "--list-item-slot-margin": "token(sizes.7)",
+    "--list-item-padding-y": "token(sizes.7)",
+    "--list-item-padding-x": "token(sizes.12)",
+    "--list-item-icon-size": "token(sizes.24)",
+    "--list-item-label-size": "token(sizes.16)",
+    "--list-item-description-size": "token(sizes.12)",
+    "--list-group-label-padding-x": "token(sizes.12)",
+    "--list-group-label-padding-top": "token(sizes.12)",
+    "--list-group-label-padding-bottom": "token(sizes.4)",
+    "--list-group-label-size": "token(sizes.14)",
+    "--list-group-divider-margin-y": "token(sizes.6)",
+    "--list-group-divider-margin-x": "token(sizes.12)"
+  },
+  spacious: {
+    "--list-item-slot-margin": "token(sizes.9)",
+    "--list-item-padding-y": "token(sizes.9)",
+    "--list-item-padding-x": "token(sizes.16)",
+    "--list-item-icon-size": "token(sizes.28)",
+    "--list-item-label-size": "token(sizes.20)",
+    "--list-item-description-size": "token(sizes.14)",
+    "--list-group-label-padding-x": "token(sizes.16)",
+    "--list-group-label-padding-top": "token(sizes.16)",
+    "--list-group-label-padding-bottom": "token(sizes.6)",
+    "--list-group-label-size": "token(sizes.16)",
+    "--list-group-divider-margin-y": "token(sizes.8)",
+    "--list-group-divider-margin-x": "token(sizes.16)"
+  }
+};
+const listDensityWrapperVars = {
+  compact: {
+    wrapper: listDensityVars.compact
+  },
+  comfortable: {
+    wrapper: listDensityVars.comfortable
+  },
+  spacious: {
+    wrapper: listDensityVars.spacious
+  }
+};
 const listRecipe = defineRecipe({
   className: "list",
   jsx: ["List"],
@@ -5215,491 +5231,132 @@ const listRecipe = defineRecipe({
     justifyContent: "start",
     gap: "0"
   },
-  variants: {}
+  variants: {
+    density: listDensityVars
+  },
+  defaultVariants: {
+    density: "compact"
+  }
 });
-const listItemRecipe = defineSlotRecipe({
-  className: "listItem",
-  jsx: ["ListItem"],
-  slots: [
-    "wrapper",
-    "icon",
-    "itemMain",
-    "itemLabel",
-    "itemDescription",
-    "divider"
-  ],
+const highlightTextRecipe = defineRecipe({
+  className: "highlightText",
+  jsx: ["HighlightText"],
   base: {
-    wrapper: {
-      ...globalBaseStyles,
-      display: "flex",
-      alignItems: "start",
-      justifyContent: "start",
-      gap: "4",
-      width: "full",
-      textAlign: "left",
-      borderWidth: "1",
-      borderStyle: "solid",
-      borderColor: "transparent",
-      color: "text",
-      cursor: "pointer",
-      outline: "2px solid transparent",
-      outlineOffset: "-2",
-      bg: "transparent",
-      scrollSnapAlign: "start",
-      transitionDuration: "fast",
-      transitionProperty: "background, color",
-      transitionTimingFunction: "default",
-      _hover: {
-        bg: "bg.neutral.hovered"
-      },
-      "&:is(:active)": {
-        bg: "bg.neutral.hovered"
-      },
-      _focus: {
-        bg: "bg.neutral.hovered"
-      },
-      _disabled: {
-        opacity: "0.4",
-        cursor: "not-allowed",
-        pointerEvents: "none"
+    ...globalBaseStyles,
+    bg: { base: "gold.10", _dark: "gold.60" },
+    color: "text",
+    borderRadius: "2",
+    lineHeight: "inherit"
+  },
+  variants: {}
+});
+const tagBase = {
+  ...globalBaseStyles,
+  display: "flex",
+  alignItems: "center",
+  py: "0",
+  borderRadius: "2",
+  gap: "1",
+  px: "4",
+  w: "fit",
+  h: "20",
+  fontSize: "14",
+  fontWeight: "medium",
+  lineHeight: "tight",
+  whiteSpace: "nowrap"
+};
+const tagVariant = {
+  variant: {
+    default: {},
+    bold: {}
+  },
+  hue: {
+    slate: {},
+    tan: {},
+    red: {},
+    tomato: {},
+    orange: {},
+    yellow: {},
+    green: {},
+    grass: {},
+    mint: {},
+    cyan: {},
+    blue: {},
+    indigo: {},
+    purple: {},
+    violet: {},
+    pink: {},
+    rose: {},
+    magenta: {}
+  },
+  iconBefore: {
+    true: {
+      gap: "1",
+      pl: "1"
+    }
+  },
+  iconAfter: {
+    true: {
+      gap: "1",
+      pr: "1"
+    }
+  },
+  hasIcon: {
+    true: {},
+    false: {
+      px: "4"
+    }
+  }
+};
+const tagRecipe = defineRecipe({
+  className: "tag",
+  jsx: ["Tag"],
+  base: tagBase,
+  variants: tagVariant,
+  defaultVariants: {
+    variant: "default",
+    hue: "slate"
+  },
+  compoundVariants: [
+    {
+      hue: "slate",
+      variant: "default",
+      css: {
+        color: { base: "slate.70", _dark: "slate.20" },
+        bg: { base: "slate.10", _dark: "slate.70" }
       }
     },
-    divider: {
-      width: "full"
+    {
+      hue: "slate",
+      variant: "bold",
+      css: {
+        color: { base: "slate.0", _dark: "slate.80" },
+        bg: { base: "slate.50", _dark: "slate.20" }
+      }
     },
-    icon: {
-      aspectRatio: "square",
-      transitionDuration: "fast",
-      transitionProperty: "fill",
-      transitionTimingFunction: "default",
-      flexShrink: "0"
+    {
+      hue: "tan",
+      variant: "default",
+      css: {
+        color: { base: "tan.70", _dark: "tan.20" },
+        bg: { base: "tan.10", _dark: "tan.70" }
+      }
     },
-    itemMain: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "0",
-      minWidth: "0"
+    {
+      hue: "tan",
+      variant: "bold",
+      css: {
+        color: { base: "slate.0", _dark: "tan.80" },
+        bg: { base: "tan.50", _dark: "tan.20" }
+      }
     },
-    itemLabel: {
-      color: "text"
-    },
-    itemDescription: {
-      color: "text.subtlest",
-      lineHeight: "tight"
-    }
-  },
-  variants: {
-    variant: {
-      default: {},
-      checkbox: {
-        wrapper: {
-          _hover: {
-            bg: "bg.neutral.hovered"
-          },
-          _focus: {
-            bg: "bg.neutral.hovered"
-          },
-          '&:is(:active), &:is([data-active="true"]):hover': {
-            bg: "bg.neutral.hovered"
-          },
-          _selected: {
-            bg: "surface",
-            _hover: {
-              bg: "surface"
-            },
-            _focus: {
-              bg: "bg.neutral.hovered"
-            }
-          }
-        }
-      },
-      toggle: {
-        wrapper: {
-          _hover: {
-            bg: "bg.neutral.hovered"
-          },
-          _focus: {
-            bg: "bg.neutral.hovered"
-          },
-          '&:is(:active), &:is([data-active="true"]):hover': {
-            bg: "bg.neutral.hovered"
-          },
-          _selected: {
-            bg: "surface",
-            _hover: {
-              bg: "surface"
-            },
-            _focus: {
-              bg: "bg.neutral.hovered"
-            }
-          }
-        }
-      },
-      divider: {}
-    },
-    density: {
-      compact: {
-        wrapper: {
-          py: "3",
-          px: "10"
-        },
-        itemLabel: {
-          textStyle: "body.md",
-          color: "text"
-        },
-        itemDescription: {
-          textStyle: "body.xs",
-          lineHeight: "tight"
-        },
-        icon: {
-          w: "24",
-          h: "24"
-        },
-        divider: {
-          py: "3",
-          px: "10"
-        }
-      },
-      comfortable: {
-        wrapper: {
-          py: "7",
-          px: "12"
-        },
-        itemLabel: {
-          textStyle: "body.md",
-          color: "text"
-        },
-        itemDescription: {
-          textStyle: "body.xs",
-          lineHeight: "tight"
-        },
-        icon: {
-          w: "24",
-          h: "24"
-        },
-        divider: {
-          py: "7",
-          px: "12"
-        }
-      },
-      spacious: {
-        wrapper: {
-          py: "9",
-          px: "16"
-        },
-        itemLabel: {
-          textStyle: "body.lg",
-          color: "text"
-        },
-        itemDescription: {
-          textStyle: "body.sm",
-          lineHeight: "tight"
-        },
-        icon: {
-          w: "28",
-          h: "28"
-        },
-        divider: {
-          py: "9",
-          px: "16"
-        }
-      }
-    },
-    selected: {
-      true: {
-        wrapper: {
-          bg: "surface.selected",
-          _hover: {
-            bg: "surface.selected.hovered"
-          },
-          "&:is(:active)": {
-            bg: "surface.selected.pressed"
-          },
-          _focusVisible: {
-            bg: "surface.selected.hovered"
-          }
-        }
-      },
-      false: {}
-    },
-    iconBefore: {
-      true: {},
-      false: {}
-    },
-    iconAfter: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      density: "compact",
-      iconBefore: true,
-      css: {
-        wrapper: {
-          ps: "5"
-        }
-      }
-    },
-    {
-      density: "compact",
-      iconAfter: true,
-      css: {
-        wrapper: {
-          pe: "5"
-        }
-      }
-    },
-    {
-      density: "compact",
-      variant: "checkbox",
-      css: {
-        wrapper: {
-          ps: "5"
-        }
-      }
-    },
-    {
-      density: "comfortable",
-      iconBefore: true,
-      css: {
-        wrapper: {
-          ps: "7"
-        }
-      }
-    },
-    {
-      density: "comfortable",
-      iconAfter: true,
-      css: {
-        wrapper: {
-          pe: "7"
-        }
-      }
-    },
-    {
-      density: "comfortable",
-      variant: "checkbox",
-      css: {
-        wrapper: {
-          ps: "7"
-        }
-      }
-    },
-    {
-      density: "spacious",
-      iconBefore: true,
-      css: {
-        wrapper: {
-          ps: "9"
-        }
-      }
-    },
-    {
-      density: "spacious",
-      iconAfter: true,
-      css: {
-        wrapper: {
-          pe: "9"
-        }
-      }
-    },
-    {
-      density: "spacious",
-      variant: "checkbox",
-      css: {
-        wrapper: {
-          ps: "9"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    variant: "default",
-    density: "compact",
-    selected: false
-  }
-});
-const listItemGroupRecipe = defineSlotRecipe({
-  className: "listItemGroup",
-  jsx: ["ListItemGroup"],
-  slots: ["wrapper", "groupLabel", "divider"],
-  base: {
-    wrapper: {
-      width: "full"
-    },
-    groupLabel: {
-      ...globalBaseStyles,
-      color: "text.subtlest",
-      borderStyle: "solid",
-      borderWidth: "1",
-      borderColor: "transparent"
-    },
-    divider: {}
-  },
-  variants: {
-    density: {
-      compact: {
-        groupLabel: {
-          px: "10",
-          pt: "8",
-          pb: "2",
-          fontSize: "12"
-        },
-        divider: {
-          my: "4",
-          mx: "10"
-        }
-      },
-      comfortable: {
-        groupLabel: {
-          px: "12",
-          pt: "12",
-          pb: "4",
-          fontSize: "14"
-        },
-        divider: {
-          my: "6",
-          mx: "12"
-        }
-      },
-      spacious: {
-        groupLabel: {
-          px: "16",
-          pt: "16",
-          pb: "6",
-          fontSize: "16"
-        },
-        divider: {
-          my: "8",
-          mx: "16"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    density: "compact"
-  }
-});
-const highlightTextRecipe = defineRecipe({
-  className: "highlightText",
-  jsx: ["HighlightText"],
-  base: {
-    ...globalBaseStyles,
-    bg: { base: "gold.10", _dark: "gold.60" },
-    color: "text",
-    borderRadius: "2",
-    lineHeight: "inherit"
-  },
-  variants: {}
-});
-const tagBase = {
-  ...globalBaseStyles,
-  display: "flex",
-  alignItems: "center",
-  py: "0",
-  borderRadius: "2",
-  gap: "1",
-  px: "4",
-  w: "fit",
-  h: "20",
-  fontSize: "14",
-  fontWeight: "medium",
-  lineHeight: "tight",
-  whiteSpace: "nowrap"
-};
-const tagVariant = {
-  variant: {
-    default: {},
-    bold: {}
-  },
-  hue: {
-    slate: {},
-    tan: {},
-    red: {},
-    tomato: {},
-    orange: {},
-    yellow: {},
-    green: {},
-    grass: {},
-    mint: {},
-    cyan: {},
-    blue: {},
-    indigo: {},
-    purple: {},
-    violet: {},
-    pink: {},
-    rose: {},
-    magenta: {}
-  },
-  iconBefore: {
-    true: {
-      gap: "1",
-      pl: "1"
-    }
-  },
-  iconAfter: {
-    true: {
-      gap: "1",
-      pr: "1"
-    }
-  },
-  hasIcon: {
-    true: {},
-    false: {
-      px: "4"
-    }
-  }
-};
-const tagRecipe = defineRecipe({
-  className: "tag",
-  jsx: ["Tag"],
-  base: tagBase,
-  variants: tagVariant,
-  defaultVariants: {
-    variant: "default",
-    hue: "slate"
-  },
-  compoundVariants: [
-    {
-      hue: "slate",
-      variant: "default",
-      css: {
-        color: { base: "slate.70", _dark: "slate.20" },
-        bg: { base: "slate.10", _dark: "slate.70" }
-      }
-    },
-    {
-      hue: "slate",
-      variant: "bold",
-      css: {
-        color: { base: "slate.0", _dark: "slate.80" },
-        bg: { base: "slate.50", _dark: "slate.20" }
-      }
-    },
-    {
-      hue: "tan",
-      variant: "default",
-      css: {
-        color: { base: "tan.70", _dark: "tan.20" },
-        bg: { base: "tan.10", _dark: "tan.70" }
-      }
-    },
-    {
-      hue: "tan",
-      variant: "bold",
-      css: {
-        color: { base: "slate.0", _dark: "tan.80" },
-        bg: { base: "tan.50", _dark: "tan.20" }
-      }
-    },
-    {
-      hue: "red",
-      variant: "default",
-      css: {
-        color: { base: "red.70", _dark: "red.10" },
-        bg: { base: "red.10", _dark: "red.70" }
-      }
+    {
+      hue: "red",
+      variant: "default",
+      css: {
+        color: { base: "red.70", _dark: "red.10" },
+        bg: { base: "red.10", _dark: "red.70" }
+      }
     },
     {
       hue: "red",
@@ -5990,19 +5647,45 @@ const iconRecipe = defineRecipe({
   jsx: ["Icon"],
   base: {
     aspectRatio: "square",
-    fill: "icon.decorative"
+    fill: "icon.decorative",
+    w: "24"
+    // Default size here does not affect the classNames, so it's safe to set
   },
   variants: {
     size: sizeVariants
   },
   defaultVariants: {
-    size: "24"
+    // Don't set default size because then it's hard to override in recipes
+  }
+});
+const breakpointIndicatorRecipe = defineRecipe({
+  className: "breakpointIndicator",
+  jsx: ["BreakpointIndicator"],
+  base: {
+    zIndex: "1100"
+  },
+  variants: {
+    variant: {
+      default: {
+        position: "relative",
+        bottom: "auto",
+        right: "auto"
+      },
+      fixed: {
+        position: "fixed",
+        bottom: "40",
+        right: "16"
+      }
+    }
   },
-  staticCss: [{ size: ["*"] }]
+  defaultVariants: {
+    variant: "default"
+  }
 });
 const regularRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   boxRecipe,
+  breakpointIndicatorRecipe,
   cardRecipe,
   checkboxInputRecipe,
   codeRecipe,
@@ -6012,8 +5695,6 @@ const regularRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
   iconRecipe,
   labelRecipe,
   linkRecipe,
-  listItemGroupRecipe,
-  listItemRecipe,
   listRecipe,
   preRecipe,
   radioInputRecipe,
@@ -6027,6 +5708,9 @@ const regularRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
 const buttonBaseStyles = {
   container: {
     ...globalBaseStyles,
+    "--icon-size": "token(sizes.24)",
+    "--icon-margin-outside": "token(sizes.6)",
+    "--icon-margin-inside": "token(sizes.1)",
     position: "relative",
     appearance: "none",
     display: "flex",
@@ -6035,6 +5719,7 @@ const buttonBaseStyles = {
     minWidth: "0",
     width: "fit",
     height: "fit",
+    flexShrink: 0,
     transitionDuration: "fast",
     transitionProperty: "background, border-color, color, box-shadow",
     transitionTimingFunction: "default",
@@ -6067,10 +5752,19 @@ const buttonBaseStyles = {
     }
   },
   icon: {
+    w: "var(--icon-size)",
     aspectRatio: "square",
     transitionDuration: "fast",
     transitionProperty: "fill",
     transitionTimingFunction: "default"
+  },
+  iconBefore: {
+    ms: "calc(var(--icon-margin-outside) * -1)",
+    me: "calc(var(--icon-margin-inside) * -1)"
+  },
+  iconAfter: {
+    ms: "calc(var(--icon-margin-inside) * -1)",
+    me: "calc(var(--icon-margin-outside) * -1)"
   }
 };
 const buttonVariants = {
@@ -6078,6 +5772,7 @@ const buttonVariants = {
     standard: {
       container: {
         bg: "bg.neutral",
+        borderColor: "transparent",
         color: "text",
         _hover: {
           bg: "bg.neutral.hovered"
@@ -6096,6 +5791,7 @@ const buttonVariants = {
     primary: {
       container: {
         bg: "bg.neutral.boldest",
+        borderColor: "transparent",
         color: "text.inverse",
         _hover: {
           bg: "bg.neutral.bold.hovered"
@@ -6136,6 +5832,7 @@ const buttonVariants = {
     ghost: {
       container: {
         bg: "bg.neutral.subtle",
+        borderColor: "transparent",
         color: "text",
         _hover: {
           bg: "bg.neutral.subtle.hovered"
@@ -6154,6 +5851,7 @@ const buttonVariants = {
     cta: {
       container: {
         bg: "gold.20",
+        borderColor: "transparent",
         color: "neutral.90",
         _hover: {
           bg: "gold.15"
@@ -6175,6 +5873,7 @@ const buttonVariants = {
     danger: {
       container: {
         bg: "red.50",
+        borderColor: "transparent",
         color: "neutral.0",
         _hover: {
           bg: "red.40"
@@ -6196,6 +5895,7 @@ const buttonVariants = {
     selected: {
       container: {
         bg: "bg.selected",
+        borderColor: "transparent",
         color: "text.selected",
         icon: { fill: "icon.selected" },
         _hover: {
@@ -6222,6 +5922,7 @@ const buttonVariants = {
     selectedBold: {
       container: {
         bg: "bg.selected.bold",
+        borderColor: "transparent",
         color: "text.inverse",
         _hover: {
           bg: "bg.selected.bold.hovered"
@@ -6245,31 +5946,33 @@ const buttonVariants = {
 const buttonRecipe = defineSlotRecipe({
   className: "button",
   jsx: ["Button"],
-  slots: ["container", "icon"],
+  slots: ["container", "icon", "iconBefore", "iconAfter"],
   base: buttonBaseStyles,
   variants: {
     ...buttonVariants,
     size: {
-      md: {
+      sm: {
         container: {
-          fontSize: "16",
-          py: "3",
-          px: "12"
+          fontSize: "14",
+          py: "0",
+          px: "8"
         },
         icon: {
-          w: "24",
-          h: "24"
+          "--icon-size": "token(sizes.22)",
+          "--icon-margin-outside": "token(sizes.5)",
+          "--icon-margin-inside": "token(sizes.1)"
         }
       },
-      xl: {
+      md: {
         container: {
-          fontSize: "20",
-          py: "9",
-          px: "16"
+          fontSize: "16",
+          py: "3",
+          px: "12"
         },
         icon: {
-          w: "28",
-          h: "28"
+          "--icon-size": "token(sizes.24)",
+          "--icon-margin-outside": "token(sizes.8)",
+          "--icon-margin-inside": "token(sizes.1)"
         }
       },
       lg: {
@@ -6279,19 +5982,21 @@ const buttonRecipe = defineSlotRecipe({
           px: "14"
         },
         icon: {
-          w: "24",
-          h: "24"
+          "--icon-size": "token(sizes.24)",
+          "--icon-margin-outside": "token(sizes.10)",
+          "--icon-margin-inside": "token(sizes.1)"
         }
       },
-      sm: {
+      xl: {
         container: {
-          fontSize: "14",
-          py: "1",
-          px: "8"
+          fontSize: "20",
+          py: "9",
+          px: "16"
         },
         icon: {
-          w: "22",
-          h: "22"
+          "--icon-size": "token(sizes.28)",
+          "--icon-margin-outside": "token(sizes.10)",
+          "--icon-margin-inside": "token(sizes.1)"
         }
       }
     },
@@ -6302,64 +6007,6 @@ const buttonRecipe = defineSlotRecipe({
       true: { container: {} }
     }
   },
-  compoundVariants: [
-    {
-      size: "md",
-      iconBefore: true,
-      css: {
-        container: { ps: "3" }
-      }
-    },
-    {
-      size: "md",
-      iconAfter: true,
-      css: {
-        container: { pe: "3" }
-      }
-    },
-    {
-      size: "sm",
-      iconBefore: true,
-      css: {
-        container: { ps: "2" }
-      }
-    },
-    {
-      size: "sm",
-      iconAfter: true,
-      css: {
-        container: { pe: "2" }
-      }
-    },
-    {
-      size: "lg",
-      iconBefore: true,
-      css: {
-        container: { ps: "5" }
-      }
-    },
-    {
-      size: "lg",
-      iconAfter: true,
-      css: {
-        container: { pe: "5" }
-      }
-    },
-    {
-      size: "xl",
-      iconBefore: true,
-      css: {
-        container: { ps: "7" }
-      }
-    },
-    {
-      size: "xl",
-      iconAfter: true,
-      css: {
-        container: { pe: "7" }
-      }
-    }
-  ],
   defaultVariants: {
     variant: "standard",
     size: "md"
@@ -6660,81 +6307,6 @@ const menuBase = {
     transitionTimingFunction: "default",
     outline: "none"
   },
-  // list: {
-  //   display: 'flex',
-  //   flexDirection: 'column',
-  // },
-  // item: {
-  //   display: 'flex',
-  //   alignItems: 'flex-start',
-  //   gap: '4',
-  //   width: 'full',
-  //   textAlign: 'left',
-  //   borderWidth: '1',
-  //   borderStyle: 'solid',
-  //   borderColor: 'transparent',
-  //   color: 'text',
-  //   cursor: 'pointer',
-  //   outline: '2px solid transparent',
-  //   outlineOffset: '-2',
-  //   bg: 'transparent',
-  //   _hover: {
-  //     bg: 'bg.neutral.hovered',
-  //   },
-  //   '&:is(:active)': {
-  //     bg: 'bg.neutral.pressed',
-  //   },
-  //   _focus: {
-  //     bg: 'bg.neutral.hovered',
-  //   },
-  //   _selected: {
-  //     bg: 'surface.selected',
-  //     _hover: {
-  //       bg: 'surface.selected.hovered',
-  //     },
-  //     '&:is(:active)': {
-  //       bg: 'surface.selected.pressed',
-  //     },
-  //     _focus: {
-  //       bg: 'surface.selected.hovered',
-  //     },
-  //   },
-  //   _disabled: {
-  //     opacity: '0.4',
-  //     cursor: 'not-allowed',
-  //     pointerEvents: 'none',
-  //   },
-  // },
-  // icon: {
-  //   aspectRatio: 'square',
-  //   transitionDuration: 'fast',
-  //   transitionProperty: 'fill',
-  //   transitionTimingFunction: 'default',
-  //   flexShrink: '0',
-  // },
-  // itemMain: {
-  //   display: 'flex',
-  //   flexDirection: 'column',
-  //   gap: '0',
-  //   minWidth: '0',
-  // },
-  // itemLabel: {
-  //   color: 'text',
-  // },
-  // itemDescription: {
-  //   color: 'text.subtlest',
-  //   lineHeight: 'tight',
-  // },
-  // groupLabel: {
-  //   color: 'text.subtlest',
-  //   borderStyle: 'solid',
-  //   borderWidth: '1',
-  //   borderColor: 'transparent',
-  // },
-  // divider: {
-  //   my: '4',
-  //   mx: '12',
-  // },
   backHeader: {
     display: "flex",
     alignItems: "center",
@@ -6783,11 +6355,6 @@ const menuBase = {
     height: "fit-content",
     overflow: "visible"
   },
-  // highlight: {
-  //   bg: 'gold.5',
-  //   color: 'text',
-  //   borderRadius: '2',
-  // },
   noResults: {
     px: "12",
     py: "10",
@@ -6797,16 +6364,6 @@ const menuBase = {
 const menuVariants = {
   density: {
     compact: {
-      // item: {
-      //   py: '3',
-      //   px: '10',
-      // },
-      // groupLabel: {
-      //   px: '10',
-      //   pt: '8',
-      //   pb: '2',
-      //   fontSize: '12',
-      // },
       backHeader: {
         py: "1",
         pe: "18",
@@ -6814,30 +6371,8 @@ const menuVariants = {
         textStyle: "body.md",
         color: "text"
       }
-      // itemLabel: {
-      //   textStyle: 'body.md',
-      //   color: 'text',
-      // },
-      // itemDescription: {
-      //   textStyle: 'body.xs',
-      //   lineHeight: 'tight',
-      // },
-      // icon: {
-      //   w: '24',
-      //   h: '24',
-      // },
     },
     comfortable: {
-      // item: {
-      //   py: '7',
-      //   px: '12',
-      // },
-      // groupLabel: {
-      //   px: '12',
-      //   pt: '12',
-      //   pb: '4',
-      //   fontSize: '14',
-      // },
       backHeader: {
         py: "5",
         pe: "20",
@@ -6845,30 +6380,8 @@ const menuVariants = {
         textStyle: "body.md",
         color: "text"
       }
-      // itemLabel: {
-      //   textStyle: 'body.md',
-      //   color: 'text',
-      // },
-      // itemDescription: {
-      //   textStyle: 'body.xs',
-      //   lineHeight: 'tight',
-      // },
-      // icon: {
-      //   w: '24',
-      //   h: '24',
-      // },
     },
     spacious: {
-      // item: {
-      //   py: '9',
-      //   px: '16',
-      // },
-      // groupLabel: {
-      //   px: '16',
-      //   pt: '16',
-      //   pb: '6',
-      //   fontSize: '16',
-      // },
       backHeader: {
         py: "7",
         pe: "24",
@@ -6876,82 +6389,8 @@ const menuVariants = {
         textStyle: "body.lg",
         color: "text"
       }
-      // itemLabel: {
-      //   textStyle: 'body.lg',
-      //   color: 'text',
-      // },
-      // itemDescription: {
-      //   textStyle: 'body.sm',
-      //   lineHeight: 'tight',
-      // },
-      // icon: {
-      //   w: '28',
-      //   h: '28',
-      // },
     }
   },
-  // itemVariant: {
-  //   default: {},
-  //   checkbox: {
-  //     item: {
-  //       _hover: {
-  //         bg: 'surface',
-  //       },
-  //       _focus: {
-  //         bg: 'bg.neutral.hovered',
-  //       },
-  //       '&:is(:active), &:is([data-active="true"]):hover': {
-  //         bg: 'surface',
-  //       },
-  //       _selected: {
-  //         bg: 'surface',
-  //         _hover: {
-  //           bg: 'surface',
-  //         },
-  //         _focus: {
-  //           bg: 'bg.neutral.hovered',
-  //         },
-  //       },
-  //     },
-  //   },
-  //   toggle: {
-  //     item: {
-  //       _hover: {
-  //         bg: 'surface',
-  //       },
-  //       _focus: {
-  //         bg: 'bg.neutral.hovered',
-  //       },
-  //       '&:is(:active), &:is([data-active="true"]):hover': {
-  //         bg: 'surface',
-  //       },
-  //       _selected: {
-  //         bg: 'surface',
-  //         _hover: {
-  //           bg: 'surface',
-  //         },
-  //         _focus: {
-  //           bg: 'bg.neutral.hovered',
-  //         },
-  //       },
-  //     },
-  //   },
-  //   divider: {
-  //     item: {
-  //       display: 'none',
-  //     },
-  //   },
-  // },
-  // iconBefore: {
-  //   true: {
-  //     item: {},
-  //   },
-  // },
-  // iconAfter: {
-  //   true: {
-  //     item: {},
-  //   },
-  // },
   panel: {
     true: {
       wrapper: {
@@ -6970,31 +6409,25 @@ const menuRecipe = defineSlotRecipe({
   jsx: ["Menu", "MenuItem", "MenuGroup", "SubMenu"],
   slots: [
     "wrapper",
-    // 'list',
-    // 'item',
-    // 'icon',
-    // 'itemMain',
-    // 'itemLabel',
-    // 'itemDescription',
-    // 'groupLabel',
-    // 'divider',
     "backHeader",
     "levelsViewport",
     "levelsTrack",
     "level",
     "sizeProbe",
-    // 'highlight',
     "noResults"
   ],
   base: menuBase,
   variants: menuVariants,
-  // compoundVariants: menuCompoundVariants,
   defaultVariants: {
     density: "compact"
   }
 });
 const textInputBase = {
   container: {
+    ...globalBaseStyles,
+    "--icon-size": "token(sizes.24)",
+    "--icon-margin": "token(sizes.3)",
+    "--input-icon-padding": "token(sizes.10)",
     position: "relative",
     width: "full",
     bg: "surface",
@@ -7040,14 +6473,6 @@ const textInputBase = {
         borderColor: "border.input"
       }
     },
-    _readOnly: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      _focusWithin: {
-        outlineColor: "transparent",
-        borderColor: "border.input"
-      }
-    },
     _groupDisabled: {
       opacity: 1
       // let FormField handle disabled state opacity
@@ -7069,6 +6494,8 @@ const textInputBase = {
     position: "absolute",
     top: "50%",
     transform: "translateY(-50%)",
+    w: "var(--icon-size)",
+    mx: "var(--icon-margin)",
     fill: "icon.decorative.subtle",
     mixBlendMode: { base: "multiply", _dark: "screen" },
     pointerEvents: "none",
@@ -7077,48 +6504,76 @@ const textInputBase = {
 };
 const textInputVariants = {
   size: {
-    md: {
+    sm: {
+      container: {
+        "--icon-size": "token(sizes.22)",
+        "--icon-margin": "token(sizes.2)",
+        "--input-icon-padding": "[26px]"
+      },
       input: {
-        py: 3,
-        px: 10,
-        fontSize: "16"
+        py: "0",
+        px: "8",
+        fontSize: "14"
       },
-      icon: {
-        mx: "3",
-        w: "24"
+      inputIconBefore: {
+        ps: "var(--input-icon-padding)"
+      },
+      inputIconAfter: {
+        pe: "var(--input-icon-padding)"
       }
     },
-    sm: {
+    md: {
+      container: {
+        "--icon-size": "token(sizes.24)",
+        "--icon-margin": "token(sizes.3)",
+        "--input-icon-padding": "[31px]"
+      },
       input: {
-        py: 0,
-        px: 8,
-        fontSize: "14"
+        py: "3",
+        px: "10",
+        fontSize: "16"
       },
-      icon: {
-        mx: "2",
-        w: "22"
+      inputIconBefore: {
+        ps: "var(--input-icon-padding)"
+      },
+      inputIconAfter: {
+        pe: "var(--input-icon-padding)"
       }
     },
     lg: {
+      container: {
+        "--icon-size": "token(sizes.24)",
+        "--icon-margin": "token(sizes.5)",
+        "--input-icon-padding": "[34px]"
+      },
       input: {
-        py: 7,
-        px: 12,
+        py: "7",
+        px: "12",
         fontSize: "16"
       },
-      icon: {
-        mx: "5",
-        w: "24"
+      inputIconBefore: {
+        ps: "var(--input-icon-padding)"
+      },
+      inputIconAfter: {
+        pe: "var(--input-icon-padding)"
       }
     },
     xl: {
+      container: {
+        "--icon-size": "token(sizes.28)",
+        "--icon-margin": "token(sizes.7)",
+        "--input-icon-padding": "[42px]"
+      },
       input: {
-        py: 9,
-        px: 16,
+        py: "9",
+        px: "16",
         fontSize: "20"
       },
-      icon: {
-        mx: "7",
-        w: "28"
+      inputIconBefore: {
+        ps: "var(--input-icon-padding)"
+      },
+      inputIconAfter: {
+        pe: "var(--input-icon-padding)"
       }
     }
   },
@@ -7145,71 +6600,12 @@ const textInputVariants = {
     }
   }
 };
-const textInputCompoundVariants = [
-  {
-    size: "md",
-    iconBefore: true,
-    css: {
-      input: { ps: "[31px]" }
-    }
-  },
-  {
-    size: "md",
-    iconAfter: true,
-    css: {
-      input: { pe: "[31px]" }
-    }
-  },
-  {
-    size: "sm",
-    iconBefore: true,
-    css: {
-      input: { ps: "[26px]" }
-    }
-  },
-  {
-    size: "sm",
-    iconAfter: true,
-    css: {
-      input: { pe: "[26px]" }
-    }
-  },
-  {
-    size: "lg",
-    iconBefore: true,
-    css: {
-      input: { ps: "[34px]" }
-    }
-  },
-  {
-    size: "lg",
-    iconAfter: true,
-    css: {
-      input: { pe: "[34px]" }
-    }
-  },
-  {
-    size: "xl",
-    iconBefore: true,
-    css: {
-      input: { ps: "[42px]" }
-    }
-  },
-  {
-    size: "xl",
-    iconAfter: true,
-    css: {
-      input: { pe: "[42px]" }
-    }
-  }
-];
 const textInputRecipe = defineSlotRecipe({
   className: "textInput",
   jsx: ["TextInput"],
-  slots: ["container", "input", "icon"],
+  slots: ["container", "input", "icon", "inputIconBefore", "inputIconAfter"],
   base: textInputBase,
   variants: textInputVariants,
-  compoundVariants: textInputCompoundVariants,
   defaultVariants: {
     size: "md"
   }
@@ -7224,7 +6620,8 @@ const formFieldBase = {
   inputs: {
     display: "flex",
     flexDirection: "column",
-    gap: "2"
+    gap: "8",
+    mt: "4"
   },
   labelWrapper: {
     alignItems: "center",
@@ -7292,12 +6689,6 @@ const avatarRecipe = defineSlotRecipe({
   className: "avatar",
   jsx: ["Avatar"],
   slots: ["root", "image", "fallback", "presence", "status"],
-  staticCss: [
-    {
-      size: ["xs", "sm", "md", "lx", "xl", "2xl"],
-      shape: ["circle", "square", "hexagon"]
-    }
-  ],
   base: {
     root: {
       display: "inline-flex",
@@ -7313,7 +6704,7 @@ const avatarRecipe = defineSlotRecipe({
     },
     image: {
       w: "full",
-      h: "full",
+      aspectRatio: "square",
       objectFit: "cover",
       overflow: "hidden"
     },
@@ -7322,7 +6713,7 @@ const avatarRecipe = defineSlotRecipe({
       alignItems: "center",
       justifyContent: "center",
       w: "full",
-      h: "full",
+      aspectRatio: "square",
       fontFamily: "body",
       fontWeight: "medium",
       textTransform: "uppercase",
@@ -7332,6 +6723,7 @@ const avatarRecipe = defineSlotRecipe({
       position: "absolute",
       bottom: "0",
       right: "0",
+      aspectRatio: "square",
       borderRadius: "100",
       borderWidth: "1",
       borderStyle: "solid",
@@ -7342,6 +6734,7 @@ const avatarRecipe = defineSlotRecipe({
       position: "absolute",
       top: "0",
       right: "0",
+      aspectRatio: "square",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -7356,104 +6749,86 @@ const avatarRecipe = defineSlotRecipe({
     size: {
       xs: {
         root: {
-          w: "16",
-          h: "16"
+          w: "16"
         },
         fallback: {
           fontSize: "8"
         },
         presence: {
-          w: "6",
-          h: "6"
+          w: "6"
         },
         status: {
-          w: "8",
-          h: "8"
+          w: "8"
         }
       },
       sm: {
         root: {
-          w: "20",
-          h: "20"
+          w: "20"
         },
         fallback: {
           fontSize: "10"
         },
         presence: {
-          w: "8",
-          h: "8"
+          w: "8"
         },
         status: {
-          w: "10",
-          h: "10"
+          w: "10"
         }
       },
       md: {
         root: {
-          w: "24",
-          h: "24"
+          w: "24"
         },
         fallback: {
           fontSize: "12"
         },
         presence: {
-          w: "8",
-          h: "8"
+          w: "8"
         },
         status: {
-          w: "10",
-          h: "10"
+          w: "10"
         }
       },
       lg: {
         root: {
-          w: "32",
-          h: "32"
+          w: "28"
         },
         fallback: {
           fontSize: "14"
         },
         presence: {
-          w: "10",
-          h: "10"
+          w: "10"
         },
         status: {
-          w: "12",
-          h: "12"
+          w: "12"
         }
       },
       xl: {
         root: {
-          w: "48",
-          h: "48"
+          w: "36"
         },
         fallback: {
           fontSize: "20"
         },
         presence: {
-          w: "12",
-          h: "12"
+          w: "12"
         },
         status: {
-          w: "16",
-          h: "16"
+          w: "16"
         }
       },
       "2xl": {
         root: {
-          w: "64",
-          h: "64"
+          w: "48"
         },
         fallback: {
           fontSize: "24"
         },
         presence: {
-          w: "14",
-          h: "14"
+          w: "14"
         },
         status: {
-          w: "20",
-          h: "20"
+          w: "20"
         }
       }
     },
@@ -7496,6 +6871,7 @@ const badgeRecipe = defineSlotRecipe({
   base: {
     root: {
       ...globalBaseStyles,
+      "--indicator-min-width": "token(sizes.16)",
       display: "inline-flex",
       position: "relative",
       verticalAlign: "middle"
@@ -7504,6 +6880,7 @@ const badgeRecipe = defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
+      h: "fit",
       borderRadius: "999",
       fontWeight: "medium",
       fontFamily: "body",
@@ -7517,24 +6894,35 @@ const badgeRecipe = defineSlotRecipe({
     size: {
       sm: {
         indicator: {
-          h: "6",
+          "--indicator-min-width": "token(sizes.16)",
+          minH: "6",
           fontSize: "10",
           p: "3"
         }
       },
       md: {
         indicator: {
-          h: "8",
+          "--indicator-min-width": "token(sizes.20)",
+          minH: "8",
           fontSize: "12",
           p: "4"
         }
       },
       lg: {
         indicator: {
-          h: "10",
+          "--indicator-min-width": "token(sizes.24)",
+          minH: "10",
           fontSize: "14",
           p: "5"
         }
+      },
+      xl: {
+        indicator: {
+          "--indicator-min-width": "token(sizes.28)",
+          minH: "12",
+          fontSize: "16",
+          p: "6"
+        }
       }
     },
     // When standalone (no children), don't use absolute positioning
@@ -7545,7 +6933,8 @@ const badgeRecipe = defineSlotRecipe({
         },
         indicator: {
           position: "static",
-          transform: "none"
+          transform: "none",
+          h: "fit"
         }
       },
       false: {
@@ -7558,20 +6947,18 @@ const badgeRecipe = defineSlotRecipe({
           position: "absolute",
           top: "0",
           right: "0",
-          transform: "translate(50%, -50%)"
+          transform: "translate(50%, -50%)",
+          h: "fit"
         }
       }
     },
     // Dot mode: smaller, no text
     dot: {
-      true: {
-        indicator: {
-          // Dot mode styles handled by base + size variants
-        }
-      },
+      true: {},
       false: {
         indicator: {
-          // Count mode - compound variants handle sizing
+          h: "fit",
+          minW: "var(--indicator-min-width)"
         }
       }
     },
@@ -7627,233 +7014,423 @@ const badgeRecipe = defineSlotRecipe({
       }
     }
   },
-  compoundVariants: [
-    // Count mode sizes (smaller than count mode)
-    {
-      dot: false,
-      size: "sm",
-      css: {
-        indicator: {
-          minW: "16",
-          h: "fit"
+  defaultVariants: {
+    size: "md",
+    variant: "danger"
+  }
+});
+const chipRecipe = defineSlotRecipe({
+  className: "chip",
+  jsx: ["Chip"],
+  slots: [
+    "container",
+    "innerWrapper",
+    "chipIcon",
+    "chipBadge",
+    "chipAvatar",
+    "slotItem"
+  ],
+  base: {
+    container: {
+      ...globalBaseStyles,
+      "--slotItem-margin": "token(sizes.2)",
+      "--chipIcon-margin": "var(--slotItem-margin)",
+      "--chipBadge-margin": "var(--slotItem-margin)",
+      "--chipAvatar-margin": "token(sizes.6)",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      appearance: "none",
+      width: "fit",
+      borderRadius: "999",
+      fontFamily: "body",
+      lineHeight: "default",
+      fontWeight: "medium",
+      whiteSpace: "nowrap",
+      verticalAlign: "middle",
+      cursor: "pointer",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      userSelect: "none",
+      border: "none",
+      outlineWidth: "2",
+      outlineStyle: "solid",
+      outlineColor: "transparent",
+      bg: "bg.neutral",
+      _hover: {
+        bg: "bg.neutral.hovered"
+      },
+      _active: {
+        bg: "bg.neutral.pressed"
+      },
+      _focusVisible: {
+        outlineColor: "border.focused"
+      },
+      _loading: {
+        cursor: "wait",
+        animation: "pulse"
+      },
+      _deleted: {
+        textDecoration: "line-through",
+        cursor: "not-allowed",
+        opacity: "[0.6]"
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        bg: "bg.disabled",
+        color: "text.disabled",
+        borderColor: "border.disabled",
+        _hover: {
+          bg: "bg.disabled",
+          color: "text.disabled",
+          borderColor: "border.disabled",
+          chipIcon: { fill: "icon.disabled" }
+        }
+      },
+      _selected: {
+        bg: "bg.neutral.boldest",
+        _hover: {
+          bg: "bg.neutral.bold.hovered"
+        },
+        _active: {
+          bg: "bg.neutral.bold.pressed"
         }
       }
     },
-    {
-      dot: false,
-      size: "md",
-      css: {
-        indicator: {
-          minW: "20",
-          h: "fit"
+    innerWrapper: {
+      color: "text",
+      display: "flex",
+      alignItems: "center",
+      "[data-selected=true] &": {
+        color: "text.inverse"
+      }
+    },
+    slotItem: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    chipIcon: {
+      fill: "icon.decorative",
+      aspectRatio: "square",
+      flexShrink: "0",
+      transitionDuration: "fast",
+      transitionProperty: "fill",
+      transitionTimingFunction: "default",
+      _groupHover: { fill: "icon.decorative.hovered" },
+      _groupActive: { fill: "icon.decorative.hovered" },
+      _groupDisabled: { fill: "icon.decorative" },
+      "[data-selected=true] &": {
+        fill: "icon.decorative.inverse"
+      },
+      ".group:is(:hover, [data-hover])[data-selected=true] &": {
+        fill: "icon.decorative.inverse.hovered"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        container: {
+          "--slotItem-margin": "token(sizes.2)",
+          "--chipAvatar-margin": "token(sizes.4)",
+          h: "20",
+          px: "6",
+          py: "0",
+          fontSize: "14"
+        },
+        innerWrapper: {
+          gap: "3"
+        },
+        chipIcon: {
+          w: "20"
+        }
+      },
+      md: {
+        container: {
+          "--slotItem-margin": "token(sizes.4)",
+          "--chipAvatar-margin": "token(sizes.6)",
+          h: "24",
+          px: "8",
+          py: "1",
+          fontSize: "14"
+        },
+        innerWrapper: {
+          gap: "5"
+        },
+        chipIcon: {
+          w: "20"
+        }
+      },
+      lg: {
+        container: {
+          "--slotItem-margin": "token(sizes.6)",
+          "--chipAvatar-margin": "token(sizes.8)",
+          h: "32",
+          px: "10",
+          py: "4",
+          fontSize: "16"
+        },
+        innerWrapper: {
+          gap: "8"
+        },
+        chipIcon: {
+          w: "24"
         }
       }
     },
-    {
-      dot: false,
-      size: "lg",
-      css: {
-        indicator: {
-          minW: "24",
-          h: "fit"
+    before: {
+      true: {
+        slotItem: {
+          ms: "calc(var(--slotItem-margin) * -1)"
+        },
+        chipIcon: {
+          ms: "calc(var(--chipIcon-margin) * -1)"
+        },
+        chipBadge: {
+          ms: "calc(var(--chipBadge-margin) * -1)"
+        },
+        chipAvatar: {
+          ms: "calc(var(--chipAvatar-margin) * -1)"
+        }
+      }
+    },
+    after: {
+      true: {
+        slotItem: {
+          me: "calc(var(--slotItem-margin) * -1)"
+        },
+        chipIcon: {
+          me: "calc(var(--chipIcon-margin) * -1)"
+        },
+        chipBadge: {
+          me: "calc(var(--chipBadge-margin) * -1)"
+        },
+        chipAvatar: {
+          me: "calc(var(--chipAvatar-margin) * -1)"
         }
       }
     }
-  ],
+  },
   defaultVariants: {
-    size: "md",
-    variant: "danger"
+    size: "md"
   }
 });
-const chipBase = {
-  container: {
-    ...globalBaseStyles,
-    position: "relative",
-    display: "inline-flex",
-    alignItems: "center",
-    appearance: "none",
-    width: "fit",
-    borderRadius: "999",
-    fontFamily: "body",
-    lineHeight: "default",
-    fontWeight: "medium",
-    whiteSpace: "nowrap",
-    verticalAlign: "middle",
-    cursor: "pointer",
-    transitionDuration: "fast",
-    transitionProperty: "background, color",
-    transitionTimingFunction: "default",
-    userSelect: "none",
-    border: "none",
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineColor: "transparent",
-    bg: "bg.neutral",
-    color: "text",
-    _hover: {
-      bg: "bg.neutral.hovered"
+const listItemRecipe = defineSlotRecipe({
+  className: "listItem",
+  jsx: ["ListItem"],
+  slots: [
+    "wrapper",
+    "icon",
+    "beforeSlot",
+    "afterSlot",
+    "itemMain",
+    "itemLabel",
+    "itemDescription",
+    "divider"
+  ],
+  base: {
+    wrapper: {
+      ...globalBaseStyles,
+      display: "flex",
+      alignItems: "start",
+      justifyContent: "start",
+      gap: "4",
+      width: "full",
+      py: "var(--list-item-padding-y)",
+      px: "var(--list-item-padding-x)",
+      textAlign: "left",
+      borderWidth: "1",
+      borderStyle: "solid",
+      borderColor: "transparent",
+      color: "text",
+      cursor: "pointer",
+      outline: "2px solid transparent",
+      outlineOffset: "-2",
+      bg: "transparent",
+      scrollSnapAlign: "start",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      _hover: {
+        bg: "bg.neutral.hovered"
+      },
+      "&:is(:active)": {
+        bg: "bg.neutral.hovered"
+      },
+      _focus: {
+        bg: "bg.neutral.hovered"
+      },
+      _disabled: {
+        opacity: "0.4",
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
     },
-    _active: {
-      bg: "bg.neutral.pressed"
+    icon: {
+      aspectRatio: "square",
+      transitionDuration: "fast",
+      transitionProperty: "fill",
+      transitionTimingFunction: "default",
+      flexShrink: "0",
+      w: "var(--list-item-icon-size)",
+      h: "var(--list-item-icon-size)"
+    },
+    itemMain: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0",
+      minWidth: "0"
     },
-    _focusVisible: {
-      outlineColor: "border.focused"
+    itemLabel: {
+      color: "text",
+      fontSize: "var(--list-item-label-size)"
     },
-    _loading: {
-      cursor: "wait",
-      animation: "pulse"
+    itemDescription: {
+      color: "text.subtlest",
+      fontSize: "var(--list-item-description-size)",
+      lineHeight: "tight"
     },
-    _deleted: {
-      textDecoration: "line-through",
-      cursor: "not-allowed",
-      opacity: 0.6
+    beforeSlot: {
+      ms: "calc(var(--list-item-slot-margin) * -1)"
     },
-    _disabled: {
-      cursor: "not-allowed",
-      bg: "bg.disabled",
-      color: "text.disabled",
-      borderColor: "border.disabled",
-      _hover: {
-        bg: "bg.disabled",
-        color: "text.disabled",
-        borderColor: "border.disabled",
-        chipIcon: { fill: "icon.disabled" }
-      }
+    afterSlot: {
+      me: "calc(var(--list-item-slot-margin) * -1)"
     },
-    _selected: {
-      bg: "bg.neutral.boldest",
-      color: "text.inverse",
-      // chipIcon: { fill: 'icon.decorative.inverse' },
-      _hover: {
-        bg: "bg.neutral.bold.hovered"
-        // chipIcon: { fill: 'icon.inverse' },
-      },
-      _active: {
-        bg: "bg.neutral.bold.pressed"
-        // chipIcon: { fill: 'icon.inverse' },
-      }
+    divider: {
+      width: "full",
+      py: "var(--list-item-padding-y)",
+      px: "var(--list-item-padding-x)"
     }
   },
-  chipIcon: {
-    fill: "icon.decorative",
-    aspectRatio: "square",
-    transitionDuration: "fast",
-    transitionProperty: "fill",
-    transitionTimingFunction: "default",
-    _groupHover: { fill: "icon.decorative.hovered" },
-    _groupActive: { fill: "icon.decorative.hovered" },
-    _groupDisabled: { fill: "icon.decorative" },
-    "[data-selected=true] &": {
-      fill: "icon.decorative.inverse"
-    },
-    ".group:is(:hover, [data-hover])[data-selected=true] &": {
-      fill: "icon.decorative.inverse.hovered"
-    }
-  }
-};
-const chipRecipe = defineSlotRecipe({
-  className: "chip",
-  jsx: ["Chip"],
-  slots: ["container", "chipIcon"],
-  base: chipBase,
   variants: {
-    size: {
-      md: {
-        container: {
-          gap: "4",
-          h: "24",
-          px: "8",
-          py: "1",
-          fontSize: "14"
-        },
-        chipIcon: {
-          w: "20",
-          h: "20"
+    variant: {
+      default: {},
+      checkbox: {
+        wrapper: {
+          _hover: {
+            bg: "bg.neutral.hovered"
+          },
+          _focus: {
+            bg: "bg.neutral.hovered"
+          },
+          '&:is(:active), &:is([data-active="true"]):hover': {
+            bg: "bg.neutral.hovered"
+          },
+          _selected: {
+            bg: "surface",
+            _hover: {
+              bg: "surface"
+            },
+            _focus: {
+              bg: "bg.neutral.hovered"
+            }
+          }
         }
       },
-      sm: {
-        container: {
-          gap: "2",
-          h: "20",
-          px: "6",
-          py: "0",
-          fontSize: "14"
-        },
-        chipIcon: {
-          w: "20",
-          h: "20"
+      toggle: {
+        wrapper: {
+          _hover: {
+            bg: "bg.neutral.hovered"
+          },
+          _focus: {
+            bg: "bg.neutral.hovered"
+          },
+          '&:is(:active), &:is([data-active="true"]):hover': {
+            bg: "bg.neutral.hovered"
+          },
+          _selected: {
+            bg: "surface",
+            _hover: {
+              bg: "surface"
+            },
+            _focus: {
+              bg: "bg.neutral.hovered"
+            }
+          }
         }
       },
-      lg: {
-        container: {
-          gap: "4",
-          h: "32",
-          px: "10",
-          py: "4",
-          fontSize: "16"
-        },
-        chipIcon: {
-          w: "24",
-          h: "24"
+      divider: {}
+    },
+    density: listDensityWrapperVars,
+    selected: {
+      true: {
+        wrapper: {
+          bg: "surface.selected",
+          _hover: {
+            bg: "surface.selected.hovered"
+          },
+          "&:is(:active)": {
+            bg: "surface.selected.pressed"
+          },
+          _focusVisible: {
+            bg: "surface.selected.hovered"
+          }
         }
-      }
+      },
+      false: {}
     },
-    before: {
-      true: { container: {} }
+    iconBefore: {
+      true: {},
+      false: {}
     },
-    after: {
-      true: { container: {} }
+    iconAfter: {
+      true: {},
+      false: {}
     }
   },
-  compoundVariants: [
-    {
-      size: "md",
-      before: true,
-      css: {
-        container: { ps: "2" }
-      }
-    },
-    {
-      size: "md",
-      after: true,
-      css: {
-        container: { pe: "2" }
-      }
-    },
-    {
-      size: "sm",
-      before: true,
-      css: {
-        container: { ps: "2" }
-      }
-    },
-    {
-      size: "sm",
-      after: true,
-      css: {
-        container: { pe: "2" }
-      }
+  defaultVariants: {
+    variant: "default",
+    density: "compact"
+  }
+});
+const listItemGroupRecipe = defineSlotRecipe({
+  className: "listItemGroup",
+  jsx: ["ListItemGroup"],
+  slots: ["wrapper", "groupLabel", "divider"],
+  base: {
+    wrapper: {
+      width: "full"
     },
-    {
-      size: "lg",
-      before: true,
-      css: {
-        container: { ps: "4" }
-      }
+    groupLabel: {
+      ...globalBaseStyles,
+      color: "text.subtlest",
+      px: "var(--list-group-label-padding-x)",
+      pt: "var(--list-group-label-padding-top)",
+      pb: "var(--list-group-label-padding-bottom)",
+      fontSize: "var(--list-group-label-size)",
+      borderStyle: "solid",
+      borderWidth: "1",
+      borderColor: "transparent"
     },
-    {
-      size: "lg",
-      after: true,
-      css: {
-        container: { pe: "4" }
-      }
+    divider: {
+      my: "var(--list-group-divider-margin-y)",
+      mx: "var(--list-group-divider-margin-x)"
     }
-  ],
+  },
+  variants: {
+    density: listDensityWrapperVars
+  },
   defaultVariants: {
-    size: "md"
+    density: "compact"
   }
 });
 const modalBase = {
+  positionWrapper: {
+    "--wrapper-p": {
+      base: "token(sizes.0)",
+      xs: "token(sizes.12)",
+      sm: "token(sizes.32)",
+      md: "token(sizes.56)"
+    },
+    position: "fixed",
+    inset: "0",
+    display: "grid",
+    p: "var(--wrapper-p)",
+    w: "100vw",
+    h: "100vh",
+    zIndex: 1100
+  },
   overlay: {
     position: "fixed",
     inset: "0",
@@ -7869,26 +7446,15 @@ const modalBase = {
   },
   container: {
     ...globalBaseStyles,
-    position: "fixed",
-    top: "50%",
-    left: "50%",
     display: "flex",
     flexDirection: "column",
-    width: "full",
-    maxHeight: "95vh",
+    maxW: "calc(100vw - (2 * var(--wrapper-p)))",
+    maxH: "calc(100vh - (2 * var(--wrapper-p)))",
     bg: "surface.overlay",
     borderRadius: "12",
     boxShadow: "overlay",
     outline: "none",
-    zIndex: 1101,
-    // Initial state matches animation start
-    opacity: "0",
-    transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)",
-    // Animation handled via data-state
-    animation: "modalScaleIn 150ms ease-out forwards",
-    '&[data-state="closing"]': {
-      animation: "modalScaleOut 150ms ease-out forwards"
-    }
+    zIndex: 1101
   },
   header: {
     display: "flex",
@@ -7926,60 +7492,82 @@ const modalBase = {
     borderTop: "default"
   }
 };
+const mobile = {
+  xsDown: {
+    width: "100vw",
+    height: "100vh",
+    maxWidth: "100vw",
+    maxHeight: "100vh",
+    borderRadius: "0"
+  }
+};
 const modalVariants = {
   size: {
     sm: {
       container: {
-        maxWidth: "md"
+        w: "md",
+        ...mobile
       }
     },
     md: {
       container: {
-        maxWidth: "xl"
+        w: "xl",
+        ...mobile
       }
     },
     lg: {
       container: {
-        maxWidth: "3xl"
+        w: "3xl",
+        ...mobile
       }
     },
     xl: {
       container: {
-        maxWidth: "5xl"
+        w: "5xl",
+        ...mobile
       }
     },
     full: {
       container: {
-        maxWidth: "95vw"
+        w: "95vw",
+        ...mobile
       }
     },
-    mobile: {
+    fullPage: {
+      positionWrapper: {
+        "--wrapper-p": "token(sizes.0)"
+      },
       container: {
-        width: "full",
-        height: "full",
-        maxWidth: "100vw",
-        maxHeight: "100vh",
-        borderRadius: "0"
+        w: "100vw",
+        h: "100vh",
+        maxW: "100vw",
+        maxH: "100vh",
+        borderRadius: "0",
+        ...mobile
       }
     }
   },
-  variant: {
-    default: {
+  position: {
+    centered: {
+      positionWrapper: {
+        placeContent: "center"
+      },
       container: {
-        xsDown: {
-          width: "full",
-          height: "full",
-          maxWidth: "100vw",
-          maxHeight: "100vh",
-          borderRadius: "0"
+        animation: "modalScaleIn 150ms ease-out forwards",
+        '&[data-state="closing"]': {
+          animation: "modalScaleOut 150ms ease-out forwards"
         }
       }
     },
-    confirmation: {
+    top: {
+      positionWrapper: {
+        placeContent: "start center"
+      },
       container: {
-        height: "fit",
-        width: "md",
-        maxWidth: "90vw"
+        animation: "modalScaleInTop 150ms ease-out forwards",
+        '&[data-state="closing"]': {
+          animation: "modalScaleOutTop 150ms ease-out forwards"
+        }
       }
     }
   }
@@ -7988,6 +7576,7 @@ const modalRecipe = defineSlotRecipe({
   className: "modal",
   jsx: ["Modal", "ModalHeader", "ModalBody", "ModalFooter"],
   slots: [
+    "positionWrapper",
     "overlay",
     "container",
     "header",
@@ -7999,8 +7588,8 @@ const modalRecipe = defineSlotRecipe({
   base: modalBase,
   variants: modalVariants,
   defaultVariants: {
-    variant: "default",
-    size: "md"
+    size: "md",
+    position: "centered"
   }
 });
 const datePickerBase = {
@@ -8172,24 +7761,31 @@ const datePickerVariants = {
   size: {
     sm: {
       input: {
-        py: 0,
-        px: 8,
+        py: "0",
+        px: "8",
         fontSize: "14"
       }
     },
     md: {
       input: {
-        py: 3,
-        px: 10,
+        py: "3",
+        px: "10",
         fontSize: "16"
       }
     },
     lg: {
       input: {
-        py: 7,
-        px: 12,
+        py: "7",
+        px: "12",
         fontSize: "16"
       }
+    },
+    xl: {
+      input: {
+        py: "9",
+        px: "16",
+        fontSize: "20"
+      }
     }
   }
 };
@@ -8364,24 +7960,31 @@ const timePickerVariants = {
   size: {
     sm: {
       input: {
-        py: 0,
-        px: 8,
+        py: "0",
+        px: "8",
         fontSize: "14"
       }
     },
     md: {
       input: {
-        py: 3,
-        px: 10,
+        py: "3",
+        px: "10",
         fontSize: "16"
       }
     },
     lg: {
       input: {
-        py: 7,
-        px: 12,
+        py: "7",
+        px: "12",
         fontSize: "16"
       }
+    },
+    xl: {
+      input: {
+        py: "9",
+        px: "16",
+        fontSize: "20"
+      }
     }
   }
 };
@@ -8448,6 +8051,57 @@ const breadcrumbsRecipe = defineSlotRecipe({
     }
   }
 });
+const kbdRecipe = defineSlotRecipe({
+  className: "kbd",
+  slots: ["kbdGroup", "key"],
+  base: {
+    kbdGroup: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "2",
+      verticalAlign: "middle"
+    },
+    key: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      h: "16",
+      w: "fit",
+      minW: "16",
+      rounded: "6",
+      cornerShape: "squircle",
+      bg: "bg.neutral",
+      px: "4",
+      fontFamily: "mono",
+      fontVariant: "mono",
+      lineHeight: "tight",
+      fontWeight: "bold",
+      color: "text.subtle",
+      userSelect: "none",
+      pointerEvents: "none",
+      fontSize: "10"
+    }
+  },
+  variants: {
+    variant: {
+      default: {
+        key: {
+          fontSize: "10"
+        }
+      },
+      symbol: {
+        key: {
+          fontSize: "12"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   avatarRecipe,
@@ -8459,6 +8113,9 @@ const slotRecipes = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   datePickerRecipe,
   formFieldRecipe,
   iconButtonRecipe,
+  kbdRecipe,
+  listItemGroupRecipe,
+  listItemRecipe,
   menuRecipe,
   modalRecipe,
   radioRecipe,
@@ -9723,4 +9380,4 @@ export {
   breakpoints as b,
   containerSizes as c
 };
-//# sourceMappingURL=cetec-preset-kUkA_FyU.js.map
+//# sourceMappingURL=cetec-preset-BB-QcJUK.js.map