xmlui 0.9.16 → 0.9.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,7 +12,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
12
12
  var _executor, _DeferredPromise_instances, decorate_fn, _a2;
13
13
  import { delay as delay$1, HttpResponse, http } from "msw";
14
14
  import { isArray, isObject as isObject$1, mapValues } from "lodash-es";
15
- import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-BjVxVHb3.mjs";
15
+ import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-BHUXwc-L.mjs";
16
16
  import Dexie from "dexie";
17
17
  var POSITIONALS_EXP = /(%?)(%([sdijo]))/g;
18
18
  function serializePositional(positional, flag) {
@@ -3395,20 +3395,22 @@ function createUrlWithQueryParams(to2) {
3395
3395
  return to2;
3396
3396
  }
3397
3397
  const themeVars$J = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
3398
- const wrapper$g = "_wrapper_qcc08_13";
3399
- const vertical$4 = "_vertical_qcc08_23";
3400
- const contentWrapper$1 = "_contentWrapper_qcc08_27";
3401
- const navPanelWrapper = "_navPanelWrapper_qcc08_33";
3402
- const PagesWrapper = "_PagesWrapper_qcc08_37";
3403
- const footerWrapper = "_footerWrapper_qcc08_41";
3404
- const sticky = "_sticky_qcc08_44";
3405
- const horizontal$5 = "_horizontal_qcc08_51";
3406
- const verticalFullHeader = "_verticalFullHeader_qcc08_73";
3407
- const PagesWrapperInner = "_PagesWrapperInner_qcc08_90";
3408
- const scrollWholePage = "_scrollWholePage_qcc08_102";
3409
- const headerWrapper$1 = "_headerWrapper_qcc08_105";
3410
- const content$2 = "_content_qcc08_27";
3411
- const noScrollbarGutters = "_noScrollbarGutters_qcc08_147";
3398
+ const wrapper$g = "_wrapper_rebcu_13";
3399
+ const vertical$4 = "_vertical_rebcu_23";
3400
+ const contentWrapper$1 = "_contentWrapper_rebcu_27";
3401
+ const navPanelWrapper = "_navPanelWrapper_rebcu_33";
3402
+ const PagesWrapper = "_PagesWrapper_rebcu_37";
3403
+ const footerWrapper = "_footerWrapper_rebcu_41";
3404
+ const sticky = "_sticky_rebcu_44";
3405
+ const horizontal$5 = "_horizontal_rebcu_51";
3406
+ const verticalFullHeader = "_verticalFullHeader_rebcu_73";
3407
+ const PagesWrapperInner = "_PagesWrapperInner_rebcu_90";
3408
+ const verticalConstrained = "_verticalConstrained_rebcu_102";
3409
+ const header$2 = "_header_rebcu_108";
3410
+ const scrollWholePage = "_scrollWholePage_rebcu_135";
3411
+ const headerWrapper$1 = "_headerWrapper_rebcu_138";
3412
+ const content$2 = "_content_rebcu_27";
3413
+ const noScrollbarGutters = "_noScrollbarGutters_rebcu_204";
3412
3414
  const styles$_ = {
3413
3415
  themeVars: themeVars$J,
3414
3416
  wrapper: wrapper$g,
@@ -3421,6 +3423,8 @@ const styles$_ = {
3421
3423
  horizontal: horizontal$5,
3422
3424
  verticalFullHeader,
3423
3425
  PagesWrapperInner,
3426
+ verticalConstrained,
3427
+ header: header$2,
3424
3428
  scrollWholePage,
3425
3429
  headerWrapper: headerWrapper$1,
3426
3430
  content: content$2,
@@ -4139,6 +4143,31 @@ function App({
4139
4143
  }
4140
4144
  );
4141
4145
  break;
4146
+ case "vertical-constrained-width":
4147
+ content2 = /* @__PURE__ */ jsxs(
4148
+ "div",
4149
+ {
4150
+ className: classnames(wrapperBaseClasses, styles$_.verticalConstrained),
4151
+ style: styleWithHelpers,
4152
+ ref: scrollPageContainerRef,
4153
+ children: [
4154
+ /* @__PURE__ */ jsx(
4155
+ "header",
4156
+ {
4157
+ className: classnames(styles$_.headerWrapper, styles$_.sticky),
4158
+ ref: headerRefCallback,
4159
+ children: /* @__PURE__ */ jsx("div", { className: styles$_.header, style: { paddingInline: 0 }, children: header2 })
4160
+ }
4161
+ ),
4162
+ /* @__PURE__ */ jsxs("div", { className: classnames(styles$_.content, styles$_.verticalConstrained), children: [
4163
+ navPanelVisible && /* @__PURE__ */ jsx("aside", { className: styles$_.navPanelWrapper, children: navPanel }),
4164
+ /* @__PURE__ */ jsx("main", { className: styles$_.contentWrapper, children: /* @__PURE__ */ jsx("div", { className: styles$_.PagesWrapper, ref: noScrollPageContainerRef, children: /* @__PURE__ */ jsx(ScrollContext.Provider, { value: scrollContainerRef, children: /* @__PURE__ */ jsx("div", { className: styles$_.PagesWrapperInner, style: pagesWrapperInnerStyle, children }) }) }) })
4165
+ ] }),
4166
+ /* @__PURE__ */ jsx("div", { className: styles$_.footerWrapper, ref: footerRefCallback, children: footer })
4167
+ ]
4168
+ }
4169
+ );
4170
+ break;
4142
4171
  case "condensed":
4143
4172
  case "condensed-sticky":
4144
4173
  content2 = /* @__PURE__ */ jsxs(
@@ -4229,6 +4258,7 @@ function getAppLayoutOrientation(appLayout) {
4229
4258
  case "vertical":
4230
4259
  case "vertical-sticky":
4231
4260
  case "vertical-full-header":
4261
+ case "vertical-constrained-width":
4232
4262
  return "vertical";
4233
4263
  default:
4234
4264
  return "horizontal";
@@ -20621,7 +20651,7 @@ const NavGroup = forwardRef(function NavGroup2({
20621
20651
  const { level } = useContext(NavGroupContext);
20622
20652
  const appLayoutContext = useAppLayoutContext();
20623
20653
  const navPanelContext = useContext(NavPanelContext);
20624
- let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
20654
+ let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
20625
20655
  if (navPanelContext !== null) {
20626
20656
  inline = navPanelContext.inDrawer;
20627
20657
  }
@@ -31615,7 +31645,7 @@ function IconProvider({ children }) {
31615
31645
  /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
31616
31646
  ] });
31617
31647
  }
31618
- const version = "0.9.16";
31648
+ const version = "0.9.18";
31619
31649
  const ApiInterceptorContext = createContext(null);
31620
31650
  function useApiInterceptorContext() {
31621
31651
  return useContext(ApiInterceptorContext);
@@ -35780,6 +35810,7 @@ function getTransitiveDependencies(directCompDepNames, components) {
35780
35810
  populateTransitiveDeps(directCompDepNames);
35781
35811
  return transitiveDeps;
35782
35812
  function populateTransitiveDeps(directCompDepNames2) {
35813
+ if (!directCompDepNames2) return;
35783
35814
  for (const directDep of directCompDepNames2) {
35784
35815
  if (!transitiveDeps.has(directDep)) {
35785
35816
  transitiveDeps.add(directDep);
@@ -35802,7 +35833,7 @@ function ApiInterceptorProvider({
35802
35833
  let interceptorWorker;
35803
35834
  (async () => {
35804
35835
  if (process.env.VITE_MOCK_ENABLED) {
35805
- const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-E5ylKYVg.mjs");
35836
+ const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-DtInaPQ_.mjs");
35806
35837
  if (interceptor) {
35807
35838
  interceptorWorker = await createApiInterceptorWorker(interceptor, apiWorker);
35808
35839
  if (!apiWorker) {
package/dist/index.css CHANGED
@@ -13,7 +13,7 @@
13
13
  @scope (#_ui-engine-theme-root) {
14
14
  :scope {
15
15
  line-height: 1.5;
16
- font-feature-settings: normal;
16
+ font-feature-settings: var(--xmlui-font-feature-settings);
17
17
  font-variation-settings: normal;
18
18
  -webkit-font-smoothing: antialiased;
19
19
  -moz-osx-font-smoothing: grayscale;
@@ -968,7 +968,7 @@
968
968
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
969
969
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
970
970
  */
971
- ._wrapper_qcc08_13 {
971
+ ._wrapper_rebcu_13 {
972
972
  --footer-height: 0px;
973
973
  --header-height: 0px;
974
974
  width: 100%;
@@ -978,138 +978,195 @@
978
978
  flex-direction: column;
979
979
  isolation: isolate;
980
980
  }
981
- ._wrapper_qcc08_13._vertical_qcc08_23 {
981
+ ._wrapper_rebcu_13._vertical_rebcu_23 {
982
982
  flex-direction: row;
983
983
  overflow: initial;
984
984
  }
985
- ._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
985
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._contentWrapper_rebcu_27 {
986
986
  overflow: auto;
987
987
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
988
988
  position: relative;
989
989
  scrollbar-gutter: stable both-edges;
990
990
  }
991
- ._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
991
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._navPanelWrapper_rebcu_33 {
992
992
  width: var(--xmlui-width-navPanel-App);
993
993
  flex-shrink: 0;
994
994
  }
995
- ._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
995
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._PagesWrapper_rebcu_37 {
996
996
  min-height: initial;
997
997
  flex: 1;
998
998
  }
999
- ._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
999
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._footerWrapper_rebcu_41 {
1000
1000
  position: static;
1001
1001
  }
1002
- ._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
1002
+ ._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._contentWrapper_rebcu_27 {
1003
1003
  scroll-padding-top: var(--header-height);
1004
1004
  }
1005
- ._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
1005
+ ._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
1006
1006
  position: sticky;
1007
1007
  bottom: 0;
1008
1008
  }
1009
- ._wrapper_qcc08_13._horizontal_qcc08_51 {
1009
+ ._wrapper_rebcu_13._horizontal_rebcu_51 {
1010
1010
  overflow: auto;
1011
1011
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1012
1012
  }
1013
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
1013
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._PagesWrapper_rebcu_37 {
1014
1014
  min-height: initial;
1015
1015
  }
1016
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
1016
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._footerWrapper_rebcu_41 {
1017
1017
  position: static;
1018
1018
  }
1019
- ._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
1019
+ ._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 {
1020
1020
  scroll-padding-top: var(--header-height);
1021
1021
  min-height: 100%;
1022
1022
  }
1023
- ._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
1023
+ ._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
1024
1024
  position: sticky;
1025
1025
  bottom: 0;
1026
1026
  }
1027
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
1027
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._navPanelWrapper_rebcu_33 {
1028
1028
  border-bottom: var(--xmlui-borderBottom-AppHeader);
1029
1029
  justify-content: end;
1030
1030
  }
1031
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
1031
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 {
1032
1032
  min-height: 100%;
1033
1033
  height: 100%;
1034
1034
  overflow: auto;
1035
1035
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1036
1036
  }
1037
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_33 {
1037
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._navPanelWrapper_rebcu_33 {
1038
1038
  width: var(--xmlui-width-navPanel-App);
1039
1039
  position: sticky;
1040
1040
  height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
1041
1041
  top: var(--header-height);
1042
1042
  }
1043
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
1043
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapper_rebcu_37 {
1044
1044
  overflow: initial;
1045
1045
  min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
1046
1046
  height: 100%;
1047
1047
  }
1048
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
1048
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 {
1049
1049
  height: 100%;
1050
1050
  }
1051
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
1051
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1052
1052
  height: 100%;
1053
1053
  }
1054
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
1054
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._footerWrapper_rebcu_41 {
1055
1055
  position: sticky;
1056
1056
  left: 0;
1057
1057
  right: 0;
1058
1058
  bottom: 0;
1059
1059
  }
1060
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
1060
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 {
1061
+ min-height: 100%;
1062
+ height: 100%;
1063
+ overflow: auto;
1064
+ scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1065
+ }
1066
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._header_rebcu_108 {
1067
+ max-width: var(--xmlui-maxWidth-content-App);
1068
+ margin: auto;
1069
+ }
1070
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._navPanelWrapper_rebcu_33 {
1071
+ width: var(--xmlui-width-navPanel-App);
1072
+ position: sticky;
1073
+ height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
1074
+ top: var(--header-height);
1075
+ }
1076
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapper_rebcu_37 {
1077
+ overflow: initial;
1078
+ min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
1079
+ height: 100%;
1080
+ }
1081
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 {
1082
+ height: 100%;
1083
+ }
1084
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1085
+ height: 100%;
1086
+ }
1087
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
1088
+ position: sticky;
1089
+ left: 0;
1090
+ right: 0;
1091
+ bottom: 0;
1092
+ }
1093
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 {
1061
1094
  scrollbar-gutter: stable both-edges;
1062
1095
  }
1063
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
1096
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 {
1097
+ margin-inline: calc(-1 * var(--scrollbar-width));
1098
+ }
1099
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 > div {
1100
+ padding-inline: var(--scrollbar-width);
1101
+ }
1102
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 {
1064
1103
  margin-inline: calc(-1 * var(--scrollbar-width));
1065
1104
  }
1066
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
1105
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 > div {
1067
1106
  padding-inline: var(--scrollbar-width);
1068
1107
  }
1069
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
1108
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 {
1109
+ scroll-padding-top: var(--header-height);
1110
+ }
1111
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._content_rebcu_27 {
1070
1112
  margin-inline: calc(-1 * var(--scrollbar-width));
1071
1113
  }
1072
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
1114
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._contentWrapper_rebcu_27 {
1073
1115
  padding-inline: var(--scrollbar-width);
1074
1116
  }
1075
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
1117
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 {
1076
1118
  scroll-padding-top: var(--header-height);
1077
1119
  }
1078
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
1120
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._content_rebcu_27 {
1121
+ width: var(--xmlui-maxWidth-content-App);
1079
1122
  margin-inline: calc(-1 * var(--scrollbar-width));
1123
+ margin: auto;
1080
1124
  }
1081
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
1125
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._contentWrapper_rebcu_27 {
1082
1126
  padding-inline: var(--scrollbar-width);
1083
1127
  }
1084
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
1128
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._headerWrapper_rebcu_138 > div {
1129
+ width: var(--xmlui-maxWidth-content-App);
1130
+ }
1131
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
1132
+ margin-inline: calc(-1 * var(--scrollbar-width));
1133
+ }
1134
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 > div {
1135
+ padding-inline: var(--scrollbar-width);
1136
+ }
1137
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) {
1085
1138
  overflow: hidden;
1086
1139
  }
1087
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
1140
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._content_rebcu_27 {
1088
1141
  min-height: 0;
1089
1142
  height: 100%;
1090
1143
  }
1091
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
1144
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._contentWrapper_rebcu_27 {
1092
1145
  overflow: initial;
1093
1146
  }
1094
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
1147
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135)._verticalConstrained_rebcu_102 ._content_rebcu_27 {
1148
+ width: var(--xmlui-maxWidth-content-App);
1149
+ margin: auto;
1150
+ }
1151
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapper_rebcu_37 {
1095
1152
  overflow: auto;
1096
1153
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1097
1154
  min-height: 0;
1098
1155
  height: 100%;
1099
1156
  scrollbar-gutter: stable both-edges;
1100
1157
  }
1101
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
1158
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapperInner_rebcu_90 {
1102
1159
  min-height: 100%;
1103
1160
  height: 0;
1104
1161
  }
1105
- ._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
1162
+ ._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 {
1106
1163
  scrollbar-gutter: auto;
1107
1164
  }
1108
- ._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
1165
+ ._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 ._PagesWrapper_rebcu_37 {
1109
1166
  scrollbar-gutter: auto;
1110
1167
  }
1111
1168
 
1112
- ._headerWrapper_qcc08_105 {
1169
+ ._headerWrapper_rebcu_138 {
1113
1170
  z-index: 1;
1114
1171
  min-height: 0;
1115
1172
  flex-shrink: 0;
@@ -1118,17 +1175,17 @@
1118
1175
  box-shadow: var(--xmlui-boxShadow-header-App);
1119
1176
  background-color: var(--xmlui-backgroundColor-AppHeader);
1120
1177
  }
1121
- ._headerWrapper_qcc08_105._sticky_qcc08_44 {
1178
+ ._headerWrapper_rebcu_138._sticky_rebcu_44 {
1122
1179
  position: sticky;
1123
1180
  }
1124
1181
 
1125
- ._content_qcc08_27 {
1182
+ ._content_rebcu_27 {
1126
1183
  display: flex;
1127
1184
  flex-direction: row;
1128
1185
  isolation: isolate;
1129
1186
  }
1130
1187
 
1131
- ._contentWrapper_qcc08_27 {
1188
+ ._contentWrapper_rebcu_27 {
1132
1189
  position: relative;
1133
1190
  min-width: 0;
1134
1191
  flex: 1;
@@ -1139,21 +1196,21 @@
1139
1196
  border-left: var(--xmlui-borderLeft-content-App);
1140
1197
  }
1141
1198
 
1142
- ._navPanelWrapper_qcc08_33 {
1199
+ ._navPanelWrapper_rebcu_33 {
1143
1200
  display: flex;
1144
1201
  position: sticky;
1145
1202
  top: 0;
1146
1203
  }
1147
- ._navPanelWrapper_qcc08_33:empty {
1204
+ ._navPanelWrapper_rebcu_33:empty {
1148
1205
  display: none;
1149
1206
  }
1150
1207
 
1151
- ._PagesWrapper_qcc08_37 {
1208
+ ._PagesWrapper_rebcu_37 {
1152
1209
  flex: 1;
1153
1210
  isolation: isolate;
1154
1211
  }
1155
1212
 
1156
- ._PagesWrapperInner_qcc08_90 {
1213
+ ._PagesWrapperInner_rebcu_90 {
1157
1214
  --page-padding-left: var(--xmlui-space-4);
1158
1215
  --page-padding-right: var(--xmlui-space-4);
1159
1216
  --page-padding-top: var(--xmlui-space-5);
@@ -1171,7 +1228,7 @@
1171
1228
  display: flex;
1172
1229
  flex-direction: column;
1173
1230
  }
1174
- ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
1231
+ ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1175
1232
  padding-top: var(--page-padding-top-override, var(--page-padding-top));
1176
1233
  padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
1177
1234
  padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1183,7 +1240,7 @@
1183
1240
  margin-right: calc(-1 * var(--page-padding-right));
1184
1241
  }
1185
1242
 
1186
- ._footerWrapper_qcc08_41 {
1243
+ ._footerWrapper_rebcu_41 {
1187
1244
  flex-shrink: 0;
1188
1245
  }/*
1189
1246
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -7,6 +7,7 @@ const appLayoutNames = [
7
7
  "vertical",
8
8
  "vertical-sticky",
9
9
  "vertical-full-header",
10
+ "vertical-constrained-width",
10
11
  "condensed",
11
12
  "condensed-sticky",
12
13
  "horizontal",
@@ -185,6 +185,9 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
185
185
  case "vertical-full-header":
186
186
  content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
187
187
  break;
188
+ case "vertical-constrained-width":
189
+ content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.content, App_module_scss_1.default.verticalConstrained), children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
190
+ break;
188
191
  case "condensed":
189
192
  case "condensed-sticky":
190
193
  content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, {
@@ -210,6 +213,7 @@ function getAppLayoutOrientation(appLayout) {
210
213
  case "vertical":
211
214
  case "vertical-sticky":
212
215
  case "vertical-full-header":
216
+ case "vertical-constrained-width":
213
217
  return "vertical";
214
218
  default:
215
219
  return "horizontal";
@@ -34,7 +34,8 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
34
34
  const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
35
35
  let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
36
36
  (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
37
- (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
37
+ (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header" ||
38
+ (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
38
39
  if (navPanelContext !== null) {
39
40
  inline = navPanelContext.inDrawer;
40
41
  }
package/dist/style.css CHANGED
@@ -1617,7 +1617,7 @@ See this source for details: https://css-tricks.com/line-clampin/
1617
1617
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
1618
1618
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
1619
1619
  */
1620
- ._wrapper_qcc08_13 {
1620
+ ._wrapper_rebcu_13 {
1621
1621
  --footer-height: 0px;
1622
1622
  --header-height: 0px;
1623
1623
  width: 100%;
@@ -1627,138 +1627,195 @@ See this source for details: https://css-tricks.com/line-clampin/
1627
1627
  flex-direction: column;
1628
1628
  isolation: isolate;
1629
1629
  }
1630
- ._wrapper_qcc08_13._vertical_qcc08_23 {
1630
+ ._wrapper_rebcu_13._vertical_rebcu_23 {
1631
1631
  flex-direction: row;
1632
1632
  overflow: initial;
1633
1633
  }
1634
- ._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
1634
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._contentWrapper_rebcu_27 {
1635
1635
  overflow: auto;
1636
1636
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1637
1637
  position: relative;
1638
1638
  scrollbar-gutter: stable both-edges;
1639
1639
  }
1640
- ._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
1640
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._navPanelWrapper_rebcu_33 {
1641
1641
  width: var(--xmlui-width-navPanel-App);
1642
1642
  flex-shrink: 0;
1643
1643
  }
1644
- ._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
1644
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._PagesWrapper_rebcu_37 {
1645
1645
  min-height: initial;
1646
1646
  flex: 1;
1647
1647
  }
1648
- ._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
1648
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._footerWrapper_rebcu_41 {
1649
1649
  position: static;
1650
1650
  }
1651
- ._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
1651
+ ._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._contentWrapper_rebcu_27 {
1652
1652
  scroll-padding-top: var(--header-height);
1653
1653
  }
1654
- ._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
1654
+ ._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
1655
1655
  position: sticky;
1656
1656
  bottom: 0;
1657
1657
  }
1658
- ._wrapper_qcc08_13._horizontal_qcc08_51 {
1658
+ ._wrapper_rebcu_13._horizontal_rebcu_51 {
1659
1659
  overflow: auto;
1660
1660
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1661
1661
  }
1662
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
1662
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._PagesWrapper_rebcu_37 {
1663
1663
  min-height: initial;
1664
1664
  }
1665
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
1665
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._footerWrapper_rebcu_41 {
1666
1666
  position: static;
1667
1667
  }
1668
- ._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
1668
+ ._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 {
1669
1669
  scroll-padding-top: var(--header-height);
1670
1670
  min-height: 100%;
1671
1671
  }
1672
- ._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
1672
+ ._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
1673
1673
  position: sticky;
1674
1674
  bottom: 0;
1675
1675
  }
1676
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
1676
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._navPanelWrapper_rebcu_33 {
1677
1677
  border-bottom: var(--xmlui-borderBottom-AppHeader);
1678
1678
  justify-content: end;
1679
1679
  }
1680
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
1680
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 {
1681
1681
  min-height: 100%;
1682
1682
  height: 100%;
1683
1683
  overflow: auto;
1684
1684
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1685
1685
  }
1686
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_33 {
1686
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._navPanelWrapper_rebcu_33 {
1687
1687
  width: var(--xmlui-width-navPanel-App);
1688
1688
  position: sticky;
1689
1689
  height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
1690
1690
  top: var(--header-height);
1691
1691
  }
1692
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
1692
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapper_rebcu_37 {
1693
1693
  overflow: initial;
1694
1694
  min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
1695
1695
  height: 100%;
1696
1696
  }
1697
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
1697
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 {
1698
1698
  height: 100%;
1699
1699
  }
1700
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
1700
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1701
1701
  height: 100%;
1702
1702
  }
1703
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
1703
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._footerWrapper_rebcu_41 {
1704
1704
  position: sticky;
1705
1705
  left: 0;
1706
1706
  right: 0;
1707
1707
  bottom: 0;
1708
1708
  }
1709
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
1709
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 {
1710
+ min-height: 100%;
1711
+ height: 100%;
1712
+ overflow: auto;
1713
+ scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1714
+ }
1715
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._header_rebcu_108 {
1716
+ max-width: var(--xmlui-maxWidth-content-App);
1717
+ margin: auto;
1718
+ }
1719
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._navPanelWrapper_rebcu_33 {
1720
+ width: var(--xmlui-width-navPanel-App);
1721
+ position: sticky;
1722
+ height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
1723
+ top: var(--header-height);
1724
+ }
1725
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapper_rebcu_37 {
1726
+ overflow: initial;
1727
+ min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
1728
+ height: 100%;
1729
+ }
1730
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 {
1731
+ height: 100%;
1732
+ }
1733
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1734
+ height: 100%;
1735
+ }
1736
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
1737
+ position: sticky;
1738
+ left: 0;
1739
+ right: 0;
1740
+ bottom: 0;
1741
+ }
1742
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 {
1710
1743
  scrollbar-gutter: stable both-edges;
1711
1744
  }
1712
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
1745
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 {
1746
+ margin-inline: calc(-1 * var(--scrollbar-width));
1747
+ }
1748
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 > div {
1749
+ padding-inline: var(--scrollbar-width);
1750
+ }
1751
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 {
1713
1752
  margin-inline: calc(-1 * var(--scrollbar-width));
1714
1753
  }
1715
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
1754
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 > div {
1716
1755
  padding-inline: var(--scrollbar-width);
1717
1756
  }
1718
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
1757
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 {
1758
+ scroll-padding-top: var(--header-height);
1759
+ }
1760
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._content_rebcu_27 {
1719
1761
  margin-inline: calc(-1 * var(--scrollbar-width));
1720
1762
  }
1721
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
1763
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._contentWrapper_rebcu_27 {
1722
1764
  padding-inline: var(--scrollbar-width);
1723
1765
  }
1724
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
1766
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 {
1725
1767
  scroll-padding-top: var(--header-height);
1726
1768
  }
1727
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
1769
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._content_rebcu_27 {
1770
+ width: var(--xmlui-maxWidth-content-App);
1728
1771
  margin-inline: calc(-1 * var(--scrollbar-width));
1772
+ margin: auto;
1729
1773
  }
1730
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
1774
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._contentWrapper_rebcu_27 {
1731
1775
  padding-inline: var(--scrollbar-width);
1732
1776
  }
1733
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
1777
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._headerWrapper_rebcu_138 > div {
1778
+ width: var(--xmlui-maxWidth-content-App);
1779
+ }
1780
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
1781
+ margin-inline: calc(-1 * var(--scrollbar-width));
1782
+ }
1783
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 > div {
1784
+ padding-inline: var(--scrollbar-width);
1785
+ }
1786
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) {
1734
1787
  overflow: hidden;
1735
1788
  }
1736
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
1789
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._content_rebcu_27 {
1737
1790
  min-height: 0;
1738
1791
  height: 100%;
1739
1792
  }
1740
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
1793
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._contentWrapper_rebcu_27 {
1741
1794
  overflow: initial;
1742
1795
  }
1743
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
1796
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135)._verticalConstrained_rebcu_102 ._content_rebcu_27 {
1797
+ width: var(--xmlui-maxWidth-content-App);
1798
+ margin: auto;
1799
+ }
1800
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapper_rebcu_37 {
1744
1801
  overflow: auto;
1745
1802
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1746
1803
  min-height: 0;
1747
1804
  height: 100%;
1748
1805
  scrollbar-gutter: stable both-edges;
1749
1806
  }
1750
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
1807
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapperInner_rebcu_90 {
1751
1808
  min-height: 100%;
1752
1809
  height: 0;
1753
1810
  }
1754
- ._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
1811
+ ._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 {
1755
1812
  scrollbar-gutter: auto;
1756
1813
  }
1757
- ._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
1814
+ ._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 ._PagesWrapper_rebcu_37 {
1758
1815
  scrollbar-gutter: auto;
1759
1816
  }
1760
1817
 
1761
- ._headerWrapper_qcc08_105 {
1818
+ ._headerWrapper_rebcu_138 {
1762
1819
  z-index: 1;
1763
1820
  min-height: 0;
1764
1821
  flex-shrink: 0;
@@ -1767,17 +1824,17 @@ See this source for details: https://css-tricks.com/line-clampin/
1767
1824
  box-shadow: var(--xmlui-boxShadow-header-App);
1768
1825
  background-color: var(--xmlui-backgroundColor-AppHeader);
1769
1826
  }
1770
- ._headerWrapper_qcc08_105._sticky_qcc08_44 {
1827
+ ._headerWrapper_rebcu_138._sticky_rebcu_44 {
1771
1828
  position: sticky;
1772
1829
  }
1773
1830
 
1774
- ._content_qcc08_27 {
1831
+ ._content_rebcu_27 {
1775
1832
  display: flex;
1776
1833
  flex-direction: row;
1777
1834
  isolation: isolate;
1778
1835
  }
1779
1836
 
1780
- ._contentWrapper_qcc08_27 {
1837
+ ._contentWrapper_rebcu_27 {
1781
1838
  position: relative;
1782
1839
  min-width: 0;
1783
1840
  flex: 1;
@@ -1788,21 +1845,21 @@ See this source for details: https://css-tricks.com/line-clampin/
1788
1845
  border-left: var(--xmlui-borderLeft-content-App);
1789
1846
  }
1790
1847
 
1791
- ._navPanelWrapper_qcc08_33 {
1848
+ ._navPanelWrapper_rebcu_33 {
1792
1849
  display: flex;
1793
1850
  position: sticky;
1794
1851
  top: 0;
1795
1852
  }
1796
- ._navPanelWrapper_qcc08_33:empty {
1853
+ ._navPanelWrapper_rebcu_33:empty {
1797
1854
  display: none;
1798
1855
  }
1799
1856
 
1800
- ._PagesWrapper_qcc08_37 {
1857
+ ._PagesWrapper_rebcu_37 {
1801
1858
  flex: 1;
1802
1859
  isolation: isolate;
1803
1860
  }
1804
1861
 
1805
- ._PagesWrapperInner_qcc08_90 {
1862
+ ._PagesWrapperInner_rebcu_90 {
1806
1863
  --page-padding-left: var(--xmlui-space-4);
1807
1864
  --page-padding-right: var(--xmlui-space-4);
1808
1865
  --page-padding-top: var(--xmlui-space-5);
@@ -1820,7 +1877,7 @@ See this source for details: https://css-tricks.com/line-clampin/
1820
1877
  display: flex;
1821
1878
  flex-direction: column;
1822
1879
  }
1823
- ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
1880
+ ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1824
1881
  padding-top: var(--page-padding-top-override, var(--page-padding-top));
1825
1882
  padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
1826
1883
  padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1832,7 +1889,7 @@ See this source for details: https://css-tricks.com/line-clampin/
1832
1889
  margin-right: calc(-1 * var(--page-padding-right));
1833
1890
  }
1834
1891
 
1835
- ._footerWrapper_qcc08_41 {
1892
+ ._footerWrapper_rebcu_41 {
1836
1893
  flex-shrink: 0;
1837
1894
  }/*
1838
1895
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -3359,6 +3359,7 @@ function getAppLayoutOrientation(appLayout) {
3359
3359
  case "vertical":
3360
3360
  case "vertical-sticky":
3361
3361
  case "vertical-full-header":
3362
+ case "vertical-constrained-width":
3362
3363
  return "vertical";
3363
3364
  default:
3364
3365
  return "horizontal";
@@ -15512,7 +15513,7 @@ forwardRef(function NavGroup2({
15512
15513
  const { level } = useContext(NavGroupContext);
15513
15514
  const appLayoutContext = useAppLayoutContext();
15514
15515
  const navPanelContext = useContext(NavPanelContext);
15515
- let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
15516
+ let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
15516
15517
  if (navPanelContext !== null) {
15517
15518
  inline = navPanelContext.inDrawer;
15518
15519
  }
@@ -3356,6 +3356,7 @@
3356
3356
  case "vertical":
3357
3357
  case "vertical-sticky":
3358
3358
  case "vertical-full-header":
3359
+ case "vertical-constrained-width":
3359
3360
  return "vertical";
3360
3361
  default:
3361
3362
  return "horizontal";
@@ -15509,7 +15510,7 @@
15509
15510
  const { level } = React.useContext(NavGroupContext);
15510
15511
  const appLayoutContext = useAppLayoutContext();
15511
15512
  const navPanelContext = React.useContext(NavPanelContext);
15512
- let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
15513
+ let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
15513
15514
  if (navPanelContext !== null) {
15514
15515
  inline = navPanelContext.inDrawer;
15515
15516
  }
@@ -30,7 +30,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
30
30
  @scope (#_ui-engine-theme-root) {
31
31
  :scope {
32
32
  line-height: 1.5;
33
- font-feature-settings: normal;
33
+ font-feature-settings: var(--xmlui-font-feature-settings);
34
34
  font-variation-settings: normal;
35
35
  -webkit-font-smoothing: antialiased;
36
36
  -moz-osx-font-smoothing: grayscale;
@@ -985,7 +985,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
985
985
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
986
986
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
987
987
  */
988
- ._wrapper_qcc08_13 {
988
+ ._wrapper_rebcu_13 {
989
989
  --footer-height: 0px;
990
990
  --header-height: 0px;
991
991
  width: 100%;
@@ -995,138 +995,195 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
995
995
  flex-direction: column;
996
996
  isolation: isolate;
997
997
  }
998
- ._wrapper_qcc08_13._vertical_qcc08_23 {
998
+ ._wrapper_rebcu_13._vertical_rebcu_23 {
999
999
  flex-direction: row;
1000
1000
  overflow: initial;
1001
1001
  }
1002
- ._wrapper_qcc08_13._vertical_qcc08_23 ._contentWrapper_qcc08_27 {
1002
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._contentWrapper_rebcu_27 {
1003
1003
  overflow: auto;
1004
1004
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1005
1005
  position: relative;
1006
1006
  scrollbar-gutter: stable both-edges;
1007
1007
  }
1008
- ._wrapper_qcc08_13._vertical_qcc08_23 ._navPanelWrapper_qcc08_33 {
1008
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._navPanelWrapper_rebcu_33 {
1009
1009
  width: var(--xmlui-width-navPanel-App);
1010
1010
  flex-shrink: 0;
1011
1011
  }
1012
- ._wrapper_qcc08_13._vertical_qcc08_23 ._PagesWrapper_qcc08_37 {
1012
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._PagesWrapper_rebcu_37 {
1013
1013
  min-height: initial;
1014
1014
  flex: 1;
1015
1015
  }
1016
- ._wrapper_qcc08_13._vertical_qcc08_23 ._footerWrapper_qcc08_41 {
1016
+ ._wrapper_rebcu_13._vertical_rebcu_23 ._footerWrapper_rebcu_41 {
1017
1017
  position: static;
1018
1018
  }
1019
- ._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._contentWrapper_qcc08_27 {
1019
+ ._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._contentWrapper_rebcu_27 {
1020
1020
  scroll-padding-top: var(--header-height);
1021
1021
  }
1022
- ._wrapper_qcc08_13._vertical_qcc08_23._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
1022
+ ._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
1023
1023
  position: sticky;
1024
1024
  bottom: 0;
1025
1025
  }
1026
- ._wrapper_qcc08_13._horizontal_qcc08_51 {
1026
+ ._wrapper_rebcu_13._horizontal_rebcu_51 {
1027
1027
  overflow: auto;
1028
1028
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1029
1029
  }
1030
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._PagesWrapper_qcc08_37 {
1030
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._PagesWrapper_rebcu_37 {
1031
1031
  min-height: initial;
1032
1032
  }
1033
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._footerWrapper_qcc08_41 {
1033
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._footerWrapper_rebcu_41 {
1034
1034
  position: static;
1035
1035
  }
1036
- ._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 {
1036
+ ._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 {
1037
1037
  scroll-padding-top: var(--header-height);
1038
1038
  min-height: 100%;
1039
1039
  }
1040
- ._wrapper_qcc08_13._horizontal_qcc08_51._sticky_qcc08_44 ._footerWrapper_qcc08_41 {
1040
+ ._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
1041
1041
  position: sticky;
1042
1042
  bottom: 0;
1043
1043
  }
1044
- ._wrapper_qcc08_13._horizontal_qcc08_51 ._navPanelWrapper_qcc08_33 {
1044
+ ._wrapper_rebcu_13._horizontal_rebcu_51 ._navPanelWrapper_rebcu_33 {
1045
1045
  border-bottom: var(--xmlui-borderBottom-AppHeader);
1046
1046
  justify-content: end;
1047
1047
  }
1048
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 {
1048
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 {
1049
1049
  min-height: 100%;
1050
1050
  height: 100%;
1051
1051
  overflow: auto;
1052
1052
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1053
1053
  }
1054
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._navPanelWrapper_qcc08_33 {
1054
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._navPanelWrapper_rebcu_33 {
1055
1055
  width: var(--xmlui-width-navPanel-App);
1056
1056
  position: sticky;
1057
1057
  height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
1058
1058
  top: var(--header-height);
1059
1059
  }
1060
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapper_qcc08_37 {
1060
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapper_rebcu_37 {
1061
1061
  overflow: initial;
1062
1062
  min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
1063
1063
  height: 100%;
1064
1064
  }
1065
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 {
1065
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 {
1066
1066
  height: 100%;
1067
1067
  }
1068
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
1068
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1069
1069
  height: 100%;
1070
1070
  }
1071
- ._wrapper_qcc08_13._verticalFullHeader_qcc08_73 ._footerWrapper_qcc08_41 {
1071
+ ._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._footerWrapper_rebcu_41 {
1072
1072
  position: sticky;
1073
1073
  left: 0;
1074
1074
  right: 0;
1075
1075
  bottom: 0;
1076
1076
  }
1077
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 {
1077
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 {
1078
+ min-height: 100%;
1079
+ height: 100%;
1080
+ overflow: auto;
1081
+ scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1082
+ }
1083
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._header_rebcu_108 {
1084
+ max-width: var(--xmlui-maxWidth-content-App);
1085
+ margin: auto;
1086
+ }
1087
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._navPanelWrapper_rebcu_33 {
1088
+ width: var(--xmlui-width-navPanel-App);
1089
+ position: sticky;
1090
+ height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
1091
+ top: var(--header-height);
1092
+ }
1093
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapper_rebcu_37 {
1094
+ overflow: initial;
1095
+ min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
1096
+ height: 100%;
1097
+ }
1098
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 {
1099
+ height: 100%;
1100
+ }
1101
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1102
+ height: 100%;
1103
+ }
1104
+ ._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
1105
+ position: sticky;
1106
+ left: 0;
1107
+ right: 0;
1108
+ bottom: 0;
1109
+ }
1110
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 {
1078
1111
  scrollbar-gutter: stable both-edges;
1079
1112
  }
1080
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 {
1113
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 {
1114
+ margin-inline: calc(-1 * var(--scrollbar-width));
1115
+ }
1116
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 > div {
1117
+ padding-inline: var(--scrollbar-width);
1118
+ }
1119
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 {
1081
1120
  margin-inline: calc(-1 * var(--scrollbar-width));
1082
1121
  }
1083
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._headerWrapper_qcc08_105 > div {
1122
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 > div {
1084
1123
  padding-inline: var(--scrollbar-width);
1085
1124
  }
1086
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 {
1125
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 {
1126
+ scroll-padding-top: var(--header-height);
1127
+ }
1128
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._content_rebcu_27 {
1087
1129
  margin-inline: calc(-1 * var(--scrollbar-width));
1088
1130
  }
1089
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102 ._footerWrapper_qcc08_41 > div {
1131
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._contentWrapper_rebcu_27 {
1090
1132
  padding-inline: var(--scrollbar-width);
1091
1133
  }
1092
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 {
1134
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 {
1093
1135
  scroll-padding-top: var(--header-height);
1094
1136
  }
1095
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._content_qcc08_27 {
1137
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._content_rebcu_27 {
1138
+ width: var(--xmlui-maxWidth-content-App);
1139
+ margin-inline: calc(-1 * var(--scrollbar-width));
1140
+ margin: auto;
1141
+ }
1142
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._contentWrapper_rebcu_27 {
1143
+ padding-inline: var(--scrollbar-width);
1144
+ }
1145
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._headerWrapper_rebcu_138 > div {
1146
+ width: var(--xmlui-maxWidth-content-App);
1147
+ }
1148
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
1096
1149
  margin-inline: calc(-1 * var(--scrollbar-width));
1097
1150
  }
1098
- ._wrapper_qcc08_13._scrollWholePage_qcc08_102._verticalFullHeader_qcc08_73 ._contentWrapper_qcc08_27 {
1151
+ ._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 > div {
1099
1152
  padding-inline: var(--scrollbar-width);
1100
1153
  }
1101
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) {
1154
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) {
1102
1155
  overflow: hidden;
1103
1156
  }
1104
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._content_qcc08_27 {
1157
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._content_rebcu_27 {
1105
1158
  min-height: 0;
1106
1159
  height: 100%;
1107
1160
  }
1108
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._contentWrapper_qcc08_27 {
1161
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._contentWrapper_rebcu_27 {
1109
1162
  overflow: initial;
1110
1163
  }
1111
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapper_qcc08_37 {
1164
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135)._verticalConstrained_rebcu_102 ._content_rebcu_27 {
1165
+ width: var(--xmlui-maxWidth-content-App);
1166
+ margin: auto;
1167
+ }
1168
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapper_rebcu_37 {
1112
1169
  overflow: auto;
1113
1170
  scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
1114
1171
  min-height: 0;
1115
1172
  height: 100%;
1116
1173
  scrollbar-gutter: stable both-edges;
1117
1174
  }
1118
- ._wrapper_qcc08_13:not(._scrollWholePage_qcc08_102) ._PagesWrapperInner_qcc08_90 {
1175
+ ._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapperInner_rebcu_90 {
1119
1176
  min-height: 100%;
1120
1177
  height: 0;
1121
1178
  }
1122
- ._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 {
1179
+ ._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 {
1123
1180
  scrollbar-gutter: auto;
1124
1181
  }
1125
- ._wrapper_qcc08_13._noScrollbarGutters_qcc08_147 ._PagesWrapper_qcc08_37 {
1182
+ ._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 ._PagesWrapper_rebcu_37 {
1126
1183
  scrollbar-gutter: auto;
1127
1184
  }
1128
1185
 
1129
- ._headerWrapper_qcc08_105 {
1186
+ ._headerWrapper_rebcu_138 {
1130
1187
  z-index: 1;
1131
1188
  min-height: 0;
1132
1189
  flex-shrink: 0;
@@ -1135,17 +1192,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
1135
1192
  box-shadow: var(--xmlui-boxShadow-header-App);
1136
1193
  background-color: var(--xmlui-backgroundColor-AppHeader);
1137
1194
  }
1138
- ._headerWrapper_qcc08_105._sticky_qcc08_44 {
1195
+ ._headerWrapper_rebcu_138._sticky_rebcu_44 {
1139
1196
  position: sticky;
1140
1197
  }
1141
1198
 
1142
- ._content_qcc08_27 {
1199
+ ._content_rebcu_27 {
1143
1200
  display: flex;
1144
1201
  flex-direction: row;
1145
1202
  isolation: isolate;
1146
1203
  }
1147
1204
 
1148
- ._contentWrapper_qcc08_27 {
1205
+ ._contentWrapper_rebcu_27 {
1149
1206
  position: relative;
1150
1207
  min-width: 0;
1151
1208
  flex: 1;
@@ -1156,21 +1213,21 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
1156
1213
  border-left: var(--xmlui-borderLeft-content-App);
1157
1214
  }
1158
1215
 
1159
- ._navPanelWrapper_qcc08_33 {
1216
+ ._navPanelWrapper_rebcu_33 {
1160
1217
  display: flex;
1161
1218
  position: sticky;
1162
1219
  top: 0;
1163
1220
  }
1164
- ._navPanelWrapper_qcc08_33:empty {
1221
+ ._navPanelWrapper_rebcu_33:empty {
1165
1222
  display: none;
1166
1223
  }
1167
1224
 
1168
- ._PagesWrapper_qcc08_37 {
1225
+ ._PagesWrapper_rebcu_37 {
1169
1226
  flex: 1;
1170
1227
  isolation: isolate;
1171
1228
  }
1172
1229
 
1173
- ._PagesWrapperInner_qcc08_90 {
1230
+ ._PagesWrapperInner_rebcu_90 {
1174
1231
  --page-padding-left: var(--xmlui-space-4);
1175
1232
  --page-padding-right: var(--xmlui-space-4);
1176
1233
  --page-padding-top: var(--xmlui-space-5);
@@ -1188,7 +1245,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
1188
1245
  display: flex;
1189
1246
  flex-direction: column;
1190
1247
  }
1191
- ._PagesWrapperInner_qcc08_90 > .xmlui-page-root {
1248
+ ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
1192
1249
  padding-top: var(--page-padding-top-override, var(--page-padding-top));
1193
1250
  padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
1194
1251
  padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1200,7 +1257,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
1200
1257
  margin-right: calc(-1 * var(--page-padding-right));
1201
1258
  }
1202
1259
 
1203
- ._footerWrapper_qcc08_41 {
1260
+ ._footerWrapper_rebcu_41 {
1204
1261
  flex-shrink: 0;
1205
1262
  }/*
1206
1263
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -15931,7 +15988,7 @@ li .htmlOl {
15931
15988
  });
15932
15989
  }
15933
15990
  }
15934
- var define_process_env_default$a = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.16 (built 4/24/2025)" };
15991
+ var define_process_env_default$a = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.18 (built 4/25/2025)" };
15935
15992
  class Mutation extends Removable {
15936
15993
  constructor(config) {
15937
15994
  super();
@@ -32294,20 +32351,22 @@ ${error2.errorObject}`;
32294
32351
  }(reactExports.Component);
32295
32352
  W$4.propTypes = { base: PropTypes.object, bodyAttributes: PropTypes.object, children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), defaultTitle: PropTypes.string, defer: PropTypes.bool, encodeSpecialCharacters: PropTypes.bool, htmlAttributes: PropTypes.object, link: PropTypes.arrayOf(PropTypes.object), meta: PropTypes.arrayOf(PropTypes.object), noscript: PropTypes.arrayOf(PropTypes.object), onChangeClientState: PropTypes.func, script: PropTypes.arrayOf(PropTypes.object), style: PropTypes.arrayOf(PropTypes.object), title: PropTypes.string, titleAttributes: PropTypes.object, titleTemplate: PropTypes.string, prioritizeSeoTags: PropTypes.bool, helmetData: PropTypes.object }, W$4.defaultProps = { defer: true, encodeSpecialCharacters: true, prioritizeSeoTags: false }, W$4.displayName = "Helmet";
32296
32353
  const themeVars$J = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
32297
- const wrapper$e = "_wrapper_qcc08_13";
32298
- const vertical$4 = "_vertical_qcc08_23";
32299
- const contentWrapper$1 = "_contentWrapper_qcc08_27";
32300
- const navPanelWrapper = "_navPanelWrapper_qcc08_33";
32301
- const PagesWrapper = "_PagesWrapper_qcc08_37";
32302
- const footerWrapper = "_footerWrapper_qcc08_41";
32303
- const sticky = "_sticky_qcc08_44";
32304
- const horizontal$5 = "_horizontal_qcc08_51";
32305
- const verticalFullHeader = "_verticalFullHeader_qcc08_73";
32306
- const PagesWrapperInner = "_PagesWrapperInner_qcc08_90";
32307
- const scrollWholePage = "_scrollWholePage_qcc08_102";
32308
- const headerWrapper$1 = "_headerWrapper_qcc08_105";
32309
- const content$4 = "_content_qcc08_27";
32310
- const noScrollbarGutters = "_noScrollbarGutters_qcc08_147";
32354
+ const wrapper$e = "_wrapper_rebcu_13";
32355
+ const vertical$4 = "_vertical_rebcu_23";
32356
+ const contentWrapper$1 = "_contentWrapper_rebcu_27";
32357
+ const navPanelWrapper = "_navPanelWrapper_rebcu_33";
32358
+ const PagesWrapper = "_PagesWrapper_rebcu_37";
32359
+ const footerWrapper = "_footerWrapper_rebcu_41";
32360
+ const sticky = "_sticky_rebcu_44";
32361
+ const horizontal$5 = "_horizontal_rebcu_51";
32362
+ const verticalFullHeader = "_verticalFullHeader_rebcu_73";
32363
+ const PagesWrapperInner = "_PagesWrapperInner_rebcu_90";
32364
+ const verticalConstrained = "_verticalConstrained_rebcu_102";
32365
+ const header$2 = "_header_rebcu_108";
32366
+ const scrollWholePage = "_scrollWholePage_rebcu_135";
32367
+ const headerWrapper$1 = "_headerWrapper_rebcu_138";
32368
+ const content$4 = "_content_rebcu_27";
32369
+ const noScrollbarGutters = "_noScrollbarGutters_rebcu_204";
32311
32370
  const styles$Y = {
32312
32371
  themeVars: themeVars$J,
32313
32372
  wrapper: wrapper$e,
@@ -32320,6 +32379,8 @@ ${error2.errorObject}`;
32320
32379
  horizontal: horizontal$5,
32321
32380
  verticalFullHeader,
32322
32381
  PagesWrapperInner,
32382
+ verticalConstrained,
32383
+ header: header$2,
32323
32384
  scrollWholePage,
32324
32385
  headerWrapper: headerWrapper$1,
32325
32386
  content: content$4,
@@ -35488,6 +35549,31 @@ ${error2.errorObject}`;
35488
35549
  }
35489
35550
  );
35490
35551
  break;
35552
+ case "vertical-constrained-width":
35553
+ content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(
35554
+ "div",
35555
+ {
35556
+ className: classNames(wrapperBaseClasses, styles$Y.verticalConstrained),
35557
+ style: styleWithHelpers,
35558
+ ref: scrollPageContainerRef,
35559
+ children: [
35560
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
35561
+ "header",
35562
+ {
35563
+ className: classNames(styles$Y.headerWrapper, styles$Y.sticky),
35564
+ ref: headerRefCallback,
35565
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.header, style: { paddingInline: 0 }, children: header2 })
35566
+ }
35567
+ ),
35568
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classNames(styles$Y.content, styles$Y.verticalConstrained), children: [
35569
+ navPanelVisible && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: styles$Y.navPanelWrapper, children: navPanel }),
35570
+ /* @__PURE__ */ jsxRuntimeExports.jsx("main", { className: styles$Y.contentWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.PagesWrapper, ref: noScrollPageContainerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollContext.Provider, { value: scrollContainerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.PagesWrapperInner, style: pagesWrapperInnerStyle, children }) }) }) })
35571
+ ] }),
35572
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Y.footerWrapper, ref: footerRefCallback, children: footer2 })
35573
+ ]
35574
+ }
35575
+ );
35576
+ break;
35491
35577
  case "condensed":
35492
35578
  case "condensed-sticky":
35493
35579
  content2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -35578,6 +35664,7 @@ ${error2.errorObject}`;
35578
35664
  case "vertical":
35579
35665
  case "vertical-sticky":
35580
35666
  case "vertical-full-header":
35667
+ case "vertical-constrained-width":
35581
35668
  return "vertical";
35582
35669
  default:
35583
35670
  return "horizontal";
@@ -98733,7 +98820,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
98733
98820
  const { level } = reactExports.useContext(NavGroupContext);
98734
98821
  const appLayoutContext = useAppLayoutContext();
98735
98822
  const navPanelContext = reactExports.useContext(NavPanelContext);
98736
- let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
98823
+ let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
98737
98824
  if (navPanelContext !== null) {
98738
98825
  inline = navPanelContext.inDrawer;
98739
98826
  }
@@ -143884,7 +143971,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
143884
143971
  /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
143885
143972
  ] });
143886
143973
  }
143887
- const version = "0.9.16";
143974
+ const version = "0.9.18";
143888
143975
  const ApiInterceptorContext = reactExports.createContext(null);
143889
143976
  function useApiInterceptorContext() {
143890
143977
  return reactExports.useContext(ApiInterceptorContext);
@@ -148133,6 +148220,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
148133
148220
  populateTransitiveDeps(directCompDepNames);
148134
148221
  return transitiveDeps;
148135
148222
  function populateTransitiveDeps(directCompDepNames2) {
148223
+ if (!directCompDepNames2) return;
148136
148224
  for (const directDep of directCompDepNames2) {
148137
148225
  if (!transitiveDeps.has(directDep)) {
148138
148226
  transitiveDeps.add(directDep);
@@ -148865,7 +148953,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
148865
148953
  ToneChangerButton: ToneChangerButtonMd,
148866
148954
  Tree: TreeMd
148867
148955
  };
148868
- var define_process_env_default$2 = { VITE_XMLUI_VERSION: "0.9.16 (built 4/24/2025)" };
148956
+ var define_process_env_default$2 = { VITE_XMLUI_VERSION: "0.9.18 (built 4/25/2025)" };
148869
148957
  const MAIN_FILE = "Main." + componentFileExtension;
148870
148958
  const MAIN_CODE_BEHIND_FILE = "Main." + codeBehindFileExtension;
148871
148959
  const CONFIG_FILE = "config.json";
@@ -153303,7 +153391,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
153303
153391
  function isResponseWithoutBody(status) {
153304
153392
  return RESPONSE_STATUS_CODES_WITHOUT_BODY.has(status);
153305
153393
  }
153306
- var define_process_env_default$1 = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.16 (built 4/24/2025)" };
153394
+ var define_process_env_default$1 = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.18 (built 4/25/2025)" };
153307
153395
  var __defProp$7 = Object.defineProperty;
153308
153396
  var __export = (target2, all2) => {
153309
153397
  for (var name2 in all2)
package/dist/xmlui.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { A, B, E, I, i, h, S, b, k, l, c, e, f, j, p, s, t, n, q, v, u } from "./index-BjVxVHb3.mjs";
1
+ import { A, B, E, I, i, h, S, b, k, l, c, e, f, j, p, s, t, n, q, v, u } from "./index-BHUXwc-L.mjs";
2
2
  export {
3
3
  A as AppRoot,
4
4
  B as Button,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xmlui",
3
- "version": "0.9.16",
3
+ "version": "0.9.18",
4
4
  "sideEffects": false,
5
5
  "scripts": {
6
6
  "start-test-bed": "cd src/testing/infrastructure && xmlui start",