xmlui 0.9.33 → 0.9.34

package/dist/lib/index.css

@@ -1880,7 +1880,7 @@
  * 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%;
@@ -1915,21 +1915,23 @@
   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);
@@ -1938,13 +1940,13 @@
   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;
@@ -1954,7 +1956,7 @@
   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/lib/language-server-web-worker.mjs

@@ -1,4 +1,4 @@
-import { m as main, s as start } from "./server-common-CUmSKua6.mjs";
+import { m as main, s as start } from "./server-common-B1bqw3bO.mjs";
 var browser = main;
 const messageReader = new browser.BrowserMessageReader(self);
 messageReader.listen((message) => {

package/dist/lib/language-server.mjs

@@ -1,4 +1,4 @@
-import { m as main, s as start$1 } from "./server-common-CUmSKua6.mjs";
+import { m as main, s as start$1 } from "./server-common-B1bqw3bO.mjs";
 var node = main;
 function start() {
   const connection = node.createConnection(node.ProposedFeatures.all);

package/dist/lib/{metadata-utils-DyYovNew.mjs → metadata-utils-BzHSWB2j.mjs}

@@ -1,29 +1,4 @@
 import { x as onPrefixRegex, A as stripOnPrefix } from "./transform-B-MhfH46.mjs";
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
-  var f = n.default;
-  if (typeof f == "function") {
-    var a = function a2() {
-      if (this instanceof a2) {
-        return Reflect.construct(f, arguments, this.constructor);
-      }
-      return f.apply(this, arguments);
-    };
-    a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, "__esModule", { value: true });
-  Object.keys(n).forEach(function(k) {
-    var d = Object.getOwnPropertyDescriptor(n, k);
-    Object.defineProperty(a, k, d.get ? d : {
-      enumerable: true,
-      get: function() {
-        return n[k];
-      }
-    });
-  });
-  return a;
-}
 const LinkTargetMd = [
   {
     value: "_self",
@@ -470,24 +445,22 @@ export {
   VariantPropsKeys as V,
   addOnPrefix as a,
   alignmentOptionValues as b,
-  commonjsGlobal as c,
-  alignmentOptionMd as d,
-  buttonTypesMd as e,
-  buttonThemeMd as f,
-  getAugmentedNamespace as g,
-  buttonVariantMd as h,
+  alignmentOptionMd as c,
+  buttonTypesMd as d,
+  buttonThemeMd as e,
+  buttonVariantMd as f,
+  variantOptionsMd as g,
+  scrollAnchoringValues as h,
   iconPositionMd as i,
-  variantOptionsMd as j,
-  scrollAnchoringValues as k,
+  buttonThemeNames as j,
+  iconPositionNames as k,
   labelPositionMd as l,
-  buttonThemeNames as m,
-  iconPositionNames as n,
+  buttonVariantNames as m,
+  httpMethodNames as n,
   orientationOptionMd as o,
-  buttonVariantNames as p,
-  httpMethodNames as q,
-  layoutOptionKeys as r,
+  layoutOptionKeys as p,
+  viewportSizeNames as q,
   sizeMd as s,
   triggerPositionNames as t,
-  viewportSizeNames as u,
   validationStatusMd as v
 };

package/dist/lib/{server-common-CUmSKua6.mjs → server-common-B1bqw3bO.mjs}

@@ -1,7 +1,32 @@
-import { c as commonjsGlobal, g as getAugmentedNamespace, a as addOnPrefix, M as MetadataProvider } from "./metadata-utils-DyYovNew.mjs";
 import { MarkupKind as MarkupKind$1, CompletionItemKind as CompletionItemKind$1, TextDocuments as TextDocuments$1, TextDocumentSyncKind, DidChangeConfigurationNotification } from "vscode-languageserver";
 import { TextDocument as TextDocument$1 } from "vscode-languageserver-textdocument";
 import { S as SyntaxKind, G as findTokenAtPos, o as createXmlUiParser } from "./transform-B-MhfH46.mjs";
+import { a as addOnPrefix, M as MetadataProvider } from "./metadata-utils-BzHSWB2j.mjs";
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getAugmentedNamespace(n) {
+  if (n.__esModule) return n;
+  var f = n.default;
+  if (typeof f == "function") {
+    var a = function a2() {
+      if (this instanceof a2) {
+        return Reflect.construct(f, arguments, this.constructor);
+      }
+      return f.apply(this, arguments);
+    };
+    a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, "__esModule", { value: true });
+  Object.keys(n).forEach(function(k) {
+    var d = Object.getOwnPropertyDescriptor(n, k);
+    Object.defineProperty(a, k, d.get ? d : {
+      enumerable: true,
+      get: function() {
+        return n[k];
+      }
+    });
+  });
+  return a;
+}
 var main$3 = {};
 var api$2 = {};
 var semanticTokens = {};

package/dist/lib/xmlui-parser.mjs

@@ -1,5 +1,5 @@
 import { w, y, C, n, j, h, m, g, k, a, l, i, e, c, f, b, D, E, P, S, U, r, o, d, q, G, v, s, u, t, z, x, p, A, F, B } from "./transform-B-MhfH46.mjs";
-import { b as b2, L, X, a as a2, c as c2, g as g2, e as e2, l as l2, d as d2, m as m2, p as p2 } from "./lint-B5OU130e.mjs";
+import { b as b2, L, X, a as a2, c as c2, g as g2, e as e2, l as l2, d as d2, m as m2, p as p2 } from "./xmlui-serializer-CQnuXBof.mjs";
 export {
   w as COMPOUND_COMP_ID,
   y as CORE_NAMESPACE_VALUE,

package/dist/lib/{lint-B5OU130e.mjs → xmlui-serializer-CQnuXBof.mjs}

@@ -1,4 +1,159 @@
-import { w as COMPOUND_COMP_ID, y as CORE_NAMESPACE_VALUE } from "./transform-B-MhfH46.mjs";
+import { y as CORE_NAMESPACE_VALUE, w as COMPOUND_COMP_ID } from "./transform-B-MhfH46.mjs";
+const componentFileExtension = "xmlui";
+const codeBehindFileExtension = "xmlui.xs";
+const moduleFileExtension = "xs";
+var LintSeverity = /* @__PURE__ */ ((LintSeverity2) => {
+  LintSeverity2[LintSeverity2["Skip"] = 0] = "Skip";
+  LintSeverity2[LintSeverity2["Warning"] = 1] = "Warning";
+  LintSeverity2[LintSeverity2["Error"] = 2] = "Error";
+  return LintSeverity2;
+})(LintSeverity || {});
+var LintDiagKind = /* @__PURE__ */ ((LintDiagKind2) => {
+  LintDiagKind2[LintDiagKind2["UnrecognisedProp"] = 0] = "UnrecognisedProp";
+  return LintDiagKind2;
+})(LintDiagKind || {});
+function getLintSeverity(lintSeverityOption) {
+  if (!lintSeverityOption) {
+    return 1;
+  }
+  switch (lintSeverityOption.toLowerCase()) {
+    case "warning":
+      return 1;
+    case "error":
+      return 2;
+    case "skip":
+      return 0;
+    default:
+      console.warn(`Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`);
+      return 1;
+  }
+}
+function lintApp({
+  appDef,
+  metadataProvider
+}) {
+  const entryPointLints = {
+    componentName: "Main",
+    lints: lint({
+      component: appDef.entryPoint,
+      metadataProvider
+    })
+  };
+  const compoundCompLints = (appDef.components ?? []).map((c) => {
+    const lints = lint({
+      component: c,
+      metadataProvider
+    });
+    return { lints, componentName: c.name };
+  });
+  return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
+}
+function printComponentLints(lintDiags) {
+  console.group(`Validation on '${lintDiags.componentName}':`);
+  lintDiags.lints.forEach(({ message }) => {
+    console.warn(message);
+  });
+  console.groupEnd();
+}
+function lintErrorsComponent(lints) {
+  function makeComponent() {
+    const errList = lints.map((lint2, idx) => {
+      return {
+        type: "VStack",
+        props: { gap: "0px" },
+        children: [
+          {
+            type: "VStack",
+            props: { "backgroundColor": "lightgrey", padding: "10px" },
+            children: [
+              {
+                type: "H2",
+                props: {
+                  value: `#${idx + 1}: In component '${lint2.componentName}':`,
+                  color: "$color-info"
+                }
+              },
+              {
+                type: "VStack",
+                children: lint2.lints.map(({ message }, msgIdx) => {
+                  return {
+                    type: "Text",
+                    props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" }
+                  };
+                })
+              }
+            ]
+          }
+        ]
+      };
+    });
+    const comp = {
+      type: "VStack",
+      props: { padding: "$padding-normal", gap: 0 },
+      children: [
+        {
+          type: "H1",
+          props: {
+            value: `Errors found while checking Xmlui markup`,
+            padding: "$padding-normal",
+            backgroundColor: "$color-error",
+            color: "white"
+          }
+        },
+        {
+          type: "VStack",
+          props: {
+            gap: "$gap-tight",
+            padding: "$padding-normal"
+          },
+          children: errList
+        }
+      ]
+    };
+    return comp;
+  }
+  return makeComponent();
+}
+function lint({
+  component,
+  metadataProvider
+}) {
+  if ("component" in component) {
+    return lintHelp(component.component, metadataProvider, []);
+  }
+  return lintHelp(component, metadataProvider, []);
+}
+function lintHelp(component, metadataProvider, acc) {
+  const componentName = component.type.startsWith(CORE_NAMESPACE_VALUE) ? component.type.slice(CORE_NAMESPACE_VALUE.length + 1) : component.type;
+  const componentMdProvider = metadataProvider.getComponent(componentName);
+  if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
+    lintAttrs(component, componentMdProvider, acc);
+  }
+  if (!component.children) {
+    return acc;
+  }
+  for (const child of component.children) {
+    lintHelp(child, metadataProvider, acc);
+  }
+  return acc;
+}
+function lintAttrs(component, metadataForCurrentComponent, diags) {
+  const invalidAttrNames = Object.keys(component.props ?? {}).filter((name) => !metadataForCurrentComponent.getAttr(name));
+  const invalidEvents = Object.keys(component.events ?? {}).filter((event) => !metadataForCurrentComponent.getEvent(event));
+  const invalidApis = Object.keys(component.api ?? {}).filter((api) => !metadataForCurrentComponent.getApi(api));
+  invalidAttrNames.push(...invalidEvents);
+  invalidAttrNames.push(...invalidApis);
+  for (const invalidAttrName of invalidAttrNames) {
+    diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
+  }
+}
+function toUnrecognisedAttrDiag(component, attr) {
+  return {
+    message: `Unrecognised property '${attr}' on component '${component.type}'.`,
+    kind: 0
+    /* UnrecognisedProp */
+  };
+}
 const attrBreakRegex = /[\r\n<>'"&]/;
 class XmlUiHelper {
   /**
@@ -489,161 +644,6 @@ class XmlUiHelper {
     element.childNodes.push(listElement);
   }
 }
-const componentFileExtension = "xmlui";
-const codeBehindFileExtension = "xmlui.xs";
-const moduleFileExtension = "xs";
-var LintSeverity = /* @__PURE__ */ ((LintSeverity2) => {
-  LintSeverity2[LintSeverity2["Skip"] = 0] = "Skip";
-  LintSeverity2[LintSeverity2["Warning"] = 1] = "Warning";
-  LintSeverity2[LintSeverity2["Error"] = 2] = "Error";
-  return LintSeverity2;
-})(LintSeverity || {});
-var LintDiagKind = /* @__PURE__ */ ((LintDiagKind2) => {
-  LintDiagKind2[LintDiagKind2["UnrecognisedProp"] = 0] = "UnrecognisedProp";
-  return LintDiagKind2;
-})(LintDiagKind || {});
-function getLintSeverity(lintSeverityOption) {
-  if (!lintSeverityOption) {
-    return 1;
-  }
-  switch (lintSeverityOption.toLowerCase()) {
-    case "warning":
-      return 1;
-    case "error":
-      return 2;
-    case "skip":
-      return 0;
-    default:
-      console.warn(`Invalid lint severity option '${lintSeverityOption}'. Must be one of: 'warning', 'error', 'skip'. Defaulting to 'warning'.`);
-      return 1;
-  }
-}
-function lintApp({
-  appDef,
-  metadataProvider
-}) {
-  const entryPointLints = {
-    componentName: "Main",
-    lints: lint({
-      component: appDef.entryPoint,
-      metadataProvider
-    })
-  };
-  const compoundCompLints = (appDef.components ?? []).map((c) => {
-    const lints = lint({
-      component: c,
-      metadataProvider
-    });
-    return { lints, componentName: c.name };
-  });
-  return [entryPointLints, ...compoundCompLints].filter((diags) => diags.lints.length > 0);
-}
-function printComponentLints(lintDiags) {
-  console.group(`Validation on '${lintDiags.componentName}':`);
-  lintDiags.lints.forEach(({ message }) => {
-    console.warn(message);
-  });
-  console.groupEnd();
-}
-function lintErrorsComponent(lints) {
-  function makeComponent() {
-    const errList = lints.map((lint2, idx) => {
-      return {
-        type: "VStack",
-        props: { gap: "0px" },
-        children: [
-          {
-            type: "VStack",
-            props: { "backgroundColor": "lightgrey", padding: "10px" },
-            children: [
-              {
-                type: "H2",
-                props: {
-                  value: `#${idx + 1}: In component '${lint2.componentName}':`,
-                  color: "$color-info"
-                }
-              },
-              {
-                type: "VStack",
-                children: lint2.lints.map(({ message }, msgIdx) => {
-                  return {
-                    type: "Text",
-                    props: { value: `${idx + 1}.${msgIdx + 1}: ${message}`, fontWeight: "bold" }
-                  };
-                })
-              }
-            ]
-          }
-        ]
-      };
-    });
-    const comp = {
-      type: "VStack",
-      props: { padding: "$padding-normal", gap: 0 },
-      children: [
-        {
-          type: "H1",
-          props: {
-            value: `Errors found while checking Xmlui markup`,
-            padding: "$padding-normal",
-            backgroundColor: "$color-error",
-            color: "white"
-          }
-        },
-        {
-          type: "VStack",
-          props: {
-            gap: "$gap-tight",
-            padding: "$padding-normal"
-          },
-          children: errList
-        }
-      ]
-    };
-    return comp;
-  }
-  return makeComponent();
-}
-function lint({
-  component,
-  metadataProvider
-}) {
-  if ("component" in component) {
-    return lintHelp(component.component, metadataProvider, []);
-  }
-  return lintHelp(component, metadataProvider, []);
-}
-function lintHelp(component, metadataProvider, acc) {
-  const componentName = component.type.startsWith(CORE_NAMESPACE_VALUE) ? component.type.slice(CORE_NAMESPACE_VALUE.length + 1) : component.type;
-  const componentMdProvider = metadataProvider.getComponent(componentName);
-  if (componentMdProvider !== null && !componentMdProvider.allowArbitraryProps) {
-    lintAttrs(component, componentMdProvider, acc);
-  }
-  if (!component.children) {
-    return acc;
-  }
-  for (const child of component.children) {
-    lintHelp(child, metadataProvider, acc);
-  }
-  return acc;
-}
-function lintAttrs(component, metadataForCurrentComponent, diags) {
-  const invalidAttrNames = Object.keys(component.props ?? {}).filter((name) => !metadataForCurrentComponent.getAttr(name));
-  const invalidEvents = Object.keys(component.events ?? {}).filter((event) => !metadataForCurrentComponent.getEvent(event));
-  const invalidApis = Object.keys(component.api ?? {}).filter((api) => !metadataForCurrentComponent.getApi(api));
-  invalidAttrNames.push(...invalidEvents);
-  invalidAttrNames.push(...invalidApis);
-  for (const invalidAttrName of invalidAttrNames) {
-    diags.push(toUnrecognisedAttrDiag(component, invalidAttrName));
-  }
-}
-function toUnrecognisedAttrDiag(component, attr) {
-  return {
-    message: `Unrecognised property '${attr}' on component '${component.type}'.`,
-    kind: 0
-    /* UnrecognisedProp */
-  };
-}
 export {
   LintSeverity as L,
   XmlUiHelper as X,

package/dist/lib/xmlui.d.ts

@@ -425,6 +425,8 @@ declare interface BreakStatement extends ScripNodeBase {
     type: BREAK_STATEMENT;
 }
 
+export declare const builtInThemes: Array<ThemeDefinition>;
+
 export declare const Button: default_2.ForwardRefExoticComponent<{
     id?: string;
     type?: ButtonType;
@@ -1250,6 +1252,21 @@ declare type Message = ValueOrFunction<Renderable, Toast>;
  */
 declare type ModuleErrors = Record<string, ScriptParserErrorMessage[]>;
 
+export declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame }: NestedAppProps): JSX_2.Element;
+
+declare type NestedAppProps = {
+    api?: any;
+    app: string;
+    components?: any[];
+    config?: any;
+    activeTone?: ThemeTone;
+    activeTheme?: string;
+    title?: string;
+    height?: string | number;
+    allowPlaygroundPopup?: boolean;
+    withFrame?: boolean;
+};
+
 declare type NO_ARG_EXPRESSION = typeof T_NO_ARG_EXPRESSION;
 
 declare interface NoArgExpression extends ExpressionBase {
@@ -1478,15 +1495,13 @@ declare interface SequenceExpression extends ExpressionBase {
 
 declare const sizeValues: string[];
 
-export declare const SolidThemeDefinition: ThemeDefinition;
-
 export declare const Spinner: ForwardRefExoticComponent<SpinnerProps & RefAttributes<HTMLDivElement>>;
 
-declare interface SpinnerProps {
+declare type SpinnerProps = {
     delay?: number;
     fullScreen?: boolean;
     style?: CSSProperties;
-}
+};
 
 export declare const Splitter: ({ initialPrimarySize, minPrimarySize, maxPrimarySize, orientation, children, style, swapped, floating, splitterTemplate, resize, }: SplitterProps) => JSX_2.Element;
 
@@ -2008,8 +2023,6 @@ declare type UnaryOpSymbols = "+" | "-" | "~" | "!" | "typeof" | "delete";
  */
 declare type UpdateStateFn = (componentState: any, options?: any) => void;
 
-export declare function useApiWorkerContext(): SetupWorker;
-
 export declare function useColors(...colorNames: (string | ColorDef)[]): Record<string, string>;
 
 export declare function useDevTools(): {
@@ -2238,8 +2251,6 @@ declare type XmluiSerializationOptions = {
     breakClosingTag?: boolean;
 };
 
-export declare const XmlUiThemeDefinition: ThemeDefinition;
-
 /**
  * Options to use with markup transformation from memory format to XMLUI structure
  */

package/dist/lib/xmlui.mjs

@@ -1,34 +1,33 @@
-import { C, A, B, E, I, F, D, j, i, S, b, l, n, G, X, c, e, f, y, k, p, h, t, x, q, v, w, u, z } from "./index-EIC8XLtz.mjs";
-import { X as X2 } from "./lint-B5OU130e.mjs";
+import { z, A, B, E, I, N, C, j, i, S, b, l, n, F, D, c, e, f, x, k, p, h, t, q, v, w, u, y } from "./index-BN2rPcEc.mjs";
+import { X } from "./xmlui-serializer-CQnuXBof.mjs";
 export {
-  C as ApiInterceptorProvider,
+  z as ApiInterceptorProvider,
   A as AppRoot,
   B as Button,
   E as ErrorBoundary,
   I as Icon,
-  F as SolidThemeDefinition,
-  D as Spinner,
+  N as NestedApp,
+  C as Spinner,
   j as Splitter,
   i as Stack,
   S as StandaloneApp,
   b as StandaloneExtensionManager,
   l as TabItem,
   n as Tabs,
-  G as Text,
-  X2 as XmlUiHelper,
-  X as XmlUiThemeDefinition,
+  F as Text,
+  X as XmlUiHelper,
+  D as builtInThemes,
   c as createComponentRenderer,
   e as createMetadata,
   f as d,
-  y as errReportComponent,
+  x as errReportComponent,
   k as getColor,
   p as parseScssVar,
   h as startApp,
   t as toCssVar,
-  x as useApiWorkerContext,
   q as useColors,
   v as useDevTools,
   w as useLogger,
   u as useTheme,
-  z as xmlUiMarkupToComponent
+  y as xmlUiMarkupToComponent
 };

package/dist/metadata/style.css

@@ -2963,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%;
@@ -2998,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);
@@ -3021,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;
@@ -3037,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.