@schukai/monster 4.150.8 → 4.151.0

package/source/components/form/stylesheet/select.mjs

@@ -29,11 +29,11 @@ try {
         --monster-select-control-min-block-size,var(--monster-control-min-block-size,2.5rem)
     );padding:var(--monster-select-control-padding,.4rem .6rem);margin:0;outline:none;box-sizing:border-box;accent-color:var(
         --monster-theme-accent,var(--monster-color-secondary-2)
-    );-o-border-image:initial;border-image:initial;border-width:var(--monster-theme-control-border-width);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-color:var(--monster-theme-control-border-color);background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:flex;align-items:center;overflow:hidden;width:-webkit-fill-available;width:-moz-available;width:fill-available}div[data-monster-role=popper]{z-index:var(--monster-z-index-popover)}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border-color:var(--monster-theme-control-border-color)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}: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]{display:flex;gap:5px;margin:var(--monster-select-selection-margin,0 5px);flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:var(--monster-select-selection-flex-wrap,wrap);min-height:0}[data-monster-role=option-control]{block-size:var(--monster-select-option-control-size,1rem);flex:0 0 auto;inline-size:var(--monster-select-option-control-size,1rem);margin-right:8px;min-block-size:var(--monster-select-option-control-size,1rem);min-inline-size:var(--monster-select-option-control-size,1rem)}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;gap:7px}[data-monster-role=filter],[data-monster-role=popper-filter]{visibility:hidden;order:99999999;display:flex;flex-grow:200}[data-monster-role=filter].active{visibility:visible;min-width:40%;border:0;outline:none;background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);border-bottom:1px solid var(--monster-bg-color-primary-3)}.active[data-monster-role=filter][name=popper-filter]{width:calc(100% - var(--monster-border-width)*2);height:1.5em;padding:2px;margin:2.5em}.option-filter-control{margin:-1.1em -1.1em .3em;height:2.5em;background-color:var(--monster-bg-color-primary-2);display:flex;align-items:center}[data-monster-role=remove-badge]{order:2;height:16px;-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\");background-color:var(--monster-bg-color-primary-2);margin-left:5px}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{width:16px;min-height:16px;-webkit-mask-size:.8em;mask-size:.8em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center center;mask-position:center center}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-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\");background-color:var(--monster-bg-color-primary-4)}.open[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.empty[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.clear[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-error-1)}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-color-error-4)}}.loading[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4);animation-name:activity;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0,0,.2,1)}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;scrollbar-gutter:stable;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;overflow-x:hidden}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0}[data-monster-role=option]{padding:var(--monster-select-option-padding,2px 6px);align-items:center}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;min-width:0}[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(
+    );-o-border-image:initial;border-image:initial;border-width:var(--monster-theme-control-border-width);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-color:var(--monster-theme-control-border-color);background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:flex;align-items:center;overflow:hidden;width:-webkit-fill-available;width:-moz-available;width:fill-available}div[data-monster-role=popper]{z-index:var(--monster-z-index-popover)}div[data-monster-role=popper]>[part=content]{flex-direction:column}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border-color:var(--monster-theme-control-border-color)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}}[data-monster-role=control]:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}: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]{display:flex;gap:5px;margin:var(--monster-select-selection-margin,0 5px);flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:var(--monster-select-selection-flex-wrap,wrap);min-height:0}[data-monster-role=option-control]{block-size:var(--monster-select-option-control-size,1rem);flex:0 0 auto;inline-size:var(--monster-select-option-control-size,1rem);margin-right:8px;min-block-size:var(--monster-select-option-control-size,1rem);min-inline-size:var(--monster-select-option-control-size,1rem)}[data-monster-role=badge]{display:inline-flex}[data-monster-role=badge-label]{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;gap:7px}[data-monster-role=filter],[data-monster-role=popper-filter]{visibility:hidden;order:99999999;display:flex;flex-grow:200}[data-monster-role=filter].active{visibility:visible;min-width:40%;border:0;outline:none;background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2);border-bottom:1px solid var(--monster-bg-color-primary-3)}.active[data-monster-role=filter][name=popper-filter]{width:calc(100% - var(--monster-border-width)*2);height:1.5em;padding:2px;margin:2.5em}.option-filter-control{margin:-1.1em -1.1em .3em;height:2.5em;background-color:var(--monster-bg-color-primary-2);display:flex;align-items:center}[data-monster-role=remove-badge]{order:2;height:16px;-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\");background-color:var(--monster-bg-color-primary-2);margin-left:5px}[data-monster-role=remove-badge],[data-monster-role=status-or-remove-badges]{width:16px;min-height:16px;-webkit-mask-size:.8em;mask-size:.8em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center center;mask-position:center center}[data-monster-role=status-or-remove-badges]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-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\");background-color:var(--monster-bg-color-primary-4)}.open[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.empty[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.clear[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4)}.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-error-1)}@media (prefers-color-scheme:dark){.error[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-color-error-4)}}.loading[data-monster-role=status-or-remove-badges]{-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\");background-color:var(--monster-bg-color-primary-4);animation-name:activity;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0,0,.2,1)}@keyframes activity{0%{transform:scale(1)}50%{transform:scale(.1)}to{transform:scale(1)}}[data-monster-role=options]{flex-direction:column;flex-grow:1;scrollbar-gutter:stable;scrollbar-color:var(--monster-color-primary-1) var(--monster-bg-color-primary-1);scrollbar-width:thin;overflow-x:hidden}[data-monster-role=option],[data-monster-role=options]{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:0}[data-monster-role=option]{padding:var(--monster-select-option-padding,2px 6px);align-items:center}[data-monster-role=option] label{justify-content:flex-start}[data-monster-role=option] label,[data-monster-role=option] label>div{display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;min-width:0}[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-theme-accent-subtle,var(--monster-bg-color-primary-2)
     );color:var(
         --monster-theme-accent,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{color:var(--monster-color-primary-2);background-color:var(--monster-bg-color-primary-2)}[data-monster-role=filter]::placeholder{color:var(--monster-color-primary-2);background-color:var(--monster-bg-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-width:var(--monster-border-width)!important;border-style:var(--monster-border-style)!important;border-color:var(--monster-bg-color-primary-4)!important}[data-monster-role=pagination-footer]{align-items:center;-moz-column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);display:flex;flex-wrap:wrap;justify-content:flex-end;min-width:0}[data-monster-role=remote-info]{flex:1 1 12rem;margin:var(--monster-select-pagination-footer-margin-top,.5rem) 0 0;min-width:0}[data-monster-role=remote-info]:empty{flex-basis:0;margin:0}[data-monster-role=remote-info] span{text-align:left;white-space:normal}[data-monster-role=pagination]{flex:0 0 auto;margin-left:auto;margin-top:var(--monster-select-pagination-footer-margin-top,.5rem);max-width:100%}[data-monster-role=pagination]::part(nav){justify-content:flex-end;width:auto}[data-monster-role=pagination]::part(list){grid-template-columns:repeat(3,auto);justify-content:end;margin-bottom:0;margin-top:0;width:auto}
+    )}[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}[data-monster-role=create-option]{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;min-block-size:2.75rem;padding:var(--monster-select-option-padding,2px 6px);width:100%}[data-monster-role=create-option][data-monster-visibility=hidden]{display:none}[data-monster-role=create-option]>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:inherit;display:inline-flex;font-family:inherit;gap:.4em;pointer-events:none}[data-monster-role=create-option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-2);outline-offset:-2px}[data-monster-role=create-option-icon]{font-size:1.15em;line-height:.75}@media (prefers-color-scheme:dark){[data-monster-role=create-option][data-monster-focused=true],[data-monster-role=option][data-monster-focused=true]{outline:1px dashed var(--monster-color-selection-4)}}[data-monster-role=filter]::-moz-placeholder{color:var(--monster-color-primary-2);background-color:var(--monster-bg-color-primary-2)}[data-monster-role=filter]::placeholder{color:var(--monster-color-primary-2);background-color:var(--monster-bg-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-width:var(--monster-border-width)!important;border-style:var(--monster-border-style)!important;border-color:var(--monster-bg-color-primary-4)!important}[data-monster-role=pagination-footer]{align-items:center;-moz-column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);column-gap:var(--monster-select-pagination-footer-column-gap,.75rem);display:flex;flex-wrap:wrap;justify-content:flex-end;min-width:0}[data-monster-role=remote-info]{flex:1 1 12rem;margin:var(--monster-select-pagination-footer-margin-top,.5rem) 0 0;min-width:0}[data-monster-role=remote-info]:empty{flex-basis:0;margin:0}[data-monster-role=remote-info] span{text-align:left;white-space:normal}[data-monster-role=pagination]{flex:0 0 auto;margin-left:auto;margin-top:var(--monster-select-pagination-footer-margin-top,.5rem);max-width:100%}[data-monster-role=pagination]::part(nav){justify-content:flex-end;width:auto}[data-monster-role=pagination]::part(list){grid-template-columns:repeat(3,auto);justify-content:end;margin-bottom:0;margin-top:0;width:auto}
 }`,
 		0,
 	);

package/test/cases/components/content/viewer.mjs

@@ -41,7 +41,9 @@ describe("Viewer", function () {
 						expect(textNode.textContent).to.equal(
 							"<strong>raw</strong>\n<script>alert(1)</script>",
 						);
-						expect(textNode.innerHTML).to.contain("&lt;strong&gt;raw&lt;/strong&gt;");
+						expect(textNode.innerHTML).to.contain(
+							"&lt;strong&gt;raw&lt;/strong&gt;",
+						);
 						done();
 					} catch (error) {
 						done(error);
@@ -66,6 +68,10 @@ describe("Viewer", function () {
 					`
 						<link rel="stylesheet" href="https://evil.example/tracker.css">
 						<script src="https://evil.example/tracker.js"></script>
+						<style id="tracking-style">
+							@import "https://evil.example/import.css";
+							.tracked { background-image: url("https://evil.example/background.png"); }
+						</style>
 						<img id="external" src="https://evil.example/pixel.png">
 						<img id="local" src="/image.png">
 					`,
@@ -77,11 +83,16 @@ describe("Viewer", function () {
 						const root = viewer.shadowRoot;
 						expect(root.querySelector("link")).to.equal(null);
 						expect(root.querySelector("script")).to.equal(null);
+						expect(root.querySelector("#tracking-style")).to.equal(null);
 
 						const externalImage = root.querySelector("#external");
 						expect(externalImage).to.not.equal(null);
-						expect(externalImage.classList.contains("privacyImage")).to.equal(true);
-						expect(externalImage.getAttribute("src")).to.match(/^data:image\/gif;base64,/);
+						expect(externalImage.classList.contains("privacyImage")).to.equal(
+							true,
+						);
+						expect(externalImage.getAttribute("src")).to.match(
+							/^data:image\/gif;base64,/,
+						);
 
 						const localImage = root.querySelector("#local");
 						expect(localImage).to.not.equal(null);
@@ -96,4 +107,240 @@ describe("Viewer", function () {
 			}
 		}, 0);
 	});
+
+	it("removes unsafe links, forms, and interactive html", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				viewer.setContent(
+					`
+						<a id="script-link" href="jav&#x09;ascript:alert(1)" onclick="alert(2)">masked</a>
+						<a id="data-link" href=" DATA:text/html,evil">data</a>
+						<a id="custom-link" href="intent://evil">intent</a>
+						<a id="web-link" href="https://safe.example/path" ping="https://tracker.example" attributionsrc="https://tracker.example/register">web</a>
+						<a id="mail-link" href="mailto:user@example.com">mail</a>
+						<a id="phone-link" href="tel:+491234">phone</a>
+						<a id="fragment-link" href="#section">fragment</a>
+						<form id="form"><input name="secret"><button>Send</button></form>
+						<details id="details"><summary>Open</summary>Hidden</details>
+						<monster-button id="custom-element">Action</monster-button>
+						<svg><use id="external-use" href="https://evil.example/image.svg#pixel"></use></svg>
+					`,
+					"text/html",
+				);
+
+				setTimeout(() => {
+					try {
+						const root = viewer.shadowRoot;
+						expect(
+							root.querySelector("#script-link").hasAttribute("href"),
+						).to.equal(false);
+						expect(
+							root.querySelector("#script-link").hasAttribute("onclick"),
+						).to.equal(false);
+						expect(
+							root.querySelector("#data-link").hasAttribute("href"),
+						).to.equal(false);
+						expect(
+							root.querySelector("#custom-link").hasAttribute("href"),
+						).to.equal(false);
+						expect(
+							root.querySelector("#web-link").getAttribute("href"),
+						).to.equal("https://safe.example/path");
+						expect(
+							root.querySelector("#web-link").hasAttribute("ping"),
+						).to.equal(false);
+						expect(
+							root.querySelector("#web-link").hasAttribute("attributionsrc"),
+						).to.equal(false);
+						expect(
+							root.querySelector("#mail-link").getAttribute("href"),
+						).to.equal("mailto:user@example.com");
+						expect(
+							root.querySelector("#phone-link").getAttribute("href"),
+						).to.equal("tel:+491234");
+						expect(
+							root.querySelector("#fragment-link").getAttribute("href"),
+						).to.equal("#section");
+						expect(root.querySelector("form")).to.equal(null);
+						expect(root.querySelector("input")).to.equal(null);
+						expect(
+							root.querySelector("button:not([data-monster-link-action])"),
+						).to.equal(null);
+						expect(root.querySelector("details")).to.equal(null);
+						expect(root.querySelector("monster-button")).to.equal(null);
+						expect(
+							root.querySelector("#external-use").hasAttribute("href"),
+						).to.equal(false);
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 0);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
+
+	it("confirms the canonical destination before opening a link", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			const viewer = document.getElementById("viewer");
+			const originalOpen = window.open;
+			const opened = [];
+			window.open = (...args) => {
+				opened.push(args);
+				return null;
+			};
+
+			try {
+				viewer.setContent(
+					'<a id="masked-link" href="https://xn--bcher-kva.example/account">Your bank</a>',
+					"text/html",
+				);
+
+				setTimeout(() => {
+					try {
+						const link = viewer.shadowRoot.querySelector("#masked-link");
+						link.click();
+
+						const confirmation = viewer.shadowRoot.querySelector(
+							'[data-monster-role="external-link-confirmation"]',
+						);
+						expect(confirmation.hidden).to.equal(false);
+						expect(
+							viewer.shadowRoot.querySelector(
+								'[data-monster-role="external-link-host"]',
+							).textContent,
+						).to.equal("xn--bcher-kva.example");
+						expect(
+							viewer.shadowRoot.querySelector(
+								'[data-monster-role="external-link-url"]',
+							).textContent,
+						).to.equal("https://xn--bcher-kva.example/account");
+
+						viewer.shadowRoot
+							.querySelector('[data-monster-link-action="cancel"]')
+							.click();
+						expect(confirmation.hidden).to.equal(true);
+						expect(opened).to.have.length(0);
+
+						link.click();
+						viewer.shadowRoot
+							.querySelector('[data-monster-link-action="new-window"]')
+							.click();
+
+						link.click();
+						viewer.shadowRoot
+							.querySelector('[data-monster-link-action="open"]')
+							.click();
+						expect(opened).to.deep.equal([
+							[
+								"https://xn--bcher-kva.example/account",
+								"_blank",
+								"noopener,noreferrer",
+							],
+							[
+								"https://xn--bcher-kva.example/account",
+								"_self",
+								"noopener,noreferrer",
+							],
+						]);
+						done();
+					} catch (error) {
+						done(error);
+					} finally {
+						window.open = originalOpen;
+					}
+				}, 0);
+			} catch (error) {
+				window.open = originalOpen;
+				done(error);
+			}
+		}, 0);
+	});
+
+	it("keeps fragment links local without confirmation", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				viewer.setContent(
+					'<a id="fragment" href="#message-section">Section</a>',
+					"text/html",
+				);
+				setTimeout(() => {
+					try {
+						viewer.shadowRoot.querySelector("#fragment").click();
+						expect(
+							viewer.shadowRoot.querySelector(
+								'[data-monster-role="external-link-confirmation"]',
+							).hidden,
+						).to.equal(true);
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 0);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
+
+	it("confirms links rendered inside an email message", function (done) {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `<monster-viewer id="viewer"></monster-viewer>`;
+
+		setTimeout(() => {
+			try {
+				const viewer = document.getElementById("viewer");
+				viewer.setMessage({
+					parts: [
+						{
+							contentType: "text/html",
+							content:
+								'<a id="mail-link" href="https://evil.example/login">Trusted portal</a>',
+						},
+					],
+				});
+
+				setTimeout(() => {
+					try {
+						const message = viewer.shadowRoot.querySelector(
+							"monster-message-content",
+						);
+						const html = message.shadowRoot.querySelector(
+							"monster-html-content",
+						);
+						const link = html.shadowRoot.querySelector("#mail-link");
+						link.click();
+
+						const confirmation = viewer.shadowRoot.querySelector(
+							'[data-monster-role="external-link-confirmation"]',
+						);
+						expect(confirmation.hidden).to.equal(false);
+						expect(
+							viewer.shadowRoot.querySelector(
+								'[data-monster-role="external-link-url"]',
+							).textContent,
+						).to.equal("https://evil.example/login");
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 180);
+			} catch (error) {
+				done(error);
+			}
+		}, 0);
+	});
 });

package/test/cases/components/form/select.mjs

@@ -560,6 +560,147 @@ describe('Select', function () {
         }
     });
 
+    describe('Create missing filtered options', function () {
+        this.timeout(6000);
+
+        async function createSelect(options = {}) {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '';
+            const select = document.createElement('monster-select');
+            select.setOption('type', 'checkbox');
+            select.setOption('filter.mode', 'options');
+            select.setOption('filter.position', 'popper');
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'}
+            ]);
+            for (const [path, value] of Object.entries(options)) {
+                select.setOption(path, value);
+            }
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot?.querySelector(
+                    '[data-monster-role="filter"][name="popper-filter"]'
+                ) instanceof HTMLInputElement;
+            });
+
+            return select;
+        }
+
+        function enterFilterValue(select, value) {
+            const input = select.shadowRoot.querySelector(
+                '[data-monster-role="filter"][name="popper-filter"]'
+            );
+            input.value = value;
+            input.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+            return input;
+        }
+
+        afterEach(() => {
+            document.getElementById('mocks').innerHTML = '';
+        });
+
+        it('should stay opt-in and suppress empty or existing values', async function () {
+            const select = await createSelect();
+            const action = select.shadowRoot.querySelector(
+                '[data-monster-role="create-option"]'
+            );
+
+            enterFilterValue(select, 'Beta');
+            expect(action.getAttribute('data-monster-visibility')).to.equal('hidden');
+
+            select.setOption('features.createOption', true);
+            enterFilterValue(select, '   ');
+            expect(action.getAttribute('data-monster-visibility')).to.equal('hidden');
+
+            enterFilterValue(select, 'ALPHA');
+            expect(action.getAttribute('data-monster-visibility')).to.equal('hidden');
+        });
+
+        it('should create badge selections with mouse and touch', async function () {
+            const select = await createSelect({
+                'features.createOption': true,
+                'labels.create-option': 'Add tag: ${label}'
+            });
+
+            enterFilterValue(select, 'Beta Tag');
+            let action = select.shadowRoot.querySelector(
+                '[data-monster-role="create-option"]'
+            );
+            expect(action.getAttribute('data-monster-visibility')).to.equal('visible');
+            expect(action.textContent).to.contain('Add tag: Beta Tag');
+            expect(action.querySelector('button').className).to.contain('monster-badge-primary');
+            action.click();
+
+            await waitForCondition(() => select.value.includes('Beta Tag'));
+            expect(select.getOption('options').some((option) => {
+                return option.value === 'Beta Tag';
+            })).to.equal(true);
+
+            enterFilterValue(select, 'Touch Tag');
+            action = select.shadowRoot.querySelector(
+                '[data-monster-role="create-option"]'
+            );
+            action.dispatchEvent(new Event('touch', {
+                bubbles: true,
+                composed: true,
+                cancelable: true
+            }));
+
+            await waitForCondition(() => select.value.includes('Touch Tag'));
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelectorAll(
+                    '[data-monster-role="badge-label"]'
+                ).length === 2;
+            });
+            const badges = Array.from(select.shadowRoot.querySelectorAll(
+                '[data-monster-role="badge-label"]'
+            )).map((badge) => badge.textContent.trim());
+            expect(badges).to.include('Beta Tag');
+            expect(badges).to.include('Touch Tag');
+        });
+
+        it('should create a configured option from the filter with Enter', async function () {
+            const select = await createSelect({
+                'features.createOption': true,
+                'formatter.createOption': (filterValue) => ({
+                    label: filterValue.toUpperCase(),
+                    value: `tag:${filterValue.toLowerCase().replaceAll(' ', '-')}`
+                })
+            });
+            let createdOption;
+            select.addEventListener('monster-option-created', (event) => {
+                createdOption = event.detail.option;
+            });
+
+            const input = enterFilterValue(select, 'New Topic');
+            input.dispatchEvent(new KeyboardEvent('keydown', {
+                code: 'Enter',
+                bubbles: true,
+                composed: true,
+                cancelable: true
+            }));
+
+            await waitForCondition(() => select.value.includes('tag:new-topic'));
+            await waitForCondition(() => createdOption !== undefined);
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector(
+                    '[data-monster-role="badge-label"]'
+                );
+            });
+            expect(createdOption).to.deep.include({
+                label: 'NEW TOPIC',
+                value: 'tag:new-topic'
+            });
+            expect(select.shadowRoot.querySelector(
+                '[data-monster-role="badge-label"]'
+            ).textContent.trim()).to.equal('NEW TOPIC');
+        });
+    });
+
     describe('With fetch', function () {
 
         beforeEach((done) => {