@schukai/monster 4.143.9 → 4.144.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 (8) hide show
  1. package/package.json +1 -1
  2. package/source/components/form/control-bar.mjs +0 -42
  3. package/source/components/layout/style/tabs.pcss +11 -1
  4. package/source/components/layout/stylesheet/tabs.mjs +1 -1
  5. package/source/components/layout/tabs.mjs +78 -3
  6. package/source/components/layout/vertical-tabs.mjs +78 -3
  7. package/test/cases/components/form/control-bar.mjs +12 -3
  8. package/test/cases/components/layout/tabs.mjs +122 -0
package/package.json CHANGED
@@ -1 +1 @@
1
- {"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.143.9"}
1
+ {"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.144.0"}
package/source/components/form/control-bar.mjs CHANGED
@@ -275,15 +275,12 @@ class ControlBar extends CustomElement {
275
275
  needsMeasure: true,
276
276
  needsLayout: true,
277
277
  needsObserve: true,
278
- initialLayoutPending: true,
279
- initialLayoutOpacity: undefined,
280
278
  suppressSlotChange: false,
281
279
  suppressMutation: false,
282
280
  suppressResize: false,
283
281
  };
284
282
 
285
283
  initControlReferences.call(this);
286
- hideControlBarUntilInitialLayout.call(this);
287
284
  initEventHandler.call(this);
288
285
 
289
286
  // setup structure
@@ -482,44 +479,6 @@ function isElementSelfHidden(element) {
482
479
  );
483
480
  }
484
481
 
485
- /**
486
- * @private
487
- * @return {void}
488
- */
489
- function hideControlBarUntilInitialLayout() {
490
- const state = this[layoutStateSymbol];
491
- if (!state || !(this[controlBarElementSymbol] instanceof HTMLElement)) {
492
- return;
493
- }
494
-
495
- state.initialLayoutOpacity = this[controlBarElementSymbol].style.opacity;
496
- this[controlBarElementSymbol].style.opacity = "0";
497
- }
498
-
499
- /**
500
- * @private
501
- * @return {void}
502
- */
503
- function revealControlBarAfterInitialLayout() {
504
- const state = this[layoutStateSymbol];
505
- if (
506
- !state ||
507
- state.initialLayoutPending !== true ||
508
- !(this[controlBarElementSymbol] instanceof HTMLElement)
509
- ) {
510
- return;
511
- }
512
-
513
- state.initialLayoutPending = false;
514
- const initialOpacity = state.initialLayoutOpacity;
515
- if (typeof initialOpacity === "string" && initialOpacity !== "") {
516
- this[controlBarElementSymbol].style.opacity = initialOpacity;
517
- return;
518
- }
519
-
520
- this[controlBarElementSymbol].style.removeProperty("opacity");
521
- }
522
-
523
482
  /**
524
483
  * @private
525
484
  */
@@ -734,7 +693,6 @@ function runLayout() {
734
693
  })
735
694
  .finally(() => {
736
695
  state.running = false;
737
- revealControlBarAfterInitialLayout.call(this);
738
696
  if (state.needsObserve || state.needsMeasure || state.needsLayout) {
739
697
  scheduleLayoutFrame.call(this);
740
698
  }
package/source/components/layout/style/tabs.pcss CHANGED
@@ -147,10 +147,20 @@ nav[data-monster-role=nav] {
147
147
  border-bottom-width: 0;
148
148
  }
149
149
 
150
- [data-monster-role=nav] button img {
150
+ [data-monster-role=nav] button [part=icon] {
151
151
  width: 1.3rem;
152
152
  height: 1.3rem;
153
153
  margin-left: 0.40rem;
154
+ flex: 0 0 auto;
155
+ }
156
+
157
+ [data-monster-role=nav] button [part=icon][data-monster-icon-mode=mask] {
158
+ display: inline-block;
159
+ background-color: currentColor;
160
+ mask-image: var(--monster-tab-icon-mask-image);
161
+ mask-position: center;
162
+ mask-repeat: no-repeat;
163
+ mask-size: contain;
154
164
  }
155
165
 
156
166
  ::slotted(:not([slot]):not(.active)) {
package/source/components/layout/stylesheet/tabs.mjs CHANGED
@@ -25,7 +25,7 @@ try {
25
25
  TabsStyleSheet.insertRule(
26
26
  `
27
27
  @layer tabs {
28
- :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-0{border-width:0;border-radius:0;border-style:none}.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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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)}.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{color:var(--monster-theme-on-color);background-color:var(--monster-theme-on-bg-color)}.monster-theme-off{color:var(--monster-theme-off-color);background-color:var(--monster-theme-off-bg-color)}div[data-monster-role=popper]{box-sizing:border-box;display:none;padding:1.1em;z-index:var(--monster-z-index-modal);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border-radius:var(--monster-border-radius);border-width:var(--monster-border-width);border-style:var(--monster-border-style);border-color:var(--monster-bg-color-primary-4);box-shadow:var(--monster-box-shadow-1)}[data-popper-arrow],[data-popper-arrow]:before{position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);height:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);background:inherit}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{visibility:visible;content:\"\";transform:rotate(45deg);box-sizing:border-box}div[data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=top]>[data-popper-arrow]:before{border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}div[data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=bottom]>[data-popper-arrow]:before{border-right:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:transparent}div[data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=left]>[data-popper-arrow]:before{border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:transparent}div[data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=right]>[data-popper-arrow]:before{border-right:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;color:var(--monster-color-primary-4);background-color:var(--monster-bg-color-primary-4)}.monster-badge-primary-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-badge-secondary-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-badge-tertiary-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-badge-destructive-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-badge-success-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-badge-warning-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-badge-error-pill{padding:.25em .6em;border-radius:10rem}[data-monster-role=nav] button.hidden{display:none}nav[data-monster-role=nav]{overflow:hidden;display:flex;align-items:flex-end;flex-direction:row;flex-wrap:nowrap;box-sizing:border-box;margin-bottom:.75rem;border-bottom-width:thin;border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-2)}[data-monster-role=nav] button .remove-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-size:16px;background-position:100% 100%;background-repeat:no-repeat;width:16px;min-height:16px;order:2;height:16px;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");flex-wrap:nowrap}[data-monster-role=nav] button span{display:flex;align-items:center;white-space:pre;font-family:var(--monster-font-family);font-size:1rem;line-height:1.4;font-weight:400}[data-monster-role=nav] button [part=error]{margin-left:.35rem}[data-monster-role=nav] button [part=error],[data-monster-role=nav] button [part=error] .monster-tab-error-icon{display:inline-flex;align-items:center;line-height:1}[data-monster-role=nav] button [part=error] .monster-tab-error-icon svg{width:1.1em;height:1.1em}[data-monster-role=nav] button [part=error]:empty{display:none}[data-monster-role=nav] button{outline:none;cursor:pointer;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:.375rem 0;margin-right:.75rem;font-size:1rem;display:flex;justify-content:center;border-radius:var(--monster-border-radius);border:none;border-bottom:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-4);transition:color .8s;align-self:stretch;align-content:center;align-items:center}[data-monster-role=nav] button:not([disabled]):hover{border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-secondary-3);color:var(--monster-bg-color-secondary-3)}[data-monster-role=nav] button[data-monster-state=active],[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover{border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-1)!important;background-color:inherit}@media (prefers-color-scheme:dark){[data-monster-role=nav] button[data-monster-state=active],[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover{border-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)!important}}[data-monster-role=nav] button[disabled]{color:var(--monster-color-primary-disabled-1);background-color:var(--monster-bg-color-primary-disabled-1);cursor:not-allowed}[data-monster-role=nav] button[data-monster-role=switch]{align-self:center;touch-action:none;order:2;border:0}[data-monster-role=nav] button[data-monster-role=switch]:not([disabled]):hover{border-bottom-width:0}[data-monster-role=nav] button img{width:1.3rem;height:1.3rem;margin-left:.4rem}::slotted(:not([slot]):not(.active)){display:none}::slotted(*){align-self:center}::slotted([slot]){border-bottom-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-4)}::slotted([slot=start]){margin-right:.75rem;order:0}::slotted([slot=end]){margin-left:.75rem;order:3}[data-monster-role=nav] [data-monster-role=popper-nav] button:not([disabled]){width:100%;justify-content:left;padding-left:15px;padding-right:15px;border:0}[data-monster-role=nav] [data-monster-role=popper-nav] button:hover,[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active],[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover{border:0}@media (prefers-color-scheme:dark){[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active],[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover{color:var(--monster-color-secondary-4)!important}}
28
+ :after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-font-size-min:15px;--monster-font-size-base:16px;--monster-font-size-max:16px;--monster-font-scale:1;--monster-font-scale-hi-dpi:1.25;--monster-font-scale-xhi-dpi:1.25;--monster-font-size-fluid:clamp(var(--monster-font-size-min),calc(var(--monster-font-size-min) + 0.1vw),var(--monster-font-size-max))}@media (min-resolution:1.5dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-hi-dpi,1.1)}}@media (min-resolution:3dppx){:after,:before,:root{--monster-font-scale:var(--monster-font-scale-xhi-dpi,1.18)}}:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-4);--monster-color-danger-3:var(--monster-color-raspberry-6);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-4);--monster-bg-color-danger-2:var(--monster-color-gray-1);--monster-bg-color-danger-3:var(--monster-color-raspberry-2);--monster-bg-color-danger-4:var(--monster-color-raspberry-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-danger-1:var(--monster-color-raspberry-1);--monster-color-danger-2:var(--monster-color-raspberry-3);--monster-color-danger-3:var(--monster-color-raspberry-4);--monster-color-danger-4:var(--monster-color-raspberry-1);--monster-bg-color-danger-1:var(--monster-color-raspberry-5);--monster-bg-color-danger-2:var(--monster-color-gray-6);--monster-bg-color-danger-3:var(--monster-color-raspberry-1);--monster-bg-color-danger-4:var(--monster-color-raspberry-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-0{border-width:0;border-radius:0;border-style:none}.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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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)}.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{color:var(--monster-theme-on-color);background-color:var(--monster-theme-on-bg-color)}.monster-theme-off{color:var(--monster-theme-off-color);background-color:var(--monster-theme-off-bg-color)}div[data-monster-role=popper]{box-sizing:border-box;display:none;padding:1.1em;z-index:var(--monster-z-index-modal);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border-radius:var(--monster-border-radius);border-width:var(--monster-border-width);border-style:var(--monster-border-style);border-color:var(--monster-bg-color-primary-4);box-shadow:var(--monster-box-shadow-1)}[data-popper-arrow],[data-popper-arrow]:before{position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);height:calc(max(var(--monster-popper-witharrrow-distance), -1*var(--monster-popper-witharrrow-distance))*2);background:inherit}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:before{visibility:visible;content:\"\";transform:rotate(45deg);box-sizing:border-box}div[data-popper-placement^=top]>[data-popper-arrow]{bottom:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=top]>[data-popper-arrow]:before{border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}div[data-popper-placement^=bottom]>[data-popper-arrow]{top:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=bottom]>[data-popper-arrow]:before{border-right:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:transparent}div[data-popper-placement^=left]>[data-popper-arrow]{right:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width))}div[data-popper-placement^=left]>[data-popper-arrow]:before{border-left:transparent;border-right:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:transparent}div[data-popper-placement^=right]>[data-popper-arrow]{left:calc(var(--monster-popper-witharrrow-distance) - var(--monster-border-width)/2)}div[data-popper-placement^=right]>[data-popper-arrow]:before{border-right:transparent;border-left:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4);border-top:transparent}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;color:var(--monster-color-primary-4);background-color:var(--monster-bg-color-primary-4)}.monster-badge-primary-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-badge-secondary-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-badge-tertiary-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-badge-destructive-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-badge-success-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-badge-warning-pill{padding:.25em .6em;border-radius:10rem}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;text-decoration:none;background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-badge-error-pill{padding:.25em .6em;border-radius:10rem}[data-monster-role=nav] button.hidden{display:none}nav[data-monster-role=nav]{overflow:hidden;display:flex;align-items:flex-end;flex-direction:row;flex-wrap:nowrap;box-sizing:border-box;margin-bottom:.75rem;border-bottom-width:thin;border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-2)}[data-monster-role=nav] button .remove-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-size:16px;background-position:100% 100%;background-repeat:no-repeat;width:16px;min-height:16px;order:2;height:16px;background-color:var(--monster-bg-color-primary-4);-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");flex-wrap:nowrap}[data-monster-role=nav] button span{display:flex;align-items:center;white-space:pre;font-family:var(--monster-font-family);font-size:1rem;line-height:1.4;font-weight:400}[data-monster-role=nav] button [part=error]{margin-left:.35rem}[data-monster-role=nav] button [part=error],[data-monster-role=nav] button [part=error] .monster-tab-error-icon{display:inline-flex;align-items:center;line-height:1}[data-monster-role=nav] button [part=error] .monster-tab-error-icon svg{width:1.1em;height:1.1em}[data-monster-role=nav] button [part=error]:empty{display:none}[data-monster-role=nav] button{outline:none;cursor:pointer;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:.375rem 0;margin-right:.75rem;font-size:1rem;display:flex;justify-content:center;border-radius:var(--monster-border-radius);border:none;border-bottom:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-4);transition:color .8s;align-self:stretch;align-content:center;align-items:center}[data-monster-role=nav] button:not([disabled]):hover{border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-secondary-3);color:var(--monster-bg-color-secondary-3)}[data-monster-role=nav] button[data-monster-state=active],[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover{border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-1)!important;background-color:inherit}@media (prefers-color-scheme:dark){[data-monster-role=nav] button[data-monster-state=active],[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover{border-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)!important}}[data-monster-role=nav] button[disabled]{color:var(--monster-color-primary-disabled-1);background-color:var(--monster-bg-color-primary-disabled-1);cursor:not-allowed}[data-monster-role=nav] button[data-monster-role=switch]{align-self:center;touch-action:none;order:2;border:0}[data-monster-role=nav] button[data-monster-role=switch]:not([disabled]):hover{border-bottom-width:0}[data-monster-role=nav] button [part=icon]{width:1.3rem;height:1.3rem;margin-left:.4rem;flex:0 0 auto}[data-monster-role=nav] button [part=icon][data-monster-icon-mode=mask]{display:inline-block;background-color:currentColor;-webkit-mask-image:var(--monster-tab-icon-mask-image);mask-image:var(--monster-tab-icon-mask-image);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}::slotted(:not([slot]):not(.active)){display:none}::slotted(*){align-self:center}::slotted([slot]){border-bottom-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-bottom-style:var(--monster-border-style);box-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-4)}::slotted([slot=start]){margin-right:.75rem;order:0}::slotted([slot=end]){margin-left:.75rem;order:3}[data-monster-role=nav] [data-monster-role=popper-nav] button:not([disabled]){width:100%;justify-content:left;padding-left:15px;padding-right:15px;border:0}[data-monster-role=nav] [data-monster-role=popper-nav] button:hover,[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active],[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover{border:0}@media (prefers-color-scheme:dark){[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active],[data-monster-role=nav] [data-monster-role=popper-nav] button[data-monster-state=active]:not([disabled]):hover{color:var(--monster-color-secondary-4)!important}}
29
29
  }`,
30
30
  0,
31
31
  );
package/source/components/layout/tabs.mjs CHANGED
@@ -1277,6 +1277,7 @@ function attachTabMutationObserver(observedNode) {
1277
1277
  "disabled",
1278
1278
  ATTRIBUTE_BUTTON_LABEL,
1279
1279
  `${ATTRIBUTE_PREFIX}button-icon`,
1280
+ `${ATTRIBUTE_PREFIX}button-icon-mode`,
1280
1281
  "data-monster-tab-error",
1281
1282
  "data-monster-tab-error-message",
1282
1283
  "data-monster-tab-available",
@@ -1367,9 +1368,7 @@ function initTabButtons() {
1367
1368
  }
1368
1369
 
1369
1370
  if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
1370
- label = `<span part="label">${label}</span><img part="icon" alt="this is an icon" src="${node.getAttribute(
1371
- `${ATTRIBUTE_PREFIX}button-icon`,
1372
- )}">`;
1371
+ label = `<span part="label">${label}</span>${getButtonIconMarkup(node)}`;
1373
1372
  }
1374
1373
 
1375
1374
  const errorMarkup = getTabErrorMarkup(node);
@@ -1761,6 +1760,69 @@ function getButtonLabel(node) {
1761
1760
  return label;
1762
1761
  }
1763
1762
 
1763
+ /**
1764
+ * @private
1765
+ * @param {HTMLElement} node
1766
+ * @return {string}
1767
+ */
1768
+ function getButtonIconMarkup(node) {
1769
+ const icon = node.getAttribute(`${ATTRIBUTE_PREFIX}button-icon`);
1770
+ if (!isString(icon) || icon.trim() === "") {
1771
+ return "";
1772
+ }
1773
+
1774
+ const mode = getButtonIconMode(node, icon);
1775
+ if (mode === "mask") {
1776
+ const style = `--monster-tab-icon-mask-image: url("${escapeCssString(
1777
+ icon,
1778
+ )}")`;
1779
+ return `<span part="icon" data-monster-icon-mode="mask" aria-hidden="true" style="${escapeHtml(
1780
+ style,
1781
+ )}"></span>`;
1782
+ }
1783
+
1784
+ return `<img part="icon" data-monster-icon-mode="image" alt="this is an icon" src="${escapeHtml(
1785
+ icon,
1786
+ )}">`;
1787
+ }
1788
+
1789
+ /**
1790
+ * @private
1791
+ * @param {HTMLElement} node
1792
+ * @param {string} icon
1793
+ * @return {string}
1794
+ */
1795
+ function getButtonIconMode(node, icon) {
1796
+ const mode = node
1797
+ .getAttribute(`${ATTRIBUTE_PREFIX}button-icon-mode`)
1798
+ ?.trim()
1799
+ .toLowerCase();
1800
+
1801
+ switch (mode) {
1802
+ case "image":
1803
+ case "img":
1804
+ return "image";
1805
+ case "mask":
1806
+ return "mask";
1807
+ default:
1808
+ return isSvgIcon(icon) ? "mask" : "image";
1809
+ }
1810
+ }
1811
+
1812
+ /**
1813
+ * @private
1814
+ * @param {string} value
1815
+ * @return {boolean}
1816
+ */
1817
+ function isSvgIcon(value) {
1818
+ const icon = value.trim().toLowerCase();
1819
+ if (icon.startsWith("data:image/svg+xml")) {
1820
+ return true;
1821
+ }
1822
+
1823
+ return icon.split(/[?#]/, 1)[0].endsWith(".svg");
1824
+ }
1825
+
1764
1826
  /**
1765
1827
  * @private
1766
1828
  * @param {HTMLElement} node
@@ -1810,6 +1872,19 @@ function escapeHtml(value) {
1810
1872
  .replaceAll("'", "&#39;");
1811
1873
  }
1812
1874
 
1875
+ /**
1876
+ * @private
1877
+ * @param {string} value
1878
+ * @return {string}
1879
+ */
1880
+ function escapeCssString(value) {
1881
+ return value
1882
+ .replaceAll("\\", "\\\\")
1883
+ .replaceAll("\n", "\\a ")
1884
+ .replaceAll("\r", "")
1885
+ .replaceAll('"', '\\"');
1886
+ }
1887
+
1813
1888
  /**
1814
1889
  * @private
1815
1890
  * @return {string}
package/source/components/layout/vertical-tabs.mjs CHANGED
@@ -1003,6 +1003,7 @@ function attachTabMutationObserver(observedNode) {
1003
1003
  "disabled",
1004
1004
  ATTRIBUTE_BUTTON_LABEL,
1005
1005
  `${ATTRIBUTE_PREFIX}button-icon`,
1006
+ `${ATTRIBUTE_PREFIX}button-icon-mode`,
1006
1007
  "data-monster-tab-error",
1007
1008
  "data-monster-tab-error-message",
1008
1009
  ],
@@ -1076,9 +1077,7 @@ function initTabButtons() {
1076
1077
  }
1077
1078
 
1078
1079
  if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
1079
- label = `<span part="label">${label}</span><img part="icon" alt="this is an icon" src="${node.getAttribute(
1080
- `${ATTRIBUTE_PREFIX}button-icon`,
1081
- )}">`;
1080
+ label = `<span part="label">${label}</span>${getButtonIconMarkup(node)}`;
1082
1081
  }
1083
1082
 
1084
1083
  const errorMarkup = getTabErrorMarkup(node);
@@ -1360,6 +1359,69 @@ function getButtonLabel(node) {
1360
1359
  return label;
1361
1360
  }
1362
1361
 
1362
+ /**
1363
+ * @private
1364
+ * @param {HTMLElement} node
1365
+ * @return {string}
1366
+ */
1367
+ function getButtonIconMarkup(node) {
1368
+ const icon = node.getAttribute(`${ATTRIBUTE_PREFIX}button-icon`);
1369
+ if (!isString(icon) || icon.trim() === "") {
1370
+ return "";
1371
+ }
1372
+
1373
+ const mode = getButtonIconMode(node, icon);
1374
+ if (mode === "mask") {
1375
+ const style = `--monster-tab-icon-mask-image: url("${escapeCssString(
1376
+ icon,
1377
+ )}")`;
1378
+ return `<span part="icon" data-monster-icon-mode="mask" aria-hidden="true" style="${escapeHtml(
1379
+ style,
1380
+ )}"></span>`;
1381
+ }
1382
+
1383
+ return `<img part="icon" data-monster-icon-mode="image" alt="this is an icon" src="${escapeHtml(
1384
+ icon,
1385
+ )}">`;
1386
+ }
1387
+
1388
+ /**
1389
+ * @private
1390
+ * @param {HTMLElement} node
1391
+ * @param {string} icon
1392
+ * @return {string}
1393
+ */
1394
+ function getButtonIconMode(node, icon) {
1395
+ const mode = node
1396
+ .getAttribute(`${ATTRIBUTE_PREFIX}button-icon-mode`)
1397
+ ?.trim()
1398
+ .toLowerCase();
1399
+
1400
+ switch (mode) {
1401
+ case "image":
1402
+ case "img":
1403
+ return "image";
1404
+ case "mask":
1405
+ return "mask";
1406
+ default:
1407
+ return isSvgIcon(icon) ? "mask" : "image";
1408
+ }
1409
+ }
1410
+
1411
+ /**
1412
+ * @private
1413
+ * @param {string} value
1414
+ * @return {boolean}
1415
+ */
1416
+ function isSvgIcon(value) {
1417
+ const icon = value.trim().toLowerCase();
1418
+ if (icon.startsWith("data:image/svg+xml")) {
1419
+ return true;
1420
+ }
1421
+
1422
+ return icon.split(/[?#]/, 1)[0].endsWith(".svg");
1423
+ }
1424
+
1363
1425
  /**
1364
1426
  * @private
1365
1427
  * @param {HTMLElement} node
@@ -1409,6 +1471,19 @@ function escapeHtml(value) {
1409
1471
  .replaceAll("'", "&#39;");
1410
1472
  }
1411
1473
 
1474
+ /**
1475
+ * @private
1476
+ * @param {string} value
1477
+ * @return {string}
1478
+ */
1479
+ function escapeCssString(value) {
1480
+ return value
1481
+ .replaceAll("\\", "\\\\")
1482
+ .replaceAll("\n", "\\a ")
1483
+ .replaceAll("\r", "")
1484
+ .replaceAll('"', '\\"');
1485
+ }
1486
+
1412
1487
  /**
1413
1488
  * @private
1414
1489
  * @return {string}
package/test/cases/components/form/control-bar.mjs CHANGED
@@ -88,6 +88,15 @@ describe("ControlBar", function () {
88
88
  );
89
89
  });
90
90
 
91
+ it("should keep the control bar visible while the initial layout is pending", function () {
92
+ const bar = document.getElementById("bar");
93
+ const controlBar = bar.shadowRoot.querySelector(
94
+ '[data-monster-role="control-bar"]',
95
+ );
96
+
97
+ expect(controlBar.style.opacity).to.not.equal("0");
98
+ });
99
+
91
100
  it("should allow configuring the control bar layout alignment to right", function (done) {
92
101
  const bar = document.getElementById("bar-right");
93
102
 
@@ -968,7 +977,7 @@ describe("ControlBar", function () {
968
977
  value: 20,
969
978
  });
970
979
 
971
- expect(controlBar.style.opacity).to.equal("0");
980
+ expect(controlBar.style.opacity).to.not.equal("0");
972
981
 
973
982
  await flushFrames();
974
983
  await new Promise((resolve) => setTimeout(resolve, 0));
@@ -1070,7 +1079,7 @@ describe("ControlBar", function () {
1070
1079
  }
1071
1080
  });
1072
1081
 
1073
- it("should reveal the control bar after reconnecting before initial layout", async function () {
1082
+ it("should keep the control bar visible after reconnecting before initial layout", async function () {
1074
1083
  const originalRequestAnimationFrame = window.requestAnimationFrame;
1075
1084
  const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
1076
1085
 
@@ -1145,7 +1154,7 @@ describe("ControlBar", function () {
1145
1154
  });
1146
1155
  }
1147
1156
 
1148
- expect(controlBar.style.opacity).to.equal("0");
1157
+ expect(controlBar.style.opacity).to.not.equal("0");
1149
1158
 
1150
1159
  bar.remove();
1151
1160
  wrapper.append(bar);
package/test/cases/components/layout/tabs.mjs CHANGED
@@ -145,7 +145,38 @@ let htmlNoDerivedLabel = `
145
145
  </monster-tabs>
146
146
  `;
147
147
 
148
+ const svgTabIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 15H1z'/%3E%3C/svg%3E";
149
+ const pngTabIcon = "data:image/png;base64,iVBORw0KGgo=";
150
+
151
+ // language=html
152
+ let htmlIconModes = `
153
+ <monster-tabs id="icon-mode-tabs">
154
+ <div id="auto-svg-panel" data-monster-button-label="Auto SVG" data-monster-button-icon="${svgTabIcon}">
155
+ Auto SVG content
156
+ </div>
157
+ <div id="image-svg-panel" data-monster-button-label="Image SVG" data-monster-button-icon="${svgTabIcon}" data-monster-button-icon-mode="image">
158
+ Image SVG content
159
+ </div>
160
+ <div id="auto-raster-panel" data-monster-button-label="Auto Raster" data-monster-button-icon="${pngTabIcon}">
161
+ Auto raster content
162
+ </div>
163
+ <div id="mask-raster-panel" data-monster-button-label="Mask Raster" data-monster-button-icon="${pngTabIcon}" data-monster-button-icon-mode="mask">
164
+ Mask raster content
165
+ </div>
166
+ </monster-tabs>
167
+ `;
168
+
169
+ // language=html
170
+ let htmlVerticalIconModes = `
171
+ <monster-vertical-tabs id="vertical-icon-mode-tabs">
172
+ <div id="vertical-auto-svg-panel" data-monster-button-label="Auto SVG" data-monster-button-icon="${svgTabIcon}">
173
+ Auto SVG content
174
+ </div>
175
+ </monster-vertical-tabs>
176
+ `;
177
+
148
178
  let Tabs;
179
+ let VerticalTabs;
149
180
  let restoreBoundingClientRect = null;
150
181
  let restoreResizeObserver = null;
151
182
 
@@ -195,6 +226,9 @@ describe('Tabs', function () {
195
226
  promises.push(import("../../../../source/components/layout/tabs.mjs").then((m) => {
196
227
  Tabs = m['Tabs'];
197
228
  }))
229
+ promises.push(import("../../../../source/components/layout/vertical-tabs.mjs").then((m) => {
230
+ VerticalTabs = m['VerticalTabs'];
231
+ }))
198
232
 
199
233
  Promise.all(promises).then(()=>{
200
234
  done();
@@ -697,6 +731,94 @@ describe('Tabs', function () {
697
731
  }).catch(done);
698
732
  });
699
733
 
734
+ it('should render SVG tab icons as theme-aware masks by default', function (done) {
735
+ let mocks = document.getElementById('mocks');
736
+ mocks.innerHTML = htmlIconModes;
737
+
738
+ waitForCondition(() => {
739
+ const tabs = document.getElementById('icon-mode-tabs');
740
+ return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 4;
741
+ }).then(() => {
742
+ try {
743
+ const tabs = document.getElementById('icon-mode-tabs');
744
+ const getIcon = (reference) => tabs.shadowRoot.querySelector(
745
+ `button[part=button][data-monster-tab-reference="${reference}"] [part=icon]`,
746
+ );
747
+
748
+ const autoSvgIcon = getIcon('auto-svg-panel');
749
+ expect(autoSvgIcon.tagName).to.equal('SPAN');
750
+ expect(autoSvgIcon.getAttribute('data-monster-icon-mode')).to.equal('mask');
751
+ expect(autoSvgIcon.getAttribute('aria-hidden')).to.equal('true');
752
+ expect(autoSvgIcon.getAttribute('style')).to.contain('--monster-tab-icon-mask-image');
753
+
754
+ const imageSvgIcon = getIcon('image-svg-panel');
755
+ expect(imageSvgIcon.tagName).to.equal('IMG');
756
+ expect(imageSvgIcon.getAttribute('data-monster-icon-mode')).to.equal('image');
757
+ expect(imageSvgIcon.getAttribute('src')).to.equal(svgTabIcon);
758
+
759
+ const autoRasterIcon = getIcon('auto-raster-panel');
760
+ expect(autoRasterIcon.tagName).to.equal('IMG');
761
+ expect(autoRasterIcon.getAttribute('data-monster-icon-mode')).to.equal('image');
762
+ expect(autoRasterIcon.getAttribute('src')).to.equal(pngTabIcon);
763
+
764
+ const maskRasterIcon = getIcon('mask-raster-panel');
765
+ expect(maskRasterIcon.tagName).to.equal('SPAN');
766
+ expect(maskRasterIcon.getAttribute('data-monster-icon-mode')).to.equal('mask');
767
+ expect(maskRasterIcon.getAttribute('style')).to.contain('--monster-tab-icon-mask-image');
768
+
769
+ done();
770
+ } catch (e) {
771
+ done(e);
772
+ }
773
+ }).catch(done);
774
+ });
775
+
776
+ it('should update tab icon mode when the icon mode attribute changes', function (done) {
777
+ let mocks = document.getElementById('mocks');
778
+ mocks.innerHTML = htmlIconModes;
779
+
780
+ waitForCondition(() => {
781
+ const tabs = document.getElementById('icon-mode-tabs');
782
+ return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 4;
783
+ }).then(() => {
784
+ const tabs = document.getElementById('icon-mode-tabs');
785
+ const panel = document.getElementById('image-svg-panel');
786
+ panel.setAttribute('data-monster-button-icon-mode', 'mask');
787
+
788
+ return waitForCondition(() => {
789
+ const icon = tabs.shadowRoot.querySelector(
790
+ 'button[part=button][data-monster-tab-reference="image-svg-panel"] [part=icon]',
791
+ );
792
+ return icon?.tagName === 'SPAN' && icon.getAttribute('data-monster-icon-mode') === 'mask';
793
+ });
794
+ }).then(() => {
795
+ done();
796
+ }).catch(done);
797
+ });
798
+
799
+ it('should render vertical tab SVG icons as theme-aware masks by default', function (done) {
800
+ let mocks = document.getElementById('mocks');
801
+ mocks.innerHTML = htmlVerticalIconModes;
802
+
803
+ waitForCondition(() => {
804
+ const tabs = document.getElementById('vertical-icon-mode-tabs');
805
+ return tabs instanceof VerticalTabs && tabs.shadowRoot.querySelector('button[part=button] [part=icon]') !== null;
806
+ }).then(() => {
807
+ try {
808
+ const tabs = document.getElementById('vertical-icon-mode-tabs');
809
+ const icon = tabs.shadowRoot.querySelector(
810
+ 'button[part=button][data-monster-tab-reference="vertical-auto-svg-panel"] [part=icon]',
811
+ );
812
+ expect(icon.tagName).to.equal('SPAN');
813
+ expect(icon.getAttribute('data-monster-icon-mode')).to.equal('mask');
814
+ expect(icon.getAttribute('style')).to.contain('--monster-tab-icon-mask-image');
815
+ done();
816
+ } catch (e) {
817
+ done(e);
818
+ }
819
+ }).catch(done);
820
+ });
821
+
700
822
  it('should include stable names and metadata in tab events and buttons', function (done) {
701
823
  let mocks = document.getElementById('mocks');
702
824
  mocks.innerHTML = htmlMetadata;