@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/togglegroup/ToggleGroup.js

@@ -1,10 +1,7 @@
-import{c as I,k as O,a as S,b as s,f as b,t as f,h as p,i as T,p as Y,l as q,d,s as P,r,j as o,g as y,m as a,e as J}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{s as C,r as N}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=b('<legend class="mc-field__legend svelte-t87zbg"> </legend>'),V=b('<span class="mc-toggle__label svelte-t87zbg"> </span>'),W=b('<div><label class="mc-toggle__container svelte-t87zbg"><input class="mc-toggle__input svelte-t87zbg" type="checkbox"/> <!></label></div>'),X=b('<fieldset class="mc-field mc-field--group svelte-t87zbg"><!> <div class="mc-field__container svelte-t87zbg"></div></fieldset>');const Z={hash:"svelte-t87zbg",code:`/**
+import{c as B,a as H,b as h,f as E,t as v,i as u,j,p as A,l as D,r as d,e as z,g as F,k as g,d as w,s as G,m as t,h as S}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as Y,i as q}from"../../each.js";import{r as I,s as x}from"../../attributes.js";import{b as J}from"../../input.js";import{c as K}from"../../custom-element-forward-events.js";var N=E('<span class="mc-toggle__label svelte-1p7hz9f"> </span>'),O=E('<div><label class="mc-toggle__container svelte-1p7hz9f"><input class="mc-toggle__input svelte-1p7hz9f" type="checkbox"/> <!></label></div>'),Q=E("<div></div>");const R={hash:"svelte-1p7hz9f",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-t87zbg {font-size:0.875rem;line-height:1.3;font-weight:400;color:#000000;}.mc-field__legend.svelte-t87zbg {padding-inline:0;}.mc-field--group.svelte-t87zbg {border-width:0;margin-inline:0;padding:0;}
+/* stylelint-disable string-no-newline */.mc-field__content.svelte-1p7hz9f {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */.mc-toggle.svelte-t87zbg {width:fit-content;}.mc-toggle__container.svelte-t87zbg {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-t87zbg::before, .mc-toggle__container.svelte-t87zbg::after {content:"";}.mc-toggle__container.svelte-t87zbg::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:#666666;border-radius:1rem;flex-shrink:0;}.mc-toggle__container.svelte-t87zbg::after {height:1.25rem;width:1.25rem;background-color:#ffffff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23666666' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:100%;background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-t87zbg {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-t87zbg {color:#000000;font-size:1rem;font-weight:400;line-height:1.5;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):checked) .mc-toggle__container:where(.svelte-t87zbg)::before {background-color:#117f03;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):checked) .mc-toggle__container:where(.svelte-t87zbg)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23117f03' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg) {cursor:not-allowed;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg)::before {background-color:#d9d9d9;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg)::after {background-color:#737373;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23d9d9d9' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__label:where(.svelte-t87zbg) {color:#737373;}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled:checked) .mc-toggle__container:where(.svelte-t87zbg)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='%23d9d9d9' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-t87zbg:has(:where(.svelte-t87zbg):focus-visible) .mc-toggle__container:where(.svelte-t87zbg)::before {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-toggle--m.svelte-t87zbg .mc-toggle__container:where(.svelte-t87zbg)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-t87zbg .mc-toggle__container:where(.svelte-t87zbg)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23666666' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-t87zbg:has(:where(.svelte-t87zbg):checked) .mc-toggle__container:where(.svelte-t87zbg)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23117f03' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled) .mc-toggle__container:where(.svelte-t87zbg)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23d9d9d9' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-t87zbg:has(:where(.svelte-t87zbg):disabled:checked) .mc-toggle__container:where(.svelte-t87zbg)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='%23d9d9d9' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-t87zbg .mc-toggle__label:where(.svelte-t87zbg) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(z,i){const x=O();Y(i,!0),S(z,Z);const H=[];let n=s(i,"name",7),h=s(i,"id",7,x),c=s(i,"options",7),m=s(i,"legend",7),v=s(i,"values",31,()=>q([]));function D(e){var t;return((t=c()[e])==null?void 0:t.id)??`${h()}-${e}`}var u=X(),k=d(u);{var j=e=>{var t=U(),g=d(t,!0);r(t),f(()=>y(g,m())),p(e,t)};B(k,e=>{m()&&e(j)})}var w=P(k,2);return K(w,23,c,(e,t)=>D(t),(e,t)=>{var g=W(),L=d(g),l=d(L);N(l);var M,A=P(l,2);{var F=E=>{var _=V(),G=d(_,!0);r(_),f(()=>y(G,a(t).label)),p(E,_)};B(A,E=>{a(t).label&&E(F)})}r(L),r(g),f(()=>{J(g,1,`mc-toggle mc-field__item ${a(t).label?"":" mc-toggle--hide-label"} ${a(t).size==="m"?" mc-toggle--m":""}`,"svelte-t87zbg"),C(l,"id",n()),C(l,"name",n()),l.disabled=a(t).disabled,M!==(M=a(t).value)&&(l.value=(l.__value=a(t).value)??"")}),Q(H,[],l,()=>(a(t).value,v()),v),p(e,g)}),r(w),r(u),f(()=>C(w,"id",h())),p(z,u),T({get name(){return n()},set name(e){n(e),o()},get id(){return h()},set id(e=x){h(e),o()},get options(){return c()},set options(e){c(e),o()},get legend(){return m()},set legend(e){m(e),o()},get values(){return v()},set values(e=[]){v(e),o()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
+/* stylelint-enable string-no-newline */.mc-toggle.svelte-1p7hz9f {width:fit-content;}.mc-toggle__container.svelte-1p7hz9f {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-1p7hz9f::before, .mc-toggle__container.svelte-1p7hz9f::after {content:"";}.mc-toggle__container.svelte-1p7hz9f::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-1p7hz9f::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-1p7hz9f {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-1p7hz9f {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f) {cursor:not-allowed;}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__label:where(.svelte-1p7hz9f) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):focus-visible) .mc-toggle__container:where(.svelte-1p7hz9f)::before {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-1p7hz9f .mc-toggle__label:where(.svelte-1p7hz9f) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-field__content.svelte-1p7hz9f:where(.mc-field__content--inline:where(.svelte-1p7hz9f)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function U(C,r){A(r,!0),H(C,R);const k=[];let f=h(r,"name",7),i=h(r,"value",31,()=>D([])),n=h(r,"options",7),c=h(r,"inline",7);var L={get name(){return f()},set name(e){f(e),g()},get value(){return i()},set value(e=[]){i(e),g()},get options(){return n()},set options(e){n(e),g()},get inline(){return c()},set inline(e){c(e),g()}},o=Q();return Y(o,21,n,q,(e,l)=>{var s=O(),_=w(s),a=w(_);I(a);var b,M=G(a,2);{var P=m=>{var p=N(),y=w(p,!0);d(p),v(()=>S(y,t(l).label)),u(m,p)};T(M,m=>{t(l).label&&m(P)})}d(_),d(s),v(()=>{z(s,1,`mc-toggle mc-field__item ${t(l).label?"":" mc-toggle--hide-label"} ${t(l).size==="m"?" mc-toggle--m":""}`,"svelte-1p7hz9f"),x(a,"id",t(l).id),x(a,"name",f()),a.disabled=t(l).disabled,b!==(b=t(l).value)&&(a.value=(a.__value=t(l).value)??"")}),J(k,[],a,()=>(t(l).value,i()),i),u(e,s)}),d(o),v(()=>z(o,1,F(["mc-field__content",c()&&"mc-field__content--inline"]),"svelte-1p7hz9f")),u(C,o),j(L)}customElements.define("m-toggle-group",B(U,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{}},[],[],!0,K));
 //# sourceMappingURL=ToggleGroup.js.map

package/dist/components/togglegroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n\n  interface ToggleGroupOption {\n    value: string;\n    id?: string;\n    label?: string;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    isinvalid?: boolean;\n    size?: 's' | 'm';\n  }\n\n  interface Props {\n    options: Array<ToggleGroupOption>;\n    name: string;\n    id?: string;\n    legend?: string;\n    values?: Array<string | number>;\n  }\n\n  const uid = $props.id();\n  let {\n    name,\n    id = uid,\n    options,\n    legend,\n    values = $bindable([]),\n  }: Props = $props();\n\n  function getOptionId(index: number): string {\n    return options[index]?.id ?? `${id}-${index}`;\n  }\n</script>\n\n<fieldset class=\"mc-field mc-field--group\">\n  {#if legend}\n    <legend class=\"mc-field__legend\">\n      {legend}\n    </legend>\n  {/if}\n  <div {id} class=\"mc-field__container\">\n    {#each options as opt, index (getOptionId(index))}\n      <div\n        class=\"mc-toggle mc-field__item {!opt.label\n          ? ' mc-toggle--hide-label'\n          : ''} {opt.size === 'm' ? ' mc-toggle--m' : ''}\"\n      >\n        <label class=\"mc-toggle__container\">\n          <input\n            class=\"mc-toggle__input\"\n            id={name}\n            {name}\n            type=\"checkbox\"\n            bind:group={values}\n            value={opt.value}\n            disabled={opt.disabled}\n          />\n          {#if opt.label}\n            <span class=\"mc-toggle__label\">{opt.label}</span>\n          {/if}\n        </label>\n      </div>\n    {/each}\n  </div>\n</fieldset>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div","opt","$.template_effect","$.set_text","text_1","$.get","consequent_1","$.set_class","div_1","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;8+NAAA,OA+BQA,EAAGC,EAAA,gCAEPC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,aAAKL,CAAG,EACRM,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,GAAA,IAAAK,EAAA,CAAA,CAAA,CAAA,WAGCC,EAAYC,EAAuB,OACnC,QAAAC,EAAAN,EAAO,EAACK,CAAK,IAAb,YAAAC,EAAgB,KAAS,GAAAP,OAAMM,CAAK,EAC7C,gEAMKJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,IAAG,iFAiBmBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAG,EAAC,KAAK,CAAA,kBADtCI,EAAAJ,CAAG,EAAC,OAAKJ,EAAAS,CAAA,qBAdkBC,EAAAC,EAAA,EAAA,4BAAAH,EAAAJ,CAAG,EAAC,MAElC,GADA,wBACE,IAAGI,EAAAJ,CAAG,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,eAAA,WAKxCf,GAAI,kBAKEuB,EAAA,SAAAJ,EAAAJ,CAAG,EAAC,SADPS,KAAAA,EAAAL,EAAAJ,CAAG,EAAC,SAAJQ,EAAA,OAAAA,EAAA,QAAAJ,EAAAJ,CAAG,EAAC,QAAK,oBAATI,EAAAJ,CAAG,EAAC,MADCT,EAAM,GAANA,gIA9BfR,EAAG,oKASZ,+IArCY2B"}
+{"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.\n   */\n  interface Props {\n    /**\n     * The name attribute for the toggle element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the toggle group.\n     */\n    value?: Array<string>;\n    /**\n     * List of properties of each toggle of the toggle group.\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n      size?: 's' | 'm';\n    }>;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let { name, value = $bindable([]), options, inline }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option}\n    <div\n      class=\"mc-toggle mc-field__item {!option.label\n        ? ' mc-toggle--hide-label'\n        : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}\"\n    >\n      <label class=\"mc-toggle__container\">\n        <input\n          class=\"mc-toggle__input\"\n          id={option.id}\n          {name}\n          type=\"checkbox\"\n          bind:group={value}\n          value={option.value}\n          disabled={option.disabled}\n        />\n        {#if option.label}\n          <span class=\"mc-toggle__label\">{option.label}</span>\n        {/if}\n      </label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/toggle';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["name","$.prop","$$props","value","$.proxy","options","inline","$.each","div","option","$.template_effect","$.set_text","text","$.get","$$render","consequent","$.set_class","div_1","$.set_attribute","input","input_value","customElementForwardEvents"],"mappings":";;;;;w5PAAA,+BAwCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,GAAA,IAAAE,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAML,EAAAC,EAAA,SAAA,CAAA,mNAI3CK,OAAAA,EAAAC,EAAA,GAAAH,OAAWI,IAAM,iFAiBgBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAM,EAAC,KAAK,CAAA,kBADzCI,EAAAJ,CAAM,EAAC,OAAKK,EAAAC,CAAA,qBAdeC,EAAAC,EAAA,EAAA,4BAAAJ,EAAAJ,CAAM,EAAC,MAErC,GADA,wBACE,IAAAI,EAAGJ,CAAM,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,gBAAA,EAK3CS,EAAAC,EAAA,KAAAN,EAAAJ,CAAM,EAAC,EAAE,kBAKHU,EAAA,SAAAN,EAAAJ,CAAM,EAAC,SADVW,KAAAA,EAAAP,EAAAJ,CAAM,EAAC,SAAPU,EAAA,OAAAA,EAAA,QAAAN,EAAAJ,CAAM,EAAC,QAAK,oBAAZI,EAAAJ,CAAM,EAAC,MADFN,EAAK,GAALA,gCAbT,oBAAqBG,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,wIAnCYe"}

package/dist/components/togglegroup/ToggleGroup.spec.js

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import ToggleGroup from './ToggleGroup.svelte';
+const options = [
+    { id: 'opt-1', label: 'Option 1', value: 'opt1' },
+    { id: 'opt-2', label: 'Option 2', value: 'opt2', disabled: true },
+    { id: 'opt-3', label: 'Option 3', value: 'opt3', size: 'm' },
+];
+describe('m-toggle-group component', () => {
+    it('renders toggles with labels and correct classes', () => {
+        const { container, getByLabelText } = render(ToggleGroup, {
+            props: {
+                name: 'my-toggle-group',
+                options,
+            },
+        });
+        const toggles = container.querySelectorAll('.mc-toggle');
+        expect(toggles.length).toBe(options.length);
+        options.forEach((option) => {
+            const input = getByLabelText(option.label);
+            expect(input).toBeTruthy();
+            expect(input.type).toBe('checkbox');
+            expect(input.value).toBe(option.value);
+            if (option.disabled)
+                expect(input.disabled).toBe(true);
+        });
+    });
+    it('applies inline class when inline prop is true', () => {
+        const { container } = render(ToggleGroup, {
+            props: {
+                name: 'my-toggle-group',
+                options,
+                inline: true,
+            },
+        });
+        const contentDiv = container.querySelector('.mc-field__content');
+        expect(contentDiv?.classList.contains('mc-field__content--inline')).toBe(true);
+    });
+    it('hides label class applied when label is missing', () => {
+        const optsWithNoLabel = [{ id: 'no-label', label: '', value: 'none' }];
+        const { container } = render(ToggleGroup, {
+            props: {
+                name: 'my-toggle-group',
+                options: optsWithNoLabel,
+            },
+        });
+        const toggleDiv = container.querySelector('.mc-toggle');
+        expect(toggleDiv?.classList.contains('mc-toggle--hide-label')).toBe(true);
+    });
+});

package/dist/components/togglegroup/ToggleGroup.stories.d.ts

@@ -1,14 +1,6 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Toggle Groups are used to manage multiple toggle switches within a group.
- * They allow users to choose multiple options using toggles, typically for preference or feature settings.
- *
- * The `MToggleGroup` component is the **Svelte / WebComponent** implementation of the **Toggle group** component of Mozaic Design System.
- * You can refer to the full specification in [the documentation](https://mozaic.adeo.cloud/components/form/toggle).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const AllChecked: any;
-export declare const SomeDisabled: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
 //# sourceMappingURL=ToggleGroup.stories.d.ts.map

package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA+BE,IAAI;AA7BT,wBA6BU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AA8BzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AAkB5C,eAAO,MAAM,YAAY,KAAoB,CAAC"}
+{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAwDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/togglegroup/ToggleGroup.stories.js

@@ -1,109 +1,61 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Toggle Groups are used to manage multiple toggle switches within a group.
- * They allow users to choose multiple options using toggles, typically for preference or feature settings.
- *
- * The `MToggleGroup` component is the **Svelte / WebComponent** implementation of the **Toggle group** component of Mozaic Design System.
- * You can refer to the full specification in [the documentation](https://mozaic.adeo.cloud/components/form/toggle).
- */
-export default {
+const meta = {
     title: 'Form Elements/Toggle Group',
-    tags: ['autodocs', 'new'],
-    argTypes: {
-        legend: {
-            description: 'Specify the legend of the group.',
-            control: { type: 'text' },
-        },
-        id: {
-            description: 'Specify the toggle group id.',
-            control: { type: 'text' },
-        },
-        options: {
-            description: 'Specify the toggle options in JSON format. ```{ value: string; id?: string; label?: string; disabled?: boolean; size?: "s" | "m"; }[]```',
-            control: { type: 'object' },
-        },
-        values: {
-            description: 'Specify the toggle selected values.',
-            control: { type: 'object' },
-        },
-        onChange: {
-            description: 'Event triggered when the toggle state changes.',
-            action: 'change',
-            table: {
-                category: 'Events',
+    component: 'm-toggle-group',
+    args: {
+        name: 'toggleGroupName',
+        value: ['toggle2'],
+        options: [
+            {
+                id: 'toggle-01',
+                label: 'Toggle Label',
+                value: 'toggle1',
             },
-        },
+            {
+                id: 'toggle-02',
+                label: 'Toggle Label',
+                value: 'toggle2',
+            },
+            {
+                id: 'toggle-03',
+                label: 'Toggle Label',
+                value: 'toggle3',
+            },
+            {
+                id: 'toggle-04',
+                label: 'Toggle Label',
+                value: 'toggle4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-toggle-group
+        name=${ifDefined(args.name)}
+        .options=${ifDefined(args.options)}
+        value=${ifDefined(args.value)}
+        inline=${ifDefined(args.inline)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-toggle-group>
+    `;
     },
 };
-const Template = (args) => {
-    const toggleGroup = document.createElement('m-toggle-group');
-    toggleGroup.setAttribute('id', args.id || 'toggle-group-id');
-    toggleGroup.setAttribute('size', args.size || 's');
-    toggleGroup.setAttribute('legend', args.legend || 'Toggle Group Title');
-    toggleGroup.setAttribute('options', JSON.stringify(args.options || []));
-    toggleGroup.setAttribute('values', JSON.stringify(args.values || []));
-    toggleGroup.onchange = action('onChange');
-    return toggleGroup;
-};
-export const Default = Template.bind({});
-Default.args = {
-    options: [
-        {
-            id: 'toggle1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'toggle2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'toggle3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option2'],
-};
-Default.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-toggle-group');
-    const toggles = group?.shadowRoot?.querySelectorAll('input[type="checkbox"]');
-    expect(group).not.toBeNull();
-    expect(toggles?.length).toBe(3);
-    await userEvent.click(toggles[0]);
-    expect(toggles?.[0]).toBeChecked();
-};
-export const AllChecked = Template.bind({});
-AllChecked.args = {
-    options: [
-        { id: 'toggle1', label: 'Option 1', value: 'option1' },
-        { id: 'toggle2', label: 'Option 2', value: 'option2' },
-        { id: 'toggle3', label: 'Option 3', value: 'option3' },
-    ],
-    values: ['option1', 'option2', 'option3'],
-    size: 'm',
-};
-AllChecked.play = async ({ canvasElement }) => {
-    const toggles = canvasElement
-        .querySelector('m-toggle-group')
-        ?.shadowRoot?.querySelectorAll('input[type="checkbox"]');
-    expect(toggles?.length).toBe(3);
-    toggles?.forEach((toggle) => expect(toggle).toBeChecked());
-};
-export const SomeDisabled = Template.bind({});
-SomeDisabled.args = {
-    options: [
-        { id: 'toggle1', label: 'Option 1', value: 'option1', disabled: true },
-        { id: 'toggle2', label: 'Option 2', value: 'option2' },
-        { id: 'toggle3', label: 'Option 3', value: 'option3' },
-    ],
-    values: ['option2'],
-};
-SomeDisabled.play = async ({ canvasElement }) => {
-    const toggles = canvasElement
-        .querySelector('m-toggle-group')
-        ?.shadowRoot?.querySelectorAll('input[type="checkbox"]');
-    expect(toggles?.[0]).toBeDisabled();
-};
+export default meta;
+export const Default = {};