@schukai/monster 4.136.29 → 4.137.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 (12) hide show
  1. package/package.json +1 -1
  2. package/source/components/datatable/dataset.mjs +1 -1
  3. package/source/components/form/choice-cards.mjs +525 -0
  4. package/source/components/form/form.mjs +1 -1
  5. package/source/components/form/style/choice-cards.pcss +172 -0
  6. package/source/components/form/style/field-layout.pcss +8 -0
  7. package/source/components/form/stylesheet/choice-cards.mjs +31 -0
  8. package/source/components/form/stylesheet/field-layout.mjs +7 -14
  9. package/source/components/form/util/floating-ui.mjs +29 -5
  10. package/source/monster.mjs +1 -0
  11. package/test/cases/components/form/choice-cards.mjs +192 -0
  12. package/test/cases/components/form/floating-ui.mjs +63 -0
package/source/components/form/style/choice-cards.pcss ADDED
@@ -0,0 +1,172 @@
1
+ @import "../../style/control.pcss";
2
+ @import "../../style/color.pcss";
3
+ @import "../../style/theme.pcss";
4
+ @import "../../style/border.pcss";
5
+
6
+ :host {
7
+ box-sizing: border-box;
8
+ color: var(--monster-color-primary-1);
9
+ display: block;
10
+ font-family: var(--monster-font-family);
11
+ font-size: 1rem;
12
+ }
13
+
14
+ *,
15
+ *::before,
16
+ *::after {
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ [data-monster-role="control"] {
21
+ outline: none;
22
+ width: 100%;
23
+ }
24
+
25
+ [data-monster-role="items"] {
26
+ display: flex;
27
+ flex-wrap: wrap;
28
+ gap: var(--monster-choice-cards-gap, 0.75rem);
29
+ }
30
+
31
+ [data-monster-role="choice"] {
32
+ align-items: center;
33
+ appearance: none;
34
+ background: var(--monster-bg-color-primary-1);
35
+ border-color: var(--monster-theme-control-border-color);
36
+ border-radius: var(--monster-theme-control-border-radius);
37
+ border-style: var(--monster-theme-control-border-style);
38
+ border-width: var(--monster-theme-control-border-width);
39
+ color: var(--monster-color-primary-1);
40
+ cursor: pointer;
41
+ display: grid;
42
+ font: inherit;
43
+ gap: 0.55rem;
44
+ grid-template-rows: 1.65rem auto;
45
+ justify-items: center;
46
+ min-height: var(--monster-choice-cards-min-height, 6.75rem);
47
+ min-width: 0;
48
+ padding: 1.35rem 0.85rem 1.45rem;
49
+ position: relative;
50
+ text-align: center;
51
+ width: min(100%, var(--monster-choice-cards-card-width, 10.5rem));
52
+ }
53
+
54
+ [data-monster-role="content"] {
55
+ align-items: center;
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: 0.55rem;
59
+ justify-content: center;
60
+ min-height: 100%;
61
+ min-width: 0;
62
+ }
63
+
64
+ ::slotted([slot]) {
65
+ min-width: 0;
66
+ }
67
+
68
+ [data-monster-role="choice"]:focus-visible {
69
+ outline: 1px dashed var(--monster-color-selection-4);
70
+ outline-offset: 2px;
71
+ }
72
+
73
+ [data-monster-role="choice"]:hover:not(:disabled) {
74
+ border-color: var(--monster-bg-color-primary-4);
75
+ }
76
+
77
+ [data-monster-role="choice"].selected {
78
+ border-color: var(--monster-color-primary-1);
79
+ }
80
+
81
+ [data-monster-role="choice"].custom-content {
82
+ align-items: center;
83
+ display: flex;
84
+ justify-content: center;
85
+ }
86
+
87
+ [data-monster-role="choice"]:disabled {
88
+ cursor: not-allowed;
89
+ opacity: 0.6;
90
+ }
91
+
92
+ [data-monster-role="indicator"] {
93
+ align-items: center;
94
+ background: var(--monster-color-primary-1);
95
+ border-radius: 999px;
96
+ color: var(--monster-bg-color-primary-1);
97
+ display: none;
98
+ height: 1rem;
99
+ justify-content: center;
100
+ left: 0.32rem;
101
+ position: absolute;
102
+ top: 0.32rem;
103
+ width: 1rem;
104
+ }
105
+
106
+ [data-monster-role="choice"].selected [data-monster-role="indicator"] {
107
+ display: flex;
108
+ }
109
+
110
+ [data-monster-role="indicator"]::before {
111
+ background: currentColor;
112
+ content: "";
113
+ height: 0.72rem;
114
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
115
+ mask-position: center;
116
+ mask-repeat: no-repeat;
117
+ mask-size: contain;
118
+ width: 0.72rem;
119
+ }
120
+
121
+ [data-monster-role="visual"] {
122
+ align-items: center;
123
+ color: var(--monster-color-primary-1);
124
+ display: inline-flex;
125
+ height: 1.8rem;
126
+ justify-content: center;
127
+ width: 1.8rem;
128
+ }
129
+
130
+ [data-monster-role="visual"].empty {
131
+ display: none;
132
+ }
133
+
134
+ [data-monster-role="visual"][data-choice-icon]::before {
135
+ background: currentColor;
136
+ content: "";
137
+ height: 1.8rem;
138
+ mask-position: center;
139
+ mask-repeat: no-repeat;
140
+ mask-size: contain;
141
+ width: 1.8rem;
142
+ }
143
+
144
+ [data-monster-role="visual"][data-choice-icon="project-assets"]::before,
145
+ [data-monster-role="visual"][data-choice-icon="stack"]::before {
146
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4 9-4Z'/%3E%3Cpath d='m3 10 9 4 9-4'/%3E%3Cpath d='m3 14 9 4 9-4'/%3E%3C/g%3E%3C/svg%3E");
147
+ }
148
+
149
+ [data-monster-role="visual"][data-choice-icon="api-collection"]::before,
150
+ [data-monster-role="visual"][data-choice-icon="api"]::before {
151
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='5' y='3' width='14' height='16' rx='1.5'/%3E%3Cpath d='M8 7h8M8 15h8M9 11l2-2 2 2M15 9l-2 2 2 2M9 21h6'/%3E%3C/g%3E%3C/svg%3E");
152
+ }
153
+
154
+ [data-monster-role="label"] {
155
+ display: block;
156
+ font-size: 0.86rem;
157
+ font-weight: 600;
158
+ line-height: 1.25;
159
+ max-width: 100%;
160
+ min-width: 0;
161
+ overflow-wrap: anywhere;
162
+ }
163
+
164
+ @media (prefers-color-scheme: light) {
165
+ [data-monster-role="choice"] {
166
+ border-color: var(--monster-bg-color-primary-3);
167
+ }
168
+
169
+ [data-monster-role="choice"].selected {
170
+ border-color: var(--monster-color-primary-1);
171
+ }
172
+ }
package/source/components/form/style/field-layout.pcss CHANGED
@@ -174,6 +174,7 @@
174
174
 
175
175
  .monster-field-layout > input,
176
176
  .monster-field-layout > monster-toggle-switch,
177
+ .monster-field-layout > monster-choice-cards,
177
178
  .monster-field-layout > select {
178
179
  min-height: 1.8rem;
179
180
  padding: 0.5rem;
@@ -210,6 +211,7 @@
210
211
 
211
212
  .monster-field-layout > input,
212
213
  .monster-field-layout > monster-toggle-switch,
214
+ .monster-field-layout > monster-choice-cards,
213
215
  .monster-field-layout > monster-password,
214
216
  .monster-field-layout > select,
215
217
  .monster-field-layout > [data-monster-validation-wrapper] {
@@ -234,6 +236,11 @@
234
236
  padding: 0;
235
237
  }
236
238
 
239
+ .monster-field-layout > monster-choice-cards {
240
+ align-self: stretch;
241
+ padding: 0;
242
+ }
243
+
237
244
  @container field-layout (max-width: 1200px) {
238
245
  .monster-field-layout.multiple-columns {
239
246
  grid-template-columns: auto 1fr auto 1fr;
@@ -315,6 +322,7 @@
315
322
  .monster-field-layout > div.wrapper,
316
323
  .monster-field-layout > input,
317
324
  .monster-field-layout > monster-toggle-switch,
325
+ .monster-field-layout > monster-choice-cards,
318
326
  .monster-field-layout > monster-password,
319
327
  .monster-field-layout > textarea,
320
328
  .monster-field-layout > select,
package/source/components/form/stylesheet/choice-cards.mjs ADDED
@@ -0,0 +1,31 @@
1
+ /**
2
+ * Copyright © Volker Schukai and all contributing authors, 2026. 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
+
13
+ import {addAttributeToken} from "../../../dom/attributes.mjs";
14
+ import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
15
+
16
+ export {ChoiceCardsStyleSheet}
17
+
18
+ /**
19
+ * @private
20
+ * @type {CSSStyleSheet}
21
+ */
22
+ const ChoiceCardsStyleSheet = new CSSStyleSheet();
23
+
24
+ try {
25
+ ChoiceCardsStyleSheet.insertRule(`
26
+ @layer choicecards {
27
+ [data-monster-role=control]{box-sizing:border-box}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}:host{box-sizing:border-box;color:var(--monster-color-primary-1);display:block;font-family:var(--monster-font-family);font-size:1rem}*,:after,:before{box-sizing:border-box}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=items]{display:flex;flex-wrap:wrap;gap:var(--monster-choice-cards-gap,.75rem)}[data-monster-role=choice]{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);color:var(--monster-color-primary-1);cursor:pointer;display:grid;font:inherit;gap:.55rem;grid-template-rows:1.65rem auto;justify-items:center;min-height:var(--monster-choice-cards-min-height,6.75rem);min-width:0;padding:1.35rem .85rem 1.45rem;position:relative;text-align:center;width:min(100%,var(--monster-choice-cards-card-width,10.5rem))}[data-monster-role=content]{align-items:center;display:flex;flex-direction:column;gap:.55rem;justify-content:center;min-height:100%;min-width:0}::slotted([slot]){min-width:0}[data-monster-role=choice]:focus-visible{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}[data-monster-role=choice]:hover:not(:disabled){border-color:var(--monster-bg-color-primary-4)}[data-monster-role=choice].selected{border-color:var(--monster-color-primary-1)}[data-monster-role=choice].custom-content{align-items:center;display:flex;justify-content:center}[data-monster-role=choice]:disabled{cursor:not-allowed;opacity:.6}[data-monster-role=indicator]{align-items:center;background:var(--monster-color-primary-1);border-radius:999px;color:var(--monster-bg-color-primary-1);display:none;height:1rem;justify-content:center;left:.32rem;position:absolute;top:.32rem;width:1rem}[data-monster-role=choice].selected [data-monster-role=indicator]{display:flex}[data-monster-role=indicator]:before{background:currentColor;content:\"\";height:.72rem;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:.72rem}[data-monster-role=visual]{align-items:center;color:var(--monster-color-primary-1);display:inline-flex;height:1.8rem;justify-content:center;width:1.8rem}[data-monster-role=visual].empty{display:none}[data-monster-role=visual][data-choice-icon]:before{background:currentColor;content:\"\";height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:1.8rem}[data-monster-role=visual][data-choice-icon=project-assets]:before,[data-monster-role=visual][data-choice-icon=stack]:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4zM3 10l9 4 9-4M3 14l9 4 9-4'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4zM3 10l9 4 9-4M3 14l9 4 9-4'/%3E%3C/g%3E%3C/svg%3E\")}[data-monster-role=visual][data-choice-icon=api-collection]:before,[data-monster-role=visual][data-choice-icon=api]:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='16' x='5' y='3' rx='1.5'/%3E%3Cpath d='M8 7h8m-8 8h8m-7-4 2-2 2 2m2-2-2 2 2 2m-6 8h6'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='16' x='5' y='3' rx='1.5'/%3E%3Cpath d='M8 7h8m-8 8h8m-7-4 2-2 2 2m2-2-2 2 2 2m-6 8h6'/%3E%3C/g%3E%3C/svg%3E\")}[data-monster-role=label]{display:block;font-size:.86rem;font-weight:600;line-height:1.25;max-width:100%;min-width:0;overflow-wrap:anywhere}@media (prefers-color-scheme:light){[data-monster-role=choice]{border-color:var(--monster-bg-color-primary-3)}[data-monster-role=choice].selected{border-color:var(--monster-color-primary-1)}}
28
+ }`, 0);
29
+ } catch (e) {
30
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
31
+ }
package/source/components/form/stylesheet/field-layout.mjs CHANGED
@@ -10,10 +10,10 @@
10
10
  * For more information about purchasing a commercial license, please contact Volker Schukai.
11
11
  */
12
12
 
13
- import { addAttributeToken } from "../../../dom/attributes.mjs";
14
- import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
13
+ import {addAttributeToken} from "../../../dom/attributes.mjs";
14
+ import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
15
15
 
16
- export { FieldLayoutStyleSheet };
16
+ export {FieldLayoutStyleSheet}
17
17
 
18
18
  /**
19
19
  * @private
@@ -22,17 +22,10 @@ export { FieldLayoutStyleSheet };
22
22
  const FieldLayoutStyleSheet = new CSSStyleSheet();
23
23
 
24
24
  try {
25
- FieldLayoutStyleSheet.insertRule(
26
- `
25
+ FieldLayoutStyleSheet.insertRule(`
27
26
  @layer fieldlayout {
28
- :after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}[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}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-field-layout{container-name:field-layout;container-type:inline-size;display:grid;grid-template-columns:auto 1fr;grid-gap:.8rem;accent-color:var(--monster-color-secondary-2);--monster-field-set-h1-size:xx-large;--monster-field-set-h2-size:x-large;--monster-field-set-h3-size:large;--monster-field-set-h4-size:medium;--monster-field-set-h5-size:small;--monster-field-set-h6-size:smaller;--monster-field-set-heading-margin-top:1rem;--monster-field-set-heading-margin-top-first:0.3rem;--monster-field-set-heading-margin-top-1200:2.2rem;--monster-field-set-heading-margin-top-first-1200:0.6rem;--monster-field-set-heading-margin-top-900:1.8rem;--monster-field-set-heading-margin-top-first-900:0.5rem;--monster-field-set-heading-margin-top-500:1.3rem;--monster-field-set-heading-margin-top-first-500:0.4rem;font-size:1rem;font-weight:400;line-height:1.6}.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr auto 1fr}.monster-field-layout>.label,.monster-field-layout>label{align-items:flex-start;border-bottom:thin dotted var(--monster-color-primary-1);color:var(--monster-color-primary-1);display:flex;gap:.4rem;justify-content:space-between}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6,.monster-field-layout>hr{grid-column:1/-1;margin:var(--monster-field-set-heading-margin-top,1rem) 0 .1rem}.monster-field-layout>h1{font-size:var(--monster-field-set-h1-size,xx-large)}.monster-field-layout>h2{font-size:var(--monster-field-set-h2-size,x-large)}.monster-field-layout>h3{font-size:var(--monster-field-set-h3-size,large)}.monster-field-layout>h4{font-size:var(--monster-field-set-h4-size,medium)}.monster-field-layout>h5{font-size:var(--monster-field-set-h5-size,small)}.monster-field-layout>h6{font-size:var(--monster-field-set-h6-size,smaller)}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first,.3rem)}.monster-field-layout>hr{border:none;border-top:thin dotted var(--monster-color-gray-3);margin:1rem 0;padding:0}.monster-field-layout>hr.delimiter{border:none;margin:0;padding:0}.monster-field-layout>.grid-span-full{grid-column-end:-1}.monster-field-layout>.grid-start-1{grid-column-start:1}.monster-field-layout>.grid-start-2{grid-column-start:2}.monster-field-layout>.grid-start-3{grid-column-start:3}.monster-field-layout>.grid-start-4{grid-column-start:4}.monster-field-layout>.grid-double-span{grid-column:span 3}.monster-field-layout>.grid-to-end{grid-column-end:-1}.monster-field-layout>input[type=email],.monster-field-layout>input[type=number],.monster-field-layout>input[type=password],.monster-field-layout>input[type=tel],.monster-field-layout>input[type=text]{height:-webkit-fill-available}.monster-field-layout>input:not([type=checkbox]):not([type=radio]),.monster-field-layout>select{border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);width:100%}.monster-field-layout>select{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-field-layout>select:disabled,.monster-field-layout>select[readonly]{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input:not([type=checkbox]):not([type=radio])[readonly]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-field-layout>input[readonly]:not([type=checkbox]):not([type=radio]){background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{box-sizing:border-box;min-height:1.8rem;padding:.5rem}.monster-field-layout>monster-password{min-height:1.8rem}.monster-field-layout>input[type=color]{min-height:2.2rem;padding:0 .2rem;width:100%}.monster-field-layout>input[type=date],.monster-field-layout>input[type=time]{min-height:2.2rem;padding:0 .2rem}.monster-field-layout>input[type=checkbox],.monster-field-layout>input[type=radio]{min-height:2.2rem;padding:0 .2rem;width:1.8rem}.monster-field-layout>input[type=file]{min-height:1.2rem;padding:.4rem}.monster-field-layout>[data-monster-validation-wrapper],.monster-field-layout>input,.monster-field-layout>monster-password,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{align-self:end}.monster-field-layout>select[multiple],.monster-field-layout>select[size]:not([size=\"1\"]){align-self:stretch;min-height:7.2rem;overflow-y:auto;padding:.25rem .35rem}.monster-field-layout>select[multiple] option,.monster-field-layout>select[size]:not([size=\"1\"]) option{padding-block:.15rem}.monster-field-layout>monster-toggle-switch{padding:0;width:3rem}@container field-layout (max-width: 1200px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-1200,2.2rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-1200,.6rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 900px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-900,1.8rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-900,.5rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 500px){.monster-field-layout{gap:0;grid-template-columns:1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{grid-column:1;margin:var(--monster-field-set-heading-margin-top-500,1.3rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-500,.4rem)}.monster-field-layout>div.wrapper,.monster-field-layout>input,.monster-field-layout>monster-action-button,.monster-field-layout>monster-api-button,.monster-field-layout>monster-button,.monster-field-layout>monster-datasource-save-button,.monster-field-layout>monster-password,.monster-field-layout>monster-state-button,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select,.monster-field-layout>textarea{grid-column:1}.monster-field-layout>.label,.monster-field-layout>label{border-bottom:none;padding-top:1rem}.monster-field-layout.multiple-columns{grid-template-columns:1fr}.monster-field-layout>.grid-span-full,.monster-field-layout>.grid-start-1,.monster-field-layout>.grid-start-2,.monster-field-layout>.grid-start-3,.monster-field-layout>.grid-start-4{grid-column:1!important}.monster-field-layout>.grid-double-span{grid-column:span 1!important}}
29
- }`,
30
- 0,
31
- );
27
+ :after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}[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}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-field-layout{container-name:field-layout;container-type:inline-size;display:grid;grid-template-columns:auto 1fr;grid-gap:.8rem;accent-color:var(--monster-color-secondary-2);--monster-field-set-h1-size:xx-large;--monster-field-set-h2-size:x-large;--monster-field-set-h3-size:large;--monster-field-set-h4-size:medium;--monster-field-set-h5-size:small;--monster-field-set-h6-size:smaller;--monster-field-set-heading-margin-top:1rem;--monster-field-set-heading-margin-top-first:0.3rem;--monster-field-set-heading-margin-top-1200:2.2rem;--monster-field-set-heading-margin-top-first-1200:0.6rem;--monster-field-set-heading-margin-top-900:1.8rem;--monster-field-set-heading-margin-top-first-900:0.5rem;--monster-field-set-heading-margin-top-500:1.3rem;--monster-field-set-heading-margin-top-first-500:0.4rem;font-size:1rem;font-weight:400;line-height:1.6}.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr auto 1fr}.monster-field-layout>.label,.monster-field-layout>label{align-items:flex-start;border-bottom:thin dotted var(--monster-color-primary-1);color:var(--monster-color-primary-1);display:flex;gap:.4rem;justify-content:space-between}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6,.monster-field-layout>hr{grid-column:1/-1;margin:var(--monster-field-set-heading-margin-top,1rem) 0 .1rem}.monster-field-layout>h1{font-size:var(--monster-field-set-h1-size,xx-large)}.monster-field-layout>h2{font-size:var(--monster-field-set-h2-size,x-large)}.monster-field-layout>h3{font-size:var(--monster-field-set-h3-size,large)}.monster-field-layout>h4{font-size:var(--monster-field-set-h4-size,medium)}.monster-field-layout>h5{font-size:var(--monster-field-set-h5-size,small)}.monster-field-layout>h6{font-size:var(--monster-field-set-h6-size,smaller)}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first,.3rem)}.monster-field-layout>hr{border:none;border-top:thin dotted var(--monster-color-gray-3);margin:1rem 0;padding:0}.monster-field-layout>hr.delimiter{border:none;margin:0;padding:0}.monster-field-layout>.grid-span-full{grid-column-end:-1}.monster-field-layout>.grid-start-1{grid-column-start:1}.monster-field-layout>.grid-start-2{grid-column-start:2}.monster-field-layout>.grid-start-3{grid-column-start:3}.monster-field-layout>.grid-start-4{grid-column-start:4}.monster-field-layout>.grid-double-span{grid-column:span 3}.monster-field-layout>.grid-to-end{grid-column-end:-1}.monster-field-layout>input[type=email],.monster-field-layout>input[type=number],.monster-field-layout>input[type=password],.monster-field-layout>input[type=tel],.monster-field-layout>input[type=text]{height:-webkit-fill-available}.monster-field-layout>input:not([type=checkbox]):not([type=radio]),.monster-field-layout>select{border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);width:100%}.monster-field-layout>select{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-field-layout>select:disabled,.monster-field-layout>select[readonly]{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input:not([type=checkbox]):not([type=radio])[readonly]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-field-layout>input[readonly]:not([type=checkbox]):not([type=radio]){background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input,.monster-field-layout>monster-choice-cards,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{box-sizing:border-box;min-height:1.8rem;padding:.5rem}.monster-field-layout>monster-password{min-height:1.8rem}.monster-field-layout>input[type=color]{min-height:2.2rem;padding:0 .2rem;width:100%}.monster-field-layout>input[type=date],.monster-field-layout>input[type=time]{min-height:2.2rem;padding:0 .2rem}.monster-field-layout>input[type=checkbox],.monster-field-layout>input[type=radio]{min-height:2.2rem;padding:0 .2rem;width:1.8rem}.monster-field-layout>input[type=file]{min-height:1.2rem;padding:.4rem}.monster-field-layout>[data-monster-validation-wrapper],.monster-field-layout>input,.monster-field-layout>monster-choice-cards,.monster-field-layout>monster-password,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{align-self:end}.monster-field-layout>select[multiple],.monster-field-layout>select[size]:not([size=\"1\"]){align-self:stretch;min-height:7.2rem;overflow-y:auto;padding:.25rem .35rem}.monster-field-layout>select[multiple] option,.monster-field-layout>select[size]:not([size=\"1\"]) option{padding-block:.15rem}.monster-field-layout>monster-toggle-switch{padding:0;width:3rem}.monster-field-layout>monster-choice-cards{align-self:stretch;padding:0}@container field-layout (max-width: 1200px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-1200,2.2rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-1200,.6rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 900px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-900,1.8rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-900,.5rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 500px){.monster-field-layout{gap:0;grid-template-columns:1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{grid-column:1;margin:var(--monster-field-set-heading-margin-top-500,1.3rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-500,.4rem)}.monster-field-layout>div.wrapper,.monster-field-layout>input,.monster-field-layout>monster-action-button,.monster-field-layout>monster-api-button,.monster-field-layout>monster-button,.monster-field-layout>monster-choice-cards,.monster-field-layout>monster-datasource-save-button,.monster-field-layout>monster-password,.monster-field-layout>monster-state-button,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select,.monster-field-layout>textarea{grid-column:1}.monster-field-layout>.label,.monster-field-layout>label{border-bottom:none;padding-top:1rem}.monster-field-layout.multiple-columns{grid-template-columns:1fr}.monster-field-layout>.grid-span-full,.monster-field-layout>.grid-start-1,.monster-field-layout>.grid-start-2,.monster-field-layout>.grid-start-3,.monster-field-layout>.grid-start-4{grid-column:1!important}.monster-field-layout>.grid-double-span{grid-column:span 1!important}}
28
+ }`, 0);
32
29
  } catch (e) {
33
- addAttributeToken(
34
- document.getRootNode().querySelector("html"),
35
- ATTRIBUTE_ERRORMESSAGE,
36
- e + "",
37
- );
30
+ addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
38
31
  }
package/source/components/form/util/floating-ui.mjs CHANGED
@@ -42,6 +42,7 @@ const floatingResizeObserverMap = new WeakMap();
42
42
  const floatingSyncCycleMap = new WeakMap();
43
43
  const floatingAppearanceFrameMap = new WeakMap();
44
44
  const floatingAppearanceTimeoutMap = new WeakMap();
45
+ const adaptiveScrollHeightDatasetKey = "monsterAdaptiveScrollHeight";
45
46
 
46
47
  /**
47
48
  * @private
@@ -417,13 +418,16 @@ function applyAdaptiveFloatingContentSize(floatingElement, maxHeight) {
417
418
  if (overflowMode === "horizontal" || overflowMode === "both") {
418
419
  // Overlay-aware modes keep the parent wrapper sized to the real inline content.
419
420
  // Nested poppers may still escape, but they must not inflate the outer popper height.
420
- applyOverlayAwareContentHeight(
421
+ const contentHeightConstrained = applyOverlayAwareContentHeight(
421
422
  contentElement,
422
423
  preferredContentHeight,
423
424
  nextContentMaxHeight,
424
425
  minimumReadableHeight,
425
426
  );
426
- syncNestedScrollContainerHeight(contentElement, nextContentMaxHeight);
427
+ syncNestedScrollContainerHeight(
428
+ contentElement,
429
+ contentHeightConstrained ? nextContentMaxHeight : null,
430
+ );
427
431
  return;
428
432
  }
429
433
 
@@ -462,14 +466,25 @@ function applyOverlayAwareContentHeight(
462
466
  : "visible";
463
467
  contentElement.style.overflowY = isConstrained ? "auto" : "visible";
464
468
 
465
- if (Number.isFinite(constrainedHeight) && constrainedHeight > 0) {
469
+ if (
470
+ isConstrained &&
471
+ Number.isFinite(constrainedHeight) &&
472
+ constrainedHeight > 0
473
+ ) {
466
474
  contentElement.style.height = `${constrainedHeight}px`;
467
475
  contentElement.style.maxHeight = `${constrainedHeight}px`;
468
- return;
476
+ return true;
469
477
  }
470
478
 
479
+ // overflow-x:auto computes overflow-y to auto in browsers, so an unconstrained
480
+ // horizontal wrapper must keep its natural height to avoid a spurious scrollbar.
471
481
  contentElement.style.removeProperty("height");
472
- contentElement.style.removeProperty("maxHeight");
482
+ if (Number.isFinite(contentMaxHeight) && contentMaxHeight > 0) {
483
+ contentElement.style.maxHeight = `${contentMaxHeight}px`;
484
+ } else {
485
+ contentElement.style.removeProperty("maxHeight");
486
+ }
487
+ return false;
473
488
  }
474
489
 
475
490
  function getFloatingContentElement(floatingElement) {
@@ -591,11 +606,19 @@ function syncNestedScrollContainerHeight(contentElement, contentMaxHeight) {
591
606
  );
592
607
  nestedScrollableElement.style.height = `${nextNestedHeight}px`;
593
608
  nestedScrollableElement.style.maxHeight = `${nextNestedHeight}px`;
609
+ nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey] = "true";
610
+ return;
611
+ }
612
+
613
+ if (
614
+ nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey] !== "true"
615
+ ) {
594
616
  return;
595
617
  }
596
618
 
597
619
  nestedScrollableElement.style.height = "";
598
620
  nestedScrollableElement.style.maxHeight = "";
621
+ delete nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey];
599
622
  }
600
623
 
601
624
  function resolveNestedScrollContainerHeight(
@@ -723,6 +746,7 @@ function resetAdaptiveFloatingElementSize(floatingElement) {
723
746
 
724
747
  nestedScrollableElement.style.removeProperty("height");
725
748
  nestedScrollableElement.style.removeProperty("maxHeight");
749
+ delete nestedScrollableElement.dataset[adaptiveScrollHeightDatasetKey];
726
750
  }
727
751
 
728
752
  function runFloatingUpdateHook(popperElement) {
package/source/monster.mjs CHANGED
@@ -83,6 +83,7 @@ export * from "./components/form/credential-button.mjs";
83
83
  export * from "./components/form/wizard.mjs";
84
84
  export * from "./components/form/input-group.mjs";
85
85
  export * from "./components/form/checklist.mjs";
86
+ export * from "./components/form/choice-cards.mjs";
86
87
  export * from "./components/form/shadow-reload.mjs";
87
88
  export * from "./components/form/button.mjs";
88
89
  export * from "./components/form/field-set.mjs";