@schukai/monster 4.101.0 → 4.103.1

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 (23) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/package.json +1 -1
  3. package/source/components/datatable/save-button.mjs +55 -0
  4. package/source/components/datatable/style/pagination.pcss +2 -2
  5. package/source/components/datatable/stylesheet/pagination.mjs +1 -1
  6. package/source/components/form/checklist.mjs +10 -2
  7. package/source/components/form/context-base.mjs +160 -0
  8. package/source/components/form/context-help.mjs +3 -4
  9. package/source/components/form/context-hint.mjs +116 -0
  10. package/source/components/form/context-info.mjs +117 -0
  11. package/source/components/form/context-note.mjs +117 -0
  12. package/source/components/form/context-success.mjs +117 -0
  13. package/source/components/form/context-warning.mjs +117 -0
  14. package/source/components/form/message-state-button.mjs +553 -553
  15. package/source/components/form/style/context-error.pcss +7 -1
  16. package/source/components/form/style/context-help.pcss +7 -1
  17. package/source/components/form/stylesheet/checklist.mjs +13 -6
  18. package/source/components/form/stylesheet/context-error.mjs +1 -1
  19. package/source/components/form/stylesheet/context-help.mjs +1 -1
  20. package/source/components/style/table.css +0 -1
  21. package/source/components/style/table.pcss +0 -1
  22. package/source/components/stylesheet/table.mjs +1 -1
  23. package/source/monster.mjs +10 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,30 @@
2
2
 
3
3
 
4
4
 
5
+ ## [4.103.1] - 2026-01-19
6
+
7
+ ### Bug Fixes
8
+
9
+ - update table color
10
+
11
+
12
+
13
+ ## [4.103.0] - 2026-01-18
14
+
15
+ ### Add Features
16
+
17
+ - Enhance save button functionality with timeout feature
18
+
19
+
20
+
21
+ ## [4.102.0] - 2026-01-17
22
+
23
+ ### Add Features
24
+
25
+ - Update versioning, enhance pagination styles, and introduce new context components
26
+
27
+
28
+
5
29
  ## [4.101.0] - 2026-01-17
6
30
 
7
31
  ### Add Features
package/package.json CHANGED
@@ -1 +1 @@
1
- {"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.101.0"}
1
+ {"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.103.1"}
package/source/components/datatable/save-button.mjs CHANGED
@@ -75,6 +75,8 @@ const saveInFlightSymbol = Symbol("saveInFlight");
75
75
  const pendingResetSymbol = Symbol("pendingReset");
76
76
  const fetchInFlightSymbol = Symbol("fetchInFlight");
77
77
  const originInitializedSymbol = Symbol("originInitialized");
78
+ const internalDisableTimeoutSymbol = Symbol("internalDisableTimeout");
79
+ const internalDisableVersionSymbol = Symbol("internalDisableVersion");
78
80
 
79
81
  /**
80
82
  * A save button component
@@ -144,6 +146,8 @@ class SaveButton extends CustomElement {
144
146
 
145
147
  disabled: false,
146
148
 
149
+ disableTimeout: 15000,
150
+
147
151
  logLevel: "off",
148
152
  });
149
153
 
@@ -399,6 +403,7 @@ function initEventHandler() {
399
403
  }
400
404
  this[saveInFlightSymbol] = true;
401
405
  this[stateButtonElementSymbol].setOption("disabled", true);
406
+ scheduleInternalDisableTimeout.call(this);
402
407
 
403
408
  flushLinkedForms
404
409
  .call(this)
@@ -425,6 +430,7 @@ function initEventHandler() {
425
430
  })
426
431
  .finally(() => {
427
432
  this[saveInFlightSymbol] = false;
433
+ clearInternalDisableTimeout.call(this);
428
434
  if (this[pendingResetSymbol]) {
429
435
  this[pendingResetSymbol] = false;
430
436
  clearOriginValues.call(this);
@@ -588,6 +594,7 @@ function updateChangesState() {
588
594
  ensureChangedState.call(this);
589
595
  this[stateButtonElementSymbol].setState("changed");
590
596
  this[stateButtonElementSymbol].setOption("disabled", false);
597
+ clearInternalDisableTimeout.call(this);
591
598
  this.setOption("changes", changeCount);
592
599
  this.setOption(
593
600
  "classes.badge",
@@ -598,6 +605,7 @@ function updateChangesState() {
598
605
  } else {
599
606
  this[stateButtonElementSymbol].removeState();
600
607
  this[stateButtonElementSymbol].setOption("disabled", true);
608
+ clearInternalDisableTimeout.call(this);
601
609
  this.setOption("changes", "");
602
610
  this.setOption(
603
611
  "classes.badge",
@@ -703,6 +711,53 @@ function ensureChangedState() {
703
711
  stateButton.setOption("states", states);
704
712
  }
705
713
 
714
+ /**
715
+ * @private
716
+ */
717
+ function scheduleInternalDisableTimeout() {
718
+ const timeout = this.getOption("disableTimeout");
719
+ if (!Number.isInteger(timeout) || timeout <= 0) {
720
+ return;
721
+ }
722
+
723
+ clearInternalDisableTimeout.call(this);
724
+
725
+ const version = (this[internalDisableVersionSymbol] || 0) + 1;
726
+ this[internalDisableVersionSymbol] = version;
727
+
728
+ this[internalDisableTimeoutSymbol] = setTimeout(() => {
729
+ if (this[internalDisableVersionSymbol] !== version) {
730
+ return;
731
+ }
732
+ if (this[saveInFlightSymbol] !== true) {
733
+ return;
734
+ }
735
+ if (
736
+ this.getOption("disabled", false) === true ||
737
+ this.hasAttribute("disabled")
738
+ ) {
739
+ return;
740
+ }
741
+
742
+ const changes = Number(this.getOption("changes") || 0);
743
+ if (!Number.isFinite(changes) || changes <= 0) {
744
+ return;
745
+ }
746
+
747
+ this[stateButtonElementSymbol]?.setOption("disabled", false);
748
+ }, timeout);
749
+ }
750
+
751
+ /**
752
+ * @private
753
+ */
754
+ function clearInternalDisableTimeout() {
755
+ if (this[internalDisableTimeoutSymbol]) {
756
+ clearTimeout(this[internalDisableTimeoutSymbol]);
757
+ this[internalDisableTimeoutSymbol] = null;
758
+ }
759
+ }
760
+
706
761
  /**
707
762
  * @private
708
763
  * @return {State}
package/source/components/datatable/style/pagination.pcss CHANGED
@@ -52,7 +52,7 @@
52
52
 
53
53
  & ul.pagination-numbers-hidden li[data-monster-role="pagination-prev"],
54
54
  & ul.pagination-compact li[data-monster-role="pagination-prev"] {
55
- justify-content: flex-start;
55
+ justify-self: center;
56
56
  }
57
57
 
58
58
  & ul.pagination-numbers-hidden li[data-monster-role="pagination-summary"],
@@ -62,7 +62,7 @@
62
62
 
63
63
  & ul.pagination-numbers-hidden li[data-monster-role="pagination-next"],
64
64
  & ul.pagination-compact li[data-monster-role="pagination-next"] {
65
- justify-content: flex-end;
65
+ justify-self: center;
66
66
  }
67
67
 
68
68
  & ul li {
package/source/components/datatable/stylesheet/pagination.mjs CHANGED
@@ -25,7 +25,7 @@ try {
25
25
  PaginationStyleSheet.insertRule(
26
26
  `
27
27
  @layer pagination {
28
- :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}button{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-button-primary,button{align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:disabled{cursor:not-allowed}button:active{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s;z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.6}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul.pagination-no-wrap{box-sizing:border-box;flex-wrap:nowrap;max-width:100%;overflow:hidden;width:100%}[data-monster-role=pagination] ul:not([data-monster-adaptive-ready=true]){visibility:hidden}[data-monster-role=pagination] ul.pagination-compact,[data-monster-role=pagination] ul.pagination-numbers-hidden{align-items:center;display:grid;gap:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-content:stretch;max-width:100%;width:100%}[data-monster-role=pagination] ul.pagination-compact li[data-monster-role=pagination-prev],[data-monster-role=pagination] ul.pagination-numbers-hidden li[data-monster-role=pagination-prev]{justify-content:flex-start}[data-monster-role=pagination] ul.pagination-compact li[data-monster-role=pagination-summary],[data-monster-role=pagination] ul.pagination-numbers-hidden li[data-monster-role=pagination-summary]{justify-content:center}[data-monster-role=pagination] ul.pagination-compact li[data-monster-role=pagination-next],[data-monster-role=pagination] ul.pagination-numbers-hidden li[data-monster-role=pagination-next]{justify-content:flex-end}[data-monster-role=pagination] ul li{margin:0 1px}[data-monster-role=pagination] ul.pagination-compact li{padding:0 4px}[data-monster-role=pagination] ul.pagination-numbers-hidden li{border-left:none;padding:0 6px}[data-monster-role=pagination] ul.pagination-compact li{border-left:none}[data-monster-role=pagination] [data-monster-role=pagination-summary]{align-items:center;display:none;flex:1 1 auto;font-size:.85rem;justify-content:center;padding:0 6px;text-align:center;white-space:nowrap}[data-monster-role=pagination] ul.pagination-compact [data-monster-role=pagination-summary],[data-monster-role=pagination] ul.pagination-numbers-hidden [data-monster-role=pagination-summary]{border-left:none}[data-monster-role=pagination] ul li a{align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-color:var(--monster-bg-color-primary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-theme-control-color);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch;width:-moz-max-content;width:max-content}.current:is([data-monster-role=pagination] ul li a){background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);cursor:unset}.disabled:is([data-monster-role=pagination] ul li a){background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1);cursor:not-allowed}
28
+ :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}button{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-button-primary,button{align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:disabled{cursor:not-allowed}button:active{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s;z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.6}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul.pagination-no-wrap{box-sizing:border-box;flex-wrap:nowrap;max-width:100%;overflow:hidden;width:100%}[data-monster-role=pagination] ul:not([data-monster-adaptive-ready=true]){visibility:hidden}[data-monster-role=pagination] ul.pagination-compact,[data-monster-role=pagination] ul.pagination-numbers-hidden{align-items:center;display:grid;gap:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);justify-content:stretch;max-width:100%;width:100%}[data-monster-role=pagination] ul.pagination-compact li[data-monster-role=pagination-prev],[data-monster-role=pagination] ul.pagination-numbers-hidden li[data-monster-role=pagination-prev]{justify-self:center}[data-monster-role=pagination] ul.pagination-compact li[data-monster-role=pagination-summary],[data-monster-role=pagination] ul.pagination-numbers-hidden li[data-monster-role=pagination-summary]{justify-content:center}[data-monster-role=pagination] ul.pagination-compact li[data-monster-role=pagination-next],[data-monster-role=pagination] ul.pagination-numbers-hidden li[data-monster-role=pagination-next]{justify-self:center}[data-monster-role=pagination] ul li{margin:0 1px}[data-monster-role=pagination] ul.pagination-compact li{padding:0 4px}[data-monster-role=pagination] ul.pagination-numbers-hidden li{border-left:none;padding:0 6px}[data-monster-role=pagination] ul.pagination-compact li{border-left:none}[data-monster-role=pagination] [data-monster-role=pagination-summary]{align-items:center;display:none;flex:1 1 auto;font-size:.85rem;justify-content:center;padding:0 6px;text-align:center;white-space:nowrap}[data-monster-role=pagination] ul.pagination-compact [data-monster-role=pagination-summary],[data-monster-role=pagination] ul.pagination-numbers-hidden [data-monster-role=pagination-summary]{border-left:none}[data-monster-role=pagination] ul li a{align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;border-color:var(--monster-bg-color-primary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-theme-control-color);cursor:pointer;display:flex;font-family:var(--monster-font-family),sans-serif;font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch;width:-moz-max-content;width:max-content}.current:is([data-monster-role=pagination] ul li a){background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);cursor:unset}.disabled:is([data-monster-role=pagination] ul li a){background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1);cursor:not-allowed}
29
29
  }`,
30
30
  0,
31
31
  );
package/source/components/form/checklist.mjs CHANGED
@@ -22,7 +22,11 @@ import {
22
22
  registerCustomElement,
23
23
  attributeObserverSymbol,
24
24
  } from "../../dom/customelement.mjs";
25
- import { fireCustomEvent, fireEvent, findTargetElementFromEvent } from "../../dom/events.mjs";
25
+ import {
26
+ fireCustomEvent,
27
+ fireEvent,
28
+ findTargetElementFromEvent,
29
+ } from "../../dom/events.mjs";
26
30
  import { ChecklistStyleSheet } from "./stylesheet/checklist.mjs";
27
31
  import { addAttributeToken } from "../../dom/attributes.mjs";
28
32
  import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
@@ -282,7 +286,11 @@ function applyItemsAttribute() {
282
286
  this.setOption("items", normalized.items);
283
287
  return true;
284
288
  } catch (error) {
285
- addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || String(error));
289
+ addAttributeToken(
290
+ this,
291
+ ATTRIBUTE_ERRORMESSAGE,
292
+ error?.message || String(error),
293
+ );
286
294
  return true;
287
295
  }
288
296
  }
package/source/components/form/context-base.mjs ADDED
@@ -0,0 +1,160 @@
1
+ /**
2
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
3
+ * Node module: @schukai/monster
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
11
+ *
12
+ * SPDX-License-Identifier: AGPL-3.0
13
+ */
14
+
15
+ import { assembleMethodSymbol } from "../../dom/customelement.mjs";
16
+ import { Popper } from "../layout/popper.mjs";
17
+
18
+ export { ContextBase };
19
+
20
+ /**
21
+ * @private
22
+ * @type {symbol}
23
+ */
24
+ const slotElementSymbol = Symbol("slotElement");
25
+
26
+ /**
27
+ * @private
28
+ * @type {symbol}
29
+ */
30
+ const contentObserverSymbol = Symbol("contentObserver");
31
+
32
+ /**
33
+ * @private
34
+ * @type {symbol}
35
+ */
36
+ const slotChangeHandlerSymbol = Symbol("slotChangeHandler");
37
+
38
+ /**
39
+ * @private
40
+ * @type {symbol}
41
+ */
42
+ const iconElementSymbol = Symbol("iconElement");
43
+
44
+ /**
45
+ * Base class for context popper controls that depend on slot content.
46
+ */
47
+ class ContextBase extends Popper {
48
+ /**
49
+ * @return {Object}
50
+ */
51
+ get defaults() {
52
+ return Object.assign({}, super.defaults, {
53
+ features: Object.assign({}, super.defaults.features, {
54
+ showIconWithoutContent: false,
55
+ }),
56
+ });
57
+ }
58
+
59
+ /**
60
+ * @private
61
+ * @return {void}
62
+ */
63
+ [assembleMethodSymbol]() {
64
+ super[assembleMethodSymbol]();
65
+ initContentObserver.call(this);
66
+ updateContentState.call(this);
67
+ }
68
+
69
+ /**
70
+ * @return {void}
71
+ */
72
+ disconnectedCallback() {
73
+ super.disconnectedCallback();
74
+ disconnectContentObserver.call(this);
75
+ }
76
+ }
77
+
78
+ /**
79
+ * @private
80
+ * @return {void}
81
+ */
82
+ function initContentObserver() {
83
+ this[slotElementSymbol] = this.shadowRoot?.querySelector("slot") || null;
84
+ this[iconElementSymbol] =
85
+ this.shadowRoot?.querySelector("[data-monster-role=button] svg") || null;
86
+ this[slotChangeHandlerSymbol] = () => updateContentState.call(this);
87
+
88
+ if (this[slotElementSymbol]) {
89
+ this[slotElementSymbol].addEventListener(
90
+ "slotchange",
91
+ this[slotChangeHandlerSymbol],
92
+ );
93
+ }
94
+
95
+ this[contentObserverSymbol] = new MutationObserver(() => {
96
+ updateContentState.call(this);
97
+ });
98
+ this[contentObserverSymbol].observe(this, {
99
+ childList: true,
100
+ subtree: true,
101
+ characterData: true,
102
+ attributes: true,
103
+ });
104
+ }
105
+
106
+ /**
107
+ * @private
108
+ * @return {void}
109
+ */
110
+ function disconnectContentObserver() {
111
+ if (this[slotElementSymbol] && this[slotChangeHandlerSymbol]) {
112
+ this[slotElementSymbol].removeEventListener(
113
+ "slotchange",
114
+ this[slotChangeHandlerSymbol],
115
+ );
116
+ }
117
+
118
+ if (this[contentObserverSymbol] instanceof MutationObserver) {
119
+ this[contentObserverSymbol].disconnect();
120
+ }
121
+ }
122
+
123
+ /**
124
+ * @private
125
+ * @return {boolean}
126
+ */
127
+ function hasContent() {
128
+ for (const node of Array.from(this.childNodes)) {
129
+ if (node.nodeType === Node.ELEMENT_NODE) {
130
+ return true;
131
+ }
132
+
133
+ if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
134
+ return true;
135
+ }
136
+ }
137
+
138
+ return false;
139
+ }
140
+
141
+ /**
142
+ * @private
143
+ * @return {void}
144
+ */
145
+ function updateContentState() {
146
+ const contentAvailable = hasContent.call(this);
147
+ const showIconWithoutContent =
148
+ this.getOption("features.showIconWithoutContent", false) === true;
149
+
150
+ this.setOption("disabled", !contentAvailable);
151
+
152
+ if (!contentAvailable) {
153
+ this.hideDialog();
154
+ }
155
+
156
+ if (this[iconElementSymbol]) {
157
+ const showIcon = contentAvailable || showIconWithoutContent;
158
+ this[iconElementSymbol].classList.toggle("hidden", !showIcon);
159
+ }
160
+ }
package/source/components/form/context-help.mjs CHANGED
@@ -14,9 +14,8 @@
14
14
 
15
15
  import { instanceSymbol } from "../../constants.mjs";
16
16
  import { registerCustomElement } from "../../dom/customelement.mjs";
17
- import { CustomControl } from "../../dom/customcontrol.mjs";
18
17
  import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
19
- import { Popper } from "../layout/popper.mjs";
18
+ import { ContextBase } from "./context-base.mjs";
20
19
 
21
20
  export { ContextHelp };
22
21
 
@@ -31,7 +30,7 @@ export { ContextHelp };
31
30
  * @copyright Volker Schukai
32
31
  * @summary A context help control
33
32
  */
34
- class ContextHelp extends Popper {
33
+ class ContextHelp extends ContextBase {
35
34
  /**
36
35
  * This method is called by the `instanceof` operator.
37
36
  * @return {symbol}
@@ -89,7 +88,7 @@ function getTemplate() {
89
88
  return `
90
89
  <div data-monster-role="control" part="control">
91
90
 
92
- <div data-monster-role="button" part="button"><svg
91
+ <div data-monster-role="button" part="button"><svg class="hidden"
93
92
  xmlns="http://www.w3.org/2000/svg"
94
93
  width="1.2em"
95
94
  height="1.2em"
package/source/components/form/context-hint.mjs ADDED
@@ -0,0 +1,116 @@
1
+ /**
2
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
3
+ * Node module: @schukai/monster
4
+ *
5
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
6
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
7
+ *
8
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
9
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
10
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
11
+ *
12
+ * SPDX-License-Identifier: AGPL-3.0
13
+ */
14
+
15
+ import { instanceSymbol } from "../../constants.mjs";
16
+ import { registerCustomElement } from "../../dom/customelement.mjs";
17
+ import { ContextHelpStyleSheet } from "./stylesheet/context-help.mjs";
18
+ import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
19
+ import { ContextBase } from "./context-base.mjs";
20
+
21
+ export { ContextHint };
22
+
23
+ /**
24
+ * A context hint control.
25
+ *
26
+ * @fragments /fragments/components/form/context-hint
27
+ *
28
+ * @since 3.55.0
29
+ * @copyright Volker Schukai
30
+ * @summary A context hint control
31
+ */
32
+ class ContextHint extends ContextBase {
33
+ /**
34
+ * This method is called by the `instanceof` operator.
35
+ * @return {symbol}
36
+ */
37
+ static get [instanceSymbol]() {
38
+ return Symbol.for(
39
+ "@schukai/monster/components/form/context-hint@@instance",
40
+ );
41
+ }
42
+
43
+ /**
44
+ * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
45
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
46
+ *
47
+ * The individual configuration values can be found in the table.
48
+ *
49
+ * @property {Object} templates - The templates for the control.
50
+ * @property {string} templates.main - The main template.
51
+ * @property {string} mode - The mode of the popper. Possible values are `click`, `enter` and `hover`.
52
+ * @property {string} content - The content of the popper.
53
+ * @property {object} popper - The popper options.
54
+ * @property {string} popper.placement - The placement of the popper.
55
+ * @property {Object} classes - Custom CSS classes.
56
+ * @property {string} classes.button - CSS class for the button element.
57
+ */
58
+ get defaults() {
59
+ return Object.assign({}, super.defaults, {
60
+ templates: {
61
+ main: getTemplate(),
62
+ },
63
+ mode: "auto",
64
+ classes: {
65
+ button: "monster-theme-tertiary-2",
66
+ },
67
+ });
68
+ }
69
+
70
+ /**
71
+ * @return {string}
72
+ */
73
+ static getTag() {
74
+ return "monster-context-hint";
75
+ }
76
+
77
+ /**
78
+ * @return {CSSStyleSheet[]}
79
+ */
80
+ static getCSSStyleSheet() {
81
+ return [ContextHelpStyleSheet, ThemeStyleSheet];
82
+ }
83
+ }
84
+
85
+ /**
86
+ * @private
87
+ * @return {string}
88
+ */
89
+ function getTemplate() {
90
+ // language=HTML
91
+ return `
92
+ <div data-monster-role="control" part="control">
93
+
94
+ <div data-monster-role="button"
95
+ data-monster-attributes="class path:classes.button"
96
+ part="button"><svg class="hidden"
97
+ xmlns="http://www.w3.org/2000/svg"
98
+ width="1.2em"
99
+ height="1.2em"
100
+ fill="currentColor"
101
+ viewBox="0 0 16 16">
102
+ <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1"/>
103
+ </svg></div>
104
+
105
+ <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
106
+ <div data-monster-role="arrow"></div>
107
+ <div part="content" class="flex">
108
+ <slot></slot>
109
+ </div>
110
+ </div>
111
+
112
+ </div>
113
+ `;
114
+ }
115
+
116
+ registerCustomElement(ContextHint);