xmlui 0.9.32 → 0.9.34

package/dist/metadata/style.css

@@ -2409,7 +2409,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_918vy_13 {
+._wrapper_1j9om_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -2419,131 +2419,142 @@ See this source for details: https://css-tricks.com/line-clampin/
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_918vy_13._vertical_918vy_23 {
+._wrapper_1j9om_13._vertical_1j9om_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_918vy_13._vertical_918vy_23 ._contentWrapper_918vy_27 {
+._wrapper_1j9om_13._vertical_1j9om_23 ._contentWrapper_1j9om_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_918vy_13._vertical_918vy_23 ._navPanelWrapper_918vy_33 {
+._wrapper_1j9om_13._vertical_1j9om_23 ._navPanelWrapper_1j9om_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_918vy_13._vertical_918vy_23 ._PagesWrapper_918vy_37 {
+._wrapper_1j9om_13._vertical_1j9om_23 ._PagesWrapper_1j9om_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_918vy_13._vertical_918vy_23 ._footerWrapper_918vy_41 {
+._wrapper_1j9om_13._vertical_1j9om_23 ._footerWrapper_1j9om_41 {
   position: static;
 }
-._wrapper_918vy_13._vertical_918vy_23._sticky_918vy_44 ._footerWrapper_918vy_41 {
+._wrapper_1j9om_13._vertical_1j9om_23._sticky_1j9om_44 ._footerWrapper_1j9om_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_918vy_13._horizontal_918vy_48 {
+._wrapper_1j9om_13._horizontal_1j9om_48 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_918vy_13._horizontal_918vy_48 ._PagesWrapper_918vy_37 {
+._wrapper_1j9om_13._horizontal_1j9om_48 ._PagesWrapper_1j9om_37 {
   min-height: initial;
 }
-._wrapper_918vy_13._horizontal_918vy_48 ._footerWrapper_918vy_41 {
+._wrapper_1j9om_13._horizontal_1j9om_48 ._footerWrapper_1j9om_41 {
   position: static;
 }
-._wrapper_918vy_13._horizontal_918vy_48._sticky_918vy_44 {
+._wrapper_1j9om_13._horizontal_1j9om_48._sticky_1j9om_44 {
   min-height: 100%;
 }
-._wrapper_918vy_13._horizontal_918vy_48._sticky_918vy_44 ._footerWrapper_918vy_41 {
+._wrapper_1j9om_13._horizontal_1j9om_48._sticky_1j9om_44 ._footerWrapper_1j9om_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_918vy_13._horizontal_918vy_48 ._navPanelWrapper_918vy_33 {
+._wrapper_1j9om_13._horizontal_1j9om_48 ._navPanelWrapper_1j9om_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
+  background-color: var(--xmlui-backgroundColor-navPanel-App);
 }
-._wrapper_918vy_13._verticalFullHeader_918vy_69 {
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_918vy_13._verticalFullHeader_918vy_69 ._navPanelWrapper_918vy_33 {
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 ._navPanelWrapper_1j9om_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_918vy_13._verticalFullHeader_918vy_69 ._PagesWrapper_918vy_37 {
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 ._navPanelWrapper_1j9om_33::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 50vw;
+  z-index: -1;
+  background-color: var(--xmlui-backgroundColor-navPanel-App);
+}
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 ._PagesWrapper_1j9om_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_918vy_13._verticalFullHeader_918vy_69 ._PagesWrapperInner_918vy_86 {
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 ._PagesWrapperInner_1j9om_97 {
   height: 100%;
 }
-._wrapper_918vy_13._verticalFullHeader_918vy_69 ._PagesWrapperInner_918vy_86 > .xmlui-page-root {
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 ._PagesWrapperInner_1j9om_97 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_918vy_13._verticalFullHeader_918vy_69 ._footerWrapper_918vy_41 {
+._wrapper_1j9om_13._verticalFullHeader_1j9om_70 ._footerWrapper_1j9om_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98 {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98 ._headerWrapper_918vy_101 {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109 ._headerWrapper_1j9om_112 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98 ._headerWrapper_918vy_101 > div {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109 ._headerWrapper_1j9om_112 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98 ._footerWrapper_918vy_41 {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109 ._footerWrapper_1j9om_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98 ._footerWrapper_918vy_41 > div {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109 ._footerWrapper_1j9om_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98._verticalFullHeader_918vy_69 ._content_918vy_27 {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109._verticalFullHeader_1j9om_70 ._content_1j9om_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_918vy_13._scrollWholePage_918vy_98._verticalFullHeader_918vy_69 ._contentWrapper_918vy_27 {
+._wrapper_1j9om_13._scrollWholePage_1j9om_109._verticalFullHeader_1j9om_70 ._contentWrapper_1j9om_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_918vy_13:not(._scrollWholePage_918vy_98) {
+._wrapper_1j9om_13:not(._scrollWholePage_1j9om_109) {
   overflow: hidden;
 }
-._wrapper_918vy_13:not(._scrollWholePage_918vy_98) ._content_918vy_27 {
+._wrapper_1j9om_13:not(._scrollWholePage_1j9om_109) ._content_1j9om_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_918vy_13:not(._scrollWholePage_918vy_98) ._contentWrapper_918vy_27 {
+._wrapper_1j9om_13:not(._scrollWholePage_1j9om_109) ._contentWrapper_1j9om_27 {
   overflow: initial;
 }
-._wrapper_918vy_13:not(._scrollWholePage_918vy_98) ._PagesWrapper_918vy_37 {
+._wrapper_1j9om_13:not(._scrollWholePage_1j9om_109) ._PagesWrapper_1j9om_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_918vy_13:not(._scrollWholePage_918vy_98) ._PagesWrapperInner_918vy_86 {
+._wrapper_1j9om_13:not(._scrollWholePage_1j9om_109) ._PagesWrapperInner_1j9om_97 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_918vy_13._noScrollbarGutters_918vy_140 {
+._wrapper_1j9om_13._noScrollbarGutters_1j9om_151 {
   scrollbar-gutter: auto;
 }
-._wrapper_918vy_13._noScrollbarGutters_918vy_140 ._PagesWrapper_918vy_37 {
+._wrapper_1j9om_13._noScrollbarGutters_1j9om_151 ._PagesWrapper_1j9om_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_918vy_101 {
+._headerWrapper_1j9om_112 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -2552,11 +2563,11 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_918vy_101._sticky_918vy_44 {
+._headerWrapper_1j9om_112._sticky_1j9om_44 {
   position: sticky;
 }
 
-._content_918vy_27 {
+._content_1j9om_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
@@ -2565,7 +2576,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   max-width: var(--xmlui-maxWidth-App);
 }
 
-._contentWrapper_918vy_27 {
+._contentWrapper_1j9om_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -2576,21 +2587,21 @@ See this source for details: https://css-tricks.com/line-clampin/
   border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_918vy_33 {
+._navPanelWrapper_1j9om_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_918vy_33:empty {
+._navPanelWrapper_1j9om_33:empty {
   display: none;
 }
 
-._PagesWrapper_918vy_37 {
+._PagesWrapper_1j9om_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_918vy_86 {
+._PagesWrapperInner_1j9om_97 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -2608,7 +2619,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_918vy_86 > .xmlui-page-root {
+._PagesWrapperInner_1j9om_97 > .xmlui-page-root {
   padding-top: var(--page-padding-top-override, var(--page-padding-top));
   padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
   padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -2620,7 +2631,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_918vy_41 {
+._footerWrapper_1j9om_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -2952,7 +2963,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_fztu9_13 {
+._wrapper_19swn_13 {
   --footer-height: 0;
   height: 100%;
   width: 100%;
@@ -2987,21 +2998,23 @@ See this source for details: https://css-tricks.com/line-clampin/
   position: relative;
   display: flex;
   flex-direction: column;
-  scrollbar-color: var(--xmlui-color-scrollbar-NavPanel) var(--xmlui-backgroundColor-scrollbar-NavPanel);
   scrollbar-width: thin;
 }
-._wrapper_fztu9_13:not(._condensed_fztu9_51) {
+._wrapper_19swn_13:not(._condensed_19swn_50) {
   background-color: var(--xmlui-backgroundColor-NavPanel);
 }
-._wrapper_fztu9_13._horizontal_fztu9_54 {
+._wrapper_19swn_13._vertical_19swn_53 {
+  scrollbar-gutter: stable;
+}
+._wrapper_19swn_13._horizontal_19swn_56 {
   box-shadow: none;
   height: var(--xmlui-height-AppHeader);
 }
-._wrapper_fztu9_13._horizontal_fztu9_54:not(._condensed_fztu9_51) ._wrapperInner_fztu9_58 {
+._wrapper_19swn_13._horizontal_19swn_56:not(._condensed_19swn_50) ._wrapperInner_19swn_60 {
   padding-inline: var(--xmlui-paddingHorizontal-NavPanel);
   justify-content: var(--xmlui-align-content-AppHeader);
 }
-._wrapper_fztu9_13._horizontal_fztu9_54 ._wrapperInner_fztu9_58 {
+._wrapper_19swn_13._horizontal_19swn_56 ._wrapperInner_19swn_60 {
   height: 100%;
   flex-direction: row;
   max-width: var(--xmlui-maxWidth-content-App);
@@ -3010,13 +3023,13 @@ See this source for details: https://css-tricks.com/line-clampin/
   justify-content: var(--xmlui-align-content-AppHeader);
 }
 
-._wrapperInner_fztu9_58 {
+._wrapperInner_19swn_60 {
   display: flex;
   flex-direction: column;
   justify-content: var(--xmlui-align-content-AppHeader);
 }
 
-._logoWrapper_fztu9_77:not(:empty) {
+._logoWrapper_19swn_79:not(:empty) {
   display: flex;
   justify-content: center;
   flex-shrink: 0;
@@ -3026,7 +3039,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   padding-inline: var(--xmlui-paddingHorizontal-logo-NavPanel);
   margin-bottom: var(--xmlui-marginBottom-logo-NavPanel);
 }
-._logoWrapper_fztu9_77._inDrawer_fztu9_87 {
+._logoWrapper_19swn_79._inDrawer_19swn_89 {
   min-height: 40px;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.

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,
@@ -3138,7 +3138,7 @@ const ThemeMd = createMetadata({
   },
   opaque: true
 });
-const themeVars$F = `'{"width-navPanel-App": "var(--xmlui-width-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 themeVars$F = `'{"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 styles$G = {
   themeVars: themeVars$F
 };
@@ -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: [
@@ -3476,6 +3480,7 @@ const AppMd = createMetadata({
   },
   defaultThemeVars: {
     [`width-navPanel-${COMP$$}`]: "$space-64",
+    [`backgroundColor-navPanel-${COMP$$}`]: "$backgroundColor",
     [`maxWidth-content-${COMP$$}`]: "$maxWidth-content",
     [`boxShadow-header-${COMP$$}`]: "$boxShadow-spread",
     [`boxShadow-navPanel-${COMP$$}`]: "$boxShadow-spread",
@@ -17181,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"
@@ -17405,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,
@@ -3135,7 +3135,7 @@
     },
     opaque: true
   });
-  const themeVars$F = `'{"width-navPanel-App": "var(--xmlui-width-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 themeVars$F = `'{"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 styles$G = {
     themeVars: themeVars$F
   };
@@ -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: [
@@ -3473,6 +3477,7 @@
     },
     defaultThemeVars: {
       [`width-navPanel-${COMP$$}`]: "$space-64",
+      [`backgroundColor-navPanel-${COMP$$}`]: "$backgroundColor",
       [`maxWidth-content-${COMP$$}`]: "$maxWidth-content",
       [`boxShadow-header-${COMP$$}`]: "$boxShadow-spread",
       [`boxShadow-navPanel-${COMP$$}`]: "$boxShadow-spread",
@@ -17178,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"
@@ -17402,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.32",
+    "version": "0.9.34",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",