xmlui 0.9.33 → 0.9.35

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

@@ -485,10 +485,10 @@
     };
   }
   const themeVars$L = `'{"size-Icon": "var(--xmlui-size-Icon)", "thickness-stroke-Icon": "var(--xmlui-thickness-stroke-Icon)"}'`;
-  const base$2 = "_base_13qtg_13";
+  const base$1 = "_base_13qtg_13";
   const styles$N = {
     themeVars: themeVars$L,
-    base: base$2
+    base: base$1
   };
   function capitalizeFirstLetter(str) {
     return str[0].toUpperCase() + str.substring(1);
@@ -1203,10 +1203,10 @@
     }
   });
   const themeVars$K = '"[]"';
-  const base$1 = "_base_724s4_13";
+  const base = "_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";
@@ -1220,10 +1220,10 @@
   const alignItemsBaseline = "_alignItemsBaseline_724s4_88";
   const styles$M = {
     themeVars: themeVars$K,
-    base: base$1,
+    base,
     hoverContainer,
     handlesClick,
-    vertical: vertical$3,
+    vertical: vertical$4,
     reverse,
     horizontal: horizontal$3,
     justifyItemsStart,
@@ -3219,23 +3219,19 @@
       }
     );
   });
-  const themeVars$C = `'{"padding-NavLink": "var(--xmlui-padding-NavLink)", "paddingHorizontal-NavLink": "var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink))", "paddingVertical-NavLink": "var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink))", "paddingLeft-NavLink": "var(--xmlui-paddingLeft-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingRight-NavLink": "var(--xmlui-paddingRight-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingTop-NavLink": "var(--xmlui-paddingTop-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "paddingBottom-NavLink": "var(--xmlui-paddingBottom-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "border-NavLink": "var(--xmlui-border-NavLink)", "borderHorizontal-NavLink": "var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink))", "borderVertical-NavLink": "var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink))", "borderLeft-NavLink": "var(--xmlui-borderLeft-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderRight-NavLink": "var(--xmlui-borderRight-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderTop-NavLink": "var(--xmlui-borderTop-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderBottom-NavLink": "var(--xmlui-borderBottom-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderWidth-NavLink": "var(--xmlui-borderWidth-NavLink)", "borderHorizontalWidth-NavLink": "var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderLeftWidth-NavLink": "var(--xmlui-borderLeftWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderRightWidth-NavLink": "var(--xmlui-borderRightWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderVerticalWidth-NavLink": "var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderTopWidth-NavLink": "var(--xmlui-borderTopWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderBottomWidth-NavLink": "var(--xmlui-borderBottomWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderStyle-NavLink": "var(--xmlui-borderStyle-NavLink)", "borderHorizontalStyle-NavLink": "var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderLeftStyle-NavLink": "var(--xmlui-borderLeftStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderRightStyle-NavLink": "var(--xmlui-borderRightStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderVerticalStyle-NavLink": "var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderTopStyle-NavLink": "var(--xmlui-borderTopStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderBottomStyle-NavLink": "var(--xmlui-borderBottomStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderColor-NavLink": "var(--xmlui-borderColor-NavLink)", "borderHorizontalColor-NavLink": "var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderLeftColor-NavLink": "var(--xmlui-borderLeftColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderRightColor-NavLink": "var(--xmlui-borderRightColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderVerticalColor-NavLink": "var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderTopColor-NavLink": "var(--xmlui-borderTopColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderBottomColor-NavLink": "var(--xmlui-borderBottomColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderStartStartRadius-NavLink": "var(--xmlui-borderStartStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderStartEndRadius-NavLink": "var(--xmlui-borderStartEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndStartRadius-NavLink": "var(--xmlui-borderEndStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndEndRadius-NavLink": "var(--xmlui-borderEndEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "backgroundColor-NavLink": "var(--xmlui-backgroundColor-NavLink)", "backgroundColor-NavLink--hover": "var(--xmlui-backgroundColor-NavLink--hover)", "backgroundColor-NavLink--hover--active": "var(--xmlui-backgroundColor-NavLink--hover--active)", "backgroundColor-NavLink--active": "var(--xmlui-backgroundColor-NavLink--active)", "backgroundColor-NavLink--pressed": "var(--xmlui-backgroundColor-NavLink--pressed)", "backgroundColor-NavLink--pressed--active": "var(--xmlui-backgroundColor-NavLink--pressed--active)", "fontSize-NavLink": "var(--xmlui-fontSize-NavLink)", "wordWrap-NavLink": "var(--xmlui-wordWrap-NavLink)", "textColor-NavLink": "var(--xmlui-textColor-NavLink)", "textColor-NavLink--hover": "var(--xmlui-textColor-NavLink--hover)", "textColor-NavLink--active": "var(--xmlui-textColor-NavLink--active)", "textColor-NavLink--hover--active": "var(--xmlui-textColor-NavLink--hover--active)", "textColor-NavLink--pressed": "var(--xmlui-textColor-NavLink--pressed)", "textColor-NavLink--pressed--active": "var(--xmlui-textColor-NavLink--pressed--active)", "color-icon-NavLink": "var(--xmlui-color-icon-NavLink)", "fontFamily-NavLink": "var(--xmlui-fontFamily-NavLink)", "fontWeight-NavLink": "var(--xmlui-fontWeight-NavLink)", "fontWeight-NavLink--pressed": "var(--xmlui-fontWeight-NavLink--pressed)", "fontWeight-NavLink--active": "var(--xmlui-fontWeight-NavLink--active)", "borderRadius-indicator-NavLink": "var(--xmlui-borderRadius-indicator-NavLink)", "thickness-indicator-NavLink": "var(--xmlui-thickness-indicator-NavLink)", "color-indicator-NavLink": "var(--xmlui-color-indicator-NavLink)", "color-indicator-NavLink--hover": "var(--xmlui-color-indicator-NavLink--hover)", "color-indicator-NavLink--active": "var(--xmlui-color-indicator-NavLink--active)", "color-indicator-NavLink--pressed": "var(--xmlui-color-indicator-NavLink--pressed)", "outlineWidth-NavLink--focus": "var(--xmlui-outlineWidth-NavLink--focus)", "outlineColor-NavLink--focus": "var(--xmlui-outlineColor-NavLink--focus)", "outlineStyle-NavLink--focus": "var(--xmlui-outlineStyle-NavLink--focus)", "outlineOffset-NavLink--focus": "var(--xmlui-outlineOffset-NavLink--focus)"}'`;
-  const content$1 = "_content_buj87_13";
-  const base = "_base_buj87_13";
-  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 themeVars$C = `'{"padding-NavLink": "var(--xmlui-padding-NavLink)", "paddingHorizontal-NavLink": "var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink))", "paddingVertical-NavLink": "var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink))", "paddingLeft-NavLink": "var(--xmlui-paddingLeft-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingRight-NavLink": "var(--xmlui-paddingRight-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)))", "paddingTop-NavLink": "var(--xmlui-paddingTop-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "paddingBottom-NavLink": "var(--xmlui-paddingBottom-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)))", "border-NavLink": "var(--xmlui-border-NavLink)", "borderHorizontal-NavLink": "var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink))", "borderVertical-NavLink": "var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink))", "borderLeft-NavLink": "var(--xmlui-borderLeft-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderRight-NavLink": "var(--xmlui-borderRight-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)))", "borderTop-NavLink": "var(--xmlui-borderTop-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderBottom-NavLink": "var(--xmlui-borderBottom-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)))", "borderWidth-NavLink": "var(--xmlui-borderWidth-NavLink)", "borderHorizontalWidth-NavLink": "var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderLeftWidth-NavLink": "var(--xmlui-borderLeftWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderRightWidth-NavLink": "var(--xmlui-borderRightWidth-NavLink, var(--xmlui-borderHorizontalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderVerticalWidth-NavLink": "var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink))", "borderTopWidth-NavLink": "var(--xmlui-borderTopWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderBottomWidth-NavLink": "var(--xmlui-borderBottomWidth-NavLink, var(--xmlui-borderVerticalWidth-NavLink, var(--xmlui-borderWidth-NavLink)))", "borderStyle-NavLink": "var(--xmlui-borderStyle-NavLink)", "borderHorizontalStyle-NavLink": "var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderLeftStyle-NavLink": "var(--xmlui-borderLeftStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderRightStyle-NavLink": "var(--xmlui-borderRightStyle-NavLink, var(--xmlui-borderHorizontalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderVerticalStyle-NavLink": "var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink))", "borderTopStyle-NavLink": "var(--xmlui-borderTopStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderBottomStyle-NavLink": "var(--xmlui-borderBottomStyle-NavLink, var(--xmlui-borderVerticalStyle-NavLink, var(--xmlui-borderStyle-NavLink)))", "borderColor-NavLink": "var(--xmlui-borderColor-NavLink)", "borderHorizontalColor-NavLink": "var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderLeftColor-NavLink": "var(--xmlui-borderLeftColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderRightColor-NavLink": "var(--xmlui-borderRightColor-NavLink, var(--xmlui-borderHorizontalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderVerticalColor-NavLink": "var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink))", "borderTopColor-NavLink": "var(--xmlui-borderTopColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderBottomColor-NavLink": "var(--xmlui-borderBottomColor-NavLink, var(--xmlui-borderVerticalColor-NavLink, var(--xmlui-borderColor-NavLink)))", "borderStartStartRadius-NavLink": "var(--xmlui-borderStartStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderStartEndRadius-NavLink": "var(--xmlui-borderStartEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndStartRadius-NavLink": "var(--xmlui-borderEndStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "borderEndEndRadius-NavLink": "var(--xmlui-borderEndEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))", "outlineWidth-NavLink--focus": "var(--xmlui-outlineWidth-NavLink--focus)", "outlineColor-NavLink--focus": "var(--xmlui-outlineColor-NavLink--focus)", "outlineStyle-NavLink--focus": "var(--xmlui-outlineStyle-NavLink--focus)", "outlineOffset-NavLink--focus": "var(--xmlui-outlineOffset-NavLink--focus)", "fontFamily-NavLink": "var(--xmlui-fontFamily-NavLink)", "fontWeight-NavLink": "var(--xmlui-fontWeight-NavLink)", "fontWeight-NavLink--pressed": "var(--xmlui-fontWeight-NavLink--pressed)", "fontWeight-NavLink--active": "var(--xmlui-fontWeight-NavLink--active)", "fontSize-NavLink": "var(--xmlui-fontSize-NavLink)", "wordWrap-NavLink": "var(--xmlui-wordWrap-NavLink)", "backgroundColor-NavLink": "var(--xmlui-backgroundColor-NavLink)", "backgroundColor-NavLink--hover": "var(--xmlui-backgroundColor-NavLink--hover)", "backgroundColor-NavLink--active": "var(--xmlui-backgroundColor-NavLink--active)", "backgroundColor-NavLink--pressed": "var(--xmlui-backgroundColor-NavLink--pressed)", "textColor-NavLink": "var(--xmlui-textColor-NavLink)", "textColor-NavLink--hover": "var(--xmlui-textColor-NavLink--hover)", "textColor-NavLink--active": "var(--xmlui-textColor-NavLink--active)", "textColor-NavLink--hover--active": "var(--xmlui-textColor-NavLink--hover--active)", "textColor-NavLink--pressed": "var(--xmlui-textColor-NavLink--pressed)", "textColor-NavLink--pressed--active": "var(--xmlui-textColor-NavLink--pressed--active)", "color-icon-NavLink": "var(--xmlui-color-icon-NavLink)", "color-indicator-NavLink": "var(--xmlui-color-indicator-NavLink)", "color-indicator-NavLink--hover": "var(--xmlui-color-indicator-NavLink--hover)", "color-indicator-NavLink--active": "var(--xmlui-color-indicator-NavLink--active)", "backgroundColor-NavLink--hover--active": "var(--xmlui-backgroundColor-NavLink--hover--active)", "color-indicator-NavLink--pressed": "var(--xmlui-color-indicator-NavLink--pressed)", "backgroundColor-NavLink--pressed--active": "var(--xmlui-backgroundColor-NavLink--pressed--active)", "thickness-indicator-NavLink": "var(--xmlui-thickness-indicator-NavLink)", "borderRadius-indicator-NavLink": "var(--xmlui-borderRadius-indicator-NavLink)"}'`;
+  const linkWrapper = "_linkWrapper_9n0c1_13";
+  const disabled$7 = "_disabled_9n0c1_62";
+  const displayIndicator = "_displayIndicator_9n0c1_84";
+  const vertical$3 = "_vertical_9n0c1_94";
+  const active$3 = "_active_9n0c1_112";
   const navLinkStyles = {
     themeVars: themeVars$C,
-    content: content$1,
-    base,
-    includeHoverIndicator,
-    displayActive,
-    navItemActive,
+    linkWrapper,
     disabled: disabled$7,
-    vertical: vertical$2
+    displayIndicator,
+    vertical: vertical$3,
+    active: active$3
   };
   function createUrlWithQueryParams(to) {
     if (!to || typeof to === "string" || typeof to === "number") {
@@ -3249,17 +3245,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 +3287,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 +3305,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: [
@@ -3322,16 +3322,24 @@
     disabled: disabled2,
     to,
     sx = {},
-    displayActive: displayActive2 = true,
+    displayActive = true,
+    forceActive,
     vertical: vertical2,
     style,
     onClick,
     icon,
-    forceActive,
     ...rest
   }, ref) {
     const appLayoutContext = useAppLayoutContext();
     const navPanelContext = React.useContext(NavPanelContext);
+    const [isClicked, setIsClicked] = React.useState(false);
+    const onClickForButton = React.useCallback(
+      (event) => {
+        setIsClicked((last) => !last);
+        onClick == null ? void 0 : onClick(event);
+      },
+      [onClick]
+    );
     let safeVertical = vertical2;
     if (appLayoutContext && safeVertical === void 0) {
       safeVertical = getAppLayoutOrientation(appLayoutContext.layout) === "vertical" || (navPanelContext == null ? void 0 : navPanelContext.inDrawer);
@@ -3342,21 +3350,23 @@
       }
     }, [to]);
     const styleObj = { ...sx, ...style };
-    const baseClasses = classnames(navLinkStyles.content, navLinkStyles.base, {
+    const sharedClasses = classnames(navLinkStyles.linkWrapper, {
       [navLinkStyles.disabled]: disabled2,
       [navLinkStyles.vertical]: safeVertical,
-      [navLinkStyles.includeHoverIndicator]: displayActive2,
-      [navLinkStyles.navItemActive]: displayActive2 && forceActive
+      [navLinkStyles.displayIndicator]: displayActive
     });
-    let content2;
+    let content2 = null;
     if (disabled2 || !smartTo) {
       content2 = /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
+          id: uid,
           ...rest,
           ref,
-          onClick,
-          className: baseClasses,
+          onClick: onClickForButton,
+          className: classnames(sharedClasses, {
+            [navLinkStyles.active]: displayActive && (isClicked || forceActive)
+          }),
           style: styleObj,
           disabled: disabled2,
           children: [
@@ -3375,9 +3385,8 @@
           to: smartTo,
           style: styleObj,
           onClick,
-          className: ({ isActive }) => classnames(baseClasses, {
-            [navLinkStyles.displayActive]: displayActive2,
-            [navLinkStyles.navItemActive]: displayActive2 && (isActive || forceActive)
+          className: ({ isActive }) => classnames(sharedClasses, {
+            [navLinkStyles.active]: displayActive && (isActive || forceActive)
           }),
           children: [
             icon,
@@ -17179,7 +17188,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 +17412,7 @@
     iconHorizontalExpanded: "chevronleft",
     iconHorizontalCollapsed: "chevronright",
     iconVerticalExpanded: "chevrondown",
-    iconVerticalCollapsed: "chevronright"
+    iconVerticalCollapsed: "chevronup"
   };
   const NavGroupContext = React.createContext({
     level: -1,
@@ -17419,6 +17428,7 @@
     icon,
     renderChild,
     to,
+    disabled: disabled2 = false,
     initiallyExpanded,
     iconHorizontalCollapsed,
     iconHorizontalExpanded,
@@ -17440,7 +17450,13 @@
         iconVerticalCollapsed: iconVerticalCollapsed ?? defaultProps$3.iconVerticalCollapsed,
         iconVerticalExpanded: iconVerticalExpanded ?? defaultProps$3.iconVerticalExpanded
       };
-    }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
+    }, [
+      iconHorizontalCollapsed,
+      iconHorizontalExpanded,
+      iconVerticalCollapsed,
+      iconVerticalExpanded,
+      level
+    ]);
     return /* @__PURE__ */ jsxRuntime.jsx(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? /* @__PURE__ */ jsxRuntime.jsx(
       ExpandableNavGroup,
       {
@@ -17451,7 +17467,8 @@
         node,
         renderChild,
         ref,
-        initiallyExpanded
+        initiallyExpanded,
+        disabled: disabled2
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       DropDownNavGroup,
@@ -17461,7 +17478,8 @@
         node,
         renderChild,
         ref,
-        to
+        to,
+        disabled: disabled2
       }
     ) });
   });
@@ -17472,7 +17490,8 @@
     renderChild,
     node,
     to,
-    initiallyExpanded = false
+    initiallyExpanded = false,
+    disabled: disabled2 = false
   }, ref) {
     const { level, iconVerticalCollapsed, iconVerticalExpanded } = React.useContext(NavGroupContext);
     const [expanded, setExpanded] = React.useState(initiallyExpanded);
@@ -17481,11 +17500,21 @@
       paddingLeft: level >= 1 ? level * 2 + "em" : void 0
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon, to, children: [
-        label2,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        NavLink,
+        {
+          style: toggleStyle,
+          onClick: () => setExpanded((prev) => !prev),
+          icon,
+          to,
+          disabled: disabled2,
+          children: [
+            label2,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })
+          ]
+        }
+      ),
       expanded && renderChild(node.children, {
         wrapChild: ({ node: node2 }, renderedChild) => {
           if (node2.type === "NavLink") {
@@ -17509,7 +17538,8 @@
     icon,
     renderChild,
     node,
-    to
+    to,
+    disabled: disabled2 = false
   }, ref) {
     const {
       level,
@@ -17529,7 +17559,7 @@
     }
     const [expanded, setExpanded] = React.useState(false);
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { icon, style: { flexShrink: 0 }, vertical: level >= 1, to, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Trigger, { asChild: true, disabled: disabled2, children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { icon, style: { flexShrink: 0 }, vertical: level >= 1, to, disabled: disabled2, children: [
         label2,
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
         level === 0 && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }),
@@ -17570,10 +17600,11 @@
   });
   const COMP$m = "NavGroup";
   const NavGroupMd = createMetadata({
-    description: `The \`NavGroup\` component is a container for grouping related navigation targets (\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
+    description: `The \`${COMP$m}\` component is a container for grouping related navigation targets (\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
     props: {
       label: dLabel(),
       initiallyExpanded: d("This property defines whether the group is initially expanded or collapsed."),
+      enabled: dEnabled(),
       to: {
         description: `This property defines an optional navigation link.`,
         valueType: "string"

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.35",
     "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/NavGroup.js

@@ -15,11 +15,12 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NavGroupNative_1 = require("./NavGroupNative");
 const COMP = "NavGroup";
 exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`NavGroup\` component is a container for grouping related navigation targets ` +
+    description: `The \`${COMP}\` component is a container for grouping related navigation targets ` +
         `(\`NavLink\` components). It can be displayed as a submenu in the App's UI.`,
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         initiallyExpanded: (0, ComponentDefs_1.d)('This property defines whether the group is initially expanded or collapsed.'),
+        enabled: (0, metadata_helpers_1.dEnabled)(),
         to: {
             description: `This property defines an optional navigation link.`,
             valueType: "string",
@@ -61,5 +62,6 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(NavGroupNative_1.NavGroup, { label: extractValue.asDisplayText(node.props.label), disabled: !extractValue.asOptionalBoolean((_a = node.props.enabled) !== null && _a !== void 0 ? _a : true), to: extractValue.asOptionalString(node.props.to), icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue.asString(node.props.icon), className: NavLink_module_scss_1.default.icon }), node: node, initiallyExpanded: extractValue.asBoolean(node.props.initiallyExpanded), renderChild: renderChild, iconHorizontalExpanded: extractValue.asOptionalString(node.props.iconHorizontalExpanded), iconVerticalExpanded: extractValue.asOptionalString(node.props.iconVerticalExpanded), iconHorizontalCollapsed: extractValue.asOptionalString(node.props.iconHorizontalCollapsed), iconVerticalCollapsed: extractValue.asOptionalString(node.props.iconVerticalCollapsed) }));
 });

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,
@@ -28,7 +28,7 @@ const NavGroupContext = (0, react_1.createContext)({
     iconVerticalCollapsed: exports.defaultProps.iconVerticalCollapsed,
     iconVerticalExpanded: exports.defaultProps.iconVerticalExpanded,
 });
-exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
+exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
     const { level } = (0, react_1.useContext)(NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
@@ -46,14 +46,20 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
             iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
             iconVerticalExpanded: iconVerticalExpanded !== null && iconVerticalExpanded !== void 0 ? iconVerticalExpanded : exports.defaultProps.iconVerticalExpanded,
         };
-    }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to })) }));
+    }, [
+        iconHorizontalCollapsed,
+        iconHorizontalExpanded,
+        iconVerticalCollapsed,
+        iconVerticalExpanded,
+        level,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
 });
-const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, }, ref) {
+const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false, }, ref) {
     const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext);
     const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
     const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? level * 2 + "em" : undefined });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), expanded &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), expanded &&
                 renderChild(node.children, {
                     wrapChild: ({ node }, renderedChild) => {
                         if (node.type === "NavLink") {
@@ -68,7 +74,7 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({
                     },
                 })] }));
 });
-const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, }, ref) {
+const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, disabled = false, }, ref) {
     const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext);
     const { root } = (0, ThemeContext_1.useTheme)();
     let Wrapper = react_dropdown_menu_1.DropdownMenu;
@@ -80,7 +86,7 @@ const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ sty
         Content = react_dropdown_menu_1.DropdownMenuSubContent;
     }
     const [expanded, setExpanded] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), level === 0 && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }), level >= 1 && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconHorizontalExpanded : iconHorizontalCollapsed }))] }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [(0, jsx_runtime_1.jsx)(Trigger, { asChild: true, disabled: disabled, children: (0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { icon: icon, style: { flexShrink: 0 }, vertical: level >= 1, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), level === 0 && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }), level >= 1 && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconHorizontalExpanded : iconHorizontalCollapsed }))] }) }), (0, jsx_runtime_1.jsx)(react_dropdown_menu_1.DropdownMenuPortal, { container: root, children: (0, jsx_runtime_1.jsx)(Content, { className: NavGroup_module_scss_1.default.dropdownList, style: { display: "flex", flexDirection: "column" }, side: "bottom", align: "start", children: renderChild(node.children, {
                         wrapChild: ({ node }, renderedChild, hints) => {
                             if (hints === null || hints === void 0 ? void 0 : hints.opaque) {
                                 return renderedChild;

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -27,9 +27,19 @@ const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
-    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    uid, children, disabled, to, sx = {}, displayActive = true, forceActive, vertical, style, onClick, icon } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "forceActive", "vertical", "style", "onClick", "icon"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    // This is for applying the active indicator for the button
+    //
+    // NOTE: there is a bug if you use Actions.navigate in the onClick handler, the indicator is not removed after click
+    // The issue needs to be resolved by either using contextual state (the NavLink knows it is active or not)
+    // or by rethinking the component and removing the <button> -> Discuss!
+    const [isClicked, setIsClicked] = (0, react_1.useState)(false);
+    const onClickForButton = (0, react_1.useCallback)((event) => {
+        setIsClicked((last) => !last);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [onClick]);
     let safeVertical = vertical;
     if (appLayoutContext && safeVertical === undefined) {
         safeVertical =
@@ -41,20 +51,20 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
         }
     }, [to]);
     const styleObj = Object.assign(Object.assign({}, sx), style);
-    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
+    const sharedClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.linkWrapper, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
-        [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
-        [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
+        [NavLink_module_scss_1.default.displayIndicator]: displayActive,
     });
-    let content;
+    let content = null;
     if (disabled || !smartTo) {
-        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
+        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ id: uid }, rest, { ref: ref, onClick: onClickForButton, className: (0, classnames_1.default)(sharedClasses, {
+                [NavLink_module_scss_1.default.active]: displayActive && (isClicked || forceActive),
+            }), style: styleObj, disabled: disabled, children: [icon, children] })));
     }
     else {
-        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
-                [NavLink_module_scss_1.default.displayActive]: displayActive,
-                [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
+        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(sharedClasses, {
+                [NavLink_module_scss_1.default.active]: displayActive && (isActive || forceActive),
             }), children: [icon, children] })));
     }
     return content;

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 })] }) }));
 });