@schukai/monster 3.56.0 → 3.57.0

package/source/components/form/style/select.pcss

@@ -256,7 +256,7 @@ div[data-monster-role=selection] {
 
 [data-monster-role=option][data-monster-focused=true] {
     outline: 1px dashed var(--monster-color-selection-2);
-    outline-offset: 2px;
+    outline-offset: -2px;
 }
 
 [data-monster-role=option] > label:focus,

package/source/components/form/style/toggle-switch.pcss

@@ -0,0 +1,74 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+
+[data-monster-role=control] {
+
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0.4rem 0.6rem;
+  margin: 0;
+  outline: none;
+  box-sizing: border-box;
+}
+
+[data-monster-role=control]:focus {
+  outline: 1px dashed var(--monster-color-selection-3);
+  outline-offset: 2px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  
+  border-color: var(--monster-bg-color-primary-3);
+  border-width: thin;
+  border-style: var(--monster-border-style);
+  transition: background-color 0.2s;
+  display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.switch-radio input[type="radio"] {
+  display: none;
+}
+
+.label{
+    height: 34px;
+    display: block;
+    text-align: center;
+    line-height: 34px;
+    user-select: none;
+}
+
+.switch-slider {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  left: 4px;
+  right: 28px;
+  background-color: var(--monster-bg-color-primary-4);
+  transition: 0.2s;
+}
+
+.switch[data-monster-state="on"] .label.off  {
+  visibility: hidden;
+}
+.switch[data-monster-state="on"] .label.on  {
+  visibility: visible;
+}
+.switch[data-monster-state="off"] .label.off  {
+  visibility: visible;
+}
+.switch[data-monster-state="off"] .label.on  {
+  visibility: hidden;
+}
+
+
+.switch[data-monster-state="on"] .switch-slider  {
+  transform: translateX(24px);
+
+}
+

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

@@ -20,7 +20,7 @@ const SelectStyleSheet = new CSSStyleSheet();
 try {
   SelectStyleSheet.insertRule(`
 @layer select { 
-.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);border-shadow:var(--monster-box-shadow-1)}.monster-border-0{border-radius:0;border-style:none;border-width:0;border-shadow:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.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);border-shadow:var(--monster-box-shadow-1)}.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}.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}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;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}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}.d-none{display:none!important}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath 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{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-2);-o-border-image:initial;border-image:initial;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:thin;box-sizing:border-box;color:var(--monster-color-primary-2);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}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=remove-badge]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;background-size:16px;height:16px;margin-left:5px;min-height:16px;order:2;width:16px}@media (prefers-color-scheme:light){[data-monster-role=remove-badge]{filter:invert(1)}}[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}.status-or-remove-badges{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath 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-position:50%;background-repeat:no-repeat;background-size:16px;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges].open{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath 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=status-or-remove-badges].empty{background-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'%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\")}[data-monster-role=status-or-remove-badges].clear{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=status-or-remove-badges].loading{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-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'%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]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}[data-monster-role=no-options]{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2);margin:1.1em 0 0 1.1em}.selected{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}[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=option]>input:focus,[data-monster-role=option]>label:focus{outline:none} 
+.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);border-shadow:var(--monster-box-shadow-1)}.monster-border-0{border-radius:0;border-style:none;border-width:0;border-shadow:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.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);border-shadow:var(--monster-box-shadow-1)}.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}.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}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;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}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}.d-none{display:none!important}div[data-monster-role=control]{display:flex;height:100%;position:relative}[data-monster-role=container].open{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath 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{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=control]{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-2);-o-border-image:initial;border-image:initial;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:thin;box-sizing:border-box;color:var(--monster-color-primary-2);display:flex;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem}@media (prefers-color-scheme:light){[data-monster-role=control]{background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2)}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=control]:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}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=remove-badge]{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;background-size:16px;height:16px;margin-left:5px;min-height:16px;order:2;width:16px}@media (prefers-color-scheme:light){[data-monster-role=remove-badge]{filter:invert(1)}}[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}.status-or-remove-badges{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath 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-position:50%;background-repeat:no-repeat;background-size:16px;min-height:16px;width:16px}[data-monster-role=status-or-remove-badges].open{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath 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=status-or-remove-badges].empty{background-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'%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\")}[data-monster-role=status-or-remove-badges].clear{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\")}[data-monster-role=status-or-remove-badges].loading{animation-duration:1s;animation-iteration-count:infinite;animation-name:activity;animation-timing-function:cubic-bezier(0,0,.2,1);background-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'%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]{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1}[data-monster-role=option]{align-items:center;box-sizing:border-box;display:flex;padding:6px 5px}[data-monster-role=option] label{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;width:100%}[data-monster-role=option] label>div{align-items:center;display:flex;flex-direction:row;justify-content:space-between;outline:none;width:100%}[data-monster-role=no-options]{background-color:var(--monster-bg-color-warning-2);color:var(--monster-col or-warning-2);margin:1.1em 0 0 1.1em}.selected{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}[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=option]>input:focus,[data-monster-role=option]>label:focus{outline:none} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/form/stylesheet/toggle-switch.mjs

@@ -0,0 +1,27 @@
+
+/**
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {ToggleSwitchStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const ToggleSwitchStyleSheet = new CSSStyleSheet();
+
+try {
+  ToggleSwitchStyleSheet.insertRule(`
+@layer toggleswitch { 
+:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-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);border-shadow:var(--monster-box-shadow-1)}.monster-border-0{border-radius:0;border-style:none;border-width:0;border-shadow:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.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);border-shadow:var(--monster-box-shadow-1)}.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]{box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem}[data-monster-role=control]:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}.switch{border-color:var(--monster-bg-color-primary-3);border-style:var(--monster-border-style);border-width:thin;display:inline-block;display:grid;grid-template-columns:1fr 1fr;height:34px;position:relative;transition:background-color .2s;width:60px}.switch-radio input[type=radio]{display:none}.label{display:block;height:34px;line-height:34px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch-slider{background-color:var(--monster-bg-color-primary-4);bottom:4px;left:4px;position:absolute;right:28px;top:4px;transition:.2s}.switch[data-monster-state=on] .label.off{visibility:hidden}.switch[data-monster-state=off] .label.off,.switch[data-monster-state=on] .label.on{visibility:visible}.switch[data-monster-state=off] .label.on{visibility:hidden}.switch[data-monster-state=on] .switch-slider{transform:translateX(24px)} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

package/source/components/form/toggle-switch.mjs

@@ -0,0 +1,427 @@
+/**
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+import { instanceSymbol } from "../../constants.mjs";
+import { internalSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { ProxyObserver } from "../../types/proxyobserver.mjs";
+
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+    assembleMethodSymbol,
+    registerCustomElement,
+    updaterTransformerMethodsSymbol
+} from "../../dom/customelement.mjs";
+import {
+    isObject
+} from "../../types/is.mjs";
+import { ToggleSwitchStyleSheet } from "./stylesheet/toggle-switch.mjs";
+import {
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+export { ToggleSwitch };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbol = Symbol("switchElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbolOn = Symbol("switchElementOn");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbolOff = Symbol("switchElementOff");
+
+/**
+ * @type {string}
+ */
+export const STATE_ON = 'on';
+
+/**
+ * @type {string}
+ */
+export const STATE_OFF = 'off';
+
+/**
+ * This CustomControl creates a ToggleSwitch element
+ *
+ * <img src="./images/switch.png">
+ * 
+ *
+ * @startuml toggleswitch.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- ToggleSwitch
+ * @enduml
+ * 
+ * @since 3.57.0  
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A simple Switch
+ */
+class ToggleSwitch extends CustomControl {
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     * @since 2.1.0
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/form/toggle-switch@@instance");
+    }
+
+    static getTag() {
+        return "monster-toggle-switch";
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {string} value=current value of the element
+     * @property {Boolean} disabled=disabled=false Disabled state
+     * @property {Object} classes
+     * @property {string} classes.on=specifies the class for the on state.
+     * @property {string} classes.off=specifies the class for the off state.
+     * @property {Object} values
+     * @property {string} values.off=specifies the value of the element if it is not selected
+     * @property {Object} labels
+     * @property {string} labels.on=specifies the label for the on state.
+     * @property {string} labels.off=specifies the label for the off state.
+     * @property {Object} templates
+     * @property {string} templates.main=specifies the main template used by the control.
+     * 
+     * @since 3.57.0
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            value: null,
+            disabled: false,
+            classes: {
+                "on": "monster-theme-primary-3",
+                "off": "monster-theme-primary-2"
+            },
+            values: {
+                on: "on",
+                off: "off"
+            },
+            labels: {
+                "toggle-switch-on": "ON",
+                "toggle-switch-off": "OFF",
+            },
+            templates: {
+                main: getTemplate()
+            }
+        })
+    }
+
+    /**
+     * 
+     * @return {Monster.Components.Form.Button}
+     */
+    [assembleMethodSymbol]() {
+        const self = this;
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        /**
+         * init value to off
+         * if the value was not defined before inserting it into the HTML
+         */
+        if (self.getOption("value") === null) {
+            self.setOption('value', self.getOption("values.off"));
+        }
+
+        /**
+         * value from attribute
+         */
+        if (self.hasAttribute("value")) {
+            self.setOption('value', self.getAttribute("value"));
+        }
+
+        /**
+         * validate value
+         */
+        validateAndSetValue.call(self);
+
+        if(this.state === STATE_ON) {
+            toggleClassOn.call(self);
+        }else{
+            toggleClassOff.call(self);
+        }
+
+        /**
+         * is called when options changed
+         */
+        self[internalSymbol].attachObserver(
+            new Observer(function () {
+                if (isObject(this) && this instanceof ProxyObserver) {
+                    validateAndSetValue.call(self);
+                    toggleClass.call(self);
+                }
+            }),
+        );
+
+        return this;
+    }
+
+    /**
+     * updater transformer methods for pipe
+     * 
+     * @return {function}
+     */
+    [updaterTransformerMethodsSymbol]() {
+        const self = this;
+        return {
+            "state-callback": (Wert) => {
+                return self.state;
+            }
+        }
+    }
+
+    /**
+     * @return [SwitchStyleSheet]
+     */
+    static getCSSStyleSheet() {
+        return [ToggleSwitchStyleSheet];
+    }
+
+    /**
+     * toggle switch
+     * 
+     * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.click()
+	 * ```
+     */
+    click() {
+        toggleValues.call(this);
+    }
+
+    /**
+     * toggle switch on/off
+     * 
+     * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.toggle()
+	 * ```
+     * 
+     * @return {ToggleSwitch}
+     */
+    toggle() {
+        this.click();
+        return this;
+    }
+
+    /**
+     * toggle switch on
+     * 
+     * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.toggleOn()
+	 * ```
+     * 
+     * @return {ToggleSwitch}
+     */
+    toggleOn() {
+        this.setOption('value', this.getOption('values.on'));
+        return this;
+    };
+
+    /**
+     * toggle switch off
+     * 
+     * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.toggleOff()
+	 * ```
+     * 
+     * @return {ToggleSwitch}
+     */
+    toggleOff() {
+        this.setOption('value', this.getOption('values.off'));
+        return this;
+    };
+
+    /**
+     * returns the status of the element
+     * 
+     * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * console.log(e.state)
+	 * // ↦ off
+	 * ```
+     * 
+     * @return {string}
+     */
+    get state() {
+        return this.getOption('value') === this.getOption('values.on') ? STATE_ON : STATE_OFF;
+    }
+
+    /**
+	 * The current value of the Switch
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * console.log(e.value)
+	 * // ↦ on
+	 * ```
+	 *
+	 * @return {string}
+	 */
+    get value() {
+        return this.state === STATE_ON ? this.getOption('values.on') : this.getOption('values.off');
+    }
+
+    /**
+	 * Set value
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.value="on"
+	 * ```
+	 *
+	 * @property {string} value
+	 */
+    set value(value) {
+        this.setOption('value', value);
+    }
+
+}
+
+/**
+ * @private
+ */
+function initControlReferences() {
+    this[switchElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=switch]`,
+    );
+}
+
+/**
+* @private
+*/
+function toggleClassOn() {
+    this[switchElementSymbol].classList.remove(this.getOption('classes.off')); // change color
+    this[switchElementSymbol].classList.add(this.getOption('classes.on'));// change color
+}
+
+/**
+* @private
+*/
+function toggleClassOff() {
+    this[switchElementSymbol].classList.remove(this.getOption('classes.on'));// change color
+    this[switchElementSymbol].classList.add(this.getOption('classes.off'));// change color
+}
+
+/**
+* @private
+*/
+function toggleClass() {
+    const self = this;
+    if (self.getOption('value') === self.getOption('values.on')) {
+        toggleClassOn.call(self);
+    } else {
+        toggleClassOff.call(self);
+    }
+}
+
+/**
+ * @private
+ */
+function toggleValues() {
+    const self = this;
+
+    if (self.getOption('disabled') === true) {
+        return;
+    }
+
+    if (self.getOption('value') === self.getOption('values.on')) {
+        self.setOption('value', this.getOption('values.off'));
+        self?.setFormValue(self.getOption('value')); // set form value
+    } else {
+        self.setOption('value', this.getOption('values.on'));
+        self?.setFormValue(self.getOption('values.off')); // set form value
+    }
+
+    self.setOption('state', self.state);
+}
+
+/**
+* @private
+*/
+function validateAndSetValue() {
+    let self = this;
+    let value = self.getOption('value');
+
+    let validatedValues = [];
+    validatedValues.push(this.getOption('values.on'));
+    validatedValues.push(this.getOption('values.off'));
+
+    if (validatedValues.includes(value) === false) {
+        addAttributeToken(
+            this,
+            ATTRIBUTE_ERRORMESSAGE,
+            'The value "' + value + '" must be "' + self.getOption("values.on") + '" or "' + self.getOption("values.off"),
+        );
+        self.setOption('disabled', true);
+        self.formDisabledCallback(true);
+    } else {
+        self.setOption('disabled', false);
+        self.formDisabledCallback(false);
+    }
+}
+
+/**
+ * @private
+ * @return {initEventHandler}
+ */
+function initEventHandler() {
+    const self = this;
+    self.addEventListener("keyup", function (event) {
+        if (event.code === 'Space') {
+            self[switchElementSymbol].click();
+        }
+    });
+    self.addEventListener("click", function (event) {
+        toggleValues.call(self);
+    });
+    return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+    // language=HTML
+    return `
+        <div data-monster-role="control" part="control" tabindex="0">
+     
+            <div class="switch" data-monster-role="switch" data-monster-attributes="data-monster-state path:value | call:state-callback " >
+                <div class="label on" data-monster-replace="path:labels.toggle-switch-on"></div>
+                <div class="label off" data-monster-replace="path:labels.toggle-switch-off"></div>
+                <div class="switch-slider"></div>
+            </div>
+
+        </div>`;
+}
+
+registerCustomElement(ToggleSwitch);

package/source/data/transformer.mjs

@@ -775,7 +775,39 @@ function transform(value) {
 			defaultValue = convertSpecialStrings(defaultValue, value);
 
 			return translations.getText(key, defaultValue);
-
+	
+		case "set-toggle":
+		case "set-set":
+		case "set-remove":
+			 let modifier = args.shift();
+			let delimiter = args.shift();
+			if (delimiter === undefined) {
+				delimiter = " ";
+			}
+			
+			const set = new Set(value.split(delimiter));
+			const toggle = new Set(modifier.split(delimiter));
+			if (this.command === "set-toggle") {
+				for (const t of toggle) {
+					if (set.has(t)) {
+						set.delete(t);
+					} else {
+						set.add(t);
+					}
+				}
+			} else if (this.command === "set-set") {
+				for (const t of toggle) {
+					set.add(t);
+				}
+			} else if (this.command === "set-remove") {
+				for (const t of toggle) {
+					set.delete(t);
+				}
+			}
+			return Array.from(set).join(delimiter);
+			
+			
+			
 		default:
 			throw new Error(`unknown command ${this.command}`);
 	}