@schukai/monster 4.150.4 → 4.150.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/source/components/datatable/filter.mjs +2 -3
  3. package/source/components/datatable/style/filter.pcss +20 -0
  4. package/source/components/datatable/stylesheet/filter.mjs +1 -1
  5. package/source/components/form/style/control-bar.pcss +4 -0
  6. package/source/components/form/stylesheet/control-bar.mjs +1 -1
  7. package/source/components/form/wizard.mjs +16 -0
  8. package/source/components/navigation/wizard-navigation.mjs +6 -0
  9. package/test/cases/components/datatable/filter-availability.mjs +20 -0
  10. package/test/cases/components/form/control-bar.mjs +6 -0
  11. package/test/cases/components/form/wizard.mjs +18 -0
  12. package/test/cases/components/navigation/wizard-navigation.mjs +49 -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.150.4"}
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.150.6"}
package/source/components/datatable/filter.mjs CHANGED
@@ -1751,7 +1751,7 @@ function getTemplate() {
1751
1751
  <slot name="hidden"></slot>
1752
1752
  </div>
1753
1753
  <div data-monster-role="select-and-search">
1754
- <monster-button-bar style="max-width: max-content">
1754
+ <div data-monster-role="filter-actions">
1755
1755
  <monster-message-state-button data-monster-role="search-button" class="stretched-control">i18n{search}</monster-message-state-button>
1756
1756
  <monster-select class="stretched-control"
1757
1757
  data-monster-selected-template="summary"
@@ -1776,8 +1776,7 @@ function getTemplate() {
1776
1776
  </div>
1777
1777
  </monster-popper-button>
1778
1778
  <monster-button data-monster-role="reset-button" class="stretched-control">i18n{reset}</monster-button>
1779
- </monster-button>
1780
- </monster-button-bar>
1779
+ </div>
1781
1780
  </div>
1782
1781
 
1783
1782
  </div>
package/source/components/datatable/style/filter.pcss CHANGED
@@ -118,6 +118,14 @@
118
118
  width:100%;
119
119
  justify-content: flex-end;
120
120
 
121
+ & [data-monster-role=filter-actions] {
122
+ display: flex;
123
+ flex-flow: row wrap;
124
+ justify-content: flex-end;
125
+ gap: 0.5rem;
126
+ width: 100%;
127
+ }
128
+
121
129
  & monster-button {
122
130
  display: flex;
123
131
  }
@@ -181,6 +189,18 @@
181
189
  row-gap: 0.5rem;
182
190
  column-gap: 0;
183
191
 
192
+ & [data-monster-role=filter-actions] {
193
+ display: grid;
194
+ grid-template-columns: minmax(0, 1fr);
195
+ width: 100%;
196
+
197
+ & > * {
198
+ box-sizing: border-box;
199
+ min-width: 0;
200
+ width: 100%;
201
+ }
202
+ }
203
+
184
204
  & monster-message-state-button {
185
205
  width: 100%;
186
206
  }
package/source/components/datatable/stylesheet/filter.mjs CHANGED
@@ -85,7 +85,7 @@ try {
85
85
  --monster-button-background-color,var(--monster-color-tertiary-4)
86
86
  );border-color:var(
87
87
  --monster-button-border-color,var(--monster-bg-color-tertiary-4)
88
- )}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px);z-index:var(--monster-z-index-outline)}[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}: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-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--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}a,a:active,a:focus-visible,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus-visible,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}:host{width:100%}[data-monster-role=container]{container-name:filter;container-type:inline-size}[data-monster-role=control] .hidden{display:none}[data-monster-role=control] [data-monster-role=query]{width:100%;height:100%}[data-monster-role=control] monster-input-group{height:100%}[data-monster-role=control] monster-input-group::part(control){height:100%;align-items:stretch;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}[data-monster-role=control] monster-input-group [data-monster-role=operator]{height:100%;align-self:stretch;border:none;background-color:transparent;color:var(--monster-theme-control-color)}[data-monster-role=control] monster-input-group [data-monster-role=operator],[data-monster-role=control] monster-input-group [data-monster-role=query]{box-sizing:border-box;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=remove-badges]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%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\")}[data-monster-role=control] [data-monster-role=layout]{align-items:flex-end;display:flex;justify-content:flex-start;width:100%;flex-direction:column}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;-moz-column-gap:1rem;column-gap:1rem;row-gap:.5rem;justify-content:flex-start}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){display:flex;gap:.1rem;flex-direction:column;border-bottom:thin dotted var(--monster-theme-control-border-color);padding:2px;align-items:stretch;min-width:15em;min-height:4.1rem}:is([data-monster-role=control] [data-monster-role=layout]) [name=hidden]{display:none}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{place-content:center flex-end;align-items:stretch;display:flex;flex-flow:row nowrap;row-gap:1.5rem;-moz-column-gap:.5rem;column-gap:.5rem;margin-top:1rem;width:100%;justify-content:flex-end}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-button{display:flex}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(control){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-button){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-control){height:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{min-width:150px}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-visible=false]{display:none}@container filter (width < 500px){[data-monster-role=control] [data-monster-role=layout]{flex-flow:column nowrap;row-gap:.5rem;-moz-column-gap:0;column-gap:0;display:contents}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:contents}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){min-width:-moz-fit-content;min-width:fit-content}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{display:flex;flex-direction:column;row-gap:.5rem;-moz-column-gap:0;column-gap:0}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-message-state-button{width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{width:100%;min-width:-moz-fit-content;min-width:fit-content}}
88
+ )}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px);z-index:var(--monster-z-index-outline)}[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}: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-focus-ring-width:2px;--monster-focus-ring-style:solid;--monster-focus-ring-color:var(--monster-color-blue-4);--monster-focus-ring-offset:2px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-focus-ring-color:var(--monster-color-yellow-2)}}:after,:before,:root{--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}a,a:active,a:focus-visible,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);text-decoration:none;outline:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus-visible,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}:host{width:100%}[data-monster-role=container]{container-name:filter;container-type:inline-size}[data-monster-role=control] .hidden{display:none}[data-monster-role=control] [data-monster-role=query]{width:100%;height:100%}[data-monster-role=control] monster-input-group{height:100%}[data-monster-role=control] monster-input-group::part(control){height:100%;align-items:stretch;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}[data-monster-role=control] monster-input-group [data-monster-role=operator]{height:100%;align-self:stretch;border:none;background-color:transparent;color:var(--monster-theme-control-color)}[data-monster-role=control] monster-input-group [data-monster-role=operator],[data-monster-role=control] monster-input-group [data-monster-role=query]{box-sizing:border-box;min-block-size:calc(var(--monster-control-min-block-size, 2.75rem) - var(--monster-theme-control-border-width, 1px)*2)}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=remove-badges]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%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\")}[data-monster-role=control] [data-monster-role=layout]{align-items:flex-end;display:flex;justify-content:flex-start;width:100%;flex-direction:column}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;-moz-column-gap:1rem;column-gap:1rem;row-gap:.5rem;justify-content:flex-start}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){display:flex;gap:.1rem;flex-direction:column;border-bottom:thin dotted var(--monster-theme-control-border-color);padding:2px;align-items:stretch;min-width:15em;min-height:4.1rem}:is([data-monster-role=control] [data-monster-role=layout]) [name=hidden]{display:none}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{place-content:center flex-end;align-items:stretch;display:flex;flex-flow:row nowrap;row-gap:1.5rem;-moz-column-gap:.5rem;column-gap:.5rem;margin-top:1rem;width:100%;justify-content:flex-end}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-role=filter-actions]{display:flex;flex-flow:row wrap;justify-content:flex-end;gap:.5rem;width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-button{display:flex}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(control){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-button){height:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) .stretched-control) ::part(button-control){height:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{min-width:150px}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-visible=false]{display:none}@container filter (width < 500px){[data-monster-role=control] [data-monster-role=layout]{flex-flow:column nowrap;row-gap:.5rem;-moz-column-gap:0;column-gap:0;display:contents}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]{display:contents}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=filter]) ::slotted(label){min-width:-moz-fit-content;min-width:fit-content}:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]{display:flex;flex-direction:column;row-gap:.5rem;-moz-column-gap:0;column-gap:0}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-role=filter-actions]{display:grid;grid-template-columns:minmax(0,1fr);width:100%}:is(:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) [data-monster-role=filter-actions])>*{box-sizing:border-box;min-width:0;width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-message-state-button{width:100%}:is(:is([data-monster-role=control] [data-monster-role=layout]) [data-monster-role=select-and-search]) monster-select{width:100%;min-width:-moz-fit-content;min-width:fit-content}}
89
89
  }`,
90
90
  0,
91
91
  );
package/source/components/form/style/control-bar.pcss CHANGED
@@ -113,6 +113,10 @@ div[data-monster-role="control"] {
113
113
  min-width: 0;
114
114
  }
115
115
 
116
+ & > slot:not([name])::slotted(monster-control-bar) {
117
+ --monster-control-min-block-size: inherit;
118
+ }
119
+
116
120
  & > slot:not([name])::slotted(form),
117
121
  & > slot:not([name])::slotted(div),
118
122
  & > slot:not([name])::slotted(section) {
package/source/components/form/stylesheet/control-bar.mjs CHANGED
@@ -101,7 +101,7 @@ try {
101
101
  --monster-action-menu-border-radius,var(--monster-border-radius)
102
102
  );box-shadow:var(
103
103
  --monster-action-menu-box-shadow,var(--monster-box-shadow-1)
104
- )}div[data-monster-role=control] [data-monster-role=button-bar],div[data-monster-role=control] [data-monster-role=control-bar]{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}[data-monster-layout-alignment=right]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:flex-end}[data-monster-layout-alignment=center]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:center}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name]){display:flex;flex:var(--monster-control-bar-slot-flex,0 1 auto);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) :not(slot){display:flex}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]{display:flex;align-items:stretch;flex:0 0 var(--monster-control-bar-height);height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]):has(>[data-monster-role=switch][hidden]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]{--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);width:var(--monster-control-bar-height)}.hidden:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(*){--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;box-sizing:border-box;flex:var(--monster-control-bar-item-flex,0 0 auto)!important;align-self:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(div),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(form),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(section){flex-direction:row;align-items:stretch;gap:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(input),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(select),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(textarea){-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border-width:var(--monster-theme-control-border-width,var(--monster-border-width));border-radius:var(--monster-theme-control-border-radius,var(--monster-border-radius));border-style:var(--monster-theme-control-border-style,var(--monster-border-style));border-color:var(--monster-theme-control-border-color,var(--monster-bg-color-primary-4));line-height:1.5;height:var(--monster-control-bar-height);padding:var(--monster-select-control-padding,.4rem .6rem);width:auto!important;inline-size:auto!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-select){--monster-select-container-align-self:stretch;--monster-select-container-block-size:100%;--monster-select-container-overflow:hidden;--monster-select-selection-flex-wrap:nowrap;--monster-select-selection-margin:0;--monster-select-control-min-block-size:var(--monster-control-bar-height);--monster-select-control-padding:0.4rem 0.6rem;width:auto!important;inline-size:auto!important;max-inline-size:100%;min-inline-size:var(--monster-control-bar-select-min-inline-size,12rem)!important;min-width:var(--monster-control-bar-select-min-inline-size,12rem)!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-popper-button){--monster-button-control-inline-size:var(
104
+ )}div[data-monster-role=control] [data-monster-role=button-bar],div[data-monster-role=control] [data-monster-role=control-bar]{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}[data-monster-layout-alignment=right]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:flex-end}[data-monster-layout-alignment=center]:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]){justify-content:center}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name]){display:flex;flex:var(--monster-control-bar-slot-flex,0 1 auto);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) :not(slot){display:flex}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]{display:flex;align-items:stretch;flex:0 0 var(--monster-control-bar-height);height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height)}:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=popper-nav]):has(>[data-monster-role=switch][hidden]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]{--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;height:var(--monster-control-bar-height);min-width:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);width:var(--monster-control-bar-height)}.hidden:is(:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar]) [data-monster-role=switch]){display:none}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(*){--monster-control-min-block-size:var(--monster-control-bar-height);display:flex;box-sizing:border-box;flex:var(--monster-control-bar-item-flex,0 0 auto)!important;align-self:stretch;height:var(--monster-control-bar-height);min-height:var(--monster-control-bar-height);min-width:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-control-bar){--monster-control-min-block-size:inherit}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(div),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(form),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(section){flex-direction:row;align-items:stretch;gap:0}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(input),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(select),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(textarea){-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border-width:var(--monster-theme-control-border-width,var(--monster-border-width));border-radius:var(--monster-theme-control-border-radius,var(--monster-border-radius));border-style:var(--monster-theme-control-border-style,var(--monster-border-style));border-color:var(--monster-theme-control-border-color,var(--monster-bg-color-primary-4));line-height:1.5;height:var(--monster-control-bar-height);padding:var(--monster-select-control-padding,.4rem .6rem);width:auto!important;inline-size:auto!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-select){--monster-select-container-align-self:stretch;--monster-select-container-block-size:100%;--monster-select-container-overflow:hidden;--monster-select-selection-flex-wrap:nowrap;--monster-select-selection-margin:0;--monster-select-control-min-block-size:var(--monster-control-bar-height);--monster-select-control-padding:0.4rem 0.6rem;width:auto!important;inline-size:auto!important;max-inline-size:100%;min-inline-size:var(--monster-control-bar-select-min-inline-size,12rem)!important;min-width:var(--monster-control-bar-select-min-inline-size,12rem)!important}:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-button),:is(div[data-monster-role=control] [data-monster-role=control-bar],div[data-monster-role=control] [data-monster-role=button-bar])>slot:not([name])::slotted(monster-popper-button){--monster-button-control-inline-size:var(
105
105
  --monster-control-bar-button-inline-size,max-content
106
106
  );--monster-button-inline-size:var(
107
107
  --monster-control-bar-button-inline-size,max-content
package/source/components/form/wizard.mjs CHANGED
@@ -45,6 +45,7 @@ const currentPanelIndexSymbol = Symbol("currentPanelIndex");
45
45
  const optionObserverSymbol = Symbol("optionObserver");
46
46
  const idsSymbol = Symbol("ids");
47
47
  const finalRecordSymbol = Symbol("finalRecord");
48
+ const slottedElementsSymbol = Symbol("slottedElements");
48
49
 
49
50
  /**
50
51
  * A reusable wizard container that combines content panels with `monster-wizard-navigation`.
@@ -151,6 +152,7 @@ class Wizard extends CustomElement {
151
152
  panel: 0,
152
153
  group: 0,
153
154
  };
155
+ this[slottedElementsSymbol] = [];
154
156
 
155
157
  initControlReferences.call(this);
156
158
  initEventHandler.call(this);
@@ -170,6 +172,9 @@ class Wizard extends CustomElement {
170
172
  * @return {Wizard}
171
173
  */
172
174
  refresh() {
175
+ this[slottedElementsSymbol] = Array.from(
176
+ getSlottedElements.call(this) || [],
177
+ );
173
178
  const records = collectPanels.call(this);
174
179
  const groups = buildGroups.call(this, records);
175
180
 
@@ -388,6 +393,10 @@ function initControlReferences() {
388
393
 
389
394
  function initEventHandler() {
390
395
  this[slotElementSymbol]?.addEventListener("slotchange", () => {
396
+ const elements = Array.from(getSlottedElements.call(this) || []);
397
+ if (haveSameElements(this[slottedElementsSymbol], elements)) {
398
+ return;
399
+ }
391
400
  this.refresh();
392
401
  });
393
402
 
@@ -449,6 +458,13 @@ function initEventHandler() {
449
458
  });
450
459
  }
451
460
 
461
+ function haveSameElements(currentElements, nextElements) {
462
+ return (
463
+ currentElements.length === nextElements.length &&
464
+ currentElements.every((element, index) => element === nextElements[index])
465
+ );
466
+ }
467
+
452
468
  function initOptionObserver() {
453
469
  if (this[optionObserverSymbol]) {
454
470
  return;
package/source/components/navigation/wizard-navigation.mjs CHANGED
@@ -19,6 +19,7 @@ const currentStepIndexSymbol = Symbol("currentStepIndex");
19
19
  const stepsSymbol = Symbol("steps");
20
20
  const isTransitioningSymbol = Symbol("isTransitioning");
21
21
  const currentSubStepIndexSymbol = Symbol("currentSubStepIndex");
22
+ const activationRequestSymbol = Symbol("activationRequest");
22
23
 
23
24
  /**
24
25
  * A WizardNavigation component to display progress and allow navigation through a series of steps,
@@ -45,6 +46,7 @@ class WizardNavigation extends CustomElement {
45
46
  this[isTransitioningSymbol] = false;
46
47
  this[currentStepIndexSymbol] = -1;
47
48
  this[currentSubStepIndexSymbol] = -1;
49
+ this[activationRequestSymbol] = 0;
48
50
 
49
51
  initControlReferences.call(this);
50
52
  initEventHandler.call(this);
@@ -186,7 +188,11 @@ class WizardNavigation extends CustomElement {
186
188
  return;
187
189
  }
188
190
 
191
+ const request = ++this[activationRequestSymbol];
189
192
  await this.goToStep(mainIndex, options);
193
+ if (request !== this[activationRequestSymbol]) {
194
+ return;
195
+ }
190
196
 
191
197
  const stepsData = this[stepsSymbol];
192
198
  if (!stepsData || !stepsData[mainIndex]) return;
package/test/cases/components/datatable/filter-availability.mjs CHANGED
@@ -34,4 +34,24 @@ describe("Datatable filter availability", () => {
34
34
  assert.equal(control.getOption("disabled"), true, role);
35
35
  }
36
36
  });
37
+
38
+ it("keeps filter controls outside an overflow popper", async () => {
39
+ globalThis.name = "";
40
+ globalThis.location = window.location;
41
+ const element = document.createElement("monster-datatable-filter");
42
+ document.getElementById("mocks").append(element);
43
+ await new Promise((resolve) => setTimeout(resolve, 100));
44
+
45
+ const actionBar = element.shadowRoot.querySelector(
46
+ '[data-monster-role="filter-actions"]',
47
+ );
48
+ assert.equal(actionBar?.localName, "div");
49
+ assert.deepEqual(
50
+ [...actionBar.children].map((control) =>
51
+ control.getAttribute("data-monster-role"),
52
+ ),
53
+ ["search-button", "filter-select", "save-button", "reset-button"],
54
+ );
55
+ assert.equal(element.shadowRoot.querySelector("monster-button-bar"), null);
56
+ });
37
57
  });
package/test/cases/components/form/control-bar.mjs CHANGED
@@ -404,6 +404,12 @@ describe("ControlBar", function () {
404
404
  expect(cssText).to.contain(
405
405
  "--monster-control-min-block-size: var(--monster-control-bar-height)",
406
406
  );
407
+ expect(cssText).to.contain(
408
+ "::slotted(monster-control-bar)",
409
+ );
410
+ expect(cssText).to.contain(
411
+ "--monster-control-min-block-size: inherit",
412
+ );
407
413
  expect(cssText).to.contain("::slotted(form)");
408
414
  expect(cssText).to.contain("height: var(--monster-control-bar-height)");
409
415
  expect(cssText).to.contain(
package/test/cases/components/form/wizard.mjs CHANGED
@@ -98,6 +98,24 @@ describe("Wizard", function () {
98
98
  ).to.equal(true);
99
99
  });
100
100
 
101
+ it("should ignore slot changes when the assigned panels are unchanged", async () => {
102
+ const mocks = document.getElementById("mocks");
103
+ mocks.innerHTML = html;
104
+
105
+ await new Promise((resolve) => setTimeout(resolve, 30));
106
+
107
+ const wizard = document.getElementById("wizard-under-test");
108
+ const slot = wizard.shadowRoot.querySelector("slot");
109
+ let refreshCount = 0;
110
+ wizard.addEventListener("monster-wizard-refresh", () => {
111
+ refreshCount++;
112
+ });
113
+
114
+ slot.dispatchEvent(new Event("slotchange"));
115
+
116
+ expect(refreshCount).to.equal(0);
117
+ });
118
+
101
119
  it("should use panel-specific validation callbacks before moving forward", async function () {
102
120
  const mocks = document.getElementById("mocks");
103
121
  mocks.innerHTML = html;
package/test/cases/components/navigation/wizard-navigation.mjs ADDED
@@ -0,0 +1,49 @@
1
+ import * as chai from "chai";
2
+ import { initJSDOM } from "../../../util/jsdom.mjs";
3
+
4
+ const expect = chai.expect;
5
+
6
+ describe("WizardNavigation", () => {
7
+ before(async () => {
8
+ await initJSDOM();
9
+ await import(
10
+ "../../../../source/components/navigation/wizard-navigation.mjs"
11
+ );
12
+ });
13
+
14
+ afterEach(() => {
15
+ document.getElementById("mocks").innerHTML = "";
16
+ });
17
+
18
+ it("should only dispatch the latest concurrent substep activation", async () => {
19
+ const mocks = document.getElementById("mocks");
20
+ mocks.innerHTML = `
21
+ <monster-wizard-navigation id="wizard-navigation-under-test">
22
+ <ol class="wizard-steps">
23
+ <li class="step">
24
+ <span>Account</span>
25
+ <ul>
26
+ <li>Email</li>
27
+ <li>Password</li>
28
+ </ul>
29
+ </li>
30
+ </ol>
31
+ </monster-wizard-navigation>
32
+ `;
33
+
34
+ await new Promise((resolve) => setTimeout(resolve, 20));
35
+
36
+ const navigation = document.getElementById("wizard-navigation-under-test");
37
+ const substeps = [];
38
+ navigation.addEventListener("monster-wizard-substep-changed", (event) => {
39
+ substeps.push(event.detail.subIndex);
40
+ });
41
+
42
+ await Promise.all([
43
+ navigation.activate(0, 0, { force: true }),
44
+ navigation.activate(0, 1, { force: true }),
45
+ ]);
46
+
47
+ expect(substeps).to.deep.equal([1]);
48
+ });
49
+ });