xmlui 0.9.33 → 0.9.34

package/dist/metadata/xmlui-metadata.mjs

@@ -1209,7 +1209,7 @@ const themeVars$K = '"[]"';
 const base$1 = "_base_724s4_13";
 const hoverContainer = "_hoverContainer_724s4_22";
 const handlesClick = "_handlesClick_724s4_35";
-const vertical$3 = "_vertical_724s4_39";
+const vertical$4 = "_vertical_724s4_39";
 const reverse = "_reverse_724s4_43";
 const horizontal$3 = "_horizontal_724s4_47";
 const justifyItemsStart = "_justifyItemsStart_724s4_55";
@@ -1226,7 +1226,7 @@ const styles$M = {
   base: base$1,
   hoverContainer,
   handlesClick,
-  vertical: vertical$3,
+  vertical: vertical$4,
   reverse,
   horizontal: horizontal$3,
   justifyItemsStart,
@@ -3229,7 +3229,7 @@ const includeHoverIndicator = "_includeHoverIndicator_buj87_62";
 const displayActive = "_displayActive_buj87_72";
 const navItemActive = "_navItemActive_buj87_109";
 const disabled$7 = "_disabled_buj87_144";
-const vertical$2 = "_vertical_buj87_148";
+const vertical$3 = "_vertical_buj87_148";
 const navLinkStyles = {
   themeVars: themeVars$C,
   content: content$1,
@@ -3238,7 +3238,7 @@ const navLinkStyles = {
   displayActive,
   navItemActive,
   disabled: disabled$7,
-  vertical: vertical$2
+  vertical: vertical$3
 };
 function createUrlWithQueryParams(to) {
   if (!to || typeof to === "string" || typeof to === "number") {
@@ -3252,17 +3252,19 @@ function createUrlWithQueryParams(to) {
   }
   return to;
 }
-const themeVars$B = `'{"border-NavPanel": "var(--xmlui-border-NavPanel)", "borderHorizontal-NavPanel": "var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel))", "borderVertical-NavPanel": "var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel))", "borderLeft-NavPanel": "var(--xmlui-borderLeft-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderRight-NavPanel": "var(--xmlui-borderRight-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderTop-NavPanel": "var(--xmlui-borderTop-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderBottom-NavPanel": "var(--xmlui-borderBottom-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderWidth-NavPanel": "var(--xmlui-borderWidth-NavPanel)", "borderHorizontalWidth-NavPanel": "var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderLeftWidth-NavPanel": "var(--xmlui-borderLeftWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderRightWidth-NavPanel": "var(--xmlui-borderRightWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderVerticalWidth-NavPanel": "var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderTopWidth-NavPanel": "var(--xmlui-borderTopWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderBottomWidth-NavPanel": "var(--xmlui-borderBottomWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderStyle-NavPanel": "var(--xmlui-borderStyle-NavPanel)", "borderHorizontalStyle-NavPanel": "var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderLeftStyle-NavPanel": "var(--xmlui-borderLeftStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderRightStyle-NavPanel": "var(--xmlui-borderRightStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderVerticalStyle-NavPanel": "var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderTopStyle-NavPanel": "var(--xmlui-borderTopStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderBottomStyle-NavPanel": "var(--xmlui-borderBottomStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderColor-NavPanel": "var(--xmlui-borderColor-NavPanel)", "borderHorizontalColor-NavPanel": "var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderLeftColor-NavPanel": "var(--xmlui-borderLeftColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderRightColor-NavPanel": "var(--xmlui-borderRightColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderVerticalColor-NavPanel": "var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderTopColor-NavPanel": "var(--xmlui-borderTopColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderBottomColor-NavPanel": "var(--xmlui-borderBottomColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderStartStartRadius-NavPanel": "var(--xmlui-borderStartStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderStartEndRadius-NavPanel": "var(--xmlui-borderStartEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndStartRadius-NavPanel": "var(--xmlui-borderEndStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndEndRadius-NavPanel": "var(--xmlui-borderEndEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "backgroundColor-NavPanel": "var(--xmlui-backgroundColor-NavPanel)", "boxShadow-NavPanel": "var(--xmlui-boxShadow-NavPanel)", "padding-NavPanel": "var(--xmlui-padding-NavPanel)", "paddingHorizontal-NavPanel": "var(--xmlui-paddingHorizontal-NavPanel)", "paddingVertical-NavPanel": "var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel))", "paddingLeft-NavPanel": "var(--xmlui-paddingLeft-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingRight-NavPanel": "var(--xmlui-paddingRight-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingTop-NavPanel": "var(--xmlui-paddingTop-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingBottom-NavPanel": "var(--xmlui-paddingBottom-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "padding-logo-NavPanel": "var(--xmlui-padding-logo-NavPanel)", "paddingHorizontal-logo-NavPanel": "var(--xmlui-paddingHorizontal-logo-NavPanel)", "paddingVertical-logo-NavPanel": "var(--xmlui-paddingVertical-logo-NavPanel)", "paddingLeft-logo-NavPanel": "var(--xmlui-paddingLeft-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingRight-logo-NavPanel": "var(--xmlui-paddingRight-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingTop-logo-NavPanel": "var(--xmlui-paddingTop-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingBottom-logo-NavPanel": "var(--xmlui-paddingBottom-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "marginBottom-logo-NavPanel": "var(--xmlui-marginBottom-logo-NavPanel)", "color-scrollbar-NavPanel": "var(--xmlui-color-scrollbar-NavPanel)", "backgroundColor-scrollbar-NavPanel": "var(--xmlui-backgroundColor-scrollbar-NavPanel)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "height-AppHeader": "var(--xmlui-height-AppHeader)", "paddingVertical-AppHeader": "var(--xmlui-paddingVertical-AppHeader)", "align-content-AppHeader": "var(--xmlui-align-content-AppHeader)"}'`;
-const wrapper$4 = "_wrapper_fztu9_13";
-const condensed = "_condensed_fztu9_51";
-const horizontal$2 = "_horizontal_fztu9_54";
-const wrapperInner = "_wrapperInner_fztu9_58";
-const logoWrapper = "_logoWrapper_fztu9_77";
-const inDrawer = "_inDrawer_fztu9_87";
+const themeVars$B = `'{"border-NavPanel": "var(--xmlui-border-NavPanel)", "borderHorizontal-NavPanel": "var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel))", "borderVertical-NavPanel": "var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel))", "borderLeft-NavPanel": "var(--xmlui-borderLeft-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderRight-NavPanel": "var(--xmlui-borderRight-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderTop-NavPanel": "var(--xmlui-borderTop-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderBottom-NavPanel": "var(--xmlui-borderBottom-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderWidth-NavPanel": "var(--xmlui-borderWidth-NavPanel)", "borderHorizontalWidth-NavPanel": "var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderLeftWidth-NavPanel": "var(--xmlui-borderLeftWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderRightWidth-NavPanel": "var(--xmlui-borderRightWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderVerticalWidth-NavPanel": "var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderTopWidth-NavPanel": "var(--xmlui-borderTopWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderBottomWidth-NavPanel": "var(--xmlui-borderBottomWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderStyle-NavPanel": "var(--xmlui-borderStyle-NavPanel)", "borderHorizontalStyle-NavPanel": "var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderLeftStyle-NavPanel": "var(--xmlui-borderLeftStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderRightStyle-NavPanel": "var(--xmlui-borderRightStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderVerticalStyle-NavPanel": "var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderTopStyle-NavPanel": "var(--xmlui-borderTopStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderBottomStyle-NavPanel": "var(--xmlui-borderBottomStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderColor-NavPanel": "var(--xmlui-borderColor-NavPanel)", "borderHorizontalColor-NavPanel": "var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderLeftColor-NavPanel": "var(--xmlui-borderLeftColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderRightColor-NavPanel": "var(--xmlui-borderRightColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderVerticalColor-NavPanel": "var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderTopColor-NavPanel": "var(--xmlui-borderTopColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderBottomColor-NavPanel": "var(--xmlui-borderBottomColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderStartStartRadius-NavPanel": "var(--xmlui-borderStartStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderStartEndRadius-NavPanel": "var(--xmlui-borderStartEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndStartRadius-NavPanel": "var(--xmlui-borderEndStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndEndRadius-NavPanel": "var(--xmlui-borderEndEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "backgroundColor-NavPanel": "var(--xmlui-backgroundColor-NavPanel)", "boxShadow-NavPanel": "var(--xmlui-boxShadow-NavPanel)", "padding-NavPanel": "var(--xmlui-padding-NavPanel)", "paddingHorizontal-NavPanel": "var(--xmlui-paddingHorizontal-NavPanel)", "paddingVertical-NavPanel": "var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel))", "paddingLeft-NavPanel": "var(--xmlui-paddingLeft-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingRight-NavPanel": "var(--xmlui-paddingRight-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingTop-NavPanel": "var(--xmlui-paddingTop-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingBottom-NavPanel": "var(--xmlui-paddingBottom-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "padding-logo-NavPanel": "var(--xmlui-padding-logo-NavPanel)", "paddingHorizontal-logo-NavPanel": "var(--xmlui-paddingHorizontal-logo-NavPanel)", "paddingVertical-logo-NavPanel": "var(--xmlui-paddingVertical-logo-NavPanel)", "paddingLeft-logo-NavPanel": "var(--xmlui-paddingLeft-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingRight-logo-NavPanel": "var(--xmlui-paddingRight-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingTop-logo-NavPanel": "var(--xmlui-paddingTop-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingBottom-logo-NavPanel": "var(--xmlui-paddingBottom-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "marginBottom-logo-NavPanel": "var(--xmlui-marginBottom-logo-NavPanel)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "height-AppHeader": "var(--xmlui-height-AppHeader)", "paddingVertical-AppHeader": "var(--xmlui-paddingVertical-AppHeader)", "align-content-AppHeader": "var(--xmlui-align-content-AppHeader)"}'`;
+const wrapper$4 = "_wrapper_19swn_13";
+const condensed = "_condensed_19swn_50";
+const vertical$2 = "_vertical_19swn_53";
+const horizontal$2 = "_horizontal_19swn_56";
+const wrapperInner = "_wrapperInner_19swn_60";
+const logoWrapper = "_logoWrapper_19swn_79";
+const inDrawer = "_inDrawer_19swn_89";
 const styles$D = {
   themeVars: themeVars$B,
   wrapper: wrapper$4,
   condensed,
+  vertical: vertical$2,
   horizontal: horizontal$2,
   wrapperInner,
   logoWrapper,
@@ -3292,13 +3294,14 @@ forwardRef(function NavPanel2({
   inDrawer: inDrawer2,
   renderChild
 }, forwardedRef) {
-  var _a;
+  var _a, _b;
   const scrollContainerRef = useRef(null);
   const ref = forwardedRef ? composeRefs(scrollContainerRef, forwardedRef) : scrollContainerRef;
   const appLayoutContext = useAppLayoutContext();
   const horizontal2 = getAppLayoutOrientation(appLayoutContext == null ? void 0 : appLayoutContext.layout) === "horizontal";
   const showLogo = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky";
   const isCondensed = (_a = appLayoutContext == null ? void 0 : appLayoutContext.layout) == null ? void 0 : _a.startsWith("condensed");
+  const vertical2 = (_b = appLayoutContext == null ? void 0 : appLayoutContext.layout) == null ? void 0 : _b.startsWith("vertical");
   const safeLogoContent = logoContent || renderChild(appLayoutContext == null ? void 0 : appLayoutContext.logoContentDef);
   if (inDrawer2) {
     return /* @__PURE__ */ jsx(DrawerNavPanel, { style, logoContent: safeLogoContent, className, children });
@@ -3309,6 +3312,7 @@ forwardRef(function NavPanel2({
       ref,
       className: classnames(styles$D.wrapper, className, {
         [styles$D.horizontal]: horizontal2,
+        [styles$D.vertical]: vertical2,
         [styles$D.condensed]: isCondensed
       }),
       children: /* @__PURE__ */ jsxs(ScrollContext.Provider, { value: scrollContainerRef, children: [
@@ -17182,7 +17186,7 @@ const baseSplitterMd = createMetadata({
   },
   themeVars: parseScssVar(styles$7.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-resizer-${COMP$r}`]: "$backgroundColor-Card",
+    [`backgroundColor-resizer-${COMP$r}`]: "$color-surface-100",
     [`thickness-resizer-${COMP$r}`]: "5px",
     [`cursor-resizer-horizontal-${COMP$r}`]: "ew-resize",
     [`cursor-resizer-vertical-${COMP$r}`]: "ns-resize"
@@ -17406,7 +17410,7 @@ const defaultProps$3 = {
   iconHorizontalExpanded: "chevronleft",
   iconHorizontalCollapsed: "chevronright",
   iconVerticalExpanded: "chevrondown",
-  iconVerticalCollapsed: "chevronright"
+  iconVerticalCollapsed: "chevronup"
 };
 const NavGroupContext = createContext({
   level: -1,

package/dist/metadata/xmlui-metadata.umd.js

@@ -1206,7 +1206,7 @@
   const base$1 = "_base_724s4_13";
   const hoverContainer = "_hoverContainer_724s4_22";
   const handlesClick = "_handlesClick_724s4_35";
-  const vertical$3 = "_vertical_724s4_39";
+  const vertical$4 = "_vertical_724s4_39";
   const reverse = "_reverse_724s4_43";
   const horizontal$3 = "_horizontal_724s4_47";
   const justifyItemsStart = "_justifyItemsStart_724s4_55";
@@ -1223,7 +1223,7 @@
     base: base$1,
     hoverContainer,
     handlesClick,
-    vertical: vertical$3,
+    vertical: vertical$4,
     reverse,
     horizontal: horizontal$3,
     justifyItemsStart,
@@ -3226,7 +3226,7 @@
   const displayActive = "_displayActive_buj87_72";
   const navItemActive = "_navItemActive_buj87_109";
   const disabled$7 = "_disabled_buj87_144";
-  const vertical$2 = "_vertical_buj87_148";
+  const vertical$3 = "_vertical_buj87_148";
   const navLinkStyles = {
     themeVars: themeVars$C,
     content: content$1,
@@ -3235,7 +3235,7 @@
     displayActive,
     navItemActive,
     disabled: disabled$7,
-    vertical: vertical$2
+    vertical: vertical$3
   };
   function createUrlWithQueryParams(to) {
     if (!to || typeof to === "string" || typeof to === "number") {
@@ -3249,17 +3249,19 @@
     }
     return to;
   }
-  const themeVars$B = `'{"border-NavPanel": "var(--xmlui-border-NavPanel)", "borderHorizontal-NavPanel": "var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel))", "borderVertical-NavPanel": "var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel))", "borderLeft-NavPanel": "var(--xmlui-borderLeft-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderRight-NavPanel": "var(--xmlui-borderRight-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderTop-NavPanel": "var(--xmlui-borderTop-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderBottom-NavPanel": "var(--xmlui-borderBottom-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderWidth-NavPanel": "var(--xmlui-borderWidth-NavPanel)", "borderHorizontalWidth-NavPanel": "var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderLeftWidth-NavPanel": "var(--xmlui-borderLeftWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderRightWidth-NavPanel": "var(--xmlui-borderRightWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderVerticalWidth-NavPanel": "var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderTopWidth-NavPanel": "var(--xmlui-borderTopWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderBottomWidth-NavPanel": "var(--xmlui-borderBottomWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderStyle-NavPanel": "var(--xmlui-borderStyle-NavPanel)", "borderHorizontalStyle-NavPanel": "var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderLeftStyle-NavPanel": "var(--xmlui-borderLeftStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderRightStyle-NavPanel": "var(--xmlui-borderRightStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderVerticalStyle-NavPanel": "var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderTopStyle-NavPanel": "var(--xmlui-borderTopStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderBottomStyle-NavPanel": "var(--xmlui-borderBottomStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderColor-NavPanel": "var(--xmlui-borderColor-NavPanel)", "borderHorizontalColor-NavPanel": "var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderLeftColor-NavPanel": "var(--xmlui-borderLeftColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderRightColor-NavPanel": "var(--xmlui-borderRightColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderVerticalColor-NavPanel": "var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderTopColor-NavPanel": "var(--xmlui-borderTopColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderBottomColor-NavPanel": "var(--xmlui-borderBottomColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderStartStartRadius-NavPanel": "var(--xmlui-borderStartStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderStartEndRadius-NavPanel": "var(--xmlui-borderStartEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndStartRadius-NavPanel": "var(--xmlui-borderEndStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndEndRadius-NavPanel": "var(--xmlui-borderEndEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "backgroundColor-NavPanel": "var(--xmlui-backgroundColor-NavPanel)", "boxShadow-NavPanel": "var(--xmlui-boxShadow-NavPanel)", "padding-NavPanel": "var(--xmlui-padding-NavPanel)", "paddingHorizontal-NavPanel": "var(--xmlui-paddingHorizontal-NavPanel)", "paddingVertical-NavPanel": "var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel))", "paddingLeft-NavPanel": "var(--xmlui-paddingLeft-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingRight-NavPanel": "var(--xmlui-paddingRight-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingTop-NavPanel": "var(--xmlui-paddingTop-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingBottom-NavPanel": "var(--xmlui-paddingBottom-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "padding-logo-NavPanel": "var(--xmlui-padding-logo-NavPanel)", "paddingHorizontal-logo-NavPanel": "var(--xmlui-paddingHorizontal-logo-NavPanel)", "paddingVertical-logo-NavPanel": "var(--xmlui-paddingVertical-logo-NavPanel)", "paddingLeft-logo-NavPanel": "var(--xmlui-paddingLeft-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingRight-logo-NavPanel": "var(--xmlui-paddingRight-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingTop-logo-NavPanel": "var(--xmlui-paddingTop-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingBottom-logo-NavPanel": "var(--xmlui-paddingBottom-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "marginBottom-logo-NavPanel": "var(--xmlui-marginBottom-logo-NavPanel)", "color-scrollbar-NavPanel": "var(--xmlui-color-scrollbar-NavPanel)", "backgroundColor-scrollbar-NavPanel": "var(--xmlui-backgroundColor-scrollbar-NavPanel)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "height-AppHeader": "var(--xmlui-height-AppHeader)", "paddingVertical-AppHeader": "var(--xmlui-paddingVertical-AppHeader)", "align-content-AppHeader": "var(--xmlui-align-content-AppHeader)"}'`;
-  const wrapper$4 = "_wrapper_fztu9_13";
-  const condensed = "_condensed_fztu9_51";
-  const horizontal$2 = "_horizontal_fztu9_54";
-  const wrapperInner = "_wrapperInner_fztu9_58";
-  const logoWrapper = "_logoWrapper_fztu9_77";
-  const inDrawer = "_inDrawer_fztu9_87";
+  const themeVars$B = `'{"border-NavPanel": "var(--xmlui-border-NavPanel)", "borderHorizontal-NavPanel": "var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel))", "borderVertical-NavPanel": "var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel))", "borderLeft-NavPanel": "var(--xmlui-borderLeft-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderRight-NavPanel": "var(--xmlui-borderRight-NavPanel, var(--xmlui-borderHorizontal-NavPanel, var(--xmlui-border-NavPanel)))", "borderTop-NavPanel": "var(--xmlui-borderTop-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderBottom-NavPanel": "var(--xmlui-borderBottom-NavPanel, var(--xmlui-borderVertical-NavPanel, var(--xmlui-border-NavPanel)))", "borderWidth-NavPanel": "var(--xmlui-borderWidth-NavPanel)", "borderHorizontalWidth-NavPanel": "var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderLeftWidth-NavPanel": "var(--xmlui-borderLeftWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderRightWidth-NavPanel": "var(--xmlui-borderRightWidth-NavPanel, var(--xmlui-borderHorizontalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderVerticalWidth-NavPanel": "var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel))", "borderTopWidth-NavPanel": "var(--xmlui-borderTopWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderBottomWidth-NavPanel": "var(--xmlui-borderBottomWidth-NavPanel, var(--xmlui-borderVerticalWidth-NavPanel, var(--xmlui-borderWidth-NavPanel)))", "borderStyle-NavPanel": "var(--xmlui-borderStyle-NavPanel)", "borderHorizontalStyle-NavPanel": "var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderLeftStyle-NavPanel": "var(--xmlui-borderLeftStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderRightStyle-NavPanel": "var(--xmlui-borderRightStyle-NavPanel, var(--xmlui-borderHorizontalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderVerticalStyle-NavPanel": "var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel))", "borderTopStyle-NavPanel": "var(--xmlui-borderTopStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderBottomStyle-NavPanel": "var(--xmlui-borderBottomStyle-NavPanel, var(--xmlui-borderVerticalStyle-NavPanel, var(--xmlui-borderStyle-NavPanel)))", "borderColor-NavPanel": "var(--xmlui-borderColor-NavPanel)", "borderHorizontalColor-NavPanel": "var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderLeftColor-NavPanel": "var(--xmlui-borderLeftColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderRightColor-NavPanel": "var(--xmlui-borderRightColor-NavPanel, var(--xmlui-borderHorizontalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderVerticalColor-NavPanel": "var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel))", "borderTopColor-NavPanel": "var(--xmlui-borderTopColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderBottomColor-NavPanel": "var(--xmlui-borderBottomColor-NavPanel, var(--xmlui-borderVerticalColor-NavPanel, var(--xmlui-borderColor-NavPanel)))", "borderStartStartRadius-NavPanel": "var(--xmlui-borderStartStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderStartEndRadius-NavPanel": "var(--xmlui-borderStartEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndStartRadius-NavPanel": "var(--xmlui-borderEndStartRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "borderEndEndRadius-NavPanel": "var(--xmlui-borderEndEndRadius-NavPanel, var(--xmlui-borderRadius-NavPanel))", "backgroundColor-NavPanel": "var(--xmlui-backgroundColor-NavPanel)", "boxShadow-NavPanel": "var(--xmlui-boxShadow-NavPanel)", "padding-NavPanel": "var(--xmlui-padding-NavPanel)", "paddingHorizontal-NavPanel": "var(--xmlui-paddingHorizontal-NavPanel)", "paddingVertical-NavPanel": "var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel))", "paddingLeft-NavPanel": "var(--xmlui-paddingLeft-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingRight-NavPanel": "var(--xmlui-paddingRight-NavPanel, var(--xmlui-paddingHorizontal-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingTop-NavPanel": "var(--xmlui-paddingTop-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "paddingBottom-NavPanel": "var(--xmlui-paddingBottom-NavPanel, var(--xmlui-paddingVertical-NavPanel, var(--xmlui-padding-NavPanel)))", "padding-logo-NavPanel": "var(--xmlui-padding-logo-NavPanel)", "paddingHorizontal-logo-NavPanel": "var(--xmlui-paddingHorizontal-logo-NavPanel)", "paddingVertical-logo-NavPanel": "var(--xmlui-paddingVertical-logo-NavPanel)", "paddingLeft-logo-NavPanel": "var(--xmlui-paddingLeft-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingRight-logo-NavPanel": "var(--xmlui-paddingRight-logo-NavPanel, var(--xmlui-paddingHorizontal-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingTop-logo-NavPanel": "var(--xmlui-paddingTop-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "paddingBottom-logo-NavPanel": "var(--xmlui-paddingBottom-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))", "marginBottom-logo-NavPanel": "var(--xmlui-marginBottom-logo-NavPanel)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "height-AppHeader": "var(--xmlui-height-AppHeader)", "paddingVertical-AppHeader": "var(--xmlui-paddingVertical-AppHeader)", "align-content-AppHeader": "var(--xmlui-align-content-AppHeader)"}'`;
+  const wrapper$4 = "_wrapper_19swn_13";
+  const condensed = "_condensed_19swn_50";
+  const vertical$2 = "_vertical_19swn_53";
+  const horizontal$2 = "_horizontal_19swn_56";
+  const wrapperInner = "_wrapperInner_19swn_60";
+  const logoWrapper = "_logoWrapper_19swn_79";
+  const inDrawer = "_inDrawer_19swn_89";
   const styles$D = {
     themeVars: themeVars$B,
     wrapper: wrapper$4,
     condensed,
+    vertical: vertical$2,
     horizontal: horizontal$2,
     wrapperInner,
     logoWrapper,
@@ -3289,13 +3291,14 @@
     inDrawer: inDrawer2,
     renderChild
   }, forwardedRef) {
-    var _a;
+    var _a, _b;
     const scrollContainerRef = React.useRef(null);
     const ref = forwardedRef ? composeRefs(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = useAppLayoutContext();
     const horizontal2 = getAppLayoutOrientation(appLayoutContext == null ? void 0 : appLayoutContext.layout) === "horizontal";
     const showLogo = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky";
     const isCondensed = (_a = appLayoutContext == null ? void 0 : appLayoutContext.layout) == null ? void 0 : _a.startsWith("condensed");
+    const vertical2 = (_b = appLayoutContext == null ? void 0 : appLayoutContext.layout) == null ? void 0 : _b.startsWith("vertical");
     const safeLogoContent = logoContent || renderChild(appLayoutContext == null ? void 0 : appLayoutContext.logoContentDef);
     if (inDrawer2) {
       return /* @__PURE__ */ jsxRuntime.jsx(DrawerNavPanel, { style, logoContent: safeLogoContent, className, children });
@@ -3306,6 +3309,7 @@
         ref,
         className: classnames(styles$D.wrapper, className, {
           [styles$D.horizontal]: horizontal2,
+          [styles$D.vertical]: vertical2,
           [styles$D.condensed]: isCondensed
         }),
         children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollContext.Provider, { value: scrollContainerRef, children: [
@@ -17179,7 +17183,7 @@
     },
     themeVars: parseScssVar(styles$7.themeVars),
     defaultThemeVars: {
-      [`backgroundColor-resizer-${COMP$r}`]: "$backgroundColor-Card",
+      [`backgroundColor-resizer-${COMP$r}`]: "$color-surface-100",
       [`thickness-resizer-${COMP$r}`]: "5px",
       [`cursor-resizer-horizontal-${COMP$r}`]: "ew-resize",
       [`cursor-resizer-vertical-${COMP$r}`]: "ns-resize"
@@ -17403,7 +17407,7 @@
     iconHorizontalExpanded: "chevronleft",
     iconHorizontalCollapsed: "chevronright",
     iconVerticalExpanded: "chevrondown",
-    iconVerticalCollapsed: "chevronright"
+    iconVerticalCollapsed: "chevronup"
   };
   const NavGroupContext = React.createContext({
     level: -1,

package/dist/scripts/bin/index.js

@@ -33,9 +33,9 @@ function zipDirectory(sourceDir_1) {
         console.log(`Zip file created: ${outPath}`);
     });
 }
-function zipDist() {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield zipDirectory(process.cwd() + "/dist", `${process.cwd()}/ui.zip`);
+function zipDist(_a) {
+    return __awaiter(this, arguments, void 0, function* ({ target = "ui.zip" }) {
+        yield zipDirectory(process.cwd() + "/dist", `${process.cwd()}/${target}`);
     });
 }
 function dedupeArg(arg) {
@@ -84,7 +84,8 @@ switch (script) {
         break;
     }
     case "zip-dist": {
-        zipDist();
+        const { target } = yargs_1.argv;
+        zipDist({ target });
         break;
     }
     default: {

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.33",
+    "version": "0.9.34",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/CodeBlock/CodeBlock.js

@@ -17,17 +17,18 @@ exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
     props: {},
     themeVars: (0, themeVars_1.parseScssVar)(CodeBlock_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        "backgroundColor-CodeBlock": "#f2f7fc", // "$color-surface-100"
+        "backgroundColor-CodeBlock": "$color-primary-50",
         "backgroundColor-CodeBlock-header": "$color-primary-100",
         "marginTop-CodeBlock": "$space-5",
         "marginBottom-CodeBlock": "$space-5",
-        "backgroundColor-CodeBlock-highlightRow": "$color-surface-200",
-        "backgroundColor-CodeBlock-highlightString": "$color-surface-300",
+        "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-200-rgb, .25)",
+        "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-200-rgb, .5)",
         "borderRadius-CodeBlock": "$space-2",
         dark: {
-            "backgroundColor-CodeBlock-header": "$color-primary-200",
-            "backgroundColor-CodeBlock": "#112033",
-            "backgroundColor-CodeBlock-highlightRow": "$color-surface-100",
+            "backgroundColor-CodeBlock-header": "$color-surface-200",
+            "backgroundColor-CodeBlock": "$color-surface-50",
+            "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-300-rgb, .15)",
+            "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-300-rgb, .5)",
         }
     },
 });

package/dist/scripts/src/components/ComponentProvider.js

@@ -576,6 +576,10 @@ class ComponentRegistry {
         var _a;
         (_a = this.extensionManager) === null || _a === void 0 ? void 0 : _a.unSubscribeFromRegistrations(this.extensionRegistered);
     }
+    getExtensionManager() {
+        return this.extensionManager;
+    }
+    ;
     // --- Registers a compound component using its definition and metadata
     registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
         const component = {

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -19,7 +19,7 @@ exports.defaultProps = {
     iconHorizontalExpanded: "chevronleft",
     iconHorizontalCollapsed: "chevronright",
     iconVerticalExpanded: "chevrondown",
-    iconVerticalCollapsed: "chevronright",
+    iconVerticalCollapsed: "chevronup",
 };
 const NavGroupContext = (0, react_1.createContext)({
     level: -1,

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -55,13 +55,14 @@ function DrawerNavPanel({ logoContent, children, className, style, }) {
     return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
 }
 exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer, renderChild, }, forwardedRef) {
-    var _a;
+    var _a, _b;
     const scrollContainerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const horizontal = (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "horizontal";
     const showLogo = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky";
     const isCondensed = (_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _a === void 0 ? void 0 : _a.startsWith("condensed");
+    const vertical = (_b = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _b === void 0 ? void 0 : _b.startsWith("vertical");
     const safeLogoContent = logoContent || renderChild(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.logoContentDef);
     // console.log(appLayoutContext);
     if (inDrawer) {
@@ -69,6 +70,7 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,
+            [NavPanel_module_scss_1.default.vertical]: vertical,
             [NavPanel_module_scss_1.default.condensed]: isCondensed,
         }), children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [showLogo && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper), children: safeLogoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) })), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }));
 });

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -28,7 +28,9 @@ const Tooltip_1 = require("./Tooltip");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const utils_1 = require("./utils");
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, }) {
+const AppContext_1 = require("../../components-core/AppContext");
+const ComponentRegistryContext_1 = require("../ComponentRegistryContext");
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, withFrame = true }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -36,6 +38,8 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
     const theme = (0, ThemeContext_1.useTheme)();
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
+    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const apiWorker = (0, react_1.useMemo)(() => {
         if (typeof document !== "undefined") {
             return (0, browser_1.setupWorker)();
@@ -54,6 +58,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             ? Object.assign(Object.assign({ type: "in-memory" }, api), { apiUrl: "/api" }) : undefined;
     }, [api]);
     //console.log("mock", mock);
+    const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
             standalone: {
@@ -63,7 +68,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                     name: title,
                     themes: [],
                     defaultTheme: activeTheme,
-                }
+                },
             },
             options: {
                 fixedTheme: false,
@@ -76,8 +81,8 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             },
         };
         const appQueryString = yield (0, utils_1.createQueryString)(JSON.stringify(data));
-        window.open(`/#/playground#${appQueryString}`, "_blank");
-    }), [app, activeTheme]);
+        window.open(useHashBasedRouting ? `/#/playground#${appQueryString}` : `/playground#${appQueryString}`, "_blank");
+    }), [app, components, title, activeTheme, activeTone, useHashBasedRouting]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!shadowRef.current && rootRef.current) {
@@ -115,14 +120,15 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+        let nestedAppRoot = ((0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+                    compoundComponents,
+                    themes: config === null || config === void 0 ? void 0 : config.themes,
+                }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }));
+        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                             openPlayground();
                                         }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                             setRefreshVersion(refreshVersion + 1);
-                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
-                                    compoundComponents,
-                                    themes: config === null || config === void 0 ? void 0 : config.themes,
-                                }, resources: config === null || config === void 0 ? void 0 : config.resources }, `app-${nestedAppId}-${refreshVersion}`) })] }) }) }));
+                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }) }));
     }, [
         activeTheme,
         allowPlaygroundPopup,
@@ -137,6 +143,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         height,
         mock,
         nestedAppId,
+        openPlayground,
         refreshVersion,
         theme.themeStyles,
         title,
@@ -149,11 +156,11 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             contentRootRef.current = null;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.nestedApp, children: (0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {
-                width: "100%",
-                height: "100%",
-                overflow: "auto",
-                position: "relative",
-                isolation: "isolate",
-            } }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {
+            width: "100%",
+            height: "100%",
+            overflow: "auto",
+            position: "relative",
+            isolation: "isolate",
+        } }));
 }