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

package/dist/components/tags/TagInteractive.svelte

@@ -22,35 +22,38 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-tag {
-  font-size: var(--font-size-100, 0.875rem);
+  font-size: 0.875rem;
   border-radius: 2rem;
   height: 2rem;
   padding-inline: 0.75rem;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  background: var(--tag-color-background-standard, #ffffff);
-  color: var(--tag-color-text-standard, #242938);
-  border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
+  background: #ffffff;
+  color: #242938;
+  border: 1px solid #999999;
 }
 .mc-tag--s {
-  font-size: var(--font-size-50, 0.75rem);
+  font-size: 0.75rem;
   border-radius: 1.5rem;
   height: 1.5rem;
   padding-inline: 0.5rem;
 }
 .mc-tag--l {
-  font-size: var(--font-size-100, 0.875rem);
+  font-size: 0.875rem;
   border-radius: 2.5rem;
   height: 2.5rem;
   padding-inline: 1rem;
 }
 .mc-tag.is-disabled, .mc-tag:disabled {
   cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
+  background: #d9d9d9;
+  color: #737373;
+  border-color: #d9d9d9;
   box-shadow: none;
 }
 .mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
@@ -61,13 +64,13 @@
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-weight: 600;
 }
 .mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
+  box-shadow: inset 0 0 0 1px #999999;
 }
 .mc-tag-interactive:focus-visible {
-  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));
+  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;
 }
@@ -76,19 +79,19 @@
   gap: 0.25rem;
   text-decoration: none;
   outline: none;
-  color: var(--tag-color-text-inverse, #ffffff);
+  color: #ffffff;
   border: none;
-  background: var(--tag-color-background-selected, #117f03);
+  background: #117f03;
   cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-weight: 600;
   padding-inline-end: 1rem;
   padding-inline-start: 0.5rem;
 }
 .mc-tag-contextualised:not(:disabled):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
+  background: #006902;
 }
 .mc-tag-contextualised:focus-visible {
-  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));
+  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;
 }
@@ -99,8 +102,8 @@
 
 .mc-tag-removable {
   padding: 0 0 0 1rem;
-  background: var(--tag-color-background-inverse, #242938);
-  color: var(--tag-color-text-inverse, #ffffff);
+  background: #242938;
+  color: #ffffff;
   border: none;
 }
 .mc-tag-removable__remove {
@@ -113,18 +116,18 @@
   padding: 0.25rem;
   display: block;
   cursor: pointer;
-  border-radius: var(--radius-full, 100%);
+  border-radius: 100%;
 }
 .mc-tag-removable__remove:hover {
-  background: var(--tag-color-background-inverse-hover, #343b4c);
+  background: #343b4c;
 }
 .mc-tag-removable__remove:focus-visible {
-  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));
+  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-tag-removable__icon {
-  fill: var(--tag-color-delete-icon, #c9d0de);
+  fill: #c9d0de;
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -164,19 +167,19 @@
   white-space: nowrap;
   cursor: pointer;
   padding-inline-start: 0.5rem;
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-weight: 600;
 }
 .mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
+  box-shadow: inset 0 0 0 1px #999999;
 }
 .mc-tag-selectable:has(:focus-visible) {
-  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));
+  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-tag-selectable:has(:checked) {
-  background: var(--tag-color-background-selected, #117f03);
-  color: var(--tag-color-text-inverse, #ffffff);
+  background: #117f03;
+  color: #ffffff;
   border: none;
 }
 .mc-tag-selectable:has(:checked)::before {
@@ -184,22 +187,22 @@
   content: "";
   height: 1.25rem;
   width: 1.25rem;
-  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(--tag-color-text-inverse, %23ffffff)' 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");
+  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='%23ffffff' 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-tag-selectable:has(:checked):not(:has(:disabled)):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
-  border-color: var(--tag-color-background-selected-hover, #006902);
+  background: #006902;
+  border-color: #006902;
   box-shadow: none;
 }
 .mc-tag-selectable:has(:disabled) {
   cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
+  background: #d9d9d9;
+  color: #737373;
+  border-color: #d9d9d9;
   box-shadow: none;
 }
 .mc-tag-selectable:has(:disabled)::before {
-  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(--color-text-disabled, %23737373)' 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");
+  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='%23737373' 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-tag-selectable .mc-tag__input {
   clip-path: inset(100%);

package/dist/components/tags/TagRemovable.js

@@ -1,4 +1,7 @@
-import{c as w,p as x,b as o,A as P,t as _,h as k,i as C,j as s,e as R,B as F,n as H,a as j,f as A,z as D,s as u,d as n,r as v,g as p}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as y,c as T,a as q}from"../../attributes.js";import{C as G}from"../../CrossCircleFilled24.js";import"../../legacy.js";var I=P('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function E(c,e){x(e,!1);let i=o(e,"id",12,void 0),d=o(e,"style",12,void 0),m=o(e,"className",12,void 0),r=o(e,"fill",12,void 0),g=o(e,"size",12,"1.25rem");var l=I();return _(()=>{y(l,"id",i()),T(l,d()),R(l,0,F(m())),y(l,"fill",r())}),k(c,l),C({get id(){return i()},set id(t){i(t),s()},get style(){return d()},set style(t){d(t),s()},get className(){return m()},set className(t){m(t),s()},get fill(){return r()},set fill(t){r(t),s()},get size(){return g()},set size(t){g(t),s()}})}customElements.define("cross-circle-filled-20",w(E,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function J(c,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var K=A('<span><span class="mc-tag__label svelte-ylmvah"> </span> <button class="mc-tag-removable__remove svelte-ylmvah" type="button"><span class="mc-tag-removable__icon svelte-ylmvah"><!></span> <span class="mc-tag-removable__text svelte-ylmvah"> </span></button></span>');const O={hash:"svelte-ylmvah",code:`/**
+import{c as w,p as _,b as s,q as R,t as x,h as C,i as E,j as n,e as B,u as D,n as F,a as H,f as j,D as q,s as u,d as c,r as g,g as p}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as y,a as T,b as A}from"../../attributes.js";import{C as G}from"../../CrossCircleFilled24.js";import"../../legacy.js";var I=R('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06"></path></svg>');function k(d,e){_(e,!1);let o=s(e,"id",12,void 0),i=s(e,"style",12,void 0),m=s(e,"className",12,void 0),r=s(e,"fill",12,void 0),v=s(e,"size",12,"1.25rem");var l=I();return x(()=>{y(l,"id",o()),T(l,i()),B(l,0,D(m())),y(l,"fill",r())}),C(d,l),E({get id(){return o()},set id(a){o(a),n()},get style(){return i()},set style(a){i(a),n()},get className(){return m()},set className(a){m(a),n()},get fill(){return r()},set fill(a){r(a),n()},get size(){return v()},set size(a){v(a),n()}})}customElements.define("cross-circle-filled-20",w(k,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function J(d,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var K=j('<span><span class="mc-tag__label svelte-nym64e"> </span> <button class="mc-tag-removable__remove svelte-nym64e" type="button"><span class="mc-tag-removable__icon svelte-nym64e"><!></span> <span class="mc-tag-removable__text svelte-nym64e"> </span></button></span>');const O={hash:"svelte-nym64e",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-ylmvah {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ylmvah {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ylmvah {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ylmvah, .mc-tag.svelte-ylmvah:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ylmvah {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ylmvah:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ylmvah:focus-visible {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-tag-contextualised.svelte-ylmvah {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ylmvah:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ylmvah:focus-visible {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-tag-contextualised.mc-tag--s.svelte-ylmvah {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ylmvah {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ylmvah {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ylmvah:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ylmvah:focus-visible {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-tag-removable__icon.svelte-ylmvah {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ylmvah {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ylmvah {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-ylmvah .mc-tag-removable__remove:where(.svelte-ylmvah) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-ylmvah .mc-tag-removable__icon:where(.svelte-ylmvah) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-ylmvah .mc-tag-removable__remove:where(.svelte-ylmvah) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-ylmvah .mc-tag-removable__icon:where(.svelte-ylmvah) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-ylmvah {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ylmvah:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):focus-visible) {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-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-ylmvah .mc-tag__label:where(.svelte-ylmvah) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ylmvah {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ylmvah {padding-inline-start:0.75rem;}`};function Q(c,e){x(e,!0),j(c,O);let i=o(e,"id",7),d=o(e,"label",7),m=o(e,"removableLabel",7,"Remove"),r=o(e,"size",7,"m"),g=D(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var l=K();q(l,()=>({class:`mc-tag mc-tag-removable  ${r()!=="m"?`mc-tag--${r()}`:""}`,id:i(),...g}),void 0,void 0,"svelte-ylmvah");var t=n(l),z=n(t,!0);v(t);var h=u(t,2);h.__click=[J,i];var f=n(h),L=n(f);{var M=a=>{E(a,{"aria-hidden":"true"})},N=a=>{G(a,{"aria-hidden":"true"})};S(L,a=>{r()==="s"?a(M):a(N,!1)})}v(f);var b=u(f,2),B=n(b,!0);return v(b),v(h),v(l),_(()=>{p(z,d()),p(B,m())}),k(c,l),C({get id(){return i()},set id(a){i(a),s()},get label(){return d()},set label(a){d(a),s()},get removableLabel(){return m()},set removableLabel(a="Remove"){m(a),s()},get size(){return r()},set size(a="m"){r(a),s()}})}H(["click"]);customElements.define("mc-tag-removable",w(Q,{id:{},label:{},removableLabel:{},size:{}},[],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tag.svelte-nym64e {font-size:0.875rem;border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:#ffffff;color:#242938;border:1px solid #999999;}.mc-tag--s.svelte-nym64e {font-size:0.75rem;border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-nym64e {font-size:0.875rem;border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-nym64e, .mc-tag.svelte-nym64e:disabled {cursor:not-allowed;background:#d9d9d9;color:#737373;border-color:#d9d9d9;box-shadow:none;}.mc-tag-interactive.svelte-nym64e {text-decoration:none;outline:none;cursor:pointer;font-weight:600;}.mc-tag-interactive.svelte-nym64e:not(:disabled):hover {box-shadow:inset 0 0 0 1px #999999;}.mc-tag-interactive.svelte-nym64e:focus-visible {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-tag-contextualised.svelte-nym64e {gap:0.25rem;text-decoration:none;outline:none;color:#ffffff;border:none;background:#117f03;cursor:pointer;font-weight:600;padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-nym64e:not(:disabled):hover {background:#006902;}.mc-tag-contextualised.svelte-nym64e:focus-visible {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-tag-contextualised.mc-tag--s.svelte-nym64e {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-nym64e {padding:0 0 0 1rem;background:#242938;color:#ffffff;border:none;}.mc-tag-removable__remove.svelte-nym64e {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:100%;}.mc-tag-removable__remove.svelte-nym64e:hover {background:#343b4c;}.mc-tag-removable__remove.svelte-nym64e:focus-visible {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-tag-removable__icon.svelte-nym64e {fill:#c9d0de;width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-nym64e {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-nym64e {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-nym64e .mc-tag-removable__remove:where(.svelte-nym64e) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-nym64e .mc-tag-removable__icon:where(.svelte-nym64e) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-nym64e .mc-tag-removable__remove:where(.svelte-nym64e) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-nym64e .mc-tag-removable__icon:where(.svelte-nym64e) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-nym64e {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:600;}.mc-tag-selectable.svelte-nym64e:hover {box-shadow:inset 0 0 0 1px #999999;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):focus-visible) {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-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked) {background:#117f03;color:#ffffff;border:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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='%23ffffff' 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-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked):not(:has(:disabled)):hover {background:#006902;border-color:#006902;box-shadow:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):disabled) {cursor:not-allowed;background:#d9d9d9;color:#737373;border-color:#d9d9d9;box-shadow:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):disabled)::before {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='%23737373' 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-tag-selectable.svelte-nym64e .mc-tag__label:where(.svelte-nym64e) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-nym64e {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-nym64e {padding-inline-start:0.75rem;}`};function Q(d,e){_(e,!0),H(d,O);let o=s(e,"id",7),i=s(e,"label",7),m=s(e,"removableLabel",7,"Remove"),r=s(e,"size",7,"m"),v=q(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var l=K();A(l,()=>({class:`mc-tag mc-tag-removable  ${r()!=="m"?`mc-tag--${r()}`:""}`,id:o(),...v}),void 0,void 0,"svelte-nym64e");var a=c(l),z=c(a,!0);g(a);var f=u(a,2);f.__click=[J,o];var b=c(f),L=c(b);{var M=t=>{k(t,{"aria-hidden":"true"})},N=t=>{G(t,{"aria-hidden":"true"})};S(L,t=>{r()==="s"?t(M):t(N,!1)})}g(b);var h=u(b,2),P=c(h,!0);return g(h),g(f),g(l),x(()=>{p(z,i()),p(P,m())}),C(d,l),E({get id(){return o()},set id(t){o(t),n()},get label(){return i()},set label(t){i(t),n()},get removableLabel(){return m()},set removableLabel(t="Remove"){m(t),n()},get size(){return r()},set size(t="m"){r(t),n()}})}F(["click"]);customElements.define("mc-tag-removable",w(Q,{id:{},label:{},removableLabel:{},size:{}},[],[],!0));
 //# sourceMappingURL=TagRemovable.js.map

package/dist/components/tags/TagRemovable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagRemovable.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tags/TagRemovable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'mc-tag-removable' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n\n  interface Props {\n    id: string;\n    label: string;\n    removableLabel?: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    removableLabel = 'Remove',\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleRemove() {\n    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));\n  }\n</script>\n\n<span\n  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <span class=\"mc-tag__label\">{label}</span>\n  <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={handleRemove}>\n    <span class=\"mc-tag-removable__icon\">\n      {#if size === 's'}\n        <CrossCircleFilled20 aria-hidden=\"true\" />\n      {:else}\n        <CrossCircleFilled24 aria-hidden=\"true\" />\n      {/if}\n    </span>\n    <span class=\"mc-tag-removable__text\">{removableLabel}</span>\n  </button>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-removable';\n</style>\n"],"names":["id","style","className","fill","size","handleRemove","_","$.prop","$$props","label","removableLabel","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":"2uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,mCAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,6GCeW,SAAAE,EAAeC,EAAAN,EAAA,CACtB,kBAAkB,YAAY,aAAgB,CAAA,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;2gNAxBF,oBAeIA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,yBAAiB,QAAQ,EACzBN,eAAO,GAAG,EACPO,EAAAC,EAAAJ,EAAA,qGAS8B,MAAA,4BAAAJ,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,aAEpEO,qFAG4DN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,4JAxBnC,SAAQ,6CAClB,IAAG,YAOd","x_google_ignoreList":[0]}
+{"version":3,"file":"TagRemovable.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tags/TagRemovable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'mc-tag-removable' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n\n  interface Props {\n    id: string;\n    label: string;\n    removableLabel?: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    removableLabel = 'Remove',\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleRemove() {\n    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));\n  }\n</script>\n\n<span\n  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <span class=\"mc-tag__label\">{label}</span>\n  <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={handleRemove}>\n    <span class=\"mc-tag-removable__icon\">\n      {#if size === 's'}\n        <CrossCircleFilled20 aria-hidden=\"true\" />\n      {:else}\n        <CrossCircleFilled24 aria-hidden=\"true\" />\n      {/if}\n    </span>\n    <span class=\"mc-tag-removable__text\">{removableLabel}</span>\n  </button>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-removable';\n</style>\n"],"names":["id","style","className","fill","size","handleRemove","_","$.prop","$$props","label","removableLabel","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":"2uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,mCAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,6GCeW,SAAAE,EAAeC,EAAAN,EAAA,CACtB,kBAAkB,YAAY,aAAgB,CAAA,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;;;;0vKAxBF,oBAeIA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,yBAAiB,QAAQ,EACzBN,eAAO,GAAG,EACPO,EAAAC,EAAAJ,EAAA,qGAS8B,MAAA,4BAAAJ,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,aAEpEO,qFAG4DN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,4JAxBnC,SAAQ,6CAClB,IAAG,YAOd","x_google_ignoreList":[0]}

package/dist/components/tags/TagRemovable.svelte

@@ -46,35 +46,38 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
 .mc-tag {
-  font-size: var(--font-size-100, 0.875rem);
+  font-size: 0.875rem;
   border-radius: 2rem;
   height: 2rem;
   padding-inline: 0.75rem;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  background: var(--tag-color-background-standard, #ffffff);
-  color: var(--tag-color-text-standard, #242938);
-  border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
+  background: #ffffff;
+  color: #242938;
+  border: 1px solid #999999;
 }
 .mc-tag--s {
-  font-size: var(--font-size-50, 0.75rem);
+  font-size: 0.75rem;
   border-radius: 1.5rem;
   height: 1.5rem;
   padding-inline: 0.5rem;
 }
 .mc-tag--l {
-  font-size: var(--font-size-100, 0.875rem);
+  font-size: 0.875rem;
   border-radius: 2.5rem;
   height: 2.5rem;
   padding-inline: 1rem;
 }
 .mc-tag.is-disabled, .mc-tag:disabled {
   cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
+  background: #d9d9d9;
+  color: #737373;
+  border-color: #d9d9d9;
   box-shadow: none;
 }
 .mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
@@ -85,13 +88,13 @@
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-weight: 600;
 }
 .mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
+  box-shadow: inset 0 0 0 1px #999999;
 }
 .mc-tag-interactive:focus-visible {
-  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));
+  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;
 }
@@ -100,19 +103,19 @@
   gap: 0.25rem;
   text-decoration: none;
   outline: none;
-  color: var(--tag-color-text-inverse, #ffffff);
+  color: #ffffff;
   border: none;
-  background: var(--tag-color-background-selected, #117f03);
+  background: #117f03;
   cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-weight: 600;
   padding-inline-end: 1rem;
   padding-inline-start: 0.5rem;
 }
 .mc-tag-contextualised:not(:disabled):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
+  background: #006902;
 }
 .mc-tag-contextualised:focus-visible {
-  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));
+  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;
 }
@@ -123,8 +126,8 @@
 
 .mc-tag-removable {
   padding: 0 0 0 1rem;
-  background: var(--tag-color-background-inverse, #242938);
-  color: var(--tag-color-text-inverse, #ffffff);
+  background: #242938;
+  color: #ffffff;
   border: none;
 }
 .mc-tag-removable__remove {
@@ -137,18 +140,18 @@
   padding: 0.25rem;
   display: block;
   cursor: pointer;
-  border-radius: var(--radius-full, 100%);
+  border-radius: 100%;
 }
 .mc-tag-removable__remove:hover {
-  background: var(--tag-color-background-inverse-hover, #343b4c);
+  background: #343b4c;
 }
 .mc-tag-removable__remove:focus-visible {
-  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));
+  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-tag-removable__icon {
-  fill: var(--tag-color-delete-icon, #c9d0de);
+  fill: #c9d0de;
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -188,19 +191,19 @@
   white-space: nowrap;
   cursor: pointer;
   padding-inline-start: 0.5rem;
-  font-weight: var(--font-weight-semi-bold, 600);
+  font-weight: 600;
 }
 .mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
+  box-shadow: inset 0 0 0 1px #999999;
 }
 .mc-tag-selectable:has(:focus-visible) {
-  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));
+  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-tag-selectable:has(:checked) {
-  background: var(--tag-color-background-selected, #117f03);
-  color: var(--tag-color-text-inverse, #ffffff);
+  background: #117f03;
+  color: #ffffff;
   border: none;
 }
 .mc-tag-selectable:has(:checked)::before {
@@ -208,22 +211,22 @@
   content: "";
   height: 1.25rem;
   width: 1.25rem;
-  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(--tag-color-text-inverse, %23ffffff)' 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");
+  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='%23ffffff' 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-tag-selectable:has(:checked):not(:has(:disabled)):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
-  border-color: var(--tag-color-background-selected-hover, #006902);
+  background: #006902;
+  border-color: #006902;
   box-shadow: none;
 }
 .mc-tag-selectable:has(:disabled) {
   cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
+  background: #d9d9d9;
+  color: #737373;
+  border-color: #d9d9d9;
   box-shadow: none;
 }
 .mc-tag-selectable:has(:disabled)::before {
-  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(--color-text-disabled, %23737373)' 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");
+  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='%23737373' 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-tag-selectable .mc-tag__input {
   clip-path: inset(100%);

package/dist/components/tags/TagSelectable.js

@@ -1,4 +1,7 @@
-import{n as w,c as x,p as y,a as k,b as r,f as _,z as C,d as h,t as E,h as z,i as M,j as l,s as P,r as f,g as B}from"../../custom-element.js";import{a as H,r as S,s as b,b as j}from"../../attributes.js";function D(o,a){a(o.target.checked)}var T=_('<label><input type="checkbox" class="mc-tag__input svelte-ylmvah"/> <span class="mc-tag__label svelte-ylmvah"> </span></label>');const q={hash:"svelte-ylmvah",code:`/**
+import{n as y,c as w,p as x,a as _,b as l,f as k,D as C,d as h,t as E,h as z,i as M,j as r,s as P,r as b,g as D}from"../../custom-element.js";import{b as B,r as H,s as v,c as S}from"../../attributes.js";function j(s,t){t(s.target.checked)}var T=k('<label><input type="checkbox" class="mc-tag__input svelte-nym64e"/> <span class="mc-tag__label svelte-nym64e"> </span></label>');const q={hash:"svelte-nym64e",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-ylmvah {font-size:var(--font-size-100, 0.875rem);border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:var(--tag-color-background-standard, #ffffff);color:var(--tag-color-text-standard, #242938);border:var(--border-s, 1px) solid var(--tag-color-border, #999999);}.mc-tag--s.svelte-ylmvah {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ylmvah {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ylmvah, .mc-tag.svelte-ylmvah:disabled {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-interactive.svelte-ylmvah {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ylmvah:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ylmvah:focus-visible {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-tag-contextualised.svelte-ylmvah {gap:0.25rem;text-decoration:none;outline:none;color:var(--tag-color-text-inverse, #ffffff);border:none;background:var(--tag-color-background-selected, #117f03);cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-ylmvah:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ylmvah:focus-visible {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-tag-contextualised.mc-tag--s.svelte-ylmvah {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ylmvah {padding:0 0 0 1rem;background:var(--tag-color-background-inverse, #242938);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-removable__remove.svelte-ylmvah {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:var(--radius-full, 100%);}.mc-tag-removable__remove.svelte-ylmvah:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ylmvah:focus-visible {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-tag-removable__icon.svelte-ylmvah {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ylmvah {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-ylmvah {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ylmvah {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ylmvah:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):focus-visible) {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-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):checked):not(:has(:disabled)):hover {background:var(--tag-color-background-selected-hover, #006902);border-color:var(--tag-color-background-selected-hover, #006902);box-shadow:none;}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):disabled) {cursor:not-allowed;background:var(--color-background-disabled, #d9d9d9);color:var(--color-text-disabled, #737373);border-color:var(--color-background-disabled, #d9d9d9);box-shadow:none;}.mc-tag-selectable.svelte-ylmvah:has(:where(.svelte-ylmvah):disabled)::before {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(--color-text-disabled, %23737373)' 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-tag-selectable.svelte-ylmvah .mc-tag__input:where(.svelte-ylmvah) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-ylmvah .mc-tag__label:where(.svelte-ylmvah) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ylmvah {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ylmvah {padding-inline-start:0.75rem;}`};function A(o,a){y(a,!0),k(o,q);let s=r(a,"id",7),n=r(a,"name",7),m=r(a,"label",7),d=r(a,"checked",15,!1),v=r(a,"disabled",7,!1),i=r(a,"size",7,"m"),u=C(a,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","size"]);var c=T();H(c,()=>({class:`mc-tag mc-tag-selectable ${i()!=="m"?`mc-tag--${i()}`:""}`,id:s(),...u}),void 0,void 0,"svelte-ylmvah");var t=h(c);S(t),t.__change=[D,d];var g=P(t,2),p=h(g,!0);return f(g),f(c),E(()=>{b(t,"id",s()),b(t,"name",n()),j(t,d()),t.disabled=v(),B(p,m())}),z(o,c),M({get id(){return s()},set id(e){s(e),l()},get name(){return n()},set name(e){n(e),l()},get label(){return m()},set label(e){m(e),l()},get checked(){return d()},set checked(e=!1){d(e),l()},get disabled(){return v()},set disabled(e=!1){v(e),l()},get size(){return i()},set size(e="m"){i(e),l()}})}w(["change"]);customElements.define("mc-tag-selectable",x(A,{id:{},name:{},label:{},checked:{},disabled:{},size:{}},[],[],!0));
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tag.svelte-nym64e {font-size:0.875rem;border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:#ffffff;color:#242938;border:1px solid #999999;}.mc-tag--s.svelte-nym64e {font-size:0.75rem;border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-nym64e {font-size:0.875rem;border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-nym64e, .mc-tag.svelte-nym64e:disabled {cursor:not-allowed;background:#d9d9d9;color:#737373;border-color:#d9d9d9;box-shadow:none;}.mc-tag-interactive.svelte-nym64e {text-decoration:none;outline:none;cursor:pointer;font-weight:600;}.mc-tag-interactive.svelte-nym64e:not(:disabled):hover {box-shadow:inset 0 0 0 1px #999999;}.mc-tag-interactive.svelte-nym64e:focus-visible {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-tag-contextualised.svelte-nym64e {gap:0.25rem;text-decoration:none;outline:none;color:#ffffff;border:none;background:#117f03;cursor:pointer;font-weight:600;padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-nym64e:not(:disabled):hover {background:#006902;}.mc-tag-contextualised.svelte-nym64e:focus-visible {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-tag-contextualised.mc-tag--s.svelte-nym64e {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-nym64e {padding:0 0 0 1rem;background:#242938;color:#ffffff;border:none;}.mc-tag-removable__remove.svelte-nym64e {width:2rem;height:2rem;background-size:1.5rem;background:transparent;border:none;margin:0 0 0 0.125rem;padding:0.25rem;display:block;cursor:pointer;border-radius:100%;}.mc-tag-removable__remove.svelte-nym64e:hover {background:#343b4c;}.mc-tag-removable__remove.svelte-nym64e:focus-visible {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-tag-removable__icon.svelte-nym64e {fill:#c9d0de;width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-nym64e {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-removable.mc-tag--s.svelte-nym64e {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-nym64e {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:600;}.mc-tag-selectable.svelte-nym64e:hover {box-shadow:inset 0 0 0 1px #999999;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):focus-visible) {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-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked) {background:#117f03;color:#ffffff;border:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked)::before {display:inline-block;content:"";height:1.25rem;width:1.25rem;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='%23ffffff' 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-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked):not(:has(:disabled)):hover {background:#006902;border-color:#006902;box-shadow:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):disabled) {cursor:not-allowed;background:#d9d9d9;color:#737373;border-color:#d9d9d9;box-shadow:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):disabled)::before {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='%23737373' 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-tag-selectable.svelte-nym64e .mc-tag__input:where(.svelte-nym64e) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-tag-selectable.svelte-nym64e .mc-tag__label:where(.svelte-nym64e) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-nym64e {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-nym64e {padding-inline-start:0.75rem;}`};function A(s,t){x(t,!0),_(s,q);let n=l(t,"id",7),m=l(t,"name",7),c=l(t,"label",7),i=l(t,"checked",15,!1),f=l(t,"disabled",7,!1),o=l(t,"size",7,"m"),u=C(t,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","size"]);var d=T();B(d,()=>({class:`mc-tag mc-tag-selectable ${o()!=="m"?`mc-tag--${o()}`:""}`,id:n(),...u}),void 0,void 0,"svelte-nym64e");var a=h(d);H(a),a.__change=[j,i];var g=P(a,2),p=h(g,!0);return b(g),b(d),E(()=>{v(a,"id",n()),v(a,"name",m()),S(a,i()),a.disabled=f(),D(p,c())}),z(s,d),M({get id(){return n()},set id(e){n(e),r()},get name(){return m()},set name(e){m(e),r()},get label(){return c()},set label(e){c(e),r()},get checked(){return i()},set checked(e=!1){i(e),r()},get disabled(){return f()},set disabled(e=!1){f(e),r()},get size(){return o()},set size(e="m"){o(e),r()}})}y(["change"]);customElements.define("mc-tag-selectable",w(A,{id:{},name:{},label:{},checked:{},disabled:{},size:{}},[],[],!0));
 //# sourceMappingURL=TagSelectable.js.map

package/dist/components/tags/TagSelectable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSelectable.js","sources":["../../../src/components/tags/TagSelectable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-selectable' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    name?: string;\n    label: string;\n    checked?: boolean;\n    disabled?: boolean;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled = false,\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleChange(e: Event) {\n    checked = (e.target as HTMLInputElement).checked;\n  }\n</script>\n\n<label\n  class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <input\n    type=\"checkbox\"\n    class=\"mc-tag__input\"\n    {id}\n    {name}\n    {checked}\n    {disabled}\n    onchange={handleChange}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</label>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["handleChange","e","checked","id","$.prop","$$props","name","label","disabled","size","attrs","$.rest_props"],"mappings":"oNAuBWA,EAAaC,EAAUC,EAAA,CAC9BA,EAAWD,EAAE,OAA4B,OAAO,CAClD;;ovMAzBF,oBAcIE,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLH,mBAAoB,EAAK,EACzBM,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACPC,EAAAC,EAAAN,EAAA,gHAS8B,MAAA,4BAAAI,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,aAEpEC,+DASQV,EAAYE,CAAA,2GAEKK,GAAK,2LAzBZ,GAAK,qDACd,GAAK,6CACT,IAAG,YAOd"}
+{"version":3,"file":"TagSelectable.js","sources":["../../../src/components/tags/TagSelectable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-selectable' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    name?: string;\n    label: string;\n    checked?: boolean;\n    disabled?: boolean;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled = false,\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleChange(e: Event) {\n    checked = (e.target as HTMLInputElement).checked;\n  }\n</script>\n\n<label\n  class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <input\n    type=\"checkbox\"\n    class=\"mc-tag__input\"\n    {id}\n    {name}\n    {checked}\n    {disabled}\n    onchange={handleChange}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</label>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["handleChange","e","checked","id","$.prop","$$props","name","label","disabled","size","attrs","$.rest_props"],"mappings":"oNAuBWA,EAAaC,EAAUC,EAAA,CAC9BA,EAAWD,EAAE,OAA4B,OAAO,CAClD;;;;;m+JAzBF,oBAcIE,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLH,mBAAoB,EAAK,EACzBM,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACPC,EAAAC,EAAAN,EAAA,gHAS8B,MAAA,4BAAAI,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,aAEpEC,+DASQV,EAAYE,CAAA,2GAEKK,GAAK,2LAzBZ,GAAK,qDACd,GAAK,6CACT,IAAG,YAOd"}