@mono-lit/helper 0.0.9 → 0.1.0

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.
Files changed (164) hide show
  1. package/dist/accordion-core-DaNyPWRr.js +277 -0
  2. package/dist/alert-core-DWtHbX_-.js +134 -0
  3. package/dist/breadcrumb-list-core-Dh68T8Cf.js +747 -0
  4. package/dist/{mono-button-CLkHg3WW.js → button-core-DerXg84Q.js} +3 -276
  5. package/dist/button-dropdown-core-DKYEOyjy.js +654 -0
  6. package/dist/button-utils-D5-66M02.js +63 -0
  7. package/dist/card-utils-l80qAmrN.js +312 -0
  8. package/dist/chart-core-DV7hD3ZY.js +801 -0
  9. package/dist/checkbox-utils-DKdrhAzF.js +337 -0
  10. package/dist/chip-utils-DpRrd7Zj.js +403 -0
  11. package/dist/{data-source-controller-C6C4ej_M.js → data-source-controller-DS_JLrmS.js} +1 -1
  12. package/dist/{data-source-options-fxT5QIX4.js → data-source-options-DJUNU26C.js} +6 -6
  13. package/dist/{data-source-read-BL266IW0.js → data-source-read-uKJpRAzx.js} +2 -2
  14. package/dist/date-core-CyuSyvvG.js +734 -0
  15. package/dist/drawer-core-DbFWvNln.js +759 -0
  16. package/dist/dropdown-core-BCH1pK14.js +511 -0
  17. package/dist/dropdown-table-core-SfHUJVFq.js +1342 -0
  18. package/dist/export.js +1 -1
  19. package/dist/{field-path-BabiMrrA.js → field-path-DK2VBWHl.js} +1 -1
  20. package/dist/field-tooltip.css_raw-DVblekCl.js +5 -0
  21. package/dist/{field-validation.css_raw-Cx6SGrfP.js → field-validation.css_raw-BU7C6173.js} +1 -170
  22. package/dist/file-upload-core-Cz_dBQMx.js +624 -0
  23. package/dist/filter-builder-core-DyWjbBP7.js +381 -0
  24. package/dist/{filter-builder-B6Y2mmbM.js → filter-builder-vbqIuPhX.js} +1 -1
  25. package/dist/{filter-eval-ChDSaAUH.js → filter-eval-CqeBnMYh.js} +1 -1
  26. package/dist/{filter-odata-Bi27XUpQ.js → filter-odata-GsczYKNC.js} +1 -1
  27. package/dist/{hydration-flush-BaE9gN3C.js → hydration-flush-Volt9X7Q.js} +2 -1071
  28. package/dist/index.js +11 -11
  29. package/dist/{index.node-DTqDBca7.js → index.node-Csy9zrr1.js} +4 -4
  30. package/dist/index.node.js +11 -11
  31. package/dist/input-utils-BglY-k0H.js +1145 -0
  32. package/dist/menu-core-DkAYuCZ2.js +831 -0
  33. package/dist/modal-core-CSBSPN_m.js +844 -0
  34. package/dist/mono-button-DVvZ03P-.js +280 -0
  35. package/dist/{mono-button.shadow-DqZMpcqY.js → mono-button.shadow-BANxMGln.js} +6 -594
  36. package/dist/{mono-data-chart-NKPdAgVq.js → mono-data-chart-ChF4J9RT.js} +6 -6
  37. package/dist/{mono-data-dropdown-B2iRpJuI.js → mono-data-dropdown-Bgj2PDfm.js} +1 -1
  38. package/dist/{mono-data-grid-llJCX9MC.js → mono-data-grid-DJkp96N-.js} +144 -46
  39. package/dist/{mono-event-BPku9HpS.js → mono-event-CAZf0F_k.js} +14 -9
  40. package/dist/{mono-form-controller-BrA10erm.js → mono-form-controller-DxZLvyg6.js} +2 -1
  41. package/dist/mono-table-checkbox-core-BKOMx8R5.js +5288 -0
  42. package/dist/nav-core-B5qU2dzn.js +225 -0
  43. package/dist/{normalize-error-D93O4q8g.js → normalize-error-BEcd1tmS.js} +2 -2
  44. package/dist/nuxt.js +1 -1
  45. package/dist/otp-core-DXg3vFLh.js +758 -0
  46. package/dist/radio-utils-Dk9Tl1jz.js +319 -0
  47. package/dist/rich-text-editor-core-Ddd_QaLn.js +1280 -0
  48. package/dist/select-utils-BgArYHk8.js +2140 -0
  49. package/dist/sidebar-core-CD6txDo3.js +583 -0
  50. package/dist/slider-core-vcWr321-.js +1014 -0
  51. package/dist/src/components/dropdown-table/dropdown-table-core.d.ts +2 -2
  52. package/dist/src/components/dropdown-table/dropdown-table-types.d.ts +1 -1
  53. package/dist/src/components/dropdown-table/index.d.ts +1 -1
  54. package/dist/src/components/dropdown-table/index.shadow.d.ts +1 -1
  55. package/dist/src/components/dropdown-table/mono-data-dropdown.d.ts +1 -1
  56. package/dist/src/components/form/form-types.d.ts +9 -3
  57. package/dist/src/components/input/input-core.d.ts +1 -1
  58. package/dist/src/components/input/input-types.d.ts +1 -1
  59. package/dist/src/components/otp/otp-core.d.ts +1 -1
  60. package/dist/src/components/select/select-core.d.ts +1 -1
  61. package/dist/src/components/select/select-types.d.ts +1 -1
  62. package/dist/src/components/slider/slider-core.d.ts +1 -1
  63. package/dist/src/components/slider/slider-types.d.ts +1 -1
  64. package/dist/src/components/table/filter-suggestion.d.ts +171 -0
  65. package/dist/src/components/table/index.d.ts +5 -4
  66. package/dist/src/components/table/index.shadow.d.ts +5 -4
  67. package/dist/src/components/table/mono-data-grid.d.ts +22 -3
  68. package/dist/src/components/table/mono-table-empty-core.d.ts +37 -0
  69. package/dist/src/components/table/mono-table-search-core.d.ts +22 -3
  70. package/dist/src/components/table/table-types.d.ts +74 -4
  71. package/dist/src/components/tag-input/tag-input-core.d.ts +1 -1
  72. package/dist/src/components/tag-input/tag-input-types.d.ts +1 -1
  73. package/dist/src/components/textarea/textarea-core.d.ts +1 -1
  74. package/dist/src/composables/mono-event.d.ts +7 -1
  75. package/dist/src/entries/index.d.ts +8 -6
  76. package/dist/src/entries/index.node.d.ts +8 -6
  77. package/dist/src/search/index.d.ts +1 -1
  78. package/dist/src/utils/group-count.d.ts +36 -0
  79. package/dist/switch-utils-CTZ4id2V.js +338 -0
  80. package/dist/tabs-core-r5-B8k_N.js +317 -0
  81. package/dist/tag-input-utils-D2JA90DQ.js +3060 -0
  82. package/dist/textarea-utils-VU1KeXm8.js +821 -0
  83. package/dist/ui/accordion.js +2 -274
  84. package/dist/ui/alert.js +2 -131
  85. package/dist/ui/breadcrumb.js +4 -745
  86. package/dist/ui/button-dropdown.js +4 -652
  87. package/dist/ui/button.js +2 -63
  88. package/dist/ui/card.js +2 -310
  89. package/dist/ui/chart.js +4 -800
  90. package/dist/ui/checkbox.js +4 -335
  91. package/dist/ui/chip.js +4 -402
  92. package/dist/ui/date.js +3 -732
  93. package/dist/ui/drawer.js +3 -757
  94. package/dist/ui/dropdown-table.js +5 -1341
  95. package/dist/ui/dropdown.js +4 -509
  96. package/dist/ui/file-upload.js +3 -622
  97. package/dist/ui/filter.js +5 -380
  98. package/dist/ui/form.js +1 -1
  99. package/dist/ui/index.css +118 -1
  100. package/dist/ui/input.js +3 -1141
  101. package/dist/ui/menu.js +4 -828
  102. package/dist/ui/modal.js +4 -843
  103. package/dist/ui/nav.js +4 -223
  104. package/dist/ui/otp.js +4 -756
  105. package/dist/ui/radio.js +4 -317
  106. package/dist/ui/rich-text-editor.js +4 -1278
  107. package/dist/ui/select.js +5 -2138
  108. package/dist/ui/shadow/accordion.js +4 -273
  109. package/dist/ui/shadow/alert.js +4 -130
  110. package/dist/ui/shadow/breadcrumb.js +5 -744
  111. package/dist/ui/shadow/button-dropdown.js +6 -652
  112. package/dist/ui/shadow/button.js +3 -63
  113. package/dist/ui/shadow/card.js +4 -309
  114. package/dist/ui/shadow/chart.js +6 -1576
  115. package/dist/ui/shadow/checkbox.js +4 -334
  116. package/dist/ui/shadow/chip.js +4 -396
  117. package/dist/ui/shadow/date.js +7 -731
  118. package/dist/ui/shadow/drawer.js +4 -756
  119. package/dist/ui/shadow/dropdown-table.js +8 -1762
  120. package/dist/ui/shadow/dropdown.js +4 -508
  121. package/dist/ui/shadow/file-upload.js +4 -620
  122. package/dist/ui/shadow/filter.js +7 -379
  123. package/dist/ui/shadow/input.js +6 -1140
  124. package/dist/ui/shadow/menu.js +5 -828
  125. package/dist/ui/shadow/modal.js +6 -1063
  126. package/dist/ui/shadow/nav.js +5 -223
  127. package/dist/ui/shadow/otp.js +6 -754
  128. package/dist/ui/shadow/radio.js +4 -316
  129. package/dist/ui/shadow/rich-text-editor.js +4 -1276
  130. package/dist/ui/shadow/select.js +6 -2136
  131. package/dist/ui/shadow/sidebar.js +5 -581
  132. package/dist/ui/shadow/slider.js +5 -1010
  133. package/dist/ui/shadow/switch.js +4 -335
  134. package/dist/ui/shadow/table.js +10 -4501
  135. package/dist/ui/shadow/tabs.js +6 -315
  136. package/dist/ui/shadow/tag-input.js +7 -3057
  137. package/dist/ui/shadow/textarea.js +6 -817
  138. package/dist/ui/sidebar.js +3 -581
  139. package/dist/ui/slider.js +4 -1012
  140. package/dist/ui/switch.js +4 -336
  141. package/dist/ui/table.js +9 -4502
  142. package/dist/ui/tabs.js +4 -315
  143. package/dist/ui/tag-input.js +5 -3058
  144. package/dist/ui/textarea.js +4 -819
  145. package/dist/{vite-CivRCJaf.js → vite-CfW7z2wn.js} +21 -14
  146. package/dist/vite.js +1 -1
  147. package/dist/vue.d.ts +3 -2
  148. package/package.json +10 -11
  149. package/dist/chip-strip-bNfLn52Z.js +0 -215
  150. package/dist/data-source-controller-Dx6IQ2CN.js +0 -243
  151. package/dist/data-source-options-BM4r4PRw.js +0 -558
  152. package/dist/data-source-read-HyBCRg1t.js +0 -242
  153. package/dist/excel-BXzr3uI1.js +0 -784
  154. package/dist/export-ixRdCS2y.js +0 -2388
  155. package/dist/field-tooltip-addon-CWCp19mJ.js +0 -702
  156. package/dist/field-tooltip.css_raw-U5UeTa2d.js +0 -269
  157. package/dist/filter-builder-C0T3pMx2.js +0 -208
  158. package/dist/form-control-core-BbiACMtL.js +0 -226
  159. package/dist/icon-ClxnYhBG.js +0 -19
  160. package/dist/import-Dc4eXC02.js +0 -612
  161. package/dist/light-slots-_no0r2Z-.js +0 -246
  162. package/dist/markdown-uGlE_OfJ.js +0 -20191
  163. package/dist/mono-data-grid-e9ZVBlNN.js +0 -4240
  164. package/dist/normalize-error-BmLbgANw.js +0 -1048
@@ -1,588 +1,10 @@
1
1
  import { g as monoHostChildNodes } from "../mono-ui-kvLVIf1V.js";
2
- import { a as setExternalScrollLock } from "../popup-stack-C64WCuXq.js";
3
2
  import { t as customElement } from "../mono-element-CKcT0rwv.js";
4
- import { a as defineHybridPropAliases, o as numberStringConverter, r as booleanStringConverter, t as __decorate } from "../decorate-DbYFpi8R.js";
5
- import { t as dispatchMonoEvent } from "../mono-event-BPku9HpS.js";
3
+ import { t as __decorate } from "../decorate-DbYFpi8R.js";
6
4
  import { i as guardHostTextContent, s as placeSlotNode } from "../light-slots-B5Ck0t_E.js";
7
- import { n as cssPart, r as defineCssClassAliases, t as applyCssClass } from "../css-class-B6Tc_MAx.js";
8
- import { a as validateColorProp, i as isThemeColorToken, n as colorClassToken, r as customColorStyle, t as CUSTOM_COLOR_CLASS } from "../color-CEYYtRX-.js";
9
- import { n as releaseLayoutVar, t as claimLayoutVar } from "../layout-var-BSBKY49k.js";
10
- import { LitElement, html, isServer, nothing } from "lit";
11
- import { property, state } from "lit/decorators.js";
5
+ import { a as resolveMode, i as isAutoTemporary, n as SIDEBAR_AUTO_BREAKPOINT, o as validateSidebarProps, r as generateSidebarRootClasses, t as MonoSidebarCore } from "../sidebar-core-CD6txDo3.js";
6
+ import { LitElement, html } from "lit";
12
7
 
13
- //#region src/components/sidebar/sidebar-utils.ts
14
- const SIDEBAR_AUTO_BREAKPOINT = 768;
15
- /**
16
- * `typeof window === 'undefined'` alone is NOT a safe server guard: a DOM shim
17
- * can define `window` without `matchMedia` (the @lit-labs/ssr v3 shim happens
18
- * to leave `window` undefined, but that is an implementation detail). Check
19
- * lit's `isServer` first, then feature-detect `matchMedia`.
20
- */
21
- function isAutoTemporary() {
22
- if (isServer || typeof window === "undefined") return false;
23
- if (typeof window.matchMedia !== "function") return false;
24
- return window.matchMedia(`(max-width: 767px)`).matches;
25
- }
26
- /**
27
- * Resolves the effective mode for `auto`. Other modes pass through.
28
- */
29
- function resolveMode(mode) {
30
- if (mode !== "auto") return mode;
31
- return isAutoTemporary() ? "temporary" : "permanent";
32
- }
33
- function generateSidebarRootClasses(props) {
34
- return [
35
- "mono-sidebar",
36
- `mode-${props.mode}`,
37
- `effective-${props.resolvedMode}`,
38
- `location-${props.location}`,
39
- props.density,
40
- colorClassToken(props.color),
41
- props.variant,
42
- props.open ? "open" : "closed",
43
- props.expandOnHover ? "expand-on-hover" : "",
44
- props.contained ? "contained" : "",
45
- props.persistent ? "persistent" : "",
46
- props.showScrim ? "" : "no-scrim",
47
- props.cssClassName ?? "",
48
- props.rootExtra ?? ""
49
- ].filter(Boolean).join(" ");
50
- }
51
- function validateSidebarProps(props) {
52
- const errors = [];
53
- if (props.mode && ![
54
- "permanent",
55
- "temporary",
56
- "rail",
57
- "auto"
58
- ].includes(props.mode)) errors.push(`Invalid mode: ${String(props.mode)}`);
59
- if (props.location && !["left", "right"].includes(props.location)) errors.push(`Invalid location: ${String(props.location)}`);
60
- if (props.density && ![
61
- "compact",
62
- "comfortable",
63
- "default"
64
- ].includes(props.density)) errors.push(`Invalid density: ${String(props.density)}`);
65
- if (props.variant && ![
66
- "flat",
67
- "elevated",
68
- "outlined"
69
- ].includes(props.variant)) errors.push(`Invalid variant: ${String(props.variant)}`);
70
- const colorError = validateColorProp(props.color);
71
- if (colorError) errors.push(colorError);
72
- if (typeof props.width === "number" && props.width < 0) errors.push(`width must be non-negative`);
73
- if (typeof props.railWidth === "number" && props.railWidth < 0) errors.push(`railWidth must be non-negative`);
74
- return errors;
75
- }
76
- /**
77
- * The Basecoat styling attributes for the sidebar ROOT, mirroring the props one
78
- * for one. A prop at its DEFAULT emits nothing — `:not([mono-density])` is
79
- * comfortable, `:not([mono-color])` is surface, `:not([mono-variant])` is
80
- * elevated and `:not([mono-location])` is left — so the rendered DOM is also
81
- * the shortest hand-written markup that paints the same (see sidebar.css).
82
- *
83
- * `mono-effective` is always written: it carries the mode AFTER `auto`
84
- * resolves, and it is what every layout rule keys on. A literal `color`
85
- * collapses to `custom`, with the colour itself arriving inline.
86
- */
87
- function sidebarRootAttrs(props) {
88
- return {
89
- mode: props.mode === "auto" ? null : props.mode,
90
- effective: props.resolvedMode,
91
- location: props.location === "left" ? null : props.location,
92
- density: props.density === "comfortable" ? null : props.density,
93
- variant: props.variant === "elevated" ? null : props.variant,
94
- color: !props.color || props.color === "surface" ? null : isThemeColorToken(props.color) ? props.color : CUSTOM_COLOR_CLASS
95
- };
96
- }
97
-
98
- //#endregion
99
- //#region src/components/sidebar/sidebar-core.ts
100
- /**
101
- * `MonoSidebarCore` — all render-mode-agnostic logic for `mono-sidebar`:
102
- * reactive props, hybrid aliases, mode resolution (auto→permanent/temporary via
103
- * the breakpoint), layout-var side effects, scroll-lock/escape side effects,
104
- * open/close state + events, and the chrome `render()`.
105
- *
106
- * SSR-safe: every `document`/`window` path is guarded by `isServer` (lit) — NOT
107
- * `typeof document/window`, which is unreliable under @lit-labs/ssr (it defines
108
- * both on the server).
109
- *
110
- * Leaves to each build: `createRenderRoot()`, the slot strategy, `renderSlot()`
111
- * (light: empty + capture into `[data-mono-slot]`; shadow: native `<slot>`), and
112
- * `renderIcon()` (light: `.mono-icon` UnoCSS icon; shadow: inline SVG).
113
- */
114
- const MonoSidebarCore = (superClass) => {
115
- class MonoSidebarCoreClass extends superClass {
116
- constructor(...args) {
117
- super(...args);
118
- this.modelValue = false;
119
- this.mode = "auto";
120
- this.location = "left";
121
- this.density = "comfortable";
122
- this.color = "surface";
123
- this.variant = "elevated";
124
- this.width = 264;
125
- this.railWidth = 64;
126
- this.expandOnHover = false;
127
- this.rail = null;
128
- this.contained = false;
129
- this.persistent = false;
130
- this.closeOnEscape = true;
131
- this.closeOnScrim = true;
132
- this.lockScroll = true;
133
- this.showScrim = true;
134
- this.cssClass = {};
135
- this.cssClassName = "";
136
- this._resolvedMode = "permanent";
137
- this._escapeListener = null;
138
- this._autoMql = null;
139
- this._autoMqlListener = null;
140
- this._railHovered = false;
141
- this._railPointerEnter = null;
142
- this._railPointerLeave = null;
143
- this._writtenVar = null;
144
- defineHybridPropAliases(this, [
145
- "modelValue",
146
- "railWidth",
147
- "expandOnHover",
148
- "closeOnEscape",
149
- "closeOnScrim",
150
- "lockScroll",
151
- "showScrim"
152
- ]);
153
- defineCssClassAliases(this, (value) => this._setCssClass(value));
154
- }
155
- static get observedAttributes() {
156
- return [
157
- ...super.observedAttributes ?? [],
158
- "modelvalue",
159
- "css-class",
160
- "cssclass"
161
- ];
162
- }
163
- attributeChangedCallback(name, oldValue, newValue) {
164
- super.attributeChangedCallback(name, oldValue, newValue);
165
- if (oldValue === newValue) return;
166
- if (name === "modelvalue") this.modelValue = booleanStringConverter.fromAttribute(newValue);
167
- else if (name === "css-class" || name === "cssclass") this._setCssClass(newValue);
168
- }
169
- connectedCallback() {
170
- super.connectedCallback();
171
- this._recomputeResolvedMode();
172
- this._recomputeRailCollapsedAttr();
173
- if (isServer) return;
174
- this._setupAutoModeListener();
175
- this._setupRailHoverListeners();
176
- this._writeLayoutVar();
177
- if (this._resolvedMode === "temporary" && this.modelValue) this._applyOpenSideEffects();
178
- }
179
- disconnectedCallback() {
180
- if (!isServer) {
181
- this._releaseSideEffects();
182
- this._teardownAutoModeListener();
183
- this._teardownRailHoverListeners();
184
- this._clearLayoutVar();
185
- }
186
- super.disconnectedCallback();
187
- }
188
- willUpdate(changed) {
189
- if (changed.has("rail") && this.rail !== null && this.modelValue !== this.rail) this.modelValue = this.rail;
190
- if (changed.has("mode")) this._recomputeResolvedMode();
191
- if (changed.has("mode") || changed.has("_resolvedMode") || changed.has("modelValue") || changed.has("rail") || changed.has("expandOnHover")) this._recomputeRailCollapsedAttr();
192
- if (isServer) return;
193
- if (changed.has("modelValue") || changed.has("mode")) {
194
- if (this._resolvedMode === "temporary" && this.modelValue) this._applyOpenSideEffects();
195
- else this._releaseSideEffects();
196
- }
197
- if (changed.has("mode") || changed.has("width") || changed.has("railWidth") || changed.has("location") || changed.has("modelValue") || changed.has("contained")) this._writeLayoutVar();
198
- }
199
- /**
200
- * `connectedCallback` computes `_resolvedMode` / `data-rail-collapsed` /
201
- * the layout var against SERVER assumptions (no `matchMedia`, no
202
- * `localStorage` → always "desktop, rail, collapsed"). Under SSR the host's
203
- * viewport-derived props only settle after Vue mounts, and nothing else
204
- * re-runs these if no prop happens to change afterwards. Re-run them once
205
- * after the first real client render so the viewport wins.
206
- */
207
- firstUpdated(changed) {
208
- super.firstUpdated?.(changed);
209
- if (isServer) return;
210
- this._recomputeResolvedMode();
211
- this._recomputeRailCollapsedAttr();
212
- this._writeLayoutVar();
213
- this._syncRootFromState();
214
- }
215
- updated(changed) {
216
- super.updated?.(changed);
217
- if (isServer) return;
218
- this._syncRootFromState();
219
- }
220
- /**
221
- * Re-assert the root element's class / style / aria-hidden from live state.
222
- *
223
- * `@lit-labs/ssr-client`'s hydration records the values it is handed as
224
- * ALREADY COMMITTED without writing them to the DOM — it assumes the server
225
- * markup already matches. Under nuxt-ssr-lit that assumption is routinely
226
- * false: the server has no viewport (no `matchMedia`, no `localStorage`) so
227
- * it always emits desktop assumptions, and Vue has since set the real
228
- * mobile props. Lit then sees "no change" and never commits, freezing the
229
- * rail visible on a phone while `mode` already reads `temporary`.
230
- *
231
- * These three attributes carry every viewport-derived decision, so writing
232
- * them imperatively after each update keeps the DOM honest. Idempotent —
233
- * a no-op whenever lit's own bindings are working.
234
- */
235
- _syncRootFromState() {
236
- const root = this.renderRoot?.querySelector?.("[mono-sidebar], .mono-sidebar");
237
- if (!root) return;
238
- const classes = this._rootClasses;
239
- if (root.getAttribute("class") !== classes) root.setAttribute("class", classes);
240
- const style = this._inlineRootStyle;
241
- if (root.getAttribute("style") !== style) root.setAttribute("style", style);
242
- const aria = this._rootAriaHidden;
243
- if (root.getAttribute("aria-hidden") !== aria) root.setAttribute("aria-hidden", aria);
244
- const attrs = sidebarRootAttrs({
245
- mode: this.mode,
246
- resolvedMode: this._resolvedMode,
247
- location: this.location,
248
- density: this.density,
249
- color: this.color,
250
- variant: this.variant
251
- });
252
- const wanted = {
253
- "mono-effective": attrs.effective,
254
- "mono-mode": attrs.mode ?? null,
255
- "mono-location": attrs.location ?? null,
256
- "mono-density": attrs.density ?? null,
257
- "mono-color": attrs.color ?? null,
258
- "mono-variant": attrs.variant ?? null,
259
- "mono-open": this.modelValue ? "" : null,
260
- "mono-expand-on-hover": this.expandOnHover ? "" : null,
261
- "mono-contained": this.contained ? "" : null,
262
- "mono-persistent": this.persistent ? "" : null,
263
- "mono-no-scrim": this.showScrim ? null : ""
264
- };
265
- for (const [name, value] of Object.entries(wanted)) if (value === null) {
266
- if (root.hasAttribute(name)) root.removeAttribute(name);
267
- } else if (root.getAttribute(name) !== value) root.setAttribute(name, value);
268
- }
269
- _setupAutoModeListener() {
270
- if (typeof window === "undefined" || !window.matchMedia) return;
271
- this._autoMql = window.matchMedia(`(max-width: ${768 - 1}px)`);
272
- this._autoMqlListener = () => {
273
- if (this.mode === "auto") {
274
- this._recomputeResolvedMode();
275
- this._writeLayoutVar();
276
- this.requestUpdate();
277
- }
278
- };
279
- this._autoMql.addEventListener("change", this._autoMqlListener);
280
- }
281
- _teardownAutoModeListener() {
282
- if (this._autoMql && this._autoMqlListener) this._autoMql.removeEventListener("change", this._autoMqlListener);
283
- this._autoMql = null;
284
- this._autoMqlListener = null;
285
- }
286
- _recomputeResolvedMode() {
287
- this._resolvedMode = resolveMode(this.mode);
288
- }
289
- /**
290
- * Publish the rail-collapsed state as a host attribute (`data-rail-collapsed`).
291
- * Cross-shadow CSS (descendant selectors + inherited custom properties on the
292
- * shadow `.mono-sidebar-body`) cannot reach a slotted *light* `<mono-menu>`, so
293
- * the menu mirrors this attribute and collapses itself. Collapsed = rail mode,
294
- * not toggled-open, and not hover-expanded. Pure attribute toggle → SSR-safe.
295
- */
296
- _recomputeRailCollapsedAttr() {
297
- if (this._resolvedMode === "rail" && !this.modelValue && !(this.expandOnHover && this._railHovered)) this.setAttribute("data-rail-collapsed", "");
298
- else this.removeAttribute("data-rail-collapsed");
299
- }
300
- _setupRailHoverListeners() {
301
- if (this._railPointerEnter) return;
302
- this._railPointerEnter = () => {
303
- if (this.expandOnHover) this._railHovered = true;
304
- this._recomputeRailCollapsedAttr();
305
- };
306
- this._railPointerLeave = () => {
307
- this._railHovered = false;
308
- this._recomputeRailCollapsedAttr();
309
- };
310
- this.addEventListener("pointerenter", this._railPointerEnter);
311
- this.addEventListener("pointerleave", this._railPointerLeave);
312
- }
313
- _teardownRailHoverListeners() {
314
- if (this._railPointerEnter) this.removeEventListener("pointerenter", this._railPointerEnter);
315
- if (this._railPointerLeave) this.removeEventListener("pointerleave", this._railPointerLeave);
316
- this._railPointerEnter = null;
317
- this._railPointerLeave = null;
318
- this._railHovered = false;
319
- }
320
- _writeLayoutVar() {
321
- if (isServer) return;
322
- if (this.contained) {
323
- if (this._writtenVar) releaseLayoutVar(this._writtenVar, this);
324
- this._writtenVar = null;
325
- return;
326
- }
327
- const myVar = this.location === "right" ? "--mono-sidebar-right-width" : "--mono-sidebar-left-width";
328
- if (this._writtenVar && this._writtenVar !== myVar) releaseLayoutVar(this._writtenVar, this);
329
- let pushPx = 0;
330
- if (this._resolvedMode === "permanent") pushPx = this.width;
331
- else if (this._resolvedMode === "rail") pushPx = this.modelValue ? this.width : this.railWidth;
332
- else pushPx = 0;
333
- this._writtenVar = myVar;
334
- claimLayoutVar(myVar, this, `${pushPx}px`);
335
- }
336
- _clearLayoutVar() {
337
- if (isServer) return;
338
- if (this._writtenVar) releaseLayoutVar(this._writtenVar, this);
339
- this._writtenVar = null;
340
- }
341
- _setCssClass(value) {
342
- applyCssClass(this, value);
343
- }
344
- _cls(base, key) {
345
- return cssPart(this.cssClass, base, key);
346
- }
347
- get _rootClasses() {
348
- return generateSidebarRootClasses({
349
- mode: this.mode,
350
- resolvedMode: this._resolvedMode,
351
- location: this.location,
352
- density: this.density,
353
- color: this.color,
354
- variant: this.variant,
355
- open: this.modelValue,
356
- expandOnHover: this.expandOnHover,
357
- contained: this.contained,
358
- persistent: this.persistent,
359
- showScrim: this.showScrim,
360
- cssClassName: this.cssClassName,
361
- rootExtra: this.cssClass?.root
362
- });
363
- }
364
- _applyOpenSideEffects() {
365
- if (isServer || this.contained) return;
366
- setExternalScrollLock(this, this.lockScroll);
367
- if (this.closeOnEscape && !this._escapeListener) {
368
- const listener = (event) => {
369
- if (event.key === "Escape" && this.modelValue && !this.persistent && this._resolvedMode === "temporary") this.hide("escape", event);
370
- };
371
- this._escapeListener = listener;
372
- document.addEventListener("keydown", listener);
373
- }
374
- }
375
- _releaseSideEffects() {
376
- if (isServer) return;
377
- setExternalScrollLock(this, false);
378
- if (this._escapeListener) {
379
- document.removeEventListener("keydown", this._escapeListener);
380
- this._escapeListener = null;
381
- }
382
- }
383
- _emitChange(detail) {
384
- dispatchMonoEvent(this, "change", detail);
385
- if (detail.value && !detail.oldValue) dispatchMonoEvent(this, "open", detail);
386
- else if (!detail.value && detail.oldValue) dispatchMonoEvent(this, "close", detail);
387
- }
388
- open(source = "manual", sourceEvent) {
389
- if (this.modelValue) return;
390
- const oldValue = this.modelValue;
391
- this.modelValue = true;
392
- this._emitChange({
393
- modelValue: true,
394
- currentValue: true,
395
- oldValue,
396
- value: true,
397
- source,
398
- sourceEvent
399
- });
400
- }
401
- hide(source = "manual", sourceEvent) {
402
- if (!this.modelValue) return;
403
- const oldValue = this.modelValue;
404
- this.modelValue = false;
405
- this._emitChange({
406
- modelValue: false,
407
- currentValue: false,
408
- oldValue,
409
- value: false,
410
- source,
411
- sourceEvent
412
- });
413
- }
414
- close(source = "manual", sourceEvent) {
415
- this.hide(source, sourceEvent);
416
- }
417
- toggle(source = "manual", sourceEvent) {
418
- if (this.modelValue) this.hide(source, sourceEvent);
419
- else this.open(source, sourceEvent);
420
- }
421
- expandRail() {
422
- if (this._resolvedMode !== "rail") return;
423
- this.open("rail-toggle");
424
- }
425
- collapseRail() {
426
- if (this._resolvedMode !== "rail") return;
427
- this.hide("rail-toggle");
428
- }
429
- _handleScrimClick(event) {
430
- if (!this.closeOnScrim || this.persistent) return;
431
- if (this._resolvedMode !== "temporary") return;
432
- this.hide("scrim", event);
433
- }
434
- _handleRailToggle(event) {
435
- if (this._resolvedMode !== "rail") return;
436
- this.toggle("rail-toggle", event);
437
- }
438
- /** Per-region slot content — overridden per build. */
439
- renderSlot(_name) {
440
- return html``;
441
- }
442
- /** Internal icon — light: UnoCSS `.mono-icon`; shadow: inline SVG. */
443
- renderIcon(_name) {
444
- return html``;
445
- }
446
- /**
447
- * The root's inline style. This getter is the ONLY safe place to put an inline
448
- * custom property on the root: `_syncRootFromState()` re-asserts the whole `style`
449
- * attribute after every update, so anything written out-of-band is wiped.
450
- *
451
- * `customColorStyle` returns '' unless `color` is a literal rather than a palette
452
- * slot; on the root it outranks the class-based `.mono-sidebar.<token>` presets,
453
- * which is exactly the precedence we want (flavor < prop).
454
- */
455
- get _inlineRootStyle() {
456
- return `--mono-sidebar-width: ${this.width}px; --mono-sidebar-rail-width: ${this.railWidth}px;` + customColorStyle(isThemeColorToken(this.color) || this.color === "surface" ? "" : this.color, "sidebar");
457
- }
458
- get _rootAriaHidden() {
459
- return this._resolvedMode === "temporary" && !this.modelValue ? "true" : "false";
460
- }
461
- render() {
462
- const inlineStyle = this._inlineRootStyle;
463
- const showDefaultRailToggle = this._resolvedMode === "rail" && this.rail === null;
464
- const attrs = sidebarRootAttrs({
465
- mode: this.mode,
466
- resolvedMode: this._resolvedMode,
467
- location: this.location,
468
- density: this.density,
469
- color: this.color,
470
- variant: this.variant
471
- });
472
- return html`
473
- <div
474
- class=${this._rootClasses}
475
- style=${inlineStyle}
476
- role="navigation"
477
- aria-hidden=${this._resolvedMode === "temporary" && !this.modelValue ? "true" : "false"}
478
- mono-sidebar
479
- mono-effective=${attrs.effective}
480
- mono-mode=${attrs.mode ?? nothing}
481
- mono-location=${attrs.location ?? nothing}
482
- mono-density=${attrs.density ?? nothing}
483
- mono-color=${attrs.color ?? nothing}
484
- mono-variant=${attrs.variant ?? nothing}
485
- ?mono-open=${this.modelValue}
486
- ?mono-expand-on-hover=${this.expandOnHover}
487
- ?mono-contained=${this.contained}
488
- ?mono-persistent=${this.persistent}
489
- ?mono-no-scrim=${!this.showScrim}
490
- >
491
- <div class=${this._cls("mono-sidebar-scrim", "scrim")} mono-scrim @click=${this._handleScrimClick}></div>
492
-
493
- <aside class=${this._cls("mono-sidebar-panel", "panel")} mono-panel>
494
- <div class="mono-sidebar-topbar" mono-topbar>
495
- <div class=${this._cls("mono-sidebar-header", "header")} mono-header data-mono-slot="header">
496
- ${this.renderSlot("header")}
497
- </div>
498
- ${showDefaultRailToggle ? html`
499
- <div class=${this._cls("mono-sidebar-rail", "rail")} mono-rail>
500
- <button
501
- type="button"
502
- class=${this._cls("mono-sidebar-rail-toggle", "railToggle")}
503
- mono-rail-toggle
504
- aria-label=${this.modelValue ? "Collapse sidebar" : "Expand sidebar"}
505
- @click=${this._handleRailToggle}
506
- >
507
- ${this.renderIcon("chevron")}
508
- </button>
509
- </div>
510
- ` : nothing}
511
- </div>
512
- <div class=${this._cls("mono-sidebar-body", "body")} mono-body data-mono-slot="body">
513
- ${this.renderSlot("body")}
514
- </div>
515
- <div class=${this._cls("mono-sidebar-footer", "footer")} mono-footer data-mono-slot="footer">
516
- ${this.renderSlot("footer")}
517
- </div>
518
- </aside>
519
- </div>
520
- `;
521
- }
522
- }
523
- __decorate([property({
524
- attribute: "model-value",
525
- reflect: true,
526
- converter: booleanStringConverter
527
- })], MonoSidebarCoreClass.prototype, "modelValue", void 0);
528
- __decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "mode", void 0);
529
- __decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "location", void 0);
530
- __decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "density", void 0);
531
- __decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "color", void 0);
532
- __decorate([property({ type: String })], MonoSidebarCoreClass.prototype, "variant", void 0);
533
- __decorate([property({ converter: numberStringConverter })], MonoSidebarCoreClass.prototype, "width", void 0);
534
- __decorate([property({
535
- attribute: "rail-width",
536
- converter: numberStringConverter
537
- })], MonoSidebarCoreClass.prototype, "railWidth", void 0);
538
- __decorate([property({
539
- attribute: "expand-on-hover",
540
- converter: booleanStringConverter
541
- })], MonoSidebarCoreClass.prototype, "expandOnHover", void 0);
542
- __decorate([property({
543
- attribute: "rail",
544
- converter: {
545
- fromAttribute(value) {
546
- if (value === null) return null;
547
- const normalized = value.toLowerCase().trim();
548
- return normalized === "" || normalized === "true";
549
- },
550
- toAttribute() {
551
- return null;
552
- }
553
- }
554
- })], MonoSidebarCoreClass.prototype, "rail", void 0);
555
- __decorate([property({
556
- reflect: true,
557
- converter: booleanStringConverter
558
- })], MonoSidebarCoreClass.prototype, "contained", void 0);
559
- __decorate([property({
560
- reflect: true,
561
- converter: booleanStringConverter
562
- })], MonoSidebarCoreClass.prototype, "persistent", void 0);
563
- __decorate([property({
564
- attribute: "close-on-escape",
565
- converter: booleanStringConverter
566
- })], MonoSidebarCoreClass.prototype, "closeOnEscape", void 0);
567
- __decorate([property({
568
- attribute: "close-on-scrim",
569
- converter: booleanStringConverter
570
- })], MonoSidebarCoreClass.prototype, "closeOnScrim", void 0);
571
- __decorate([property({
572
- attribute: "lock-scroll",
573
- converter: booleanStringConverter
574
- })], MonoSidebarCoreClass.prototype, "lockScroll", void 0);
575
- __decorate([property({
576
- attribute: "show-scrim",
577
- converter: booleanStringConverter
578
- })], MonoSidebarCoreClass.prototype, "showScrim", void 0);
579
- __decorate([property({ attribute: false })], MonoSidebarCoreClass.prototype, "cssClass", void 0);
580
- __decorate([property({ attribute: false })], MonoSidebarCoreClass.prototype, "cssClassName", void 0);
581
- __decorate([state()], MonoSidebarCoreClass.prototype, "_resolvedMode", void 0);
582
- return MonoSidebarCoreClass;
583
- };
584
-
585
- //#endregion
586
8
  //#region src/components/sidebar/mono-sidebar.ts
587
9
  let MonoSidebar = class MonoSidebar extends MonoSidebarCore(LitElement) {
588
10
  constructor(..._args) {