@vygruppen/spor-react 12.24.10 → 12.24.12

package/dist/index.cjs

@@ -93,7 +93,7 @@ var warnAboutMismatchingIcon = ({
 };
 var Accordion = React20.forwardRef(
   (props, ref) => {
-    const { variant = "core", children, gap = 2, ...rest } = props;
+    const { variant = "core", children, gap = 2, css, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "accordion" });
     const styles = recipe({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -101,7 +101,7 @@ var Accordion = React20.forwardRef(
       {
         ...rest,
         ref,
-        css: styles.root,
+        css: { ...styles.root, ...css },
         variant,
         children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap, children })
       }
@@ -113,25 +113,46 @@ var AccordionItemTrigger = React20.forwardRef(function AccordionItemTrigger2(pro
     startElement,
     children,
     headingLevel,
+    css,
     showChevron = true,
     ...rest
   } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: headingLevel, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, ref, css: styles.itemTrigger, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { flex: "1", gap: 1, textAlign: "start", width: "full", children: [
-      startElement && startElement,
-      children
-    ] }),
-    showChevron && /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: headingLevel, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Accordion.ItemTrigger,
+    {
+      ...rest,
+      ref,
+      css: { ...styles.itemTrigger, ...css },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { flex: "1", gap: 1, textAlign: "start", width: "full", children: [
+          startElement && startElement,
+          children
+        ] }),
+        showChevron && /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, {}) })
+      ]
+    }
+  ) });
 });
 var AccordionItemContent = React20.forwardRef(function AccordionItemContent2(props, ref) {
-  const { children } = props;
+  const {
+    children,
+    css,
+    "aria-labelledby": ariaLabelledBy,
+    ...otherProps
+  } = props;
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemContent, { css: styles.itemContent, children: /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemBody, { ...props, ref, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.Accordion.ItemContent,
+    {
+      css: { ...styles.itemContent, ...css },
+      "aria-labelledby": ariaLabelledBy,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemBody, { ...otherProps, ref, children })
+    }
+  );
 });
 Accordion.displayName = "Accordion";
 var AccordionItem = react.Accordion.Item;
@@ -337,6 +358,7 @@ var ProgressBar = React20.forwardRef(
     isActive = true,
     showValueText = false,
     height = "0.5rem",
+    css,
     ...rest
   }, ref) => {
     const recipe = react.useSlotRecipe({ key: "progressbar" });
@@ -345,21 +367,30 @@ var ProgressBar = React20.forwardRef(
       label,
       delay: labelRotationDelay
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.Root, { css: styles.container, ref, value, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.Progress.Track,
-        {
-          height,
-          css: isActive ? styles.background : styles.disabledBackground,
-          children: /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Range, { css: styles.progress })
-        }
-      ),
-      label && /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Label, { css: styles.description, children: currentLoadingText }),
-      showValueText && /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.ValueText, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react.Progress.Root,
+      {
+        css: { ...styles.container, ...css },
+        ref,
         value,
-        "%"
-      ] })
-    ] });
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Progress.Track,
+            {
+              height,
+              css: isActive ? styles.background : styles.disabledBackground,
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Range, { css: styles.progress })
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Label, { css: styles.description, children: currentLoadingText }),
+          showValueText && /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.ValueText, { children: [
+            value,
+            "%"
+          ] })
+        ]
+      }
+    );
   }
 );
 ProgressBar.displayName = "ProgressBar";
@@ -1160,24 +1191,40 @@ var Alert = React20.forwardRef((props, ref) => {
   if (!open)
     return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Alert.Root, { ref, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Alert.Content, { flexDirection: title ? "column" : "row", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", alignItems: "flex-start", children: [
-        showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Indicator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
-        title && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Title, { paddingRight: closable ? 6 : 0, children: title })
-      ] }),
-      children && /* @__PURE__ */ jsxRuntime.jsx(
-        react.Alert.Description,
-        {
-          width: "100%",
-          paddingLeft: title ? 0.5 : 0,
-          paddingRight: closable ? 6 : 0,
-          children
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      react.Alert.Content,
+      {
+        flexDirection: title ? "column" : "row",
+        "data-part": "content",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", alignItems: "flex-start", children: [
+            showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Indicator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
+            title && /* @__PURE__ */ jsxRuntime.jsx(
+              react.Alert.Title,
+              {
+                paddingRight: closable ? 6 : 0,
+                "data-part": "title",
+                children: title
+              }
+            )
+          ] }),
+          children && /* @__PURE__ */ jsxRuntime.jsx(
+            react.Alert.Description,
+            {
+              width: "100%",
+              paddingLeft: title ? 0.5 : 0,
+              paddingRight: closable ? 6 : 0,
+              "data-part": "description",
+              children
+            }
+          )
+        ]
+      }
+    ),
     closable && /* @__PURE__ */ jsxRuntime.jsx(
       CloseButton,
       {
+        "data-part": "close-button",
         size: "xs",
         position: "absolute",
         top: "1.5",
@@ -1345,15 +1392,22 @@ var texts6 = createTexts({
   }
 });
 var Breadcrumb = React20.forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, css, ...props }, ref) => {
     const validChildren = React20__namespace.default.Children.toArray(children).filter(
       (element) => React20__namespace.default.isValidElement(element)
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Root, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.List, { children: validChildren.map((child, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Root, { ref, ...props, css, children: /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.List, { "data-part": "list", children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.default.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Item, { children: child }),
-        !isLast && /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightFill18Icon, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Item, { "data-part": "item", children: child }),
+        !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+          react.Breadcrumb.Separator,
+          {
+            "aria-hidden": "true",
+            "data-part": "separator",
+            children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightFill18Icon, {})
+          }
+        )
       ] }, index);
     }) }) });
   }
@@ -1524,9 +1578,19 @@ PressableCard.displayName = "PressableCard";
 var RadioCard = React20.forwardRef(
   (props, ref) => {
     const { inputProps, children } = props;
+    const uniqueId = React20.useId();
+    const itemControlId = `radio-card-item-control-${uniqueId}`;
+    const inputHasAriaLabel = (inputProps == null ? void 0 : inputProps["aria-labelledby"]) || (inputProps == null ? void 0 : inputProps["aria-label"]);
     return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemHiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemControl, { children })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.RadioCard.ItemHiddenInput,
+        {
+          "aria-labelledby": inputHasAriaLabel ? inputProps == null ? void 0 : inputProps["aria-labelledby"] : itemControlId,
+          ref,
+          ...inputProps
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemControl, { id: itemControlId, "aria-hidden": true, children })
     ] });
   }
 );
@@ -1605,6 +1669,7 @@ function CalendarCell({ date: date$1, currentMonth }) {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             react.Box,
             {
+              "data-part": "calendar-cell",
               width: "100%",
               height: "100%",
               display: "flex",
@@ -1665,7 +1730,7 @@ function CalendarGrid({ offset = {} }) {
     state
   );
   const weeksInMonth = date.getWeeksInMonth(startDate, locale);
-  return /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, cellPadding: "0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, cellPadding: "0", "data-part": "calendar-grid", children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays[language].map((day, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
       Text3,
       {
@@ -1682,6 +1747,7 @@ function CalendarGrid({ offset = {} }) {
         paddingTop: 0.5,
         textAlign: "center",
         fontWeight: "bold",
+        "data-part": "calendar-table-heading",
         children: day
       },
       index
@@ -1716,63 +1782,72 @@ function CalendarHeader({ dualView }) {
   function handleNext() {
     state.focusNextPage();
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { flex: 1, alignItems: "center", paddingBottom: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: calendarProps["aria-label"] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        size: "md",
-        onClick: handlePrevious,
-        variant: "ghost",
-        marginLeft: 1,
-        disabled: prevButtonProps.isDisabled,
-        "aria-label": t(texts7.previousMonth),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownLeftFill24Icon, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Text3,
-      {
-        "aria-hidden": true,
-        flex: 1,
-        fontWeight: "bold",
-        fontSize: "sm",
-        textAlign: "center",
-        children: capitalizeFirstLetter(
-          monthDateFormatter.format(
-            state.visibleRange.start.toDate(state.timeZone)
-          )
-        )
-      }
-    ),
-    dualView && /* @__PURE__ */ jsxRuntime.jsx(
-      Text3,
-      {
-        "aria-hidden": true,
-        flex: 1,
-        fontWeight: "bold",
-        fontSize: "sm",
-        textAlign: "center",
-        children: capitalizeFirstLetter(
-          monthDateFormatter.format(
-            state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
-          )
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Flex,
+    {
+      flex: 1,
+      alignItems: "center",
+      paddingBottom: 4,
+      "data-part": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: calendarProps["aria-label"] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            size: "md",
+            onClick: handlePrevious,
+            variant: "ghost",
+            marginLeft: 1,
+            disabled: prevButtonProps.isDisabled,
+            "aria-label": t(texts7.previousMonth),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownLeftFill24Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Text3,
+          {
+            "aria-hidden": true,
+            flex: 1,
+            fontWeight: "bold",
+            fontSize: "sm",
+            textAlign: "center",
+            children: capitalizeFirstLetter(
+              monthDateFormatter.format(
+                state.visibleRange.start.toDate(state.timeZone)
+              )
+            )
+          }
+        ),
+        dualView && /* @__PURE__ */ jsxRuntime.jsx(
+          Text3,
+          {
+            "aria-hidden": true,
+            flex: 1,
+            fontWeight: "bold",
+            fontSize: "sm",
+            textAlign: "center",
+            children: capitalizeFirstLetter(
+              monthDateFormatter.format(
+                state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            size: "md",
+            onClick: handleNext,
+            marginRight: 1,
+            variant: "ghost",
+            disabled: nextButtonProps.isDisabled,
+            "aria-label": t(texts7.nextMonth),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownRightFill24Icon, {})
+          }
         )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        size: "md",
-        onClick: handleNext,
-        marginRight: 1,
-        variant: "ghost",
-        disabled: nextButtonProps.isDisabled,
-        "aria-label": t(texts7.nextMonth),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownRightFill24Icon, {})
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 var texts7 = createTexts({
   previousMonth: {
@@ -1788,22 +1863,32 @@ var texts7 = createTexts({
     sv: "N\xE4sta m\xE5nad"
   }
 });
-function Calendar({ dualView }) {
+function Calendar({ dualView, css }) {
   const { calendarProps, ref } = useCalendar();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "fit-content", ref, ...calendarProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { dualView }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { paddingRight: dualView ? 4 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, {}) }),
-      dualView && /* @__PURE__ */ jsxRuntime.jsx(
-        react.Box,
-        {
-          paddingLeft: 4,
-          borderLeft: ["1px solid var(--spor-colors-outline-disabled)"],
-          children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { offset: { months: 1 } })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Box,
+    {
+      width: "fit-content",
+      ref,
+      ...calendarProps,
+      css,
+      "data-part": "root",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { dualView }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { paddingRight: dualView ? 4 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, {}) }),
+          dualView && /* @__PURE__ */ jsxRuntime.jsx(
+            react.Box,
+            {
+              paddingLeft: 4,
+              borderLeft: ["1px solid var(--spor-colors-outline-disabled)"],
+              children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { offset: { months: 1 } })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function ScrollCalendar(boxProps) {
   const { state, calendarProps, ref, startValue } = useCalendar();
@@ -2082,6 +2167,7 @@ function CalendarCell2({
       ref,
       css: styles.dateCell,
       hidden: isOutsideVisibleRange,
+      "data-part": "calendar-cell",
       children: date$1.day
     }
   ) });
@@ -2114,8 +2200,8 @@ function CalendarGrid2({
     key: "datePicker"
   });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "table", ...gridProps, css: styles.box, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays2[language].map((day, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "table", ...gridProps, css: styles.box, "data-part": "calendar-grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { "data-part": "calendar-table-heading", children: weekDays2[language].map((day, index) => {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Text3,
         {
@@ -2180,30 +2266,39 @@ function CalendarHeader2({
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      CalendarNavigator,
-      {
-        title: title || (isYearPickerVisible ? monthTitle : monthAndYearTitle),
-        unit: "month",
-        onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ months: 1 })),
-        onNext: () => state.setFocusedDate(state.focusedDate.add({ months: 1 })),
-        isNextDisabled: !state.isPreviousVisibleRangeInvalid,
-        isPreviousDisabled: !state.isNextVisibleRangeInvalid
-      }
-    ),
-    isYearPickerVisible && /* @__PURE__ */ jsxRuntime.jsx(
-      CalendarNavigator,
-      {
-        title: jsDate.getFullYear().toString(),
-        unit: "year",
-        onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ years: 1 })),
-        onNext: () => state.setFocusedDate(state.focusedDate.add({ years: 1 })),
-        isPreviousDisabled: isPreviousYearDisabled,
-        isNextDisabled: isNextYearDisabled
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Flex,
+    {
+      alignItems: "center",
+      paddingBottom: "4",
+      justifyContent: "space-between",
+      "data-part": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarNavigator,
+          {
+            title: title || (isYearPickerVisible ? monthTitle : monthAndYearTitle),
+            unit: "month",
+            onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ months: 1 })),
+            onNext: () => state.setFocusedDate(state.focusedDate.add({ months: 1 })),
+            isNextDisabled: !state.isPreviousVisibleRangeInvalid,
+            isPreviousDisabled: !state.isNextVisibleRangeInvalid
+          }
+        ),
+        isYearPickerVisible && /* @__PURE__ */ jsxRuntime.jsx(
+          CalendarNavigator,
+          {
+            title: jsDate.getFullYear().toString(),
+            unit: "year",
+            onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ years: 1 })),
+            onNext: () => state.setFocusedDate(state.focusedDate.add({ years: 1 })),
+            isPreviousDisabled: isPreviousYearDisabled,
+            isNextDisabled: isNextYearDisabled
+          }
+        )
+      ]
+    }
+  );
 }
 var capitalize = (string_ = "") => string_.charAt(0).toUpperCase() + string_.slice(1);
 var CalendarNavigator = ({
@@ -2277,6 +2372,7 @@ var texts8 = createTexts({
 function Calendar2({
   showYearNavigation,
   variant,
+  css,
   ...props
 }) {
   const { t } = useTranslation();
@@ -2293,10 +2389,18 @@ function Calendar2({
   const { calendarProps } = reactAria.useCalendar(props, state);
   const calendarAriaLabel = calendarProps["aria-label"];
   const ariaLabel = t(texts9.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ...calendarProps, "aria-label": ariaLabel, css: styles.box, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader2, { state, showYearNavigation }),
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid2, { variant, state })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Box,
+    {
+      ...calendarProps,
+      "aria-label": ariaLabel,
+      css: { ...styles.box, ...css },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader2, { state, showYearNavigation }),
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid2, { variant, state })
+      ]
+    }
+  );
 }
 var texts9 = createTexts({
   calendar: {
@@ -2510,6 +2614,7 @@ var DatePicker = React20.forwardRef(
     invalid = false,
     helperText,
     positioning,
+    css,
     ...props
   }, externalRef) => {
     const chakraFieldProps = react.useFieldContext();
@@ -2547,7 +2652,8 @@ var DatePicker = React20.forwardRef(
       {
         ...calendarProps,
         variant,
-        showYearNavigation
+        showYearNavigation,
+        css
       }
     ) }) }) });
     return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2557,6 +2663,7 @@ var DatePicker = React20.forwardRef(
         display: "inline-flex",
         flexDirection: "column",
         width,
+        css,
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, positioning, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Field3,
@@ -3351,7 +3458,7 @@ var Autocomplete = ({
   );
   const combobox = react.useCombobox({
     collection,
-    openOnClick,
+    openOnClick: filteredChildren.length > 0 ? openOnClick : false,
     onInputValueChange: (event) => {
       if (!filteredExternally) {
         filter(event.inputValue);
@@ -3384,7 +3491,7 @@ var Autocomplete = ({
           required,
           onFocus: (event) => {
             onFocus == null ? void 0 : onFocus(event);
-            if (openOnFocus)
+            if (openOnFocus && filteredChildren.length > 0)
               combobox.setOpen(true);
           }
         }
@@ -3392,8 +3499,8 @@ var Autocomplete = ({
       /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs", tabIndex: 0 }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Content, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: !loading && (emptyLabel ?? t(texts14.noItemsFound)) }),
-      loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredChildren })
+      !loading && /* @__PURE__ */ jsxRuntime.jsx(react.Combobox.Empty, { children: emptyLabel ?? t(texts14.noItemsFound) }),
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : filteredChildren
     ] }) })
   ] });
 };
@@ -4616,6 +4723,7 @@ var Switch = React20.forwardRef(
       invalid,
       errorText,
       helperText,
+      css,
       ...rest
     } = props;
     const recipe = react.useSlotRecipe({ key: "switch" });
@@ -4629,6 +4737,7 @@ var Switch = React20.forwardRef(
         helperText,
         required: props.required,
         id: rest.id,
+        css,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           react.Switch.Root,
           {
@@ -5966,7 +6075,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = React20.forwardRef(({ numberOfSteps, activeStep }, ref) => {
+var ProgressIndicator = React20.forwardRef(({ numberOfSteps, activeStep, css }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "progressIndicator"
@@ -5975,18 +6084,24 @@ var ProgressIndicator = React20.forwardRef(({ numberOfSteps, activeStep }, ref)
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Box,
     {
-      css: styles.root,
+      css: { ...styles.root, ...css },
       role: "progressbar",
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
       "aria-valuetext": t(texts26.stepsOf(activeStep, numberOfSteps)),
       ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        ProgressDot,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        react.Box,
         {
-          "aria-valuenow": index + 1,
-          isActive: activeStep === index + 1
+          "data-part": activeStep === index + 1 ? "current-step" : "step",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressDot,
+            {
+              "aria-valuenow": index + 1,
+              isActive: activeStep === index + 1
+            }
+          )
         },
         index
       )) })
@@ -6145,7 +6260,8 @@ var Stepper = React20.forwardRef(
       heading,
       headingLevel,
       variant,
-      disabled
+      disabled,
+      css
     } = props;
     const recipe = react.useSlotRecipe({ key: "stepper" });
     const style = recipe({ variant });
@@ -6153,14 +6269,14 @@ var Stepper = React20.forwardRef(
     const activeStep = Number(activeStepAsStringOrNumber);
     const { t } = useTranslation();
     const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.root, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: { ...style.root, ...css }, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
       StepperProvider,
       {
         onClick,
         activeStep,
         variant,
         numberOfSteps,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.container, children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.container, "data-part": "root", children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.innerContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
             react.Flex,
             {
@@ -6186,8 +6302,17 @@ var Stepper = React20.forwardRef(
                     }
                   }
                 ),
-                heading && /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", as: headingLevel, css: style.title, children: heading }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
+                heading && /* @__PURE__ */ jsxRuntime.jsx(
+                  Text3,
+                  {
+                    variant: "sm",
+                    as: headingLevel,
+                    css: style.title,
+                    "data-part": "title",
+                    children: heading
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
               ]
             }
           ) }),
@@ -6237,7 +6362,7 @@ var StepperStep = ({
     _dark: "whiteAlpha.200"
   };
   const disabled = state !== "active" && disabledOverride || state === "disabled";
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.stepContainer, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.stepContainer, "data-part": "step-container", children: [
     stepNumber > 1 && /* @__PURE__ */ jsxRuntime.jsx(
       spor_icon_react_star.DropdownRightFill18Icon,
       {
@@ -6267,6 +6392,7 @@ var StepperStep = ({
         "aria-current": state === "active" ? "step" : void 0,
         css: state === "active" ? style.stepButton._currentStep : style.stepButton,
         fontWeight: state === "active" ? "bold" : void 0,
+        "data-part": "step-button",
         children
       }
     )