@schukai/monster 4.136.21 → 4.136.23

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 (26) hide show
  1. package/package.json +1 -1
  2. package/source/components/content/stylesheet/camera-capture.mjs +1 -1
  3. package/source/components/content/stylesheet/copy.mjs +1 -1
  4. package/source/components/content/viewer/stylesheet/message.mjs +1 -1
  5. package/source/components/datatable/datatable.mjs +17 -15
  6. package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +1 -1
  7. package/source/components/form/select.mjs +165 -82
  8. package/source/components/form/style/confirm-button.pcss +4 -1
  9. package/source/components/form/stylesheet/button-bar.mjs +1 -1
  10. package/source/components/form/stylesheet/confirm-button.mjs +10 -10
  11. package/source/components/form/stylesheet/context-error.mjs +1 -1
  12. package/source/components/form/stylesheet/context-help.mjs +1 -1
  13. package/source/components/form/stylesheet/digits.mjs +1 -1
  14. package/source/components/form/stylesheet/field-set.mjs +1 -1
  15. package/source/components/form/stylesheet/login.mjs +1 -1
  16. package/source/components/form/stylesheet/popper-button.mjs +13 -6
  17. package/source/components/form/stylesheet/select.mjs +13 -6
  18. package/source/components/form/util/floating-ui.mjs +1 -1
  19. package/source/components/layout/stylesheet/popper.mjs +13 -6
  20. package/source/components/style/common.css +3 -3
  21. package/source/components/style/floating-ui.css +75 -1
  22. package/source/components/stylesheet/common.mjs +1 -1
  23. package/source/components/stylesheet/floating-ui.mjs +13 -6
  24. package/test/cases/components/datatable/drag-scroll.mjs +49 -0
  25. package/test/cases/components/form/confirm-button.mjs +12 -0
  26. package/test/cases/components/form/select.mjs +131 -1
@@ -10,10 +10,10 @@
10
10
  * For more information about purchasing a commercial license, please contact Volker Schukai.
11
11
  */
12
12
 
13
- import {addAttributeToken} from "../../../dom/attributes.mjs";
14
- import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
13
+ import { addAttributeToken } from "../../../dom/attributes.mjs";
14
+ import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
15
15
 
16
- export {SelectStyleSheet}
16
+ export { SelectStyleSheet };
17
17
 
18
18
  /**
19
19
  * @private
@@ -22,10 +22,17 @@ export {SelectStyleSheet}
22
22
  const SelectStyleSheet = new CSSStyleSheet();
23
23
 
24
24
  try {
25
- SelectStyleSheet.insertRule(`
25
+ SelectStyleSheet.insertRule(
26
+ `
26
27
  @layer select {
27
28
  .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-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-margin-0{margin:var(--monster-space-0)}.monster-margin-top-0{margin-top:var(--monster-space-0)}.monster-margin-end-0{margin-right:var(--monster-space-0)}.monster-margin-bottom-0{margin-bottom:var(--monster-space-0)}.monster-margin-start-0{margin-left:var(--monster-space-0)}.monster-padding-0{padding:var(--monster-space-0)}.monster-padding-top-0{padding-top:var(--monster-space-0)}.monster-padding-end-0{padding-right:var(--monster-space-0)}.monster-padding-bottom-0{padding-bottom:var(--monster-space-0)}.monster-padding-start-0{padding-left:var(--monster-space-0)}.monster-margin-1{margin:var(--monster-space-1)}.monster-margin-top-1{margin-top:var(--monster-space-1)}.monster-margin-end-1{margin-right:var(--monster-space-1)}.monster-margin-bottom-1{margin-bottom:var(--monster-space-1)}.monster-margin-start-1{margin-left:var(--monster-space-1)}.monster-padding-1{padding:var(--monster-space-1)}.monster-padding-top-1{padding-top:var(--monster-space-1)}.monster-padding-end-1{padding-right:var(--monster-space-1)}.monster-padding-bottom-1{padding-bottom:var(--monster-space-1)}.monster-padding-start-1{padding-left:var(--monster-space-1)}.monster-margin-2{margin:var(--monster-space-2)}.monster-margin-top-2{margin-top:var(--monster-space-2)}.monster-margin-end-2{margin-right:var(--monster-space-2)}.monster-margin-bottom-2{margin-bottom:var(--monster-space-2)}.monster-margin-start-2{margin-left:var(--monster-space-2)}.monster-padding-2{padding:var(--monster-space-2)}.monster-padding-top-2{padding-top:var(--monster-space-2)}.monster-padding-end-2{padding-right:var(--monster-space-2)}.monster-padding-bottom-2{padding-bottom:var(--monster-space-2)}.monster-padding-start-2{padding-left:var(--monster-space-2)}.monster-margin-3{margin:var(--monster-space-3)}.monster-margin-top-3{margin-top:var(--monster-space-3)}.monster-margin-end-3{margin-right:var(--monster-space-3)}.monster-margin-bottom-3{margin-bottom:var(--monster-space-3)}.monster-margin-start-3{margin-left:var(--monster-space-3)}.monster-padding-3{padding:var(--monster-space-3)}.monster-padding-top-3{padding-top:var(--monster-space-3)}.monster-padding-end-3{padding-right:var(--monster-space-3)}.monster-padding-bottom-3{padding-bottom:var(--monster-space-3)}.monster-padding-start-3{padding-left:var(--monster-space-3)}.monster-margin-4{margin:var(--monster-space-4)}.monster-margin-top-4{margin-top:var(--monster-space-4)}.monster-margin-end-4{margin-right:var(--monster-space-4)}.monster-margin-bottom-4{margin-bottom:var(--monster-space-4)}.monster-margin-start-4{margin-left:var(--monster-space-4)}.monster-padding-4{padding:var(--monster-space-4)}.monster-padding-top-4{padding-top:var(--monster-space-4)}.monster-padding-end-4{padding-right:var(--monster-space-4)}.monster-padding-bottom-4{padding-bottom:var(--monster-space-4)}.monster-padding-start-4{padding-left:var(--monster-space-4)}.monster-margin-5{margin:var(--monster-space-5)}.monster-margin-top-5{margin-top:var(--monster-space-5)}.monster-margin-end-5{margin-right:var(--monster-space-5)}.monster-margin-bottom-5{margin-bottom:var(--monster-space-5)}.monster-margin-start-5{margin-left:var(--monster-space-5)}.monster-padding-5{padding:var(--monster-space-5)}.monster-padding-top-5{padding-top:var(--monster-space-5)}.monster-padding-end-5{padding-right:var(--monster-space-5)}.monster-padding-bottom-5{padding-bottom:var(--monster-space-5)}.monster-padding-start-5{padding-left:var(--monster-space-5)}.monster-margin-6{margin:var(--monster-space-6)}.monster-margin-top-6{margin-top:var(--monster-space-6)}.monster-margin-end-6{margin-right:var(--monster-space-6)}.monster-margin-bottom-6{margin-bottom:var(--monster-space-6)}.monster-margin-start-6{margin-left:var(--monster-space-6)}.monster-padding-6{padding:var(--monster-space-6)}.monster-padding-top-6{padding-top:var(--monster-space-6)}.monster-padding-end-6{padding-right:var(--monster-space-6)}.monster-padding-bottom-6{padding-bottom:var(--monster-space-6)}.monster-padding-start-6{padding-left:var(--monster-space-6)}.monster-margin-7{margin:var(--monster-space-7)}.monster-margin-top-7{margin-top:var(--monster-space-7)}.monster-margin-end-7{margin-right:var(--monster-space-7)}.monster-margin-bottom-7{margin-bottom:var(--monster-space-7)}.monster-margin-start-7{margin-left:var(--monster-space-7)}.monster-padding-7{padding:var(--monster-space-7)}.monster-padding-top-7{padding-top:var(--monster-space-7)}.monster-padding-end-7{padding-right:var(--monster-space-7)}.monster-padding-bottom-7{padding-bottom:var(--monster-space-7)}.monster-padding-start-7{padding-left:var(--monster-space-7)}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));opacity:1;padding:1.1em;position:absolute;top:0;transition:opacity var(--monster-popper-fade-duration,.14s) var(--monster-popper-fade-timing,cubic-bezier(.2,0,0,1));width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper][data-monster-appearance=opening]{opacity:0}div[data-monster-role=popper][data-monster-appearance=open]{opacity:1}@media (prefers-reduced-motion:reduce){div[data-monster-role=popper]{transition:none}}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=container]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:4 0 90%;min-height:1.4em;overflow:auto;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:100%}.d-none{display:none!important}div[data-monster-role=no-options] span,div[data-monster-role=remote-info] span{text-wrap:balance}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{-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 fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%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 fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}[data-monster-role=container].clear,[data-monster-role=container].open{background-color:var(--monster-bg-color-primary-2);-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em}[data-monster-role=container].clear{-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\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);-o-border-image:initial;border-image:initial;border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem;width:-webkit-fill-available;width:-moz-available;width:fill-available}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-1)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}:host([disabled]) [data-monster-role=control]{cursor:not-allowed}:host([disabled]) [data-monster-role=status-or-remove-badges],[data-monster-role=control][disabled] [data-monster-role=status-or-remove-badges]{display:none}div[data-monster-role=selection]{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;justify-content:flex-start;margin:5px}[data-monster-role=option-control]{margin-right:8px}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{align-content:center;align-items:center;display:flex;flex-direction:row;gap:7px;justify-content:space-between}[data-monster-role=filter],[data-monster-role=popper-filter]{display:flex;flex-grow:200;order:99999999;visibility:hidden}[data-monster-role=filter].active{background-color:var(--monster-bg-color-primary-2);border:0;border-color:var(--monster-bg-color-primary-3);border-bottom:1px solid var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);min-width:40%;outline:none;visibility:visible}.active[data-monster-role=filter][name=popper-filter]{height:1.5em;margin:2.5em;padding:2px;width:calc(100% - var(--monster-border-width)*2)}.option-filter-control{align-items:center;background-color:var(--monster-bg-color-primary-2);display:flex;height:2.5em;margin:-1.1em -1.1em .3em}[data-monster-role=remove-badge]{background-color:var(--monster-bg-color-primary-2);height:16px;margin-left:5px;-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\");order:2}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:.8em;mask-size:.8em;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;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 fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.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 fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}.open[data-monster-role=status-or-remove-badges]{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 fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%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 fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E\")}.empty[data-monster-role=status-or-remove-badges]{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' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%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' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E\")}.clear[data-monster-role=status-or-remove-badges]{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\")}.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-bg-color-error-1);-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='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%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='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{background-color:var(--monster-color-error-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='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%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='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E\")}}.loading[data-monster-role=status-or-remove-badges]{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);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' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%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' class='activity' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E\")}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;overflow-x:hidden;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-gutter:stable;scrollbar-width:thin}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;max-width:100%;min-width:0;width:100%}[data-monster-role=option]{align-items:center;padding:6px 5px}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;max-width:100%;min-width:0;width:100%}[data-monster-role=option] label>div{justify-content:space-between;outline:none}[part=option-label]{max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.selected{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option][data-monster-filtered=true],[data-monster-role=option][data-monster-visibility=hidden]{display:none}[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}@media (prefers-color-scheme:dark){[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=filter]::placeholder{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}[data-monster-role=option]>input:focus,[data-monster-role=option]>label:focus{outline:none}[data-monster-role=selection-messages]:empty:before,[data-monster-role=summary-messages]:empty:before{content:\"\u00A0\"}.in-button-bar{border-color:var(--monster-bg-color-primary-4)!important;border-style:var(--monster-border-style)!important;border-width:var(--monster-border-width)!important}[data-monster-role=pagination]::part(nav){justify-content:flex-start}[data-monster-role=pagination]::part(list){margin-bottom:0;margin-top:0}
28
- }`, 0);
29
+ }`,
30
+ 0,
31
+ );
29
32
  } catch (e) {
30
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
33
+ addAttributeToken(
34
+ document.getRootNode().querySelector("html"),
35
+ ATTRIBUTE_ERRORMESSAGE,
36
+ e + "",
37
+ );
31
38
  }
@@ -1063,7 +1063,7 @@ function scheduleFloatingAppearanceOpen(popperElement) {
1063
1063
  ? requestAnimationFrame
1064
1064
  : (callback) => {
1065
1065
  return setTimeout(callback, 16);
1066
- };
1066
+ };
1067
1067
  const frameId = schedule(() => {
1068
1068
  finishAppearanceOpen();
1069
1069
  });
@@ -10,10 +10,10 @@
10
10
  * For more information about purchasing a commercial license, please contact Volker Schukai.
11
11
  */
12
12
 
13
- import {addAttributeToken} from "../../../dom/attributes.mjs";
14
- import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
13
+ import { addAttributeToken } from "../../../dom/attributes.mjs";
14
+ import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
15
15
 
16
- export {PopperStyleSheet}
16
+ export { PopperStyleSheet };
17
17
 
18
18
  /**
19
19
  * @private
@@ -22,10 +22,17 @@ export {PopperStyleSheet}
22
22
  const PopperStyleSheet = new CSSStyleSheet();
23
23
 
24
24
  try {
25
- PopperStyleSheet.insertRule(`
25
+ PopperStyleSheet.insertRule(
26
+ `
26
27
  @layer popper {
27
28
  [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));opacity:1;padding:1.1em;position:absolute;top:0;transition:opacity var(--monster-popper-fade-duration,.14s) var(--monster-popper-fade-timing,cubic-bezier(.2,0,0,1));width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper][data-monster-appearance=opening]{opacity:0}div[data-monster-role=popper][data-monster-appearance=open]{opacity:1}@media (prefers-reduced-motion:reduce){div[data-monster-role=popper]{transition:none}}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{display:flex;position:relative}
28
- }`, 0);
29
+ }`,
30
+ 0,
31
+ );
29
32
  } catch (e) {
30
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
33
+ addAttributeToken(
34
+ document.getRootNode().querySelector("html"),
35
+ ATTRIBUTE_ERRORMESSAGE,
36
+ e + "",
37
+ );
31
38
  }
@@ -133,19 +133,19 @@ div[data-monster-role="popper"] {
133
133
  }
134
134
  :host([disabled]) {
135
135
  background-color: var(--monster-bg-color-primary-disabled-1);
136
- border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46%, 0.3));
136
+ border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46.3%, 0.3));
137
137
  color: var(--monster-color-primary-disabled-1);
138
138
  cursor: not-allowed;
139
139
  }
140
140
  :host([disabled]) * {
141
141
  background-color: var(--monster-bg-color-primary-disabled-1);
142
- border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46%, 0.3));
142
+ border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46.3%, 0.3));
143
143
  color: var(--monster-color-primary-disabled-1);
144
144
  cursor: not-allowed;
145
145
  }
146
146
  :disabled {
147
147
  background-color: var(--monster-bg-color-primary-disabled-1);
148
- border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46%, 0.3));
148
+ border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46.3%, 0.3));
149
149
  color: var(--monster-color-primary-disabled-1);
150
150
  cursor: not-allowed;
151
151
  opacity: 0.55;
@@ -1,2 +1,76 @@
1
1
  /** generated from floating-ui.pcss **/
2
- div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));opacity:1;padding:1.1em;position:absolute;top:0;transition:opacity var(--monster-popper-fade-duration,.14s) var(--monster-popper-fade-timing,cubic-bezier(.2,0,0,1));width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper][data-monster-appearance=opening]{opacity:0}div[data-monster-role=popper][data-monster-appearance=open]{opacity:1}@media (prefers-reduced-motion:reduce){div[data-monster-role=popper]{transition:none}}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}
2
+ div[data-monster-role="popper"] {
3
+ align-content: center;
4
+ background: var(--monster-bg-color-primary-1);
5
+ border-color: var(--monster-bg-color-primary-4);
6
+ border-radius: var(--monster-border-radius);
7
+ border-style: var(--monster-border-style);
8
+ border-width: var(--monster-border-width);
9
+ box-shadow: var(--monster-box-shadow-1);
10
+ box-sizing: border-box;
11
+ color: var(--monster-color-primary-1);
12
+ display: none;
13
+ justify-content: space-between;
14
+ left: 0;
15
+ max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
16
+ max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
17
+ opacity: 1;
18
+ padding: 1.1em;
19
+ position: absolute;
20
+ top: 0;
21
+ transition: opacity var(--monster-popper-fade-duration, .14s)
22
+ var(--monster-popper-fade-timing, cubic-bezier(0.2, 0, 0, 1));
23
+ width: -moz-max-content;
24
+ width: max-content;
25
+ z-index: var(--monster-z-index-modal);
26
+ }
27
+ div[data-monster-role="popper"][data-monster-appearance="opening"] {
28
+ opacity: 0;
29
+ }
30
+ div[data-monster-role="popper"][data-monster-appearance="open"] {
31
+ opacity: 1;
32
+ }
33
+ @media (prefers-reduced-motion: reduce) {
34
+ div[data-monster-role="popper"] {
35
+ transition: none;
36
+ }
37
+ }
38
+ div[data-monster-role="popper"] > [part="content"] {
39
+ max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
40
+ max-width: 100%;
41
+ overflow: auto;
42
+ }
43
+ div[data-monster-role="popper"]
44
+ > [part="content"][data-monster-overflow-mode="horizontal"] {
45
+ clip-path: none;
46
+ overflow: visible;
47
+ }
48
+ div[data-monster-role="popper"]
49
+ > [part="content"][data-monster-overflow-mode="visible"] {
50
+ clip-path: none;
51
+ max-height: none;
52
+ max-width: none;
53
+ overflow: visible;
54
+ }
55
+ div[data-monster-role="popper"] div[data-monster-role="arrow"] {
56
+ background: var(--monster-bg-color-primary-1);
57
+ height: calc(
58
+ max(
59
+ var(--monster-popper-witharrrow-distance),
60
+ -1 *
61
+ var(--monster-popper-witharrrow-distance)
62
+ ) *
63
+ 2
64
+ );
65
+ pointer-events: none;
66
+ position: absolute;
67
+ width: calc(
68
+ max(
69
+ var(--monster-popper-witharrrow-distance),
70
+ -1 *
71
+ var(--monster-popper-witharrrow-distance)
72
+ ) *
73
+ 2
74
+ );
75
+ z-index: -1;
76
+ }
@@ -25,7 +25,7 @@ try {
25
25
  CommonStyleSheet.insertRule(
26
26
  `
27
27
  @layer common {
28
- a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}*{box-sizing:border-box;font-family:var(--monster-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif)}.visible{tvisibility:visible!important}.invisible{visibility:hidden!important}.hidden{display:none!important}.inline{display:inline!important}.block{display:block!important}.flex{display:flex!important}[data-monster-role=control]{outline:none}div[data-monster-role=popper]{background-color:#fff;border:var(--monster-border-width,1px) solid var(--monster-color-primary-1);box-sizing:border-box;display:none;padding:0;z-index:10}:host([disabled]){background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed}:host([disabled]) *{background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed}:disabled{background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed;opacity:.55;pointer-events:none}input:focus-visible{outline:none}body:focus-visible{outline:none}:focus-visible{outline:none}
28
+ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}*{box-sizing:border-box;font-family:var(--monster-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif)}.visible{tvisibility:visible!important}.invisible{visibility:hidden!important}.hidden{display:none!important}.inline{display:inline!important}.block{display:block!important}.flex{display:flex!important}[data-monster-role=control]{outline:none}div[data-monster-role=popper]{background-color:#fff;border:var(--monster-border-width,1px) solid var(--monster-color-primary-1);box-sizing:border-box;display:none;padding:0;z-index:10}:host([disabled]){background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46.3%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed}:host([disabled]) *{background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46.3%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed}:disabled{background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46.3%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed;opacity:.55;pointer-events:none}input:focus-visible{outline:none}body:focus-visible{outline:none}:focus-visible{outline:none}
29
29
  }`,
30
30
  0,
31
31
  );
@@ -10,10 +10,10 @@
10
10
  * For more information about purchasing a commercial license, please contact Volker Schukai.
11
11
  */
12
12
 
13
- import {addAttributeToken} from "../../dom/attributes.mjs";
14
- import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
13
+ import { addAttributeToken } from "../../dom/attributes.mjs";
14
+ import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
15
15
 
16
- export {FloatingUiStyleSheet}
16
+ export { FloatingUiStyleSheet };
17
17
 
18
18
  /**
19
19
  * @private
@@ -22,10 +22,17 @@ export {FloatingUiStyleSheet}
22
22
  const FloatingUiStyleSheet = new CSSStyleSheet();
23
23
 
24
24
  try {
25
- FloatingUiStyleSheet.insertRule(`
25
+ FloatingUiStyleSheet.insertRule(
26
+ `
26
27
  @layer floatingui {
27
28
  div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;max-height:var(--monster-popper-max-height,calc(100vh - 2rem));max-width:var(--monster-popper-max-width,calc(100vw - 2rem));opacity:1;padding:1.1em;position:absolute;top:0;transition:opacity var(--monster-popper-fade-duration,.14s) var(--monster-popper-fade-timing,cubic-bezier(.2,0,0,1));width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper][data-monster-appearance=opening]{opacity:0}div[data-monster-role=popper][data-monster-appearance=open]{opacity:1}@media (prefers-reduced-motion:reduce){div[data-monster-role=popper]{transition:none}}div[data-monster-role=popper]>[part=content]{max-height:var(--monster-popper-content-max-height,calc(100vh - 4.2rem));max-width:100%;overflow:auto}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=horizontal]{clip-path:none;overflow:visible}div[data-monster-role=popper]>[part=content][data-monster-overflow-mode=visible]{clip-path:none;max-height:none;max-width:none;overflow:visible}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}
28
- }`, 0);
29
+ }`,
30
+ 0,
31
+ );
29
32
  } catch (e) {
30
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
33
+ addAttributeToken(
34
+ document.getRootNode().querySelector("html"),
35
+ ATTRIBUTE_ERRORMESSAGE,
36
+ e + "",
37
+ );
31
38
  }
@@ -318,6 +318,55 @@ describe("Datatable drag scroll", function () {
318
318
  expect(copied).deep.equal(['"Alpha";"Beta"']);
319
319
  });
320
320
 
321
+ it("adds an error attribute when clipboard copy fails", async function () {
322
+ const mocks = document.getElementById("mocks");
323
+ const datatable = document.createElement("monster-datatable");
324
+ datatable.id = "copy-error-table";
325
+ datatable.innerHTML = `
326
+ <template id="copy-error-table-row">
327
+ <div data-monster-head="Name">Alpha</div>
328
+ </template>
329
+ `;
330
+ datatable.setOption("data", [{}]);
331
+ mocks.appendChild(datatable);
332
+
333
+ await new Promise((resolve) => setTimeout(resolve, 30));
334
+
335
+ const error = new DOMException("Document is not focused.", "NotAllowedError");
336
+ Object.defineProperty(window.navigator, "clipboard", {
337
+ configurable: true,
338
+ value: {
339
+ writeText: async () => {
340
+ throw error;
341
+ },
342
+ },
343
+ });
344
+
345
+ let eventDetail = null;
346
+ datatable.addEventListener("monster-datatable-copy-error", (event) => {
347
+ eventDetail = event.detail;
348
+ });
349
+
350
+ const cell = datatable.shadowRoot.querySelector(
351
+ "[data-monster-role=datatable] > div",
352
+ );
353
+ cell.dispatchEvent(
354
+ new window.MouseEvent("dblclick", {
355
+ bubbles: true,
356
+ cancelable: true,
357
+ composed: true,
358
+ }),
359
+ );
360
+
361
+ await new Promise((resolve) => setTimeout(resolve, 0));
362
+
363
+ expect(datatable.getAttribute("data-monster-error")).to.contain(
364
+ "Document is not focused.",
365
+ );
366
+ expect(eventDetail.error).to.equal(error);
367
+ expect(eventDetail.text).to.equal("Alpha");
368
+ });
369
+
321
370
  it("defers resize observer grid updates to the next animation frame", async function () {
322
371
  const OriginalResizeObserver = window.ResizeObserver;
323
372
  const originalGlobalResizeObserver = globalThis.ResizeObserver;
@@ -137,6 +137,18 @@ describe('ConfirmButton', function () {
137
137
 
138
138
 
139
139
  });
140
+
141
+ it('should keep bottom space below the decision buttons', function () {
142
+
143
+ const cssText = ConfirmButton.getCSSStyleSheet()
144
+ .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
145
+ .map((rule) => rule.cssText)
146
+ .join("\n");
147
+
148
+ expect(cssText).to.contain('div[data-monster-role=decision]');
149
+ expect(cssText).to.contain('padding-bottom: 0.75rem');
150
+
151
+ });
140
152
  });
141
153
 
142
154
 
@@ -387,6 +387,111 @@ describe('Select', function () {
387
387
  }, 20);
388
388
  });
389
389
 
390
+ it('should reserve popper chrome height before sizing the option list', async function () {
391
+ const mocks = document.getElementById('mocks');
392
+ const select = document.createElement('monster-select');
393
+
394
+ select.setOption('showMaxOptions', 10);
395
+ select.setOption('filter.position', 'popper');
396
+ select.setOption('options', Array.from({length: 10}, (_, index) => ({
397
+ label: `Option ${index + 1}`,
398
+ value: `${index + 1}`
399
+ })));
400
+
401
+ mocks.appendChild(select);
402
+
403
+ await waitForCondition(() => {
404
+ return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
405
+ });
406
+ await waitForCondition(() => {
407
+ return select.shadowRoot.querySelectorAll('[data-monster-role=option]').length === 10;
408
+ });
409
+
410
+ const shadowRoot = select.shadowRoot;
411
+ const control = shadowRoot.querySelector('[data-monster-role=control]');
412
+ const popper = shadowRoot.querySelector('[data-monster-role=popper]');
413
+ const content = shadowRoot.querySelector('[part=content]');
414
+ const options = shadowRoot.querySelector('[data-monster-role=options]');
415
+ const filterControl = shadowRoot.querySelector('[part=popper-filter-control]');
416
+ const pagination = shadowRoot.querySelector('[data-monster-role=pagination]');
417
+ const remoteInfo = shadowRoot.querySelector('[data-monster-role=remote-info]');
418
+
419
+ control.getBoundingClientRect = () => ({
420
+ width: 300,
421
+ height: 50,
422
+ top: 100,
423
+ left: 40,
424
+ right: 340,
425
+ bottom: 150,
426
+ x: 40,
427
+ y: 100
428
+ });
429
+ popper.getBoundingClientRect = () => ({
430
+ width: 300,
431
+ height: 500,
432
+ top: 150,
433
+ left: 40,
434
+ right: 340,
435
+ bottom: 650,
436
+ x: 40,
437
+ y: 150
438
+ });
439
+ filterControl.getBoundingClientRect = () => ({
440
+ width: 260,
441
+ height: 40,
442
+ top: 0,
443
+ left: 0,
444
+ right: 260,
445
+ bottom: 40,
446
+ x: 0,
447
+ y: 0
448
+ });
449
+ pagination.getBoundingClientRect = () => ({
450
+ width: 260,
451
+ height: 34,
452
+ top: 0,
453
+ left: 0,
454
+ right: 260,
455
+ bottom: 34,
456
+ x: 0,
457
+ y: 0
458
+ });
459
+ remoteInfo.getBoundingClientRect = () => ({
460
+ width: 260,
461
+ height: 33,
462
+ top: 0,
463
+ left: 0,
464
+ right: 260,
465
+ bottom: 33,
466
+ x: 0,
467
+ y: 0
468
+ });
469
+
470
+ for (const option of shadowRoot.querySelectorAll('[data-monster-role=option]')) {
471
+ option.getBoundingClientRect = () => ({
472
+ width: 260,
473
+ height: 50,
474
+ top: 0,
475
+ left: 0,
476
+ right: 260,
477
+ bottom: 50,
478
+ x: 0,
479
+ y: 0
480
+ });
481
+ }
482
+
483
+ select.calcAndSetOptionsDimension();
484
+
485
+ const optionHeight = parseFloat(options.style.height);
486
+
487
+ expect(optionHeight).to.be.greaterThan(0);
488
+ expect(optionHeight).to.be.lessThan(500);
489
+ expect(options.style.maxHeight).to.equal(options.style.height);
490
+ expect(options.style.overflowY).to.equal('auto');
491
+ expect(content.style.maxHeight).to.equal(options.style.height);
492
+ expect(parseFloat(popper.style.maxHeight)).to.be.greaterThan(optionHeight);
493
+ });
494
+
390
495
  it('should clamp preferred width to the visible viewport width', function () {
391
496
  const result = resolveSelectPopperWidthConstraints({
392
497
  controlWidth: 120,
@@ -826,7 +931,9 @@ describe('Select', function () {
826
931
  select.setOption('options', [
827
932
  {label: 'Alpha'},
828
933
  {value: 'Beta'},
829
- {}
934
+ {},
935
+ {label: '', value: 'empty-label'},
936
+ {label: ' ', value: 'blank-label'}
830
937
  ]);
831
938
  mocks.appendChild(select);
832
939
 
@@ -849,6 +956,8 @@ describe('Select', function () {
849
956
  expect(options[2].value).to.be.a('string');
850
957
  expect(options[2].label).to.equal(options[2].value);
851
958
  expect(options[2].visibility).to.equal('visible');
959
+ expect(options[3].label).to.equal('empty-label');
960
+ expect(options[4].label).to.equal('blank-label');
852
961
  } catch (e) {
853
962
  return done(e);
854
963
  }
@@ -859,6 +968,27 @@ describe('Select', function () {
859
968
  setTimeout(poll, 50);
860
969
  });
861
970
 
971
+ it('should fall back to the option value when imported labels resolve empty', function () {
972
+ let mocks = document.getElementById('mocks');
973
+ const select = document.createElement('monster-select');
974
+ select.setOption('mapping.selector', '*');
975
+ select.setOption('mapping.labelTemplate', '${name}');
976
+ select.setOption('mapping.valueTemplate', '${id}');
977
+ mocks.appendChild(select);
978
+
979
+ select.importOptions([
980
+ {id: 'company-1', name: ''},
981
+ {id: 'company-2', name: ' '},
982
+ {id: 'company-3', name: 'Visible label'}
983
+ ]);
984
+
985
+ const options = select.getOption('options');
986
+
987
+ expect(options[0].label).to.equal('company-1');
988
+ expect(options[1].label).to.equal('company-2');
989
+ expect(options[2].label).to.equal('Visible label');
990
+ });
991
+
862
992
  it('should not parse options arrays with multiple string entries', function (done) {
863
993
  this.timeout(2000);
864
994