xmlui 0.11.15 → 0.11.17

package/dist/lib/{index-CP9ZIMMT.js → index-DDJqM9b9.js}

@@ -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
+          }) })
         ]
       }
     ),
@@ -1721,15 +1721,15 @@ 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_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 DropdownMenuContent = "_DropdownMenuContent_wsn5i_14";
+const compact = "_compact_wsn5i_19";
+const DropdownMenuSubContent = "_DropdownMenuSubContent_wsn5i_23";
+const DropdownMenuItem = "_DropdownMenuItem_wsn5i_33";
+const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_wsn5i_34";
+const active$3 = "_active_wsn5i_57";
+const disabled$b = "_disabled_wsn5i_67";
+const wrapper$m = "_wrapper_wsn5i_82";
+const DropdownMenuSeparator = "_DropdownMenuSeparator_wsn5i_86";
 const styles$1h = {
   themeVars: themeVars$_,
   DropdownMenuContent,
@@ -3496,7 +3496,9 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
             ref: contentRef,
             align: alignment,
             style: style2,
-            className: classnames(styles$1h.DropdownMenuContent, className, { [styles$1h.compact]: compact2 }),
+            className: classnames(styles$1h.DropdownMenuContent, className, {
+              [styles$1h.compact]: compact2
+            }),
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               contentRef.current?.focus();
@@ -3619,7 +3621,7 @@ const ResponsiveBarDropdown = ({
   className,
   onWillOpen,
   registerComponentApi
-}) => /* @__PURE__ */ jsx("div", { className, "data-part-id": PART_OVERFLOW, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Part, { partId: PART_OVERFLOW, children: /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
   DropdownMenu,
   {
     label: dropdownText,
@@ -3631,7 +3633,7 @@ const ResponsiveBarDropdown = ({
     registerComponentApi,
     children
   }
-) });
+) }) });
 const defaultResponsiveBarProps = {
   overflowIcon: "ellipsisHorizontal:ResponsiveBar",
   dropdownText: "More options",
@@ -4361,42 +4363,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 = [
@@ -4987,17 +4979,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
@@ -8490,6 +8481,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(),
@@ -8624,16 +8620,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
   };
@@ -8642,6 +8638,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."
@@ -10721,6 +10722,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.",
@@ -13654,12 +13660,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,
@@ -13686,7 +13691,7 @@ const Toggle = forwardRef(function Toggle2({
           [styles$11.forceHover]: forceHover2
         })
       }
-    );
+    ) });
   }, [
     rest,
     className,
@@ -14243,10 +14248,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
@@ -14356,37 +14360,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 ",
@@ -14394,7 +14391,7 @@ const PaginationNative = forwardRef(function PaginationNative2({
     " (",
     itemCount,
     " items)"
-  ] }) });
+  ] }) }) });
   return /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -15207,6 +15204,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.`
@@ -16057,6 +16063,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).`,
@@ -16506,11 +16523,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
@@ -16526,7 +16542,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,
@@ -16541,7 +16557,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,
@@ -17617,6 +17633,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.`,
@@ -17673,7 +17697,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,
@@ -17689,7 +17713,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(
@@ -17713,7 +17737,7 @@ const splitterComponentRenderer = createComponentRenderer(
   COMP$14,
   SplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
-    return renderSplitter({
+    return SplitterRenderer({
       node,
       extractValue,
       className,
@@ -17726,7 +17750,7 @@ const vSplitterComponentRenderer = createComponentRenderer(
   "VSplitter",
   VSplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
-    return renderSplitter({
+    return SplitterRenderer({
       node,
       extractValue,
       className,
@@ -17740,7 +17764,7 @@ const hSplitterComponentRenderer = createComponentRenderer(
   "HSplitter",
   HSplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
-    return renderSplitter({
+    return SplitterRenderer({
       node,
       extractValue,
       className,
@@ -20209,21 +20233,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
@@ -20241,33 +20256,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 }) })
       ]
     }
   );
@@ -20909,20 +20914,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, {
@@ -20944,21 +20940,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",
@@ -20970,11 +20957,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",
@@ -20993,7 +20979,7 @@ const NumberBox = forwardRef(function NumberBox2({
                 }
               )
             }
-          )
+          ) })
         ] })
       ]
     }
@@ -21177,7 +21163,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: "",
@@ -21243,10 +21229,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();
@@ -21254,7 +21239,7 @@ const SelectTriggerActions = ({
         },
         children: /* @__PURE__ */ jsx(Icon, { name: "close" })
       }
-    ),
+    ) }),
     showChevron && /* @__PURE__ */ jsx("span", { className: styles$J.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
   ] });
 };
@@ -21522,7 +21507,7 @@ const Select = forwardRef(function Select2({
         },
         modal: false,
         children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Part, { partId: PART_LIST_WRAPPER$1, children: /* @__PURE__ */ jsxs(
             PopoverTrigger,
             {
               ...rest,
@@ -21534,7 +21519,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
@@ -21587,7 +21571,7 @@ const Select = forwardRef(function Select2({
                 )
               ]
             }
-          ),
+          ) }),
           open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
@@ -23002,10 +22986,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",
@@ -23013,18 +22996,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(() => {
@@ -23584,12 +23558,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,
@@ -23624,7 +23597,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,
@@ -23660,7 +23633,6 @@ const AutoComplete = forwardRef(function AutoComplete2({
                           setOpen(true);
                         }
                       },
-                      "data-part-id": PART_INPUT,
                       readOnly: readOnly2,
                       autoFocus,
                       "aria-autocomplete": "list",
@@ -23674,7 +23646,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",
@@ -23703,7 +23675,7 @@ const AutoComplete = forwardRef(function AutoComplete2({
                 ] })
               ]
             }
-          ) }),
+          ) }) }),
           open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
@@ -24683,7 +24655,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-C17fxLuA.js");
+      const { initMock } = await import("./initMock-CnArkQw6.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24700,7 +24672,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-C17fxLuA.js")
+              import("./initMock-CnArkQw6.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24737,7 +24709,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-dwrAyq6l.js"),
-            import("./initMock-C17fxLuA.js")
+            import("./initMock-CnArkQw6.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -26907,7 +26879,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,
@@ -28508,6 +28479,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.`
@@ -28731,6 +28711,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: {
@@ -29435,6 +29421,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.`
@@ -29835,6 +29829,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(),
@@ -29964,6 +29963,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(),
@@ -30124,6 +30131,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: {
@@ -30777,6 +30790,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),
@@ -30984,6 +31002,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: {
@@ -32268,7 +32291,16 @@ const XmlUiBlogThemeDefinition = {
   id: "xmlui-blog",
   extends: "xmlui",
   color: "$color-primary-500",
-  themeVars: {}
+  themeVars: {
+    // --- App layout
+    "maxWidth-content-App": "800px",
+    // --- Fundamental colors & typography
+    backgroundColor: "$color-surface-0",
+    "fontWeight-Text": "400",
+    "fontWeight-bold": "700",
+    "textColor-primary": "$color-surface-800",
+    "textColor-NavLink--active": "$color-primary"
+  }
 };
 const XmlUiWebThemeDefinition = {
   id: "xmlui-web",
@@ -35307,7 +35339,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 = [
@@ -35540,7 +35572,7 @@ const DateInput = forwardRef(function DateInputNative({
         }
       }
     },
-    [day2, month2, year2, handleChange, onInvalidChange]
+    [day2, month2, year2, handleChange, onInvalidChange, formatDateValue]
   );
   const handleDayChange = useMemo(
     () => createInputChangeHandler(
@@ -35845,21 +35877,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
       ]
@@ -35887,10 +35915,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,
@@ -35919,7 +35946,7 @@ function DayInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function MonthInput({
   minValue,
@@ -35930,10 +35957,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,
@@ -35962,7 +35988,7 @@ function MonthInput({
       nextInputRef: otherProps.nextInputRef,
       ariaLabel: otherProps.ariaLabel
     }
-  );
+  ) });
 }
 function YearInput({
   minValue,
@@ -35979,10 +36005,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,
@@ -36003,7 +36028,7 @@ function YearInput({
       },
       ...restProps
     }
-  );
+  ) });
 }
 function parseDateString(dateString, dateFormat) {
   if (typeof dateString !== "string" || dateString === null || dateString === void 0) {
@@ -36471,11 +36496,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",
@@ -37006,10 +37026,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,
@@ -37017,7 +37036,7 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
               type: "button",
               children: clearIconElement
             }
-          )
+          ) })
         ] }),
         endAdornment
       ]
@@ -37060,11 +37079,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),
@@ -37074,7 +37092,7 @@ function AmPmButton({
       ref: buttonRef,
       children: /* @__PURE__ */ jsx("span", { className: styles$m.amPmValue, children: value ? value === "am" ? amLabel : pmLabel : "--" })
     }
-  );
+  ) });
 }
 function HourInput({
   id,
@@ -37122,11 +37140,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,
@@ -37154,7 +37171,7 @@ function HourInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function MinuteInput({
   hour: hour2,
@@ -37171,10 +37188,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",
@@ -37202,7 +37218,7 @@ function MinuteInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function SecondInput({
   hour: hour2,
@@ -37220,10 +37236,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",
@@ -37251,7 +37266,7 @@ function SecondInput({
       ariaLabel: otherProps.ariaLabel,
       isInvalid
     }
-  );
+  ) });
 }
 function parseTimeString(timeValue, targetIs12Hour = false) {
   if (timeValue == null || timeValue === void 0) {
@@ -39078,6 +39093,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: {
@@ -42873,6 +42899,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: {
@@ -44812,6 +44846,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(
@@ -46639,7 +46684,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.15";
+const version = "0.11.17";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -46917,21 +46962,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;
       }
@@ -49019,9 +49064,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);
@@ -49030,15 +49073,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) {
@@ -49102,11 +49140,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) => {