xmlui 0.11.9 → 0.11.11

package/dist/lib/{initMock-GfhLAym0.js → initMock-DK8FL64P.js}

@@ -1,6 +1,6 @@
 import { delay as delay$1, HttpResponse, matchRequestUrl } from "msw";
 import { isArray, isObject, mapValues } from "lodash-es";
-import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-Dh81qoMM.js";
+import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-BNm0RhXG.js";
 import Dexie from "dexie";
 var HttpStatusCode = /* @__PURE__ */ ((HttpStatusCode2) => {
   HttpStatusCode2[HttpStatusCode2["Continue"] = 100] = "Continue";

package/dist/lib/xmlui.d.ts

@@ -559,7 +559,8 @@ declare type ContainerState = Record<string | symbol, any>;
 export declare const ContentSeparator: ForwardRefExoticComponent<ContentSeparatorProps & RefAttributes<HTMLDivElement>>;
 
 declare type ContentSeparatorProps = {
-    size?: number | string;
+    thickness?: number | string;
+    length?: number | string;
     orientation?: string;
     style?: CSSProperties;
     className?: string;

package/dist/lib/xmlui.js

@@ -1,4 +1,4 @@
-import { aa, Z, al, a1, ax, av, _, $, ai, ak, aw, ag, ab, a2, a0, S, ar, b, ao, ap, a4, a5, ae, af, as, aj, at, au, ah, ad, c, f, e, h, j, k, l, i, n, p, q, s, u, v, x, w, t, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, P, N, O, Q, R, U, V, a3, W, X, a7, an, a6, a8, aq, a9, am, Y, ac } from "./index-Dh81qoMM.js";
+import { aa, Z, al, a1, ax, av, _, $, ai, ak, aw, ag, ab, a2, a0, S, ar, b, ao, ap, a4, a5, ae, af, as, aj, at, au, ah, ad, c, f, e, h, j, k, l, i, n, p, q, s, u, v, x, w, t, y, z, A, B, C, D, E, F, G, H, I, J, K, L, M, P, N, O, Q, R, U, V, a3, W, X, a7, an, a6, a8, aq, a9, am, Y, ac } from "./index-BNm0RhXG.js";
 import { e as e2, x as x2 } from "./xmlui-parser-CW8YmGjO.js";
 import { X as X2 } from "./xmlui-serializer-CeCcgdVR.js";
 export {

package/dist/metadata/{collectedComponentMetadata-DfzPdHnk.js → collectedComponentMetadata-DvV8yJ4N.js}

@@ -5879,6 +5879,8 @@ const RootThemeDefinition = {
     "boxShadow-spread-2-xl": "-6px -4px 40px 18px rgba(0, 0, 0, 0.1)",
     // --- The default maximum content width
     "maxWidth-content": "1280px",
+    // --- The default maximum content column width
+    "maxWidth-columnContent": "800px",
     // --- Background colors
     backgroundColor: "$color-surface-subtle",
     "backgroundColor-overlay": "rgba(0, 0, 0, 0.2)",
@@ -6810,6 +6812,36 @@ const XmlUiRedThemeDefinition = {
   extends: "xmlui",
   themeVars: { ...redThemeColors }
 };
+const XmlUiDocsThemeDefinition = {
+  id: "xmlui-docs",
+  extends: "xmlui",
+  themeVars: {}
+};
+const XmlUiBlogThemeDefinition = {
+  id: "xmlui-blog",
+  extends: "xmlui",
+  themeVars: {}
+};
+const XmlUiWebThemeDefinition = {
+  id: "xmlui-web",
+  extends: "xmlui",
+  themeVars: {
+    // --- Fundamental colors & typography
+    "maxWidth-content-AppHeader": "1280px",
+    backgroundColor: "$color-surface-0",
+    "color-primary": "#3367CC",
+    "color-surface": "#1e2734",
+    "fontWeight-Text": "400",
+    "fontWeight-bold": "700",
+    "textColor-primary": "$color-surface-800",
+    "textColor-NavLink--active": "$color-primary",
+    // --- App layout
+    "maxWidth-content-App": "800px",
+    // --- Headings
+    "fontSize-H2": "32px",
+    "fontSize-H3": "$space-6"
+  }
+};
 const ThemeToneKeys = ["light", "dark"];
 function useCompiledTheme(activeTheme, activeTone, themes = EMPTY_ARRAY, resources = EMPTY_OBJECT, resourceMap = EMPTY_OBJECT) {
   const componentRegistry = useComponentRegistry();
@@ -6974,7 +7006,10 @@ const builtInThemes = [
   XmlUiOrangeThemeDefinition,
   XmlUiPurpleThemeDefinition,
   XmlUiCyanThemeDefinition,
-  XmlUiRedThemeDefinition
+  XmlUiRedThemeDefinition,
+  XmlUiDocsThemeDefinition,
+  XmlUiBlogThemeDefinition,
+  XmlUiWebThemeDefinition
   /*SolidThemeDefinition,*/
 ];
 function ThemeProvider({
@@ -7456,23 +7491,24 @@ const themeComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$X = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "backgroundColor-navPanel-App": "var(--xmlui-backgroundColor-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
-const wrapper$k = "_wrapper_1le1z_15";
-const verticalFullHeader = "_verticalFullHeader_1le1z_15";
-const navPanelWrapper = "_navPanelWrapper_1le1z_15";
-const vertical$7 = "_vertical_1le1z_15";
-const contentWrapper$2 = "_contentWrapper_1le1z_33";
-const noScrollbarGutters = "_noScrollbarGutters_1le1z_39";
-const PagesWrapper = "_PagesWrapper_1le1z_46";
-const footerWrapper = "_footerWrapper_1le1z_50";
-const sticky = "_sticky_1le1z_53";
-const nonSticky = "_nonSticky_1le1z_57";
-const horizontal$6 = "_horizontal_1le1z_60";
-const headerWrapper$1 = "_headerWrapper_1le1z_86";
-const desktop = "_desktop_1le1z_92";
-const PagesWrapperInner = "_PagesWrapperInner_1le1z_150";
-const scrollWholePage = "_scrollWholePage_1le1z_228";
-const content$8 = "_content_1le1z_33";
-const withDefaultContentPadding = "_withDefaultContentPadding_1le1z_342";
+const wrapper$k = "_wrapper_188ri_15";
+const verticalFullHeader = "_verticalFullHeader_188ri_15";
+const navPanelWrapper = "_navPanelWrapper_188ri_15";
+const vertical$7 = "_vertical_188ri_15";
+const contentWrapper$2 = "_contentWrapper_188ri_33";
+const noScrollbarGutters = "_noScrollbarGutters_188ri_39";
+const PagesWrapper = "_PagesWrapper_188ri_46";
+const footerWrapper = "_footerWrapper_188ri_50";
+const sticky = "_sticky_188ri_53";
+const nonSticky = "_nonSticky_188ri_57";
+const horizontal$6 = "_horizontal_188ri_60";
+const headerWrapper$1 = "_headerWrapper_188ri_86";
+const desktop = "_desktop_188ri_92";
+const PagesWrapperInner = "_PagesWrapperInner_188ri_150";
+const noFooter = "_noFooter_188ri_208";
+const scrollWholePage = "_scrollWholePage_188ri_234";
+const content$8 = "_content_188ri_33";
+const withDefaultContentPadding = "_withDefaultContentPadding_188ri_348";
 const styles$1b = {
   themeVars: themeVars$X,
   wrapper: wrapper$k,
@@ -7489,6 +7525,7 @@ const styles$1b = {
   headerWrapper: headerWrapper$1,
   desktop,
   PagesWrapperInner,
+  noFooter,
   scrollWholePage,
   content: content$8,
   withDefaultContentPadding
@@ -15348,6 +15385,7 @@ function App({
     {
       [styles$1b.scrollWholePage]: scrollWholePage2,
       [styles$1b.noScrollbarGutters]: noScrollbarGutters2,
+      [styles$1b.noFooter]: !footerSticky,
       "media-large": mediaSize.largeScreen,
       "media-small": mediaSize.smallScreen,
       "media-desktop": mediaSize.desktop,
@@ -15909,6 +15947,7 @@ function AppNode({ node, extractValue, renderChild: renderChild2, className, loo
       ...appProps,
       header: renderedHeader,
       footer: renderedFooter,
+      footerSticky,
       navPanel: renderedNavPanel,
       navPanelDef: NavPanel3,
       logoContentDef: node.props.logoTemplate,
@@ -17576,10 +17615,10 @@ const checkboxComponentRenderer = createComponentRenderer(
     );
   }
 );
-const themeVars$K = `'{"backgroundColor-ContentSeparator": "var(--xmlui-backgroundColor-ContentSeparator)", "size-ContentSeparator": "var(--xmlui-size-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_m0e86_14";
-const horizontal$3 = "_horizontal_m0e86_27";
-const vertical$3 = "_vertical_m0e86_31";
+const themeVars$K = `'{"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 styles$$ = {
   themeVars: themeVars$K,
   separator,
@@ -17590,7 +17629,22 @@ const defaultProps$W = {
   orientation: "horizontal"
 };
 const ContentSeparator = forwardRef(
-  ({ orientation = defaultProps$W.orientation, size, style: style2, className, ...rest }, ref) => {
+  ({ orientation = defaultProps$W.orientation, thickness, length, style: style2, className, ...rest }, ref) => {
+    const inlineStyles = {};
+    if (thickness !== void 0) {
+      if (orientation === "horizontal") {
+        inlineStyles.height = thickness;
+      } else {
+        inlineStyles.width = thickness;
+      }
+    }
+    if (length !== void 0) {
+      if (orientation === "horizontal") {
+        inlineStyles.width = length;
+      } else {
+        inlineStyles.height = length;
+      }
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -17605,8 +17659,7 @@ const ContentSeparator = forwardRef(
           className
         ),
         style: {
-          height: orientation === "horizontal" ? size : void 0,
-          width: orientation === "horizontal" ? "100%" : size,
+          ...inlineStyles,
           ...style2
         }
       }
@@ -17618,8 +17671,12 @@ const ContentSeparatorMd = createMetadata({
   status: "stable",
   description: "`ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections.",
   props: {
-    size: {
-      description: "This property defines the component's height (if the `orientation` is horizontal) or the width (if the `orientation` is vertical). If not defined, the component uses the entire available width or height.",
+    thickness: {
+      description: "This property defines the component's height (if the `orientation` is horizontal) or the width (if the `orientation` is vertical). If not defined, the component uses the theme variable `thickness-ContentSeparator` (default: 1px).",
+      valueType: "any"
+    },
+    length: {
+      description: "This property defines the component's width (if the `orientation` is horizontal) or the height (if the `orientation` is vertical). If not defined, the component uses the theme variable `length-ContentSeparator` (default: 100%).",
       valueType: "any"
     },
     orientation: {
@@ -17632,7 +17689,8 @@ const ContentSeparatorMd = createMetadata({
   themeVars: parseScssVar(styles$$.themeVars),
   defaultThemeVars: {
     [`backgroundColor-${COMP$1k}`]: "$color-surface-200",
-    [`size-${COMP$1k}`]: "1px",
+    [`thickness-${COMP$1k}`]: "1px",
+    [`length-${COMP$1k}`]: "100%",
     [`marginVertical-${COMP$1k}`]: "0",
     [`marginHorizontal-${COMP$1k}`]: "0",
     [`paddingVertical-${COMP$1k}`]: "0",
@@ -17653,7 +17711,8 @@ const contentSeparatorComponentRenderer = createComponentRenderer(
       ContentSeparator,
       {
         orientation: extractValue(node.props.orientation),
-        size: extractValue.asSize(node.props.size),
+        thickness: extractValue.asSize(node.props.thickness),
+        length: extractValue.asSize(node.props.length),
         className
       }
     );
@@ -25608,7 +25667,7 @@ const NavLinkMd = createMetadata({
     [`textColor-${COMP$19}`]: "$textColor-primary",
     [`textColor-${COMP$19}--active`]: "$color-primary-500",
     [`fontWeight-${COMP$19}--active`]: "$fontWeight-bold",
-    [`fontWeight-${COMP$19}--pressed`]: "$fontWeight-normal",
+    [`fontWeight-${COMP$19}--pressed`]: "$fontWeight-bold",
     [`thickness-indicator-${COMP$19}`]: "$space-0_5",
     [`outlineColor-${COMP$19}--focus`]: "$outlineColor--focus",
     [`outlineWidth-${COMP$19}--focus`]: "$outlineWidth--focus",
@@ -31706,6 +31765,8 @@ const CompoundComponent = forwardRef(
     appContext,
     state,
     lookupAction,
+    contextVars,
+    // Extract contextVars to prevent it from being passed to DOM elements
     ...restProps
   }, forwardedRef) => {
     const resolvedPropsInner = useMemo(() => {
@@ -33231,6 +33292,7 @@ const NavPanelMd = createMetadata({
     [`backgroundColor-${COMP$M}-horizontal`]: "$backgroundColor-AppHeader",
     [`border-${COMP$M}`]: "0px solid $borderColor",
     [`borderRight-${COMP$M}-vertical`]: "1px solid $borderColor",
+    [`paddingVertical-${COMP$M}`]: "$space-5",
     [`paddingHorizontal-${COMP$M}`]: "0",
     [`paddingVertical-logo-${COMP$M}`]: "$space-4",
     [`paddingHorizontal-logo-${COMP$M}`]: "$space-4",
@@ -47885,7 +47947,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.9";
+const version = "0.11.11";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -51339,9 +51401,6 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     (url) => {
       const extractedUrl = valueExtractor(url);
       if (typeof extractedUrl !== "string" || extractedUrl.trim() === "") {
-        console.warn(
-          `Component '${safeNode.type}': the extracted resource URL is not a valid string: value ${extractedUrl}, type ${typeof extractedUrl}`
-        );
         return void 0;
       }
       return getResourceUrl(extractedUrl);
@@ -55537,7 +55596,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-BGnNBTSg.js");
+      const { initMock } = await import("./initMock-Bndg9J7D.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -55554,7 +55613,7 @@ function ApiInterceptorProvider({
           if (define_process_env_default.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-Wgm2_zjg.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-BGnNBTSg.js")
+              import("./initMock-Bndg9J7D.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -55591,7 +55650,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-Wgm2_zjg.js"),
-            import("./initMock-BGnNBTSg.js")
+            import("./initMock-Bndg9J7D.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -58550,7 +58609,10 @@ const collectedThemes = {
   xmluiOrange: XmlUiOrangeThemeDefinition,
   xmluiPurple: XmlUiPurpleThemeDefinition,
   xmluiCyan: XmlUiCyanThemeDefinition,
-  xmluiRed: XmlUiRedThemeDefinition
+  xmluiRed: XmlUiRedThemeDefinition,
+  xmluiDocs: XmlUiDocsThemeDefinition,
+  xmluiBlog: XmlUiBlogThemeDefinition,
+  xmluiWeb: XmlUiWebThemeDefinition
 };
 export {
   ThrowStatementError as T,

package/dist/metadata/{initMock-BGnNBTSg.js → initMock-Bndg9J7D.js}

@@ -1,6 +1,6 @@
 import { delay as delay$1, HttpResponse, matchRequestUrl } from "msw";
 import { isArray, isObject, mapValues } from "lodash-es";
-import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./collectedComponentMetadata-DfzPdHnk.js";
+import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./collectedComponentMetadata-DvV8yJ4N.js";
 import Dexie from "dexie";
 var HttpStatusCode = /* @__PURE__ */ ((HttpStatusCode2) => {
   HttpStatusCode2[HttpStatusCode2["Continue"] = 100] = "Continue";