xmlui 0.9.34 → 0.9.35

package/dist/metadata/style.css

@@ -2804,7 +2804,16 @@ 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.
  */
-._content_buj87_13._base_buj87_13 {
+._linkWrapper_9n0c1_13 {
+  outline: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-shrink: 0;
+  white-space: nowrap;
+  gap: var(--xmlui-space-2);
   border-left: var(--xmlui-borderLeft-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)));
   border-right: var(--xmlui-borderRight-NavLink, var(--xmlui-borderHorizontal-NavLink, var(--xmlui-border-NavLink)));
   border-top: var(--xmlui-borderTop-NavLink, var(--xmlui-borderVertical-NavLink, var(--xmlui-border-NavLink)));
@@ -2830,127 +2839,91 @@ See this source for details: https://css-tricks.com/line-clampin/
   padding-right: var(--xmlui-paddingRight-NavLink, var(--xmlui-paddingHorizontal-NavLink, var(--xmlui-padding-NavLink)));
   padding-top: var(--xmlui-paddingTop-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)));
   padding-bottom: var(--xmlui-paddingBottom-NavLink, var(--xmlui-paddingVertical-NavLink, var(--xmlui-padding-NavLink)));
-  outline: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--xmlui-space-2);
   font-size: var(--xmlui-fontSize-NavLink);
   font-weight: var(--xmlui-fontWeight-NavLink);
   font-family: var(--xmlui-fontFamily-NavLink);
   word-wrap: var(--xmlui-wordWrap-NavLink);
-  position: relative;
-  transition: color 0.1s, background-color 0.1s;
   color: var(--xmlui-textColor-NavLink);
   background-color: var(--xmlui-backgroundColor-NavLink);
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-._content_buj87_13._base_buj87_13 ._icon_buj87_56 {
-  color: var(--xmlui-color-icon-NavLink);
+  transition: color 0.1s, background-color 0.1s;
 }
-._content_buj87_13._base_buj87_13 * {
+._linkWrapper_9n0c1_13 * {
   color: var(--xmlui-textColor-NavLink);
 }
-._content_buj87_13._base_buj87_13._includeHoverIndicator_buj87_62:after {
-  transition: color 0.1s, background-color 0.1s;
-  position: absolute;
-  left: 0.1em;
-  right: 0.1em;
-  bottom: 0;
-  height: var(--xmlui-thickness-indicator-NavLink);
-  border-radius: var(--xmlui-borderRadius-indicator-NavLink);
-  content: "";
-}
-._content_buj87_13._base_buj87_13:hover._displayActive_buj87_72, ._content_buj87_13._base_buj87_13:focus-visible {
-  color: var(--xmlui-textColor-NavLink--hover);
-  background-color: var(--xmlui-backgroundColor-NavLink--hover);
+._linkWrapper_9n0c1_13 ._icon_9n0c1_59 {
+  color: var(--xmlui-color-icon-NavLink);
 }
-._content_buj87_13._base_buj87_13:hover._displayActive_buj87_72 *, ._content_buj87_13._base_buj87_13:focus-visible * {
-  color: var(--xmlui-textColor-NavLink--hover);
+._linkWrapper_9n0c1_13._disabled_9n0c1_62 {
+  cursor: not-allowed;
+  color: var(--xmlui-textColor--disabled);
 }
-._content_buj87_13._base_buj87_13:hover._displayActive_buj87_72:after, ._content_buj87_13._base_buj87_13:focus-visible:after {
-  background-color: var(--xmlui-color-indicator-NavLink--hover);
+._linkWrapper_9n0c1_13._disabled_9n0c1_62 ._icon_9n0c1_59 {
+  color: var(--xmlui-textColor--disabled);
 }
-._content_buj87_13._base_buj87_13:focus-visible {
+._linkWrapper_9n0c1_13:focus-visible {
   outline-width: var(--xmlui-outlineWidth-NavLink--focus);
   outline-color: var(--xmlui-outlineColor-NavLink--focus);
   outline-style: var(--xmlui-outlineStyle-NavLink--focus);
   outline-offset: var(--xmlui-outlineOffset-NavLink--focus);
 }
-._content_buj87_13._base_buj87_13[role=menuitem] {
+._linkWrapper_9n0c1_13[role=menuitem] {
   outline: none;
 }
-._content_buj87_13._base_buj87_13[role=menuitem]:not(:hover):focus-visible {
+._linkWrapper_9n0c1_13[role=menuitem]:not(:hover):focus-visible {
   outline-width: var(--xmlui-outlineWidth-NavLink--focus);
   outline-color: var(--xmlui-outlineColor-NavLink--focus);
   outline-style: var(--xmlui-outlineStyle-NavLink--focus);
   outline-offset: var(--xmlui-outlineOffset-NavLink--focus);
 }
-._content_buj87_13._base_buj87_13:active._displayActive_buj87_72 {
-  color: var(--xmlui-textColor-NavLink--pressed);
-  background-color: var(--xmlui-backgroundColor-NavLink--pressed);
-  font-weight: var(--xmlui-fontWeight-NavLink--pressed);
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:after {
+  transition: color 0.1s, background-color 0.1s;
+  position: absolute;
+  left: 0.1em;
+  right: 0.1em;
+  bottom: 0;
+  height: var(--xmlui-thickness-indicator-NavLink);
+  border-radius: var(--xmlui-borderRadius-indicator-NavLink);
+  content: "";
+}
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84._vertical_9n0c1_94:after {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: auto;
+  width: var(--xmlui-thickness-indicator-NavLink);
+  height: auto;
 }
-._content_buj87_13._base_buj87_13:active._displayActive_buj87_72 * {
-  font-weight: var(--xmlui-fontWeight-NavLink--pressed);
-  color: var(--xmlui-textColor-NavLink--pressed);
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):hover, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):hover {
+  color: var(--xmlui-textColor-NavLink--hover);
+  background-color: var(--xmlui-backgroundColor-NavLink--hover);
 }
-._content_buj87_13._base_buj87_13:active._displayActive_buj87_72:after {
-  background-color: var(--xmlui-color-indicator-NavLink--pressed);
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):hover *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):hover * {
+  color: var(--xmlui-textColor-NavLink--hover);
+}
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):hover:after, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):hover:after {
+  background-color: var(--xmlui-color-indicator-NavLink--hover);
 }
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109 {
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):active, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):active, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled])._active_9n0c1_112, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled])._active_9n0c1_112 {
   color: var(--xmlui-textColor-NavLink--active);
   background-color: var(--xmlui-backgroundColor-NavLink--active);
   font-weight: var(--xmlui-fontWeight-NavLink--active);
 }
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109 * {
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):active *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):active *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled])._active_9n0c1_112 *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled])._active_9n0c1_112 * {
   font-weight: var(--xmlui-fontWeight-NavLink--active);
   color: var(--xmlui-textColor-NavLink--active);
 }
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109 > * {
-  z-index: 1;
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):active:after, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):active:after, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled])._active_9n0c1_112:after, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled])._active_9n0c1_112:after {
+  background-color: var(--xmlui-color-indicator-NavLink--active);
 }
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109:hover {
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):active:hover, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):active:hover, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled])._active_9n0c1_112:hover, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled])._active_9n0c1_112:hover {
   color: var(--xmlui-textColor-NavLink--hover--active);
   background-color: var(--xmlui-backgroundColor-NavLink--hover--active);
 }
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109:hover * {
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled]):active:hover *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled]):active:hover *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([disabled])._active_9n0c1_112:hover *, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:not([class*=disabled])._active_9n0c1_112:hover * {
   color: var(--xmlui-textColor-NavLink--hover--active);
 }
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109:after {
-  z-index: 0;
-  background-color: var(--xmlui-color-indicator-NavLink--active);
-}
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109:active {
-  color: var(--xmlui-textColor-NavLink--pressed--active);
-  background-color: var(--xmlui-backgroundColor-NavLink--pressed--active);
-  font-weight: var(--xmlui-fontWeight-NavLink--pressed);
-}
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109:active * {
-  font-weight: var(--xmlui-fontWeight-NavLink--pressed);
-  color: var(--xmlui-textColor-NavLink--pressed--active);
-}
-._content_buj87_13._base_buj87_13._navItemActive_buj87_109:active:after {
-  background-color: var(--xmlui-color-indicator-NavLink--pressed);
-}
-._content_buj87_13._base_buj87_13._disabled_buj87_144 {
-  cursor: not-allowed;
-  color: var(--xmlui-textColor--disabled);
-}
-._content_buj87_13._base_buj87_13._vertical_buj87_148:after {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: auto;
-  width: var(--xmlui-thickness-indicator-NavLink);
-  height: auto;
-  border-radius: var(--xmlui-borderRadius-indicator-NavLink);
-}
-._content_buj87_13._base_buj87_13._indented_buj87_157 {
-  padding-left: 2.4em;
-  flex-shrink: 0;
+._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84:disabled._active_9n0c1_112:after, ._linkWrapper_9n0c1_13._displayIndicator_9n0c1_84._disabled_9n0c1_62._active_9n0c1_112:after {
+  background-color: var(--xmlui-textColor--disabled);
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
  *

package/dist/metadata/xmlui-metadata.mjs

@@ -488,10 +488,10 @@ function dOrientation(defaultValue, isRequired = false) {
   };
 }
 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);
@@ -1206,7 +1206,7 @@ const ButtonMd = createMetadata({
   }
 });
 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$4 = "_vertical_724s4_39";
@@ -1223,7 +1223,7 @@ const alignItemsEnd = "_alignItemsEnd_724s4_84";
 const alignItemsBaseline = "_alignItemsBaseline_724s4_88";
 const styles$M = {
   themeVars: themeVars$K,
-  base: base$1,
+  base,
   hoverContainer,
   handlesClick,
   vertical: vertical$4,
@@ -3222,23 +3222,19 @@ const Logo = forwardRef(function Logo2({
     }
   );
 });
-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$3 = "_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$3
+  displayIndicator,
+  vertical: vertical$3,
+  active: active$3
 };
 function createUrlWithQueryParams(to) {
   if (!to || typeof to === "string" || typeof to === "number") {
@@ -3329,16 +3325,24 @@ const NavLink = forwardRef(function NavLink2({
   disabled: disabled2,
   to,
   sx = {},
-  displayActive: displayActive2 = true,
+  displayActive = true,
+  forceActive,
   vertical: vertical2,
   style,
   onClick,
   icon,
-  forceActive,
   ...rest
 }, ref) {
   const appLayoutContext = useAppLayoutContext();
   const navPanelContext = useContext(NavPanelContext);
+  const [isClicked, setIsClicked] = useState(false);
+  const onClickForButton = 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);
@@ -3349,21 +3353,23 @@ const NavLink = forwardRef(function NavLink2({
     }
   }, [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__ */ jsxs(
       "button",
       {
+        id: uid,
         ...rest,
         ref,
-        onClick,
-        className: baseClasses,
+        onClick: onClickForButton,
+        className: classnames(sharedClasses, {
+          [navLinkStyles.active]: displayActive && (isClicked || forceActive)
+        }),
         style: styleObj,
         disabled: disabled2,
         children: [
@@ -3382,9 +3388,8 @@ const NavLink = forwardRef(function NavLink2({
         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,
@@ -17426,6 +17431,7 @@ forwardRef(function NavGroup2({
   icon,
   renderChild,
   to,
+  disabled: disabled2 = false,
   initiallyExpanded,
   iconHorizontalCollapsed,
   iconHorizontalExpanded,
@@ -17447,7 +17453,13 @@ forwardRef(function NavGroup2({
       iconVerticalCollapsed: iconVerticalCollapsed ?? defaultProps$3.iconVerticalCollapsed,
       iconVerticalExpanded: iconVerticalExpanded ?? defaultProps$3.iconVerticalExpanded
     };
-  }, [iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, level]);
+  }, [
+    iconHorizontalCollapsed,
+    iconHorizontalExpanded,
+    iconVerticalCollapsed,
+    iconVerticalExpanded,
+    level
+  ]);
   return /* @__PURE__ */ jsx(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? /* @__PURE__ */ jsx(
     ExpandableNavGroup,
     {
@@ -17458,7 +17470,8 @@ forwardRef(function NavGroup2({
       node,
       renderChild,
       ref,
-      initiallyExpanded
+      initiallyExpanded,
+      disabled: disabled2
     }
   ) : /* @__PURE__ */ jsx(
     DropDownNavGroup,
@@ -17468,7 +17481,8 @@ forwardRef(function NavGroup2({
       node,
       renderChild,
       ref,
-      to
+      to,
+      disabled: disabled2
     }
   ) });
 });
@@ -17479,7 +17493,8 @@ const ExpandableNavGroup = forwardRef(function ExpandableNavGroup2({
   renderChild,
   node,
   to,
-  initiallyExpanded = false
+  initiallyExpanded = false,
+  disabled: disabled2 = false
 }, ref) {
   const { level, iconVerticalCollapsed, iconVerticalExpanded } = useContext(NavGroupContext);
   const [expanded, setExpanded] = useState(initiallyExpanded);
@@ -17488,11 +17503,21 @@ const ExpandableNavGroup = forwardRef(function ExpandableNavGroup2({
     paddingLeft: level >= 1 ? level * 2 + "em" : void 0
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon, to, children: [
-      label2,
-      /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-      /* @__PURE__ */ jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      NavLink,
+      {
+        style: toggleStyle,
+        onClick: () => setExpanded((prev) => !prev),
+        icon,
+        to,
+        disabled: disabled2,
+        children: [
+          label2,
+          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })
+        ]
+      }
+    ),
     expanded && renderChild(node.children, {
       wrapChild: ({ node: node2 }, renderedChild) => {
         if (node2.type === "NavLink") {
@@ -17516,7 +17541,8 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
   icon,
   renderChild,
   node,
-  to
+  to,
+  disabled: disabled2 = false
 }, ref) {
   const {
     level,
@@ -17536,7 +17562,7 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
   }
   const [expanded, setExpanded] = useState(false);
   return /* @__PURE__ */ jsxs(Wrapper, { onOpenChange: (open) => setExpanded(open), children: [
-    /* @__PURE__ */ jsx(Trigger2, { asChild: true, children: /* @__PURE__ */ jsxs(NavLink, { icon, style: { flexShrink: 0 }, vertical: level >= 1, to, children: [
+    /* @__PURE__ */ jsx(Trigger2, { asChild: true, disabled: disabled2, children: /* @__PURE__ */ jsxs(NavLink, { icon, style: { flexShrink: 0 }, vertical: level >= 1, to, disabled: disabled2, children: [
       label2,
       /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
       level === 0 && /* @__PURE__ */ jsx(Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed }),
@@ -17577,10 +17603,11 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
 });
 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"