xmlui 0.11.13 → 0.11.16

package/dist/lib/{index-BGwgKjPl.js → index-ontex45U.js}

@@ -2,7 +2,7 @@ import "./index.css";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useRef, useInsertionEffect, useCallback, forwardRef, useState, useEffect, useId, cloneElement, useMemo, useContext, useLayoutEffect, createContext, memo, Fragment as Fragment$1, useReducer, isValidElement, useDeferredValue, createElement, startTransition, useTransition, Children } from "react";
-import { b as getDefaultExportFromCjs, l as labelPositionMd, o as orientationOptionMd, v as validationStatusMd, c as alignmentOptionValues, i as isSizeType, d as layoutOptionKeys, L as LinkTargetMd, e as alignmentOptionMd, f as iconPositionMd, h as buttonTypesMd, s as sizeMd, j as buttonThemeMd, k as buttonVariantMd, T as TextVariantElement, V as VariantPropsKeys, m as variantOptionsMd, n as scrollAnchoringValues, p as buttonThemeNames, q as iconPositionNames, r as buttonVariantNames, t as buttonVariantValues, u as triggerPositionNames, w as httpMethodNames, x as orientationOptionValues, y as viewportSizeNames, M as MetadataProvider } from "./metadata-utils-2bsMr4Gd.js";
+import { b as getDefaultExportFromCjs, l as labelPositionMd, o as orientationOptionMd, v as validationStatusMd, c as alignmentOptionValues, i as isSizeType, d as alignmentOptionMd, e as layoutOptionKeys, L as LinkTargetMd, f as iconPositionMd, h as buttonTypesMd, s as sizeMd, j as buttonThemeMd, k as buttonVariantMd, T as TextVariantElement, V as VariantPropsKeys, m as variantOptionsMd, n as scrollAnchoringValues, p as buttonThemeNames, q as iconPositionNames, r as buttonVariantNames, t as buttonVariantValues, u as triggerPositionNames, w as httpMethodNames, x as orientationOptionValues, y as viewportSizeNames, M as MetadataProvider } from "./metadata-utils-BXGJbvlh.js";
 import require$$0, { flushSync, createPortal } from "react-dom";
 import yaml from "js-yaml";
 import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@tanstack/react-query";
@@ -10,7 +10,7 @@ import produce, { createDraft, finishDraft, enableMapSet } from "immer";
 import { throttle, get, isNil, omitBy, isUndefined, isString, isPlainObject, noop as noop$2, isEmpty, isEqual, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
 import { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYesterday, isTomorrow, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
 import classnames from "classnames";
-import { c as PART_LABELED_ITEM, d as PART_LABEL, b as PART_INPUT, P as PART_START_ADORNMENT, a as PART_END_ADORNMENT, x as xmlUiMarkupToComponent, e as errReportComponent, f as errReportMessage, g as errReportScriptError, h as errReportModuleErrors } from "./xmlui-parser-CW8YmGjO.js";
+import { c as PART_LABELED_ITEM, d as PART_LABEL, b as PART_INPUT, e as PART_ICON, P as PART_START_ADORNMENT, a as PART_END_ADORNMENT, x as xmlUiMarkupToComponent, f as errReportComponent, g as errReportMessage, h as errReportScriptError, i as errReportModuleErrors } from "./xmlui-parser-9Yk-asFP.js";
 import Color from "color";
 import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import * as VisuallyHidden$1 from "@radix-ui/react-visually-hidden";
@@ -807,6 +807,9 @@ const styles$1j = {
   "lds-ring": "_lds-ring_b1pgc_14",
   fullScreenSpinnerWrapper
 };
+const Part = ({ children, partId }) => {
+  return /* @__PURE__ */ jsx(Slot, { "data-part-id": partId, children });
+};
 const PART_RING = "ring";
 const defaultProps$1i = {
   delay: 400,
@@ -846,7 +849,7 @@ const Spinner = forwardRef(function Spinner2({
               style: style2,
               ref: forwardedRef,
               children: [
-                /* @__PURE__ */ jsx("div", { "data-part-id": PART_RING }),
+                /* @__PURE__ */ jsx(Part, { partId: PART_RING, children: /* @__PURE__ */ jsx("div", {}) }),
                 /* @__PURE__ */ jsx("div", {}),
                 /* @__PURE__ */ jsx("div", {}),
                 /* @__PURE__ */ jsx("div", {})
@@ -866,7 +869,7 @@ const Spinner = forwardRef(function Spinner2({
         style: style2,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx("div", { "data-part-id": PART_RING }),
+          /* @__PURE__ */ jsx(Part, { partId: PART_RING, children: /* @__PURE__ */ jsx("div", {}) }),
           /* @__PURE__ */ jsx("div", {}),
           /* @__PURE__ */ jsx("div", {}),
           /* @__PURE__ */ jsx("div", {})
@@ -904,18 +907,17 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   const generatedId2 = useId();
   const inputId = id || generatedId2;
   if (label2 === void 0 && !validationResult) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: /* @__PURE__ */ jsx(
       Slot,
       {
         ...rest,
-        "data-part-id": PART_LABELED_ITEM,
         style: style2,
         className,
         id: inputId,
         ref,
         children
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsxs("div", { ...rest, ref, style: style2, className: classnames(className, styles$1k.itemWithLabel), children: [
     /* @__PURE__ */ jsxs(
@@ -929,10 +931,9 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
           [styles$1k.shrinkToLabel]: shrinkToLabel2
         }),
         children: [
-          label2 && /* @__PURE__ */ jsxs(
+          label2 && /* @__PURE__ */ jsx(Part, { partId: PART_LABEL, children: /* @__PURE__ */ jsxs(
             "label",
             {
-              "data-part-id": PART_LABEL,
               htmlFor: inputId,
               onClick: onLabelClick || (() => document.getElementById(inputId)?.focus()),
               style: {
@@ -957,13 +958,12 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
                 )
               ]
             }
-          ),
-          cloneElement(children, {
+          ) }),
+          /* @__PURE__ */ jsx(Part, { partId: PART_LABELED_ITEM, children: cloneElement(children, {
             id: !isInputTemplateUsed ? inputId : void 0,
             style: void 0,
-            className: void 0,
-            "data-part-id": PART_LABELED_ITEM
-          })
+            className: void 0
+          }) })
         ]
       }
     ),
@@ -1707,11 +1707,11 @@ const chStackComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$$ = `'{"backgroundColor-ResponsiveBar": "var(--xmlui-backgroundColor-ResponsiveBar)", "padding-ResponsiveBar": "var(--xmlui-padding-ResponsiveBar)", "margin-ResponsiveBar": "var(--xmlui-margin-ResponsiveBar)"}'`;
-const responsiveBar = "_responsiveBar_9ttfw_14";
-const vertical$7 = "_vertical_9ttfw_26";
-const horizontal$6 = "_horizontal_9ttfw_33";
-const visibleItems = "_visibleItems_9ttfw_39";
-const overflowDropdown = "_overflowDropdown_9ttfw_65";
+const responsiveBar = "_responsiveBar_1euow_14";
+const vertical$7 = "_vertical_1euow_26";
+const horizontal$6 = "_horizontal_1euow_33";
+const visibleItems = "_visibleItems_1euow_39";
+const overflowDropdown = "_overflowDropdown_1euow_65";
 const styles$1i = {
   themeVars: themeVars$$,
   responsiveBar,
@@ -1721,17 +1721,19 @@ const styles$1i = {
   overflowDropdown
 };
 const themeVars$_ = `'{"backgroundColor-DropdownMenu": "var(--xmlui-backgroundColor-DropdownMenu)", "borderRadius-DropdownMenu": "var(--xmlui-borderRadius-DropdownMenu)", "boxShadow-DropdownMenu": "var(--xmlui-boxShadow-DropdownMenu)", "borderColor-DropdownMenu-content": "var(--xmlui-borderColor-DropdownMenu-content)", "borderWidth-DropdownMenu-content": "var(--xmlui-borderWidth-DropdownMenu-content)", "borderStyle-DropdownMenu-content": "var(--xmlui-borderStyle-DropdownMenu-content)", "minWidth-DropdownMenu": "var(--xmlui-minWidth-DropdownMenu)", "backgroundColor-MenuItem": "var(--xmlui-backgroundColor-MenuItem)", "color-MenuItem": "var(--xmlui-color-MenuItem)", "fontFamily-MenuItem": "var(--xmlui-fontFamily-MenuItem)", "gap-MenuItem": "var(--xmlui-gap-MenuItem)", "fontSize-MenuItem": "var(--xmlui-fontSize-MenuItem)", "paddingVertical-MenuItem": "var(--xmlui-paddingVertical-MenuItem)", "paddingHorizontal-MenuItem": "var(--xmlui-paddingHorizontal-MenuItem)", "backgroundColor-MenuItem--hover": "var(--xmlui-backgroundColor-MenuItem--hover)", "backgroundColor-MenuItem--active": "var(--xmlui-backgroundColor-MenuItem--active)", "backgroundColor-MenuItem--active--hover": "var(--xmlui-backgroundColor-MenuItem--active--hover)", "color-MenuItem--hover": "var(--xmlui-color-MenuItem--hover)", "color-MenuItem--active": "var(--xmlui-color-MenuItem--active)", "color-MenuItem--active--hover": "var(--xmlui-color-MenuItem--active--hover)", "color-MenuItem--disabled": "var(--xmlui-color-MenuItem--disabled)", "marginTop-MenuSeparator": "var(--xmlui-marginTop-MenuSeparator)", "marginBottom-MenuSeparator": "var(--xmlui-marginBottom-MenuSeparator)", "width-MenuSeparator": "var(--xmlui-width-MenuSeparator)", "height-MenuSeparator": "var(--xmlui-height-MenuSeparator)", "color-MenuSeparator": "var(--xmlui-color-MenuSeparator)"}'`;
-const DropdownMenuContent = "_DropdownMenuContent_19u51_14";
-const DropdownMenuSubContent = "_DropdownMenuSubContent_19u51_19";
-const DropdownMenuItem = "_DropdownMenuItem_19u51_29";
-const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_19u51_30";
-const active$3 = "_active_19u51_53";
-const disabled$b = "_disabled_19u51_63";
-const wrapper$m = "_wrapper_19u51_74";
-const DropdownMenuSeparator = "_DropdownMenuSeparator_19u51_78";
+const DropdownMenuContent = "_DropdownMenuContent_tklrk_14";
+const compact = "_compact_tklrk_18";
+const DropdownMenuSubContent = "_DropdownMenuSubContent_tklrk_22";
+const DropdownMenuItem = "_DropdownMenuItem_tklrk_32";
+const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_tklrk_33";
+const active$3 = "_active_tklrk_56";
+const disabled$b = "_disabled_tklrk_66";
+const wrapper$m = "_wrapper_tklrk_81";
+const DropdownMenuSeparator = "_DropdownMenuSeparator_tklrk_85";
 const styles$1h = {
   themeVars: themeVars$_,
   DropdownMenuContent,
+  compact,
   DropdownMenuSubContent,
   DropdownMenuItem,
   DropdownMenuSubTrigger,
@@ -3389,6 +3391,7 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
   triggerButtonThemeColor = defaultDropdownMenuProps.triggerButtonThemeColor,
   triggerButtonIcon = defaultDropdownMenuProps.triggerButtonIcon,
   triggerButtonIconPosition = defaultDropdownMenuProps.triggerButtonIconPosition,
+  compact: compact2 = false,
   ...rest
 }, ref) {
   const { root: root2 } = useTheme();
@@ -3493,7 +3496,7 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
             ref: contentRef,
             align: alignment,
             style: style2,
-            className: classnames(styles$1h.DropdownMenuContent, className),
+            className: classnames(styles$1h.DropdownMenuContent, className, { [styles$1h.compact]: compact2 }),
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               contentRef.current?.focus();
@@ -3521,7 +3524,8 @@ const MenuItem = forwardRef(function MenuItem2({
   icon: icon2,
   iconPosition = defaultMenuItemProps.iconPosition,
   active: active2 = defaultMenuItemProps.active,
-  enabled: enabled2 = true
+  enabled: enabled2 = true,
+  compact: compact2 = false
 }, ref) {
   const iconToStart = iconPosition === "start";
   const context = useDropdownMenuContext();
@@ -3556,7 +3560,8 @@ const MenuItem = forwardRef(function MenuItem2({
       style: style2,
       className: classnames(className, styles$1h.DropdownMenuItem, {
         [styles$1h.active]: active2,
-        [styles$1h.disabled]: !enabled2
+        [styles$1h.disabled]: !enabled2,
+        [styles$1h.compact]: compact2
       }),
       ref,
       onClick: handleClick,
@@ -3604,26 +3609,55 @@ const SubMenuItem = forwardRef(function SubMenuItem2({ children, label: label2,
 const MenuSeparator = forwardRef(function MenuSeparator2(props, ref) {
   return /* @__PURE__ */ jsx("div", { ref, className: styles$1h.DropdownMenuSeparator, role: "separator", ...props });
 });
+const PART_OVERFLOW = "overflow";
 const ResponsiveBarDropdown = ({
   overflowIcon,
+  dropdownText,
+  dropdownAlignment,
+  triggerTemplate,
   children,
-  className
-}) => /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(DropdownMenu, { label: "More options", triggerButtonIcon: overflowIcon, children }) });
+  className,
+  onWillOpen,
+  registerComponentApi
+}) => /* @__PURE__ */ jsx(Part, { partId: PART_OVERFLOW, children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
+  DropdownMenu,
+  {
+    label: dropdownText,
+    triggerButtonIcon: overflowIcon,
+    triggerTemplate,
+    alignment: dropdownAlignment,
+    compact: true,
+    onWillOpen,
+    registerComponentApi,
+    children
+  }
+) }) });
 const defaultResponsiveBarProps = {
   overflowIcon: "ellipsisHorizontal:ResponsiveBar",
+  dropdownText: "More options",
   gap: 0,
-  orientation: "horizontal"
+  orientation: "horizontal",
+  reverse: false
 };
 const ResponsiveBar = forwardRef(function ResponsiveBar2({
   children,
+  childNodes,
+  renderChildFn,
   overflowIcon = defaultResponsiveBarProps.overflowIcon,
+  dropdownText = defaultResponsiveBarProps.dropdownText,
+  dropdownAlignment,
+  triggerTemplate,
   gap = defaultResponsiveBarProps.gap,
   orientation = defaultResponsiveBarProps.orientation,
+  reverse: reverse2 = defaultResponsiveBarProps.reverse,
   style: style2,
   className,
   onClick,
+  onWillOpen,
+  registerComponentApi,
   ...rest
 }, ref) {
+  const effectiveAlignment = dropdownAlignment ?? (reverse2 ? "start" : "end");
   const containerRef = useRef(null);
   const measurementDropdownRef = useRef(null);
   const isCalculatingRef = useRef(false);
@@ -3631,8 +3665,10 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
   const lastChildrenCount = useRef(0);
   useRef(null);
   const layoutCompletedRef = useRef(false);
+  const dropdownApiRef = useRef(null);
   const [isInMeasurementPhase, setIsInMeasurementPhase] = useState(true);
   const [measuredWidths, setMeasuredWidths] = useState([]);
+  const [measuredDropdownSize, setMeasuredDropdownSize] = useState(0);
   const [layout, setLayout] = useState({
     visibleItems: [],
     overflowItems: []
@@ -3644,6 +3680,21 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     return result;
   }, [children]);
   const childrenCount = childrenArray.length;
+  useEffect(() => {
+    if (registerComponentApi) {
+      registerComponentApi({
+        open: () => {
+          dropdownApiRef.current?.open();
+        },
+        close: () => {
+          dropdownApiRef.current?.close();
+        },
+        hasOverflow: () => {
+          return layout.overflowItems.length > 0;
+        }
+      });
+    }
+  }, [registerComponentApi, layout.overflowItems.length]);
   const measureItems = () => {
     if (!containerRef.current) return;
     const items = [];
@@ -3663,7 +3714,16 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       const rect = item2.getBoundingClientRect();
       return orientation === "horizontal" ? rect.width : rect.height;
     });
+    let dropdownSize = orientation === "horizontal" ? 147 : 47;
+    if (measurementDropdownRef.current) {
+      const dropdownRect = measurementDropdownRef.current.getBoundingClientRect();
+      const measuredSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
+      if (measuredSize > 0) {
+        dropdownSize = measuredSize;
+      }
+    }
     setMeasuredWidths(measurements);
+    setMeasuredDropdownSize(dropdownSize);
     setIsInMeasurementPhase(false);
   };
   const calculateOverflowLayout = () => {
@@ -3677,7 +3737,6 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     if (containerSize === 0 || containerSize === lastSize) {
       return;
     }
-    console.log(`ResponsiveBar ${orientation}: containerSize=${containerSize}, children=${childrenArray.length}`);
     isCalculatingRef.current = true;
     lastContainerSize.current = containerSize;
     const gapValue = gap;
@@ -3688,25 +3747,23 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       const gapSize = i > 0 ? gapValue : 0;
       totalSize += gapSize + childSize;
     }
-    console.log(`Total size needed: ${totalSize}, available: ${containerSize}`);
     let visibleItems2;
     let overflowItems;
     if (totalSize <= containerSize) {
       visibleItems2 = childrenArray;
       overflowItems = [];
     } else {
-      let dropdownSize = orientation === "horizontal" ? 147 : 47;
+      let dropdownSize = measuredDropdownSize > 0 ? measuredDropdownSize : orientation === "horizontal" ? 147 : 47;
       const existingDropdown = container2.querySelector(
         `.${styles$1i.overflowDropdown}`
       );
       if (existingDropdown) {
         const dropdownRect = existingDropdown.getBoundingClientRect();
-        dropdownSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
-      } else if (measurementDropdownRef.current) {
-        const dropdownRect = measurementDropdownRef.current.getBoundingClientRect();
-        dropdownSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
+        const currentSize = orientation === "horizontal" ? dropdownRect.width : dropdownRect.height;
+        if (currentSize > 0) {
+          dropdownSize = currentSize;
+        }
       }
-      console.log(`Dropdown size: ${dropdownSize}`);
       let accumulatedSize = 0;
       let visibleCount = 0;
       for (let i = 0; i < childrenArray.length; i++) {
@@ -3715,7 +3772,6 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
         const gapSize = i > 0 ? gapValue : 0;
         const proposedSize = accumulatedSize + gapSize + childSize;
         const totalSizeWithDropdown = proposedSize + gapValue + dropdownSize;
-        console.log(`Item ${i}: size=${childSize}, proposed=${proposedSize}, withDropdown=${totalSizeWithDropdown}`);
         if (totalSizeWithDropdown <= containerSize) {
           accumulatedSize = proposedSize;
           visibleCount++;
@@ -3740,18 +3796,14 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       if (visibleCount >= childrenArray.length) {
         visibleItems2 = childrenArray;
         overflowItems = [];
-        console.log(`All items fit, no dropdown needed`);
       } else if (visibleCount === 0) {
         visibleItems2 = childrenArray.slice(0, 1);
         overflowItems = childrenArray.slice(1);
-        console.log(`No items fit, forcing one visible: visible=1, overflow=${overflowItems.length}`);
       } else {
         visibleItems2 = childrenArray.slice(0, visibleCount);
         overflowItems = childrenArray.slice(visibleCount);
-        console.log(`Split items: visible=${visibleItems2.length}, overflow=${overflowItems.length}`);
       }
     }
-    console.log(`Final layout: visible=${visibleItems2.length}, overflow=${overflowItems.length}`);
     if (visibleItems2.length !== layout.visibleItems.length || overflowItems.length !== layout.overflowItems.length) {
       setLayout({
         visibleItems: visibleItems2,
@@ -3773,6 +3825,7 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
       lastChildrenCount.current = childrenCount;
       setIsInMeasurementPhase(true);
       setMeasuredWidths([]);
+      setMeasuredDropdownSize(0);
     }
   }, [childrenCount]);
   useEffect(() => {
@@ -3818,7 +3871,7 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
         ...style2,
         gap: `${gap}px`,
         // Gap between visibleItems and overflowDropdown
-        flexDirection: orientation === "horizontal" ? "row" : "column",
+        flexDirection: orientation === "horizontal" ? reverse2 ? "row-reverse" : "row" : reverse2 ? "column-reverse" : "column",
         height: orientation === "vertical" ? "100%" : void 0,
         width: orientation === "horizontal" ? "100%" : void 0
       },
@@ -3840,7 +3893,7 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
                 visibility: "hidden",
                 opacity: 0,
                 pointerEvents: "none",
-                flexDirection: orientation === "horizontal" ? "row" : "column"
+                flexDirection: orientation === "horizontal" ? reverse2 ? "row-reverse" : "row" : reverse2 ? "column-reverse" : "column"
               },
               children: childrenArray.map((child, index) => /* @__PURE__ */ jsx("div", { children: child }, `item-${index}`))
             }
@@ -3858,7 +3911,13 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
                 ResponsiveBarDropdown,
                 {
                   overflowIcon,
+                  dropdownText,
+                  dropdownAlignment: effectiveAlignment,
+                  triggerTemplate,
                   className: styles$1i.overflowDropdown,
+                  onWillOpen,
+                  registerComponentApi: (api) => {
+                  },
                   children: childrenArray.length > 0 && /* @__PURE__ */ jsx(MenuItem, { children: childrenArray[0] })
                 }
               )
@@ -3878,11 +3937,11 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
               style: {
                 gap: `${gap}px`,
                 // Gap between visible items
-                flexDirection: orientation === "horizontal" ? "row" : "column"
+                flexDirection: orientation === "horizontal" ? reverse2 ? "row-reverse" : "row" : reverse2 ? "column-reverse" : "column"
               },
               children: childrenArray.map((child, index) => {
                 const isVisible = layout.visibleItems.length > 0 ? index < layout.visibleItems.length : true;
-                return /* @__PURE__ */ jsx("div", { style: { display: isVisible ? "block" : "none" }, children: child }, `item-${index}`);
+                return /* @__PURE__ */ jsx("div", { style: { display: isVisible ? "flex" : "none", alignItems: "stretch" }, children: renderChildFn && childNodes ? renderChildFn(childNodes[index], false) : child }, `item-${index}`);
               })
             }
           ),
@@ -3890,8 +3949,19 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
             ResponsiveBarDropdown,
             {
               overflowIcon,
+              dropdownText,
+              dropdownAlignment: effectiveAlignment,
+              triggerTemplate,
               className: styles$1i.overflowDropdown,
-              children: layout.overflowItems.map((item2, index) => /* @__PURE__ */ jsx(MenuItem, { children: item2 }, index))
+              onWillOpen,
+              registerComponentApi: (api) => {
+                dropdownApiRef.current = api;
+              },
+              children: layout.overflowItems.map((item2, index) => {
+                const originalIndex = layout.visibleItems.length + index;
+                const renderedChild = renderChildFn && childNodes ? renderChildFn(childNodes[originalIndex], true) : item2;
+                return /* @__PURE__ */ jsx(MenuItem, { compact: true, children: renderedChild }, index);
+              })
             }
           )
         ] })
@@ -3899,6 +3969,21 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     }
   );
 });
+const ResponsiveBarItem = memo(
+  ({ node, isOverflow, renderChild: renderChild2, layoutContext }) => {
+    const nodeWithContext = useMemo(() => {
+      return {
+        type: "Container",
+        contextVars: {
+          $overflow: isOverflow
+        },
+        children: Array.isArray(node) ? node : [node]
+      };
+    }, [node, isOverflow]);
+    return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithContext, layoutContext) });
+  }
+);
+ResponsiveBarItem.displayName = "ResponsiveBarItem";
 const COMP$1w = "ResponsiveBar";
 const ResponsiveBarMd = createMetadata({
   status: "stable",
@@ -3916,17 +4001,54 @@ const ResponsiveBarMd = createMetadata({
       valueType: "string",
       defaultValue: defaultResponsiveBarProps.overflowIcon
     },
+    dropdownText: {
+      description: "Text to display in the dropdown trigger button label when items overflow. This text is used for accessibility and appears alongside the overflow icon.",
+      valueType: "string",
+      defaultValue: defaultResponsiveBarProps.dropdownText
+    },
+    dropdownAlignment: {
+      description: "Alignment of the dropdown menu relative to the trigger button. By default, uses 'end' when reverse is false (dropdown on the right/bottom) and 'start' when reverse is true (dropdown on the left/top).",
+      valueType: "string",
+      availableValues: alignmentOptionMd
+    },
+    triggerTemplate: dTriggerTemplate(COMP$1w),
     gap: {
       description: "Gap between child elements in pixels. Controls the spacing between items in the responsive bar layout.",
       valueType: "number",
       defaultValue: defaultResponsiveBarProps.gap
+    },
+    reverse: {
+      description: "Reverses the direction of child elements. In horizontal mode, items are arranged from right to left instead of left to right. In vertical mode, items are arranged from bottom to top instead of top to bottom. The dropdown menu position also adjusts to appear at the start (left/top) instead of the end (right/bottom).",
+      valueType: "boolean",
+      defaultValue: defaultResponsiveBarProps.reverse
     }
   },
   events: {
-    click: dClick(COMP$1w)
+    click: dClick(COMP$1w),
+    willOpen: d(
+      `This event fires when the \`${COMP$1w}\` overflow dropdown menu is about to be opened. You can prevent opening the menu by returning \`false\` from the event handler. Otherwise, the menu will open at the end of the event handler like normal.`
+    )
+  },
+  apis: {
+    close: {
+      description: `This method closes the overflow dropdown menu.`,
+      signature: "close(): void"
+    },
+    open: {
+      description: `This method opens the overflow dropdown menu.`,
+      signature: "open(): void"
+    },
+    hasOverflow: {
+      description: `This method returns true if the ResponsiveBar currently has an overflow menu (i.e., some items don't fit and are in the dropdown).`,
+      signature: "hasOverflow(): boolean"
+    }
+  },
+  contextVars: {
+    $overflow: {
+      description: "Boolean indicating whether the child component is displayed in the overflow dropdown menu (true) or visible in the main bar (false).",
+      valueType: "boolean"
+    }
   },
-  apis: {},
-  contextVars: {},
   themeVars: parseScssVar(styles$1i.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
@@ -3938,16 +4060,43 @@ const ResponsiveBarMd = createMetadata({
 const responsiveBarComponentRenderer = createComponentRenderer(
   COMP$1w,
   ResponsiveBarMd,
-  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
+  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi, layoutContext }) => {
+    const children = Array.isArray(node.children) ? node.children : node.children ? [node.children] : [];
+    const renderChildWithContext = (childNode, isOverflow) => /* @__PURE__ */ jsx(
+      ResponsiveBarItem,
+      {
+        node: childNode,
+        isOverflow,
+        renderChild: renderChild2,
+        layoutContext
+      }
+    );
     return /* @__PURE__ */ jsx(
       ResponsiveBar,
       {
         orientation: extractValue(node.props?.orientation),
         overflowIcon: extractValue(node.props?.overflowIcon),
+        dropdownText: extractValue(node.props?.dropdownText),
+        dropdownAlignment: extractValue(node.props?.dropdownAlignment),
+        triggerTemplate: renderChild2(node.props?.triggerTemplate),
         gap: extractValue(node.props?.gap),
+        reverse: extractValue.asOptionalBoolean(node.props?.reverse),
         onClick: lookupEventHandler("click"),
+        onWillOpen: lookupEventHandler("willOpen"),
+        registerComponentApi,
         className,
-        children: renderChild2(node.children)
+        childNodes: children,
+        renderChildFn: renderChildWithContext,
+        children: children.map((child, index) => /* @__PURE__ */ jsx(
+          ResponsiveBarItem,
+          {
+            node: child,
+            isOverflow: false,
+            renderChild: renderChild2,
+            layoutContext
+          },
+          index
+        ))
       }
     );
   }
@@ -4212,42 +4361,32 @@ const TextArea = forwardRef(function TextArea2({
     autoComplete: "off"
   };
   if (resize2 === "both" || resize2 === "horizontal" || resize2 === "vertical") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx(
       TextAreaResizable$1,
       {
         ...textareaProps,
-        "data-part-id": PART_INPUT,
         style: style2,
         className: classnames(classes),
         maxRows,
         minRows,
         rows
       }
-    );
+    ) });
   }
   if (autoSize || !isNil(maxRows) || !isNil(minRows)) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx(
       TextareaAutosize,
       {
         ...textareaProps,
-        "data-part-id": PART_INPUT,
         style: style2,
         className: classnames(classes),
         maxRows,
         minRows,
         rows
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      ...textareaProps,
-      "data-part-id": PART_INPUT,
-      rows,
-      className: classnames(classes)
-    }
-  );
+  return /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx("textarea", { ...textareaProps, rows, className: classnames(classes) }) });
 });
 const COMP$1u = "TextArea";
 const resizeOptionsMd = [
@@ -4838,17 +4977,16 @@ const AppHeader = ({
         [styles$1b.full]: !canRestrictContentWidth
       }),
       children: [
-        hasRegisteredNavPanel && /* @__PURE__ */ jsx(
+        hasRegisteredNavPanel && /* @__PURE__ */ jsx(Part, { partId: PART_HAMBURGER, children: /* @__PURE__ */ jsx(
           Button,
           {
-            "data-part-id": PART_HAMBURGER,
             onClick: toggleDrawer,
             icon: /* @__PURE__ */ jsx(Icon, { name: "hamburger" }),
             variant: "ghost",
             className: styles$1b.drawerToggle,
             style: { color: "inherit", flexShrink: 0 }
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: styles$1b.logoAndTitle, children: (showLogo || !effectiveNavPanelVisible) && (logoContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: styles$1b.customLogoContainer, children: logoContent }),
           safeLogoTitle
@@ -8341,6 +8479,11 @@ const COMP$1t = "NavLink";
 const NavLinkMd = createMetadata({
   status: "stable",
   description: "`NavLink` creates interactive navigation items that connect users to different destinations within an app or external URLs. It automatically indicates active states, supports custom icons and labels, and can execute custom actions instead of navigation when needed.",
+  parts: {
+    indicator: {
+      description: "The active indicator within the NavLink component."
+    }
+  },
   props: {
     to: d(`This property defines the URL of the link.`),
     enabled: dEnabled(),
@@ -8475,16 +8618,16 @@ const LinkNative = forwardRef(function LinkNative2(props, forwardedRef) {
         [styles$17.disabled]: disabled2
       }),
       children: [
-        icon2 && /* @__PURE__ */ jsx("div", { className: styles$17.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { name: icon2 }) }),
+        icon2 && /* @__PURE__ */ jsx(Part, { partId: PART_ICON, children: /* @__PURE__ */ jsx("div", { className: styles$17.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { name: icon2 }) }) }),
         children
       ]
     }
   );
 });
 function specifyTypes(props) {
-  const { target: target2, referrerPolicy } = props;
+  const { target: target2, referrerPolicy, ...rest } = props;
   return {
-    ...props,
+    ...rest,
     target: target2,
     referrerPolicy
   };
@@ -8493,6 +8636,11 @@ const COMP$1s = "Link";
 const LinkMd = createMetadata({
   status: "stable",
   description: "`Link` creates clickable navigation elements for internal app routes or external URLs. You can use the `label` and `icon` properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations.",
+  parts: {
+    icon: {
+      description: "The icon within the Link component."
+    }
+  },
   props: {
     to: d(
       "This property defines the URL of the link. If the value is not defined, the link cannot be activated."
@@ -10572,6 +10720,11 @@ const COMP$1p = "Button";
 const ButtonMd = createMetadata({
   status: "stable",
   description: "`Button` is the primary interactive component for triggering actions like form submissions, navigation, opening modals, and API calls. It supports multiple visual styles and sizes to match different UI contexts and importance levels.",
+  parts: {
+    icon: {
+      description: "The icon displayed within the button, if any."
+    }
+  },
   props: {
     autoFocus: {
       description: "Indicates if the button should receive focus when the page loads.",
@@ -13505,12 +13658,11 @@ const Toggle = forwardRef(function Toggle2({
   }, [focus, registerComponentApi, setValue]);
   const input2 = useMemo(() => {
     const legitValue = transformToLegitValue(value);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx(
       "input",
       {
         ...rest,
         id,
-        "data-part-id": PART_INPUT,
         ref,
         type: "checkbox",
         role: variant,
@@ -13537,7 +13689,7 @@ const Toggle = forwardRef(function Toggle2({
           [styles$11.forceHover]: forceHover2
         })
       }
-    );
+    ) });
   }, [
     rest,
     className,
@@ -14094,10 +14246,9 @@ const PaginationNative = forwardRef(function PaginationNative2({
   const visiblePages = getVisiblePages();
   const isFirstPage = currentPage === 0;
   const isLastPage = currentPage === totalPages - 1;
-  const buttonRow2 = /* @__PURE__ */ jsxs(
+  const buttonRow2 = /* @__PURE__ */ jsx(Part, { partId: "pagination-controls", children: /* @__PURE__ */ jsxs(
     "ul",
     {
-      "data-component": `pagination-controls`,
       className: classnames(styles$10.buttonRow, {
         [styles$10.paginationListVertical]: orientation === "vertical"
         // layout is already horizontal by default
@@ -14207,37 +14358,30 @@ const PaginationNative = forwardRef(function PaginationNative2({
         ) })
       ]
     }
-  );
-  const pageSizeSelector = showPageSizeSelector && pageSizeOptions && pageSizeOptions.length > 1 && /* @__PURE__ */ jsx(
-    "div",
+  ) });
+  const pageSizeSelector = showPageSizeSelector && pageSizeOptions && pageSizeOptions.length > 1 && /* @__PURE__ */ jsx(Part, { partId: "page-size-selector-container", children: /* @__PURE__ */ jsx("div", { className: classnames(styles$10.selectorContainer), children: /* @__PURE__ */ jsx(
+    ItemWithLabel,
     {
-      "data-component": `page-size-selector-container`,
-      className: classnames(styles$10.selectorContainer),
+      id: `${id}-page-size-selector`,
+      label: "Items per page",
+      enabled: enabled2,
+      style: style2,
+      className,
+      labelPosition: orientation === "vertical" ? "top" : "start",
       children: /* @__PURE__ */ jsx(
-        ItemWithLabel,
+        "select",
         {
           id: `${id}-page-size-selector`,
-          label: "Items per page",
-          enabled: enabled2,
-          style: style2,
-          className,
-          labelPosition: orientation === "vertical" ? "top" : "start",
-          children: /* @__PURE__ */ jsx(
-            "select",
-            {
-              id: `${id}-page-size-selector`,
-              value: pageSize,
-              onChange: (e) => handlePageSizeChange(Number(e.target.value)),
-              disabled: !enabled2,
-              className: styles$10.pageSizeSelect,
-              children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
-            }
-          )
+          value: pageSize,
+          onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+          disabled: !enabled2,
+          className: styles$10.pageSizeSelect,
+          children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
         }
       )
     }
-  );
-  const pageInfo = showPageInfo && /* @__PURE__ */ jsx("div", { "data-component": `page-info`, className: classnames(styles$10.pageInfo), children: /* @__PURE__ */ jsxs(Text, { variant: "secondary", children: [
+  ) }) });
+  const pageInfo = showPageInfo && /* @__PURE__ */ jsx(Part, { partId: "page-info", children: /* @__PURE__ */ jsx("div", { className: classnames(styles$10.pageInfo), children: /* @__PURE__ */ jsxs(Text, { variant: "secondary", children: [
     "Page ",
     currentPageNumber,
     " of ",
@@ -14245,7 +14389,7 @@ const PaginationNative = forwardRef(function PaginationNative2({
     " (",
     itemCount,
     " items)"
-  ] }) });
+  ] }) }) });
   return /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -15058,6 +15202,15 @@ const COMP$1l = "Table";
 const TableMd = createMetadata({
   status: "stable",
   description: "`Table` presents structured data for viewing, sorting, selection, and interaction.",
+  // NOTE: let's leave it like this for now, we'll expand later when the need arises
+  parts: {
+    table: {
+      description: "The main table container."
+    },
+    pagination: {
+      description: "The pagination controls container."
+    }
+  },
   props: {
     items: dInternal(
       `You can use \`items\` as an alias for the \`data\` property. When you bind the table to a data source (e.g. an API endpoint), the \`data\` acts as the property that accepts a URL to fetch information from an API. When both \`items\` and \`data\` are used, \`items\` has priority.`
@@ -15728,20 +15881,22 @@ const avatarComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$D = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "thickness-ContentSeparator": "var(--xmlui-thickness-ContentSeparator)", "length-ContentSeparator": "var(--xmlui-length-ContentSeparator)", "marginTop-ContentSeparator": "var(--xmlui-marginTop-ContentSeparator)", "marginBottom-ContentSeparator": "var(--xmlui-marginBottom-ContentSeparator)", "marginVertical-ContentSeparator": "var(--xmlui-marginVertical-ContentSeparator)", "marginLeft-ContentSeparator": "var(--xmlui-marginLeft-ContentSeparator)", "marginRight-ContentSeparator": "var(--xmlui-marginRight-ContentSeparator)", "marginHorizontal-ContentSeparator": "var(--xmlui-marginHorizontal-ContentSeparator)", "paddingTop-ContentSeparator": "var(--xmlui-paddingTop-ContentSeparator)", "paddingBottom-ContentSeparator": "var(--xmlui-paddingBottom-ContentSeparator)", "paddingVertical-ContentSeparator": "var(--xmlui-paddingVertical-ContentSeparator)", "paddingLeft-ContentSeparator": "var(--xmlui-paddingLeft-ContentSeparator)", "paddingRight-ContentSeparator": "var(--xmlui-paddingRight-ContentSeparator)", "paddingHorizontal-ContentSeparator": "var(--xmlui-paddingHorizontal-ContentSeparator)"}'`;
-const separator = "_separator_1r9lf_14";
-const horizontal$3 = "_horizontal_1r9lf_27";
-const vertical$3 = "_vertical_1r9lf_31";
+const separator = "_separator_hmp7g_14";
+const horizontal$3 = "_horizontal_hmp7g_27";
+const stretchToFit = "_stretchToFit_hmp7g_31";
+const vertical$3 = "_vertical_hmp7g_35";
 const styles$Y = {
   themeVars: themeVars$D,
   separator,
   horizontal: horizontal$3,
+  stretchToFit,
   vertical: vertical$3
 };
 const defaultProps$W = {
   orientation: "horizontal"
 };
 const ContentSeparator = forwardRef(
-  ({ orientation = defaultProps$W.orientation, thickness, length, style: style2, className, ...rest }, ref) => {
+  ({ orientation = defaultProps$W.orientation, thickness, length, hasExplicitLength = false, style: style2, className, ...rest }, ref) => {
     const inlineStyles = {};
     if (thickness !== void 0) {
       if (orientation === "horizontal") {
@@ -15766,7 +15921,8 @@ const ContentSeparator = forwardRef(
           styles$Y.separator,
           {
             [styles$Y.horizontal]: orientation === "horizontal",
-            [styles$Y.vertical]: orientation === "vertical"
+            [styles$Y.vertical]: orientation === "vertical",
+            [styles$Y.stretchToFit]: !hasExplicitLength
           },
           className
         ),
@@ -15819,12 +15975,16 @@ const contentSeparatorComponentRenderer = createComponentRenderer(
   COMP$1h,
   ContentSeparatorMd,
   ({ node, className, extractValue }) => {
+    const orientation = extractValue(node.props.orientation);
+    const length = extractValue.asSize(node.props.length);
+    const hasExplicitLength = length !== void 0 || orientation === "vertical" && node.props.height !== void 0 || orientation === "horizontal" && node.props.width !== void 0;
     return /* @__PURE__ */ jsx(
       ContentSeparator,
       {
-        orientation: extractValue(node.props.orientation),
+        orientation,
         thickness: extractValue.asSize(node.props.thickness),
-        length: extractValue.asSize(node.props.length),
+        length,
+        hasExplicitLength,
         className
       }
     );
@@ -15901,6 +16061,17 @@ const COMP$1g = "Card";
 const CardMd = createMetadata({
   status: "stable",
   description: "`Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.",
+  parts: {
+    avatar: {
+      description: "The avatar displayed within the card, if any."
+    },
+    title: {
+      description: "The title of the card."
+    },
+    subtitle: {
+      description: "The subtitle of the card."
+    }
+  },
   props: {
     avatarUrl: {
       description: `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP$1g} will show the first letters of the [\`title\`](#title).`,
@@ -16350,11 +16521,10 @@ const ModalDialog = React__default.forwardRef(
     if (!root2) {
       return null;
     }
-    const Content2 = /* @__PURE__ */ jsxs(
+    const Content2 = /* @__PURE__ */ jsx(Part, { partId: PART_CONTENT, children: /* @__PURE__ */ jsxs(
       SheetPrimitive.Content,
       {
         ...rest,
-        "data-part-id": PART_CONTENT,
         className: classnames(
           {
             [styles$V.contentAnimation]: !externalAnimation
@@ -16370,7 +16540,7 @@ const ModalDialog = React__default.forwardRef(
         ref: composedRef,
         style: { ...style2, gap: void 0 },
         children: [
-          !!title2 && /* @__PURE__ */ jsx(SheetPrimitive.Title, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsx("header", { id: "dialogTitle", className: styles$V.dialogTitle, "data-part-id": PART_TITLE, children: title2 }) }),
+          !!title2 && /* @__PURE__ */ jsx(Part, { partId: PART_TITLE, children: /* @__PURE__ */ jsx(SheetPrimitive.Title, { style: { marginTop: 0 }, children: /* @__PURE__ */ jsx("header", { id: "dialogTitle", className: styles$V.dialogTitle, children: title2 }) }) }),
           /* @__PURE__ */ jsx("div", { className: styles$V.innerContent, style: { gap: style2?.gap }, children: /* @__PURE__ */ jsx(ModalVisibilityContext.Provider, { value: modalVisibilityContextValue, children }) }),
           closeButtonVisible && /* @__PURE__ */ jsx(SheetPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(
             Button,
@@ -16385,7 +16555,7 @@ const ModalDialog = React__default.forwardRef(
           ) })
         ]
       }
-    );
+    ) });
     return /* @__PURE__ */ jsx(SheetPrimitive.Root, { open: isOpen, onOpenChange: (open) => open ? doOpen() : doClose(), children: /* @__PURE__ */ jsxs(SheetPrimitive.Portal, { container: root2, children: [
       isDialogRootInShadowDom && /*
         In the Shadow DOM we can omit the Dialog.Overlay,
@@ -17461,6 +17631,14 @@ const COMP$14 = "Splitter";
 const baseSplitterMd = createMetadata({
   status: "stable",
   description: "`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them. When only a single child is visible (due to conditional rendering with `when` attributes), the splitter bar is not displayed and the single panel stretches to fill the entire viewport of the splitter container.",
+  parts: {
+    primaryPanel: {
+      description: "The primary section/panel of the `Splitter` component."
+    },
+    secondaryPanel: {
+      description: "The secondary section/panel of the `Splitter` component."
+    }
+  },
   props: {
     swapped: {
       description: `This optional booelan property indicates whether the \`${COMP$14}\` sections are layed out as primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
@@ -17517,7 +17695,7 @@ const SplitterMd = {
 const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$14 };
 const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$14 };
 const DEFAULT_ORIENTATION = "vertical";
-function renderSplitter({
+function SplitterRenderer({
   node,
   extractValue,
   className,
@@ -17533,7 +17711,7 @@ function renderSplitter({
       const rendered = renderChild2(node.children);
       return rendered ? [rendered] : [];
     }
-    return node.children.map((child, index) => renderChild2(child)).filter((child) => child !== null && child !== void 0).map((child, index) => React__default.cloneElement(child, { key: index }));
+    return node.children.map((child) => renderChild2(child)).filter((child) => child !== null && child !== void 0).map((child, index) => React__default.cloneElement(child, { key: index }));
   }, [node.children, renderChild2]);
   const visibleChildCount = renderedChildren.length;
   return /* @__PURE__ */ jsx(
@@ -17557,7 +17735,7 @@ const splitterComponentRenderer = createComponentRenderer(
   COMP$14,
   SplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
-    return renderSplitter({
+    return SplitterRenderer({
       node,
       extractValue,
       className,
@@ -17570,7 +17748,7 @@ const vSplitterComponentRenderer = createComponentRenderer(
   "VSplitter",
   VSplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
-    return renderSplitter({
+    return SplitterRenderer({
       node,
       extractValue,
       className,
@@ -17584,7 +17762,7 @@ const hSplitterComponentRenderer = createComponentRenderer(
   "HSplitter",
   HSplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
-    return renderSplitter({
+    return SplitterRenderer({
       node,
       extractValue,
       className,
@@ -20053,21 +20231,12 @@ const TextBox = forwardRef(function TextBox2({
       onFocus: focus,
       style: { ...style2, gap },
       children: [
-        /* @__PURE__ */ jsx(
-          Adornment,
-          {
-            "data-part-id": PART_START_ADORNMENT,
-            text: startText,
-            iconName: startIcon,
-            className: classnames(styles$N.adornment)
-          }
-        ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Part, { partId: PART_START_ADORNMENT, children: /* @__PURE__ */ jsx(Adornment, { text: startText, iconName: startIcon, className: classnames(styles$N.adornment) }) }),
+        /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx(
           "input",
           {
             id,
             ref: inputRef,
-            "data-part-id": PART_INPUT,
             type: actualType,
             className: classnames(styles$N.input, {
               [styles$N.readOnly]: readOnly2
@@ -20085,33 +20254,23 @@ const TextBox = forwardRef(function TextBox2({
             tabIndex: enabled2 ? tabIndex : -1,
             required: required2
           }
-        ),
-        !readOnly2 && enabled2 && type == "search" && localValue?.length > 0 && /* @__PURE__ */ jsx(
+        ) }),
+        !readOnly2 && enabled2 && type == "search" && localValue?.length > 0 && /* @__PURE__ */ jsx(Part, { partId: PART_END_ADORNMENT, children: /* @__PURE__ */ jsx(
           Adornment,
           {
-            "data-part-id": PART_END_ADORNMENT,
             iconName: "close",
             className: styles$N.adornment,
             onClick: () => updateValue("")
           }
-        ),
-        type === "password" && showPasswordToggle ? /* @__PURE__ */ jsx(
+        ) }),
+        type === "password" && showPasswordToggle ? /* @__PURE__ */ jsx(Part, { partId: PART_END_ADORNMENT, children: /* @__PURE__ */ jsx(
           Adornment,
           {
-            "data-part-id": PART_END_ADORNMENT,
             iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon,
             className: classnames(styles$N.adornment, styles$N.passwordToggle),
             onClick: togglePasswordVisibility
           }
-        ) : /* @__PURE__ */ jsx(
-          Adornment,
-          {
-            "data-part-id": PART_END_ADORNMENT,
-            text: endText,
-            iconName: endIcon,
-            className: styles$N.adornment
-          }
-        )
+        ) }) : /* @__PURE__ */ jsx(Part, { partId: PART_END_ADORNMENT, children: /* @__PURE__ */ jsx(Adornment, { text: endText, iconName: endIcon, className: styles$N.adornment }) })
       ]
     }
   );
@@ -20753,20 +20912,11 @@ const NumberBox = forwardRef(function NumberBox2({
       },
       style: { ...style2, gap },
       children: [
-        /* @__PURE__ */ jsx(
-          Adornment,
-          {
-            "data-part-id": PART_START_ADORNMENT,
-            text: startText,
-            iconName: startIcon,
-            className: classnames(styles$K.adornment)
-          }
-        ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Part, { partId: PART_START_ADORNMENT, children: /* @__PURE__ */ jsx(Adornment, { text: startText, iconName: startIcon, className: classnames(styles$K.adornment) }) }),
+        /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx(
           "input",
           {
             id,
-            "data-part-id": PART_INPUT,
             type: "text",
             inputMode: "numeric",
             className: classnames(styles$K.input, {
@@ -20788,21 +20938,12 @@ const NumberBox = forwardRef(function NumberBox2({
             maxLength,
             required: required2
           }
-        ),
-        /* @__PURE__ */ jsx(
-          Adornment,
-          {
-            "data-part-id": PART_END_ADORNMENT,
-            text: endText,
-            iconName: endIcon,
-            className: classnames(styles$K.adornment)
-          }
-        ),
+        ) }),
+        /* @__PURE__ */ jsx(Part, { partId: PART_END_ADORNMENT, children: /* @__PURE__ */ jsx(Adornment, { text: endText, iconName: endIcon, className: classnames(styles$K.adornment) }) }),
         hasSpinBox && /* @__PURE__ */ jsxs("div", { className: styles$K.spinnerBox, children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Part, { partId: PART_SPINNER_UP, children: /* @__PURE__ */ jsx(
             Button,
             {
-              "data-part-id": PART_SPINNER_UP,
               "data-spinner": "up",
               type: "button",
               role: "spinbutton",
@@ -20814,11 +20955,10 @@ const NumberBox = forwardRef(function NumberBox2({
               ref: upButton,
               children: /* @__PURE__ */ jsx(Icon, { name: spinnerUpIcon || "spinnerUp:NumberBox", fallback: "chevronup", size: "sm" })
             }
-          ),
-          /* @__PURE__ */ jsx(
+          ) }),
+          /* @__PURE__ */ jsx(Part, { partId: PART_SPINNER_DOWN, children: /* @__PURE__ */ jsx(
             Button,
             {
-              "data-part-id": PART_SPINNER_DOWN,
               "data-spinner": "down",
               type: "button",
               role: "spinbutton",
@@ -20837,7 +20977,7 @@ const NumberBox = forwardRef(function NumberBox2({
                 }
               )
             }
-          )
+          ) })
         ] })
       ]
     }
@@ -21021,7 +21161,7 @@ function HiddenOption(option) {
   return /* @__PURE__ */ jsx("div", { ref: (el) => setNode(el), style: { display: "none" }, children: option.children });
 }
 const PART_LIST_WRAPPER$1 = "listWrapper";
-const PART_CLEAR_BUTTON$2 = "clearButton";
+const PART_CLEAR_BUTTON$1 = "clearButton";
 const defaultProps$G = {
   enabled: true,
   placeholder: "",
@@ -21087,10 +21227,9 @@ const SelectTriggerActions = ({
 }) => {
   const hasValue = multiSelect ? Array.isArray(value) && value.length > 0 : value !== void 0 && value !== null && value !== "";
   return /* @__PURE__ */ jsxs("div", { className: styles$J.actions, children: [
-    hasValue && enabled2 && !readOnly2 && clearable && /* @__PURE__ */ jsx(
+    hasValue && enabled2 && !readOnly2 && clearable && /* @__PURE__ */ jsx(Part, { partId: PART_CLEAR_BUTTON$1, children: /* @__PURE__ */ jsx(
       "span",
       {
-        "data-part-id": PART_CLEAR_BUTTON$2,
         className: styles$J.action,
         onClick: (event) => {
           event.stopPropagation();
@@ -21098,7 +21237,7 @@ const SelectTriggerActions = ({
         },
         children: /* @__PURE__ */ jsx(Icon, { name: "close" })
       }
-    ),
+    ) }),
     showChevron && /* @__PURE__ */ jsx("span", { className: styles$J.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
   ] });
 };
@@ -21366,7 +21505,7 @@ const Select = forwardRef(function Select2({
         },
         modal: false,
         children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Part, { partId: PART_LIST_WRAPPER$1, children: /* @__PURE__ */ jsxs(
             PopoverTrigger,
             {
               ...rest,
@@ -21378,7 +21517,6 @@ const Select = forwardRef(function Select2({
               onBlur,
               disabled: !enabled2,
               "aria-expanded": open,
-              "data-part-id": PART_LIST_WRAPPER$1,
               className: classnames(className, styles$J.selectTrigger, styles$J[validationStatus], {
                 [styles$J.disabled]: !enabled2,
                 [styles$J.multi]: multiSelect
@@ -21431,7 +21569,7 @@ const Select = forwardRef(function Select2({
                 )
               ]
             }
-          ),
+          ) }),
           open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
@@ -22767,14 +22905,18 @@ const Form = forwardRef(function({
     dispatch(formSubmitting());
     try {
       const filteredSubject = validationResult.data;
-      const canSubmit = await onWillSubmit?.(filteredSubject);
-      if (canSubmit === false) {
+      const willSubmitResult = await onWillSubmit?.(filteredSubject);
+      if (willSubmitResult === false) {
         dispatch(
           backendValidationArrived({ generalValidationResults: [], fieldValidationResults: {} })
         );
         return;
       }
-      const result = await onSubmit?.(filteredSubject, {
+      let dataToSubmit = filteredSubject;
+      if (willSubmitResult !== null && willSubmitResult !== void 0 && willSubmitResult !== "" && typeof willSubmitResult === "object" && !Array.isArray(willSubmitResult)) {
+        dataToSubmit = willSubmitResult;
+      }
+      const result = await onSubmit?.(dataToSubmit, {
         passAsDefaultBody: true
       });
       dispatch(formSubmitted());
@@ -22842,10 +22984,9 @@ const Form = forwardRef(function({
       });
     });
   });
-  const cancelButton = cancelLabel === "" ? null : /* @__PURE__ */ jsx(
+  const cancelButton = cancelLabel === "" ? null : /* @__PURE__ */ jsx(Part, { partId: PART_CANCEL_BUTTON, children: /* @__PURE__ */ jsx(
     Button,
     {
-      "data-part-id": PART_CANCEL_BUTTON,
       type: "button",
       themeColor: "secondary",
       variant: "ghost",
@@ -22853,18 +22994,9 @@ const Form = forwardRef(function({
       children: cancelLabel
     },
     "cancel"
-  );
+  ) });
   const submitButton = useMemo(
-    () => /* @__PURE__ */ jsx(
-      Button,
-      {
-        "data-part-id": PART_SUBMIT_BUTTON,
-        type: "submit",
-        disabled: !isEnabled2 || !enableSubmit,
-        children: formState.submitInProgress ? saveInProgressLabel : saveLabel
-      },
-      "submit"
-    ),
+    () => /* @__PURE__ */ jsx(Part, { partId: PART_SUBMIT_BUTTON, children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !isEnabled2 || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit") }),
     [isEnabled2, enableSubmit, formState.submitInProgress, saveInProgressLabel, saveLabel]
   );
   useEffect(() => {
@@ -23424,12 +23556,11 @@ const AutoComplete = forwardRef(function AutoComplete2({
         },
         modal: false,
         children: [
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref: setReferenceElement, children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Part, { partId: PART_LIST_WRAPPER, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, ref: setReferenceElement, children: /* @__PURE__ */ jsxs(
             "div",
             {
               ref: forwardedRef,
               style: style2,
-              "data-part-id": PART_LIST_WRAPPER,
               className: classnames(
                 className,
                 styles$E.badgeListWrapper,
@@ -23464,7 +23595,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
                   )
                 ] }, index)) }),
                 /* @__PURE__ */ jsxs("div", { className: styles$E.inputWrapper, children: [
-                  /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(Part, { partId: PART_INPUT, children: /* @__PURE__ */ jsx(
                     "input",
                     {
                       ...rest,
@@ -23500,7 +23631,6 @@ const AutoComplete = forwardRef(function AutoComplete2({
                           setOpen(true);
                         }
                       },
-                      "data-part-id": PART_INPUT,
                       readOnly: readOnly2,
                       autoFocus,
                       "aria-autocomplete": "list",
@@ -23514,7 +23644,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
                       placeholder: !readOnly2 ? placeholder2 : "",
                       className: styles$E.commandInput
                     }
-                  ),
+                  ) }),
                   /* @__PURE__ */ jsxs("div", { className: styles$E.actions, children: [
                     value?.length > 0 && enabled2 && !readOnly2 && /* @__PURE__ */ jsx(
                       "span",
@@ -23543,7 +23673,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
                 ] })
               ]
             }
-          ) }),
+          ) }) }),
           open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
@@ -24523,7 +24653,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-BuPNXouY.js");
+      const { initMock } = await import("./initMock-BsfLxhPR.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24540,7 +24670,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-dwrAyq6l.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-BuPNXouY.js")
+              import("./initMock-BsfLxhPR.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24577,7 +24707,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-dwrAyq6l.js"),
-            import("./initMock-BuPNXouY.js")
+            import("./initMock-BsfLxhPR.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -26747,7 +26877,6 @@ const ColorPicker = forwardRef(
           [styles$u.warning]: validationStatus === "warning",
           [styles$u.valid]: validationStatus === "valid"
         }),
-        "data-part-id": PART_INPUT,
         style: style2,
         disabled: !enabled2,
         onFocus: handleOnFocus,
@@ -28348,6 +28477,15 @@ const COMP$X = "Form";
 const FormMd = createMetadata({
   status: "stable",
   description: "`Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together.",
+  parts: {
+    buttonRow: {
+      description: "The container for the form action buttons (e.g., Save, Cancel)."
+    },
+    // NOTE: There is a ValidationSummary in the form and also one in the modal dialog.
+    validationSummary: {
+      description: "The area displaying validation summary messages for the form."
+    }
+  },
   props: {
     buttonRowTemplate: dComponent(
       `This property allows defining a custom component to display the buttons at the bottom of the form.`
@@ -28422,7 +28560,7 @@ const FormMd = createMetadata({
   },
   events: {
     willSubmit: d(
-      `The form infrastructure fires this event just before the form is submitted. The event argument is the current \`data\` value to be submitted. You can cancel the submission by returning \`false\` from the event handler.`
+      `The form infrastructure fires this event just before the form is submitted. The event argument is the current \`data\` value to be submitted. The return value controls submission behavior: returning \`false\` cancels the submission; returning a plain object submits that object instead; returning \`null\`, \`undefined\`, an empty string, or any non-object value proceeds with normal submission.`
     ),
     submit: d(
       `The form infrastructure fires this event when the form is submitted. The event argument is the current \`data\` value to save.`
@@ -28571,6 +28709,12 @@ const NumberBoxMd = createMetadata({
     },
     input: {
       description: "The text box input area."
+    },
+    spinnerButtonUp: {
+      description: "The spinner button for incrementing the value."
+    },
+    spinnerButtonDown: {
+      description: "The spinner button for decrementing the value."
     }
   },
   props: {
@@ -29275,6 +29419,14 @@ const COMP$S = "NavPanel";
 const NavPanelMd = createMetadata({
   status: "stable",
   description: "`NavPanel` defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration.",
+  parts: {
+    logo: {
+      description: "The logo area within the NavPanel component."
+    },
+    content: {
+      description: "The content area within the NavPanel component."
+    }
+  },
   props: {
     logoTemplate: dComponent(
       `This property defines the logo template to display in the navigation panel with the \`vertical\` and \`vertical-sticky\` layout.`
@@ -29675,6 +29827,11 @@ const RGOption = `RadioGroupOption`;
 const RadioGroupMd = createMetadata({
   status: "stable",
   description: "`RadioGroup` creates a mutually exclusive selection interface where users can choose only one option from a group of radio buttons. It manages the selection state and ensures that selecting one option automatically deselects all others in the group.Radio options store their values as strings. Numbers and booleans are converted to strings when assigned, while objects, functions and arrays default to an empty string unless resolved via binding expressions.",
+  parts: {
+    label: {
+      description: "The label displayed for the radio group."
+    }
+  },
   props: {
     initialValue: {
       ...dInitialValue(),
@@ -29804,6 +29961,14 @@ const DEFAULT_ICON = "browse:FileInput";
 const FileInputMd = createMetadata({
   status: "stable",
   description: "`FileInput` enables users to select files from their device's file system for upload or processing. It combines a text field displaying selected files with a customizable button that opens the system file browser. Use it for forms, media uploads, and document processing workflows.",
+  parts: {
+    label: {
+      description: "The label displayed for the file input."
+    },
+    input: {
+      description: "The file input area displaying selected file names."
+    }
+  },
   props: {
     placeholder: dPlaceholder(),
     initialValue: dInitialValue(),
@@ -29964,6 +30129,12 @@ const SelectMd = createMetadata({
   parts: {
     clearButton: {
       description: "The button to clear the selected value(s)."
+    },
+    item: {
+      description: "Each option item within the Select component."
+    },
+    menu: {
+      description: "The dropdown menu within the Select component."
     }
   },
   props: {
@@ -30617,6 +30788,11 @@ const DDMCOMP = "DropdownMenu";
 const DropdownMenuMd = createMetadata({
   status: "stable",
   description: "`DropdownMenu` provides a space-efficient way to present multiple options or actions through a collapsible interface. When clicked, the trigger button reveals a menu that can include items, separators, and nested submenus, making it ideal for navigation, action lists, or any situation requiring many options without permanent screen space.",
+  parts: {
+    content: {
+      description: "The content area of the DropdownMenu where menu items are displayed."
+    }
+  },
   props: {
     label: dLabel(),
     triggerTemplate: dTriggerTemplate(DDMCOMP),
@@ -30824,6 +31000,11 @@ const COMP$E = "ExpandableItem";
 const ExpandableItemMd = createMetadata({
   status: "stable",
   description: "`ExpandableItem` creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the `summary` the content expands or collapses.",
+  parts: {
+    summary: {
+      description: "The summary section that is always visible and acts as the trigger."
+    }
+  },
   props: {
     summary: dComponent("The summary content that is always visible and acts as the trigger."),
     initiallyExpanded: {
@@ -35147,7 +35328,7 @@ function InputDivider({
 const PART_DAY = "day";
 const PART_MONTH = "month";
 const PART_YEAR = "year";
-const PART_CLEAR_BUTTON$1 = "clearButton";
+const PART_CLEAR_BUTTON = "clearButton";
 const MIN_YEAR = 1900;
 const MAX_YEAR = 2100;
 const dateFormats = [
@@ -35380,7 +35561,7 @@ const DateInput = forwardRef(function DateInputNative({
         }
       }
     },
-    [day2, month2, year2, handleChange, onInvalidChange]
+    [day2, month2, year2, handleChange, onInvalidChange, formatDateValue]
   );
   const handleDayChange = useMemo(
     () => createInputChangeHandler(
@@ -35685,21 +35866,17 @@ const DateInput = forwardRef(function DateInputNative({
         startAdornment,
         /* @__PURE__ */ jsxs("div", { className: styles$p.wrapper, children: [
           /* @__PURE__ */ jsx("div", { className: styles$p.inputGroup, children: createDateInputs() }),
-          clearable && /* @__PURE__ */ jsx(
+          clearable && /* @__PURE__ */ jsx(Part, { partId: PART_CLEAR_BUTTON, children: /* @__PURE__ */ jsx(
             "button",
             {
-              "data-part-id": PART_CLEAR_BUTTON$1,
-              className: classnames(
-                styles$p.clearButton,
-                styles$p.button
-              ),
+              className: classnames(styles$p.clearButton, styles$p.button),
               disabled: !enabled2,
               onClick: clear,
               onFocus: stopPropagation,
               type: "button",
               children: clearIconElement
             }
-          )
+          ) })
         ] }),
         endAdornment
       ]
@@ -35727,10 +35904,9 @@ function DayInput({
     }
     return 31;
   }, [month2, year2]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: PART_DAY, children: /* @__PURE__ */ jsx(
     PartialInput,
     {
-      "data-part-id": PART_DAY,
       id: otherProps.id,
       value,
       emptyCharacter,
@@ -35759,7 +35935,7 @@ function DayInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function MonthInput({
   minValue,
@@ -35770,10 +35946,9 @@ function MonthInput({
   emptyCharacter = "-",
   ...otherProps
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: PART_MONTH, children: /* @__PURE__ */ jsx(
     PartialInput,
     {
-      "data-part-id": PART_MONTH,
       id: otherProps.id,
       max: 12,
       min: 1,
@@ -35802,7 +35977,7 @@ function MonthInput({
       nextInputRef: otherProps.nextInputRef,
       ariaLabel: otherProps.ariaLabel
     }
-  );
+  ) });
 }
 function YearInput({
   minValue,
@@ -35819,10 +35994,9 @@ function YearInput({
   const min = 1900;
   const max = currentYear + 100;
   const { className: originalClassName, ...restProps } = otherProps;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: PART_YEAR, children: /* @__PURE__ */ jsx(
     PartialInput,
     {
-      "data-part-id": PART_YEAR,
       id: otherProps.id,
       max,
       min,
@@ -35843,7 +36017,7 @@ function YearInput({
       },
       ...restProps
     }
-  );
+  ) });
 }
 function parseDateString(dateString, dateFormat) {
   if (typeof dateString !== "string" || dateString === null || dateString === void 0) {
@@ -36311,11 +36485,6 @@ function safeMin(...args) {
 function safeMax(...args) {
   return Math.max(...args.filter(isValidNumber));
 }
-const PART_HOUR = "hour";
-const PART_MINUTE = "minute";
-const PART_SECOND = "second";
-const PART_AMPM = "ampm";
-const PART_CLEAR_BUTTON = "clearButton";
 const defaultProps$j = {
   enabled: true,
   validationStatus: "none",
@@ -36846,10 +37015,9 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
               }
             )
           ] }),
-          clearable && /* @__PURE__ */ jsx(
+          clearable && /* @__PURE__ */ jsx(Part, { partId: "clearButton", children: /* @__PURE__ */ jsx(
             "button",
             {
-              "data-part-id": PART_CLEAR_BUTTON,
               className: classnames(styles$m.clearButton, styles$m.button),
               disabled: !enabled2,
               onClick: clear,
@@ -36857,7 +37025,7 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
               type: "button",
               children: clearIconElement
             }
-          )
+          ) })
         ] }),
         endAdornment
       ]
@@ -36900,11 +37068,10 @@ function AmPmButton({
     },
     [onKeyDown, disabled2, onAmPmSet, value, amDisabled, pmDisabled]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: "ampm", children: /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      "data-part-id": PART_AMPM,
       "aria-label": ariaLabel || "Toggle AM/PM (Press A for AM, P for PM)",
       autoFocus,
       className: classnames(styles$m.amPmButton, styles$m.button, className),
@@ -36914,7 +37081,7 @@ function AmPmButton({
       ref: buttonRef,
       children: /* @__PURE__ */ jsx("span", { className: styles$m.amPmValue, children: value ? value === "am" ? amLabel : pmLabel : "--" })
     }
-  );
+  ) });
 }
 function HourInput({
   id,
@@ -36962,11 +37129,10 @@ function HourInput({
     }
   })();
   const displayValue = value || "";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: "hour", children: /* @__PURE__ */ jsx(
     PartialInput,
     {
       id,
-      "data-part-id": PART_HOUR,
       value: displayValue,
       emptyCharacter,
       placeholderLength: 2,
@@ -36994,7 +37160,7 @@ function HourInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function MinuteInput({
   hour: hour2,
@@ -37011,10 +37177,9 @@ function MinuteInput({
   }
   const maxMinute = safeMin(59, maxTime && isSameHour(maxTime) && getMinutes(maxTime));
   const minMinute = safeMax(0, minTime && isSameHour(minTime) && getMinutes(minTime));
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: "minute", children: /* @__PURE__ */ jsx(
     PartialInput,
     {
-      "data-part-id": PART_MINUTE,
       max: maxMinute,
       min: minMinute,
       name: "minute",
@@ -37042,7 +37207,7 @@ function MinuteInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function SecondInput({
   hour: hour2,
@@ -37060,10 +37225,9 @@ function SecondInput({
   }
   const maxSecond = safeMin(59, maxTime && isSameMinute(maxTime) && getSeconds(maxTime));
   const minSecond = safeMax(0, minTime && isSameMinute(minTime) && getSeconds(minTime));
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Part, { partId: "second", children: /* @__PURE__ */ jsx(
     PartialInput,
     {
-      "data-part-id": PART_SECOND,
       max: maxSecond,
       min: minSecond,
       name: "second",
@@ -37091,7 +37255,7 @@ function SecondInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function parseTimeString(timeValue, targetIs12Hour = false) {
   if (timeValue == null || timeValue === void 0) {
@@ -38918,6 +39082,17 @@ const COMP$p = "Slider";
 const SliderMd = createMetadata({
   status: "stable",
   description: "`Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.",
+  parts: {
+    label: {
+      description: "The label displayed for the slider."
+    },
+    track: {
+      description: "The track element of the slider."
+    },
+    thumb: {
+      description: "The thumb elements of the slider."
+    }
+  },
   props: {
     initialValue: dInitialValue(),
     minValue: {
@@ -42713,6 +42888,14 @@ const COMP$b = "CodeBlock";
 const CodeBlockMd = createMetadata({
   status: "stable",
   description: `The \`${COMP$b}\` component displays code with optional syntax highlighting and meta information.`,
+  parts: {
+    header: {
+      description: "The header section of the CodeBlock, typically displaying the filename."
+    },
+    content: {
+      description: "The main content area of the CodeBlock where the code is displayed."
+    }
+  },
   props: {},
   themeVars: parseScssVar(styles$A.themeVars),
   defaultThemeVars: {
@@ -44652,6 +44835,17 @@ const COMP$2 = "Pagination";
 const PaginationMd = createMetadata({
   status: "experimental",
   description: "`Pagination` enables navigation through large datasets by dividing content into pages. It provides controls for page navigation and can display current page information.",
+  parts: {
+    buttonRow: {
+      description: "The container for pagination buttons."
+    },
+    pageInfo: {
+      description: "The container for page information display."
+    },
+    pageSizeSelector: {
+      description: "The container for the page size selector dropdown."
+    }
+  },
   props: {
     enabled: dEnabled(),
     itemCount: d(
@@ -46479,7 +46673,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.13";
+const version = "0.11.16";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -46757,21 +46951,21 @@ function createContainerReducer(debugView) {
       case ContainerActionKind.EVENT_HANDLER_STARTED: {
         const { eventName } = action2.payload;
         const inProgressFlagName = `${eventName}InProgress`;
-        state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: true } : { [inProgressFlagName]: true };
+        state[uid] = { ...state[uid], [inProgressFlagName]: true };
         storeNextValue(state[uid]);
         break;
       }
       case ContainerActionKind.EVENT_HANDLER_COMPLETED: {
         const { eventName } = action2.payload;
         const inProgressFlagName = `${eventName}InProgress`;
-        state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
+        state[uid] = { ...state[uid], [inProgressFlagName]: false };
         storeNextValue(state[uid]);
         break;
       }
       case ContainerActionKind.EVENT_HANDLER_ERROR: {
         const { eventName } = action2.payload;
         const inProgressFlagName = `${eventName}InProgress`;
-        state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
+        state[uid] = { ...state[uid], [inProgressFlagName]: false };
         storeNextValue(state[uid]);
         break;
       }
@@ -48859,9 +49053,7 @@ const StateContainer = memo(
     const routingParams = useRoutingParams();
     const memoedVars = useRef(/* @__PURE__ */ new Map());
     const stateFromOutside = useShallowCompareMemoize(
-      useMemo(() => {
-        return extractScopedState(parentState, node.uses);
-      }, [node.uses, parentState])
+      useMemo(() => extractScopedState(parentState, node.uses), [node.uses, parentState])
     );
     const debugView = useDebugView();
     const containerReducer = createContainerReducer(debugView);
@@ -48870,15 +49062,10 @@ const StateContainer = memo(
     const componentStateWithApis = useShallowCompareMemoize(
       useMemo(() => {
         const ret = { ...componentState };
-        const registeredApiKeys = new Set(
-          Object.getOwnPropertySymbols(componentApis).map((s) => s.description).filter((d2) => d2 !== void 0)
-        );
         for (const stateKey of Object.getOwnPropertySymbols(componentState)) {
           const value = componentState[stateKey];
           if (stateKey.description) {
-            if (registeredApiKeys.has(stateKey.description)) {
-              ret[stateKey.description] = value;
-            }
+            ret[stateKey.description] = value;
           }
         }
         if (Reflect.ownKeys(componentApis).length === 0) {
@@ -48942,11 +49129,8 @@ const StateContainer = memo(
     const mergedWithVars = useMergedState(resolvedLocalVars, componentStateWithApis);
     const combinedState = useCombinedState(
       stateFromOutside,
-      // Parent state (lower priority) - allows local vars to shadow
       node.contextVars,
-      // Context vars like $item
       mergedWithVars,
-      // Local vars and component state (higher priority) - enables shadowing
       routingParams
     );
     const registerComponentApi = useCallback((uid, api) => {
@@ -51632,6 +51816,7 @@ const collectedComponentMetadata = {
   RadioGroup: RadioGroupMd,
   RealTimeAdapter: RealTimeAdapterMd,
   Redirect: RedirectMd,
+  ResponsiveBar: ResponsiveBarMd,
   Select: SelectMd,
   SelectionStore: SelectionStoreMd,
   Slider: SliderMd,