xmlui 0.9.9 → 0.9.10

package/dist/style.css

@@ -1617,7 +1617,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_1larq_13 {
+._wrapper_qcc08_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -1627,138 +1627,138 @@ See this source for details: https://css-tricks.com/line-clampin/
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_1larq_13._vertical_1larq_23 {
+._wrapper_qcc08_13._vertical_qcc08_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._navPanelWrapper_1larq_33 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_1larq_13._vertical_1larq_23 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
   position: static;
 }
-._wrapper_1larq_13._vertical_1larq_23._sticky_1larq_44 ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1larq_13._vertical_1larq_23._sticky_1larq_44 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1larq_13._horizontal_1larq_51 {
+._wrapper_qcc08_13._horizontal_qcc08_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1larq_13._horizontal_1larq_51 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
   min-height: initial;
 }
-._wrapper_1larq_13._horizontal_1larq_51 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
   position: static;
 }
-._wrapper_1larq_13._horizontal_1larq_51._sticky_1larq_44 {
+._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_1larq_13._horizontal_1larq_51._sticky_1larq_44 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1larq_13._horizontal_1larq_51 ._navPanelWrapper_1larq_33 {
+._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._navPanelWrapper_1larq_33 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_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_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapperInner_1larq_90 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
   height: 100%;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._PagesWrapperInner_1larq_90 > .xmlui-page-root {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_1larq_13._verticalFullHeader_1larq_73 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._headerWrapper_1larq_105 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._headerWrapper_1larq_105 > div {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._footerWrapper_1larq_41 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102 ._footerWrapper_1larq_41 > div {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 ._content_1larq_27 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1larq_13._scrollWholePage_1larq_102._verticalFullHeader_1larq_73 ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
   overflow: hidden;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._content_1larq_27 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._contentWrapper_1larq_27 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
   overflow: initial;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1larq_13:not(._scrollWholePage_1larq_102) ._PagesWrapperInner_1larq_90 {
+._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_1larq_13._noScrollbarGutters_1larq_147 {
+._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
   scrollbar-gutter: auto;
 }
-._wrapper_1larq_13._noScrollbarGutters_1larq_147 ._PagesWrapper_1larq_37 {
+._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_1larq_105 {
+._headerWrapper_qcc08_105 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1767,40 +1767,42 @@ 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_1larq_105._sticky_1larq_44 {
+._headerWrapper_qcc08_105._sticky_qcc08_44 {
   position: sticky;
 }
 
-._content_1larq_27 {
+._content_qcc08_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_1larq_27 {
+._contentWrapper_qcc08_27 {
   position: relative;
   min-width: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
   box-shadow: var(--xmlui-boxShadow-navPanel-App);
+  background-color: var(--xmlui-backgroundColor-content-App);
+  border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_1larq_33 {
+._navPanelWrapper_qcc08_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_1larq_33:empty {
+._navPanelWrapper_qcc08_33:empty {
   display: none;
 }
 
-._PagesWrapper_1larq_37 {
+._PagesWrapper_qcc08_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_1larq_90 {
+._PagesWrapperInner_qcc08_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1818,7 +1820,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_1larq_90 > .xmlui-page-root {
+._PagesWrapperInner_qcc08_90 > .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));
@@ -1830,7 +1832,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_1larq_41 {
+._footerWrapper_qcc08_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.

package/dist/xmlui-metadata.mjs

@@ -3170,7 +3170,7 @@ const ThemeMd = createMetadata({
   },
   opaque: true
 });
-const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-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$I = `'{"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)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
 const styles$L = {
   themeVars: themeVars$I
 };
@@ -3512,6 +3512,7 @@ const AppMd = createMetadata({
     [`boxShadow-header-${COMP$12}`]: "$boxShadow-spread",
     [`boxShadow-navPanel-${COMP$12}`]: "$boxShadow-spread",
     [`scroll-padding-block-Pages`]: "$space-4",
+    [`backgroundColor-content-App`]: "$backgroundColor",
     light: {
       // --- No light-specific theme vars
     },

package/dist/xmlui-metadata.umd.js

@@ -3169,7 +3169,7 @@
     },
     opaque: true
   });
-  const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-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$I = `'{"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)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
   const styles$L = {
     themeVars: themeVars$I
   };
@@ -3511,6 +3511,7 @@
       [`boxShadow-header-${COMP$12}`]: "$boxShadow-spread",
       [`boxShadow-navPanel-${COMP$12}`]: "$boxShadow-spread",
       [`scroll-padding-block-Pages`]: "$space-4",
+      [`backgroundColor-content-App`]: "$backgroundColor",
       light: {
         // --- No light-specific theme vars
       },