xmlui 0.9.34 → 0.9.36

package/dist/lib/xmlui.mjs

@@ -1,4 +1,4 @@
-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 { 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-BmTqBdiA.mjs";
 import { X } from "./xmlui-serializer-CQnuXBof.mjs";
 export {
   z as ApiInterceptorProvider,

package/dist/metadata/style.css

@@ -2273,39 +2273,42 @@ 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.
  */
-._container_rshqv_13 {
+._container_rso68_13 {
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: start;
   gap: 0.5em;
 }
-._container_rshqv_13._top_rshqv_20 {
+._container_rso68_13._top_rso68_20 {
   flex-direction: column;
   align-items: start;
   justify-content: center;
 }
-._container_rshqv_13._end_rshqv_25 {
+._container_rso68_13._end_rso68_25 {
   flex-direction: row-reverse;
   align-items: center;
   justify-content: start;
   gap: 0.5em;
 }
-._container_rshqv_13._bottom_rshqv_31 {
+._container_rso68_13._bottom_rso68_31 {
   flex-direction: column-reverse;
   align-items: start;
   justify-content: center;
 }
-._container_rshqv_13._start_rshqv_36 {
+._container_rso68_13._start_rso68_36 {
   flex-direction: row;
   align-items: center;
   justify-content: start;
   gap: 0.5em;
 }
-._container_rshqv_13._shrinkToLabel_rshqv_42 {
+._container_rso68_13._shrinkToLabel_rso68_42 {
   width: fit-content;
 }
-._container_rshqv_13 ._inputLabel_rshqv_45 {
+._container_rso68_13 ._itemWithLabel_rso68_45 {
+  width: 100%;
+}
+._container_rso68_13 ._inputLabel_rso68_48 {
   display: flex;
   color: var(--xmlui-textColor-FormItemLabel);
   font-family: var(--xmlui-fontFamily-FormItemLabel);
@@ -2318,22 +2321,22 @@ See this source for details: https://css-tricks.com/line-clampin/
   word-break: normal;
   white-space: nowrap;
 }
-._container_rshqv_13 ._inputLabel_rshqv_45._disabled_rshqv_58 {
+._container_rso68_13 ._inputLabel_rso68_48._disabled_rso68_61 {
   cursor: not-allowed;
   color: var(--xmlui-textColor--disabled);
 }
-._container_rshqv_13 ._inputLabel_rshqv_45._labelBreak_rshqv_62 {
+._container_rso68_13 ._inputLabel_rso68_48._labelBreak_rso68_65 {
   white-space: normal;
   word-break: break-word;
 }
-._container_rshqv_13 ._inputLabel_rshqv_45._required_rshqv_66 {
+._container_rso68_13 ._inputLabel_rso68_48._required_rso68_69 {
   color: var(--xmlui-textColor-FormItemLabel-required);
   font-size: var(--xmlui-fontSize-FormItemLabel-required);
   font-weight: var(--xmlui-fontWeight-FormItemLabel-required);
   font-style: var(--xmlui-fontStyle-FormItemLabel-required);
   text-transform: var(--xmlui-textTransform-FormItemLabel-required);
 }
-._container_rshqv_13 ._inputLabel_rshqv_45 ._requiredMark_rshqv_73 {
+._container_rso68_13 ._inputLabel_rso68_48 ._requiredMark_rso68_76 {
   margin-left: 0.2em;
   color: var(--xmlui-textColor-FormItemLabel-requiredMark);
 }/*
@@ -2804,7 +2807,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 +2842,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);
+}
+._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);
 }
-._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: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,
@@ -1627,17 +1627,18 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 const themeVars$H = `'{"textColor-FormItemLabel": "var(--xmlui-textColor-FormItemLabel)", "fontFamily-FormItemLabel": "var(--xmlui-fontFamily-FormItemLabel)", "fontSize-FormItemLabel": "var(--xmlui-fontSize-FormItemLabel)", "fontWeight-FormItemLabel": "var(--xmlui-fontWeight-FormItemLabel)", "fontStyle-FormItemLabel": "var(--xmlui-fontStyle-FormItemLabel)", "textTransform-FormItemLabel": "var(--xmlui-textTransform-FormItemLabel)", "textColor-FormItemLabel-required": "var(--xmlui-textColor-FormItemLabel-required)", "fontSize-FormItemLabel-required": "var(--xmlui-fontSize-FormItemLabel-required)", "fontWeight-FormItemLabel-required": "var(--xmlui-fontWeight-FormItemLabel-required)", "fontStyle-FormItemLabel-required": "var(--xmlui-fontStyle-FormItemLabel-required)", "textTransform-FormItemLabel-required": "var(--xmlui-textTransform-FormItemLabel-required)", "textColor-FormItemLabel-requiredMark": "var(--xmlui-textColor-FormItemLabel-requiredMark)"}'`;
-const container$3 = "_container_rshqv_13";
-const top = "_top_rshqv_20";
-const end = "_end_rshqv_25";
-const bottom = "_bottom_rshqv_31";
-const start = "_start_rshqv_36";
-const shrinkToLabel = "_shrinkToLabel_rshqv_42";
-const inputLabel = "_inputLabel_rshqv_45";
-const disabled$8 = "_disabled_rshqv_58";
-const labelBreak = "_labelBreak_rshqv_62";
-const required = "_required_rshqv_66";
-const requiredMark = "_requiredMark_rshqv_73";
+const container$3 = "_container_rso68_13";
+const top = "_top_rso68_20";
+const end = "_end_rso68_25";
+const bottom = "_bottom_rso68_31";
+const start = "_start_rso68_36";
+const shrinkToLabel = "_shrinkToLabel_rso68_42";
+const itemWithLabel = "_itemWithLabel_rso68_45";
+const inputLabel = "_inputLabel_rso68_48";
+const disabled$8 = "_disabled_rso68_61";
+const labelBreak = "_labelBreak_rso68_65";
+const required = "_required_rso68_69";
+const requiredMark = "_requiredMark_rso68_76";
 const styles$I = {
   themeVars: themeVars$H,
   container: container$3,
@@ -1646,6 +1647,7 @@ const styles$I = {
   bottom,
   start,
   shrinkToLabel,
+  itemWithLabel,
   inputLabel,
   disabled: disabled$8,
   labelBreak,
@@ -1708,7 +1710,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   if (label2 === void 0 && !validationResult) {
     return /* @__PURE__ */ jsx(Slot, { style, id: inputId, ref, children });
   }
-  return /* @__PURE__ */ jsxs("div", { style, ref, children: [
+  return /* @__PURE__ */ jsxs("div", { style, ref, className: styles$I.itemWithLabel, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3222,23 +3224,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 +3327,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 +3355,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 +3390,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 +17433,7 @@ forwardRef(function NavGroup2({
   icon,
   renderChild,
   to,
+  disabled: disabled2 = false,
   initiallyExpanded,
   iconHorizontalCollapsed,
   iconHorizontalExpanded,
@@ -17447,7 +17455,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 +17472,8 @@ forwardRef(function NavGroup2({
       node,
       renderChild,
       ref,
-      initiallyExpanded
+      initiallyExpanded,
+      disabled: disabled2
     }
   ) : /* @__PURE__ */ jsx(
     DropDownNavGroup,
@@ -17468,7 +17483,8 @@ forwardRef(function NavGroup2({
       node,
       renderChild,
       ref,
-      to
+      to,
+      disabled: disabled2
     }
   ) });
 });
@@ -17479,7 +17495,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 +17505,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 +17543,8 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
   icon,
   renderChild,
   node,
-  to
+  to,
+  disabled: disabled2 = false
 }, ref) {
   const {
     level,
@@ -17536,7 +17564,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 +17605,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"