@commercetools/nimbus 2.11.0 → 3.0.0

package/dist/chunks/{index-CTrsTsK6.es.js → index-B_vTRVge.es.js}

@@ -1,4 +1,4 @@
-import { defineAnimationStyles as p, defineConditions as u, defineGlobalStyles as m, defineLayerStyles as b, defineRecipe as a, defineSlotRecipe as e, defineSemanticTokens as d, defineTextStyles as h, defineTokens as o, createSystem as f, defineConfig as x } from "@chakra-ui/react/styled-system";
+import { defineAnimationStyles as p, defineConditions as u, defineGlobalStyles as m, defineLayerStyles as b, defineRecipe as r, defineSlotRecipe as e, defineSemanticTokens as d, defineTextStyles as h, defineTokens as o, createSystem as f, defineConfig as x } from "@chakra-ui/react/styled-system";
 import { defaultBaseConfig as v } from "@chakra-ui/react/preset-base";
 import { themeTokens as t, designTokens as y } from "@commercetools/nimbus-tokens";
 import { i as w } from "./icon.recipe-DjkjodUn.es.js";
@@ -52,8 +52,8 @@ const z = /* @__PURE__ */ p({
 });
 function S(l) {
   const n = {};
-  for (const r in l)
-    l[r]?.value ? n[r] = l[r].value : n[r] = l[r];
+  for (const a in l)
+    l[a]?.value ? n[a] = l[a].value : n[a] = l[a];
   return n;
 }
 const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
@@ -368,7 +368,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
       outlineOffset: "var(--focus-ring-offset)"
     }
   }
-}), W = /* @__PURE__ */ a({
+}), _ = /* @__PURE__ */ r({
   className: "nimbus-avatar",
   base: {
     display: "inline-flex",
@@ -386,6 +386,14 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     focusVisibleRing: "outside",
     "button&": {
       cursor: "button"
+    },
+    // Person-icon fallback sized relative to the avatar slot. The icon
+    // ships with width/height "1em", which would inherit the recipe's
+    // small text font-size. We override to ~70% of the slot so the icon
+    // visually balances initials text across all sizes.
+    "& > svg": {
+      width: "70%",
+      height: "70%"
     }
   },
   variants: {
@@ -398,7 +406,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), _ = /* @__PURE__ */ a({
+}), W = /* @__PURE__ */ r({
   className: "nimbus-badge",
   // Base styles applied to all instances of the component
   base: {
@@ -460,7 +468,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "md"
   }
-}), i = /* @__PURE__ */ a({
+}), i = /* @__PURE__ */ r({
   className: "nimbus-button",
   base: {
     borderRadius: "200",
@@ -632,7 +640,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "subtle"
   }
-}), T = /* @__PURE__ */ a({
+}), T = /* @__PURE__ */ r({
   className: "nimbus-code",
   base: {
     fontFamily: "mono",
@@ -692,14 +700,14 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "solid",
     size: "md"
   }
-}), H = /* @__PURE__ */ a({
+}), H = /* @__PURE__ */ r({
   className: "nimbus-group",
   base: {
     display: "inline-flex",
     alignItems: "center"
   }
   // TODO: there could be variants here
-}), N = /* @__PURE__ */ a({
+}), N = /* @__PURE__ */ r({
   className: "nimbus-heading",
   base: {
     fontFamily: "heading",
@@ -745,7 +753,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "xl"
   }
-}), B = /* @__PURE__ */ a({
+}), B = /* @__PURE__ */ r({
   className: "nimbus-kbd",
   base: {
     display: "inline-flex",
@@ -765,7 +773,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     borderBottom: "solid-50",
     borderColor: "currentColor"
   }
-}), D = /* @__PURE__ */ a({
+}), D = /* @__PURE__ */ r({
   className: "nimbus-link",
   // Base styles applied to all instances of the component
   base: {
@@ -810,7 +818,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), E = /* @__PURE__ */ a({
+}), E = /* @__PURE__ */ r({
   className: "nimbus-loading-spinner",
   base: {
     display: "inline-flex",
@@ -868,7 +876,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     size: "sm"
   }
-}), A = /* @__PURE__ */ a({
+}), A = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-popover",
   // Base styles applied to all instances of the component
@@ -948,7 +956,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     orientation: "vertical"
   }
-}), V = /* @__PURE__ */ a({
+}), V = /* @__PURE__ */ r({
   className: "nimbus-separator",
   // Base styles applied to all instances of the component
   base: {
@@ -974,7 +982,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   defaultVariants: {
     orientation: "horizontal"
   }
-}), L = /* @__PURE__ */ a({
+}), L = /* @__PURE__ */ r({
   className: "nimbus-toggle-button",
   base: {
     ...i.base,
@@ -1028,7 +1036,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "outline"
   }
-}), F = /* @__PURE__ */ a({
+}), F = /* @__PURE__ */ r({
   className: "nimbus-toolbar",
   base: {
     display: "inline-flex",
@@ -1081,7 +1089,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "plain"
   }
-}), j = /* @__PURE__ */ a({
+}), j = /* @__PURE__ */ r({
   // Unique class name prefix for the component
   className: "nimbus-tooltip",
   // Base styles applied to all instances of the component
@@ -1103,8 +1111,8 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     boxShadow: "1"
   }
 }), G = {
-  nimbusAvatar: W,
-  nimbusBadge: _,
+  nimbusAvatar: _,
+  nimbusBadge: W,
   nimbusButton: i,
   nimbusCode: T,
   nimbusGroup: H,
@@ -1162,10 +1170,10 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   ...t.color["system-palettes"],
   ...t.color["brand-palettes"],
   ...t.color["semantic-palettes"]
-}), M = /* @__PURE__ */ d.shadows(t.shadow), Y = /* @__PURE__ */ d.radii({}), X = {
+}), Y = /* @__PURE__ */ d.shadows(t.shadow), M = /* @__PURE__ */ d.radii({}), X = {
   colors: O,
-  shadows: M,
-  radii: Y
+  shadows: Y,
+  radii: M
 }, U = /* @__PURE__ */ e({
   slots: [
     "root",
@@ -1302,7 +1310,14 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
       // Paint above viewport content (e.g. sticky headers with z-index)
       zIndex: "1",
       margin: "var(--scroll-area-scrollbar-margin)",
-      "&:not([data-overflow-x], [data-overflow-y])": {
+      // Hide each scrollbar when its own axis isn't overflowing. Zag sets
+      // `data-overflow-x` / `data-overflow-y` on the scrollbar reflecting the
+      // current viewport state, so a vertical scrollbar with no Y overflow
+      // (and vice versa) should not paint even if the other axis overflows.
+      "&[data-orientation=vertical]:not([data-overflow-y])": {
+        display: "none"
+      },
+      "&[data-orientation=horizontal]:not([data-overflow-x])": {
         display: "none"
       },
       bg: "neutral.4",
@@ -2004,55 +2019,91 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     }
   }
 }), Q = /* @__PURE__ */ e({
-  slots: ["root", "header", "content"],
+  slots: ["root", "header", "body", "footer"],
   className: "nimbus-card",
   base: {
     root: {
       colorPalette: "slate",
-      display: "inline-flex",
+      display: "flex",
+      flexDirection: "column",
       alignItems: "flex-start",
       borderRadius: "300",
-      focusVisibleRing: "outside"
+      // Free-form content: when no slot children are present anywhere
+      // inside Card.Root, padding lives on Root itself so direct
+      // children don't render flush against the border. Slots own
+      // their own padding (see below), so the selector only matches
+      // the no-slots case. `:has()` matches at any depth, which is
+      // intentional: a slot wrapped in another element still pads
+      // itself.
+      "&:not(:has(.nimbus-card__header, .nimbus-card__body, .nimbus-card__footer))": {
+        p: "var(--card-spacing)"
+      }
+    },
+    header: {
+      p: "var(--card-spacing)",
+      width: "100%"
+    },
+    body: {
+      p: "var(--card-spacing)",
+      width: "100%",
+      // When directly preceded by header, collapse top padding (header's
+      // bottom padding provides the gap). When a non-slot element like
+      // Separator sits between them, both slots keep full padding for
+      // visually balanced spacing around the element.
+      // Class names are Chakra-generated as `${className}__${slotName}`,
+      // so these selectors depend on `className: "nimbus-card"` (above)
+      // and the slot names in the `slots` array.
+      ".nimbus-card__header + &": { pt: 0 }
+    },
+    footer: {
+      p: "var(--card-spacing)",
+      width: "100%",
+      // Same adjacent-sibling collapsing as body — see comment above.
+      ".nimbus-card__header + &": { pt: 0 },
+      ".nimbus-card__body + &": { pt: 0 }
     }
   },
   variants: {
-    cardPadding: {
+    size: {
       sm: {
-        root: {
-          padding: "200"
-        }
+        root: { "--card-spacing": "spacing.300" }
       },
       md: {
-        root: {
-          padding: "400"
-        }
+        root: { "--card-spacing": "spacing.400" }
       },
       lg: {
-        root: {
-          padding: "600"
-        }
+        root: { "--card-spacing": "spacing.600" }
       }
     },
-    borderStyle: {
-      none: {},
+    // Variant naming encodes the three independent visual axes that
+    // designers expose in Figma: outlined (border yes/no), elevated
+    // (shadow yes/no), muted (background default/muted). All eight
+    // permutations are enumerated explicitly so the prop surface stays
+    // a single `variant` enum (no compositional booleans).
+    variant: {
+      plain: {
+        root: {
+          backgroundColor: "bg"
+        }
+      },
       outlined: {
         root: {
           border: "solid-25",
-          borderColor: "colorPalette.3"
+          borderColor: "colorPalette.6",
+          backgroundColor: "bg"
         }
-      }
-    },
-    elevation: {
-      none: {},
+      },
       elevated: {
         root: {
-          shadow: "1"
+          shadow: "1",
+          backgroundColor: "bg"
         }
-      }
-    },
-    backgroundStyle: {
-      default: {
+      },
+      "outlined-elevated": {
         root: {
+          border: "solid-25",
+          borderColor: "colorPalette.6",
+          shadow: "1",
           backgroundColor: "bg"
         }
       },
@@ -2060,14 +2111,33 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
         root: {
           backgroundColor: "colorPalette.2"
         }
+      },
+      "outlined-muted": {
+        root: {
+          border: "solid-25",
+          borderColor: "colorPalette.6",
+          backgroundColor: "colorPalette.2"
+        }
+      },
+      "elevated-muted": {
+        root: {
+          shadow: "1",
+          backgroundColor: "colorPalette.2"
+        }
+      },
+      "outlined-elevated-muted": {
+        root: {
+          border: "solid-25",
+          borderColor: "colorPalette.6",
+          shadow: "1",
+          backgroundColor: "colorPalette.2"
+        }
       }
     }
   },
   defaultVariants: {
-    cardPadding: "md",
-    borderStyle: "outlined",
-    elevation: "none",
-    backgroundStyle: "default"
+    size: "md",
+    variant: "outlined"
   }
 }), s = /* @__PURE__ */ e({
   slots: ["root", "label", "indicator"],
@@ -2273,6 +2343,12 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
       gap: "100",
       minWidth: 0,
       cursor: "text",
+      maxHeight: "var(--combobox-content-max-height, 40svh)",
+      overflowY: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)",
+      "--scrollbar-color": "colors.neutral.8",
+      "--scrollbar-bg": "colors.neutral.3",
       "[data-disabled='true'] &": {
         pointerEvents: "none"
       }
@@ -2947,7 +3023,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
       }
     }
   }
-}), ae = /* @__PURE__ */ e({
+}), re = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-input",
   slots: [
@@ -3104,7 +3180,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "solid"
   }
-}), re = /* @__PURE__ */ e({
+}), ae = /* @__PURE__ */ e({
   // Unique class name prefix for the component
   className: "nimbus-date-picker",
   slots: [
@@ -5630,7 +5706,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     size: "md",
     variant: "outline"
   }
-}), We = /* @__PURE__ */ e({
+}), _e = /* @__PURE__ */ e({
   slots: ["root", "buttonGroup", "primaryButton", "dropdownTrigger"],
   // Unique class name prefix for the component
   className: "nimbus-split-button",
@@ -5691,7 +5767,7 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
     variant: "solid"
     // Match component default
   }
-}), _e = /* @__PURE__ */ e({
+}), We = /* @__PURE__ */ e({
   slots: ["root", "label", "track", "thumb"],
   // Unique class name prefix for the component
   className: "nimbus-switch",
@@ -6822,8 +6898,8 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   nimbusCombobox: te,
   nimbusDataTable: oe,
   nimbusDefaultPage: q,
-  nimbusDateInput: ae,
-  nimbusDatePicker: re,
+  nimbusDateInput: re,
+  nimbusDatePicker: ae,
   nimbusDateRangePicker: ie,
   nimbusDialog: le,
   nimbusDraggableList: ne,
@@ -6845,8 +6921,8 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   nimbusScopedSearchInput: Ce,
   nimbusSearchInput: Ie,
   nimbusSelect: Pe,
-  nimbusSplitButton: We,
-  nimbusSwitch: _e,
+  nimbusSplitButton: _e,
+  nimbusSwitch: We,
   nimbusTable: Te,
   nimbusTabNav: He,
   nimbusTabs: Ne,
@@ -6864,12 +6940,12 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   toast: Ae
 }, Fe = /* @__PURE__ */ h(
   t.textStyle
-), je = /* @__PURE__ */ o.durations(t.aspectRatio), Ge = /* @__PURE__ */ o.animations(t.animation), Oe = /* @__PURE__ */ o.blurs(t.blur), Me = /* @__PURE__ */ o.borders(t.border), Ye = /* @__PURE__ */ o.colors({
+), je = /* @__PURE__ */ o.aspectRatios(t.aspectRatio), Ge = /* @__PURE__ */ o.animations(t.animation), Oe = /* @__PURE__ */ o.blurs(t.blur), Ye = /* @__PURE__ */ o.borders(t.border), Me = /* @__PURE__ */ o.colors({
   ...t.color["blacks-and-whites"]
 }), Xe = /* @__PURE__ */ o.durations(t.duration), Ue = /* @__PURE__ */ o.easings(t.easing), $e = /* @__PURE__ */ o.fonts(t.fontFamily), qe = /* @__PURE__ */ o.fontSizes(t.fontSize), Ke = /* @__PURE__ */ o.fontWeights(t.fontWeight), Ze = (l) => Object.keys(l).reduce(
-  (n, r) => {
-    const g = parseFloat(l[r].value) / 100;
-    return n[r] = { value: `${g}em` }, n;
+  (n, a) => {
+    const g = parseFloat(l[a].value) / 100;
+    return n[a] = { value: `${g}em` }, n;
   },
   {}
 ), Je = /* @__PURE__ */ o.letterSpacings(
@@ -6990,12 +7066,12 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   vh: {
     value: "100vh"
   }
-}), at = /* @__PURE__ */ o.zIndex(t.zIndex), rt = /* @__PURE__ */ o.cursor(t.cursor), it = {
+}), rt = /* @__PURE__ */ o.zIndex(t.zIndex), at = /* @__PURE__ */ o.cursor(t.cursor), it = {
   aspectRatios: je,
   animations: Ge,
   blurs: Oe,
-  borders: Me,
-  colors: Ye,
+  borders: Ye,
+  colors: Me,
   durations: Xe,
   easings: Ue,
   fonts: $e,
@@ -7006,8 +7082,8 @@ const R = /* @__PURE__ */ S(t.breakpoints), k = /* @__PURE__ */ u({
   radii: et,
   spacing: tt,
   sizes: ot,
-  zIndex: at,
-  cursor: rt
+  zIndex: rt,
+  cursor: at
 }, lt = /* @__PURE__ */ x({
   preflight: !0,
   cssVarsPrefix: "nimbus",
@@ -7030,11 +7106,11 @@ export {
   Ee as a,
   V as b,
   F as c,
-  ae as d,
-  _e as e,
+  re as d,
+  We as e,
   Ce as f,
   ie as g,
-  re as h,
+  ae as h,
   ye as i,
   Re as j,
   se as k,
@@ -7047,4 +7123,4 @@ export {
   pt as s,
   De as t
 };
-//# sourceMappingURL=index-CTrsTsK6.es.js.map
+//# sourceMappingURL=index-B_vTRVge.es.js.map