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

package/dist/components/tags/TagContextualised.js

@@ -1,7 +1,4 @@
-import{c as h,p,a as y,b as l,f as x,D as w,d as f,s as _,t as C,h as E,i as k,j as s,r as g,g as z}from"../../custom-element.js";import{b as N}from"../../attributes.js";import{N as M}from"../numberbadge/NumberBadge.js";var P=x('<button><!> <span class="mc-tag__label svelte-nym64e"> </span></button>');const B={hash:"svelte-nym64e",code:`/**
+import{c as w,p,a as x,b as o,f as k,z as _,d as g,s as C,t as E,i as z,j as N,k as l,r as v,h as y}from"../../custom-element.js";import{b as M}from"../../attributes.js";import{N as P}from"../numberbadge/NumberBadge.js";var B=k('<button><!> <span class="mc-tag__label svelte-ra288w"> </span></button>');const H={hash:"svelte-ra288w",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * 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__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 D(d,t){p(t,!0),y(d,B);let n=l(t,"label",7),o=l(t,"contextualisedNumber",7,"99"),a=l(t,"size",7,"m"),i=l(t,"disabled",7,!1),b=w(t,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var r=P();N(r,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:i(),...b}),void 0,void 0,"svelte-nym64e");var m=f(r);M(m,{appearance:"inverse",get label(){return o()},get size(){return u}});var c=_(m,2),v=f(c,!0);return g(c),g(r),C(()=>z(v,n())),E(d,r),k({get label(){return n()},set label(e){n(e),s()},get contextualisedNumber(){return o()},set contextualisedNumber(e="99"){o(e),s()},get size(){return a()},set size(e="m"){a(e),s()},get disabled(){return i()},set disabled(e=!1){i(e),s()}})}customElements.define("mc-tag-contextualised",h(D,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
+ */.mc-tag.svelte-ra288w {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-ra288w {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ra288w {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ra288w, .mc-tag.svelte-ra288w: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-ra288w {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ra288w:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ra288w: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-ra288w {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-ra288w:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ra288w: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-ra288w {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ra288w {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-ra288w {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-ra288w:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ra288w: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-ra288w {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ra288w {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-ra288w {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ra288w {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-ra288w:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w:has(:where(.svelte-ra288w):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-ra288w .mc-tag__label:where(.svelte-ra288w) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ra288w {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ra288w {padding-inline-start:0.75rem;}`};function S(c,r){p(r,!0),x(c,H);let s=o(r,"label",7),i=o(r,"contextualisedNumber",7,"99"),a=o(r,"size",7,"m"),d=o(r,"disabled",7,!1),f=_(r,["$$slots","$$events","$$legacy","$$host","label","contextualisedNumber","size","disabled"]);const u=a()==="l"?"m":"s";var b={get label(){return s()},set label(e){s(e),l()},get contextualisedNumber(){return i()},set contextualisedNumber(e="99"){i(e),l()},get size(){return a()},set size(e="m"){a(e),l()},get disabled(){return d()},set disabled(e=!1){d(e),l()}},t=B();M(t,()=>({class:`mc-tag mc-tag-contextualised ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:d(),...f}),void 0,void 0,"svelte-ra288w");var n=g(t);P(n,{appearance:"inverse",get label(){return i()},get size(){return u}});var m=C(n,2),h=g(m,!0);return v(m),v(t),E(()=>y(h,s())),z(c,t),N(b)}customElements.define("mc-tag-contextualised",w(S,{label:{},contextualisedNumber:{},size:{},disabled:{}},[],[],!0));
 //# sourceMappingURL=TagContextualised.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge\n    appearance=\"inverse\"\n    label={contextualisedNumber}\n    size={badgeSize}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;;;;mxJAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,wBAIA,MAAA,gCAAAA,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,mBAExEE,2FAIKH,EAAoB,qBACrBK,uDAEqBR,EAAK,CAAA,CAAA,6HAnBT,KAAI,6CACpB,IAAG,qDACC,GAAK,YAKpB"}
+{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge\n    appearance=\"inverse\"\n    label={contextualisedNumber}\n    size={badgeSize}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAIKH,EAAoB,qBACrBK,uDAEqBR,EAAK,CAAA,CAAA,aAZpC"}

package/dist/components/tags/TagContextualised.svelte

@@ -38,38 +38,35 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-tag {
-  font-size: 0.875rem;
+  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: #ffffff;
-  color: #242938;
-  border: 1px solid #999999;
+  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 {
-  font-size: 0.75rem;
+  font-size: var(--font-size-50, 0.75rem);
   border-radius: 1.5rem;
   height: 1.5rem;
   padding-inline: 0.5rem;
 }
 .mc-tag--l {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
   border-radius: 2.5rem;
   height: 2.5rem;
   padding-inline: 1rem;
 }
 .mc-tag.is-disabled, .mc-tag:disabled {
   cursor: not-allowed;
-  background: #d9d9d9;
-  color: #737373;
-  border-color: #d9d9d9;
+  background: var(--color-background-disabled, #d9d9d9);
+  color: var(--color-text-disabled, #737373);
+  border-color: var(--color-background-disabled, #d9d9d9);
   box-shadow: none;
 }
 .mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
@@ -80,13 +77,13 @@
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold, 600);
 }
 .mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 1px #999999;
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
 }
 .mc-tag-interactive:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -95,19 +92,19 @@
   gap: 0.25rem;
   text-decoration: none;
   outline: none;
-  color: #ffffff;
+  color: var(--tag-color-text-inverse, #ffffff);
   border: none;
-  background: #117f03;
+  background: var(--tag-color-background-selected, #117f03);
   cursor: pointer;
-  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold, 600);
   padding-inline-end: 1rem;
   padding-inline-start: 0.5rem;
 }
 .mc-tag-contextualised:not(:disabled):hover {
-  background: #006902;
+  background: var(--tag-color-background-selected-hover, #006902);
 }
 .mc-tag-contextualised:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -118,8 +115,8 @@
 
 .mc-tag-removable {
   padding: 0 0 0 1rem;
-  background: #242938;
-  color: #ffffff;
+  background: var(--tag-color-background-inverse, #242938);
+  color: var(--tag-color-text-inverse, #ffffff);
   border: none;
 }
 .mc-tag-removable__remove {
@@ -132,18 +129,18 @@
   padding: 0.25rem;
   display: block;
   cursor: pointer;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
 }
 .mc-tag-removable__remove:hover {
-  background: #343b4c;
+  background: var(--tag-color-background-inverse-hover, #343b4c);
 }
 .mc-tag-removable__remove:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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 {
-  fill: #c9d0de;
+  fill: var(--tag-color-delete-icon, #c9d0de);
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -183,19 +180,19 @@
   white-space: nowrap;
   cursor: pointer;
   padding-inline-start: 0.5rem;
-  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold, 600);
 }
 .mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 1px #999999;
+  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
 }
 .mc-tag-selectable:has(:focus-visible) {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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:has(:checked) {
-  background: #117f03;
-  color: #ffffff;
+  background: var(--tag-color-background-selected, #117f03);
+  color: var(--tag-color-text-inverse, #ffffff);
   border: none;
 }
 .mc-tag-selectable:has(:checked)::before {
@@ -203,22 +200,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='%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='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:has(:checked):not(:has(:disabled)):hover {
-  background: #006902;
-  border-color: #006902;
+  background: var(--tag-color-background-selected-hover, #006902);
+  border-color: var(--tag-color-background-selected-hover, #006902);
   box-shadow: none;
 }
 .mc-tag-selectable:has(:disabled) {
   cursor: not-allowed;
-  background: #d9d9d9;
-  color: #737373;
-  border-color: #d9d9d9;
+  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: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='%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='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 .mc-tag__input {
   clip-path: inset(100%);

package/dist/components/tags/TagInteractive.js

@@ -1,7 +1,4 @@
-import{c as b,p as v,a as h,b as n,f as u,D as p,t as y,h as w,i as x,j as o,d as m,r as c,g as _}from"../../custom-element.js";import{b as E}from"../../attributes.js";var C=u('<button><span class="mc-tag__label svelte-nym64e"> </span></button>');const k={hash:"svelte-nym64e",code:`/**
+import{c as b,p as u,a as h,b as s,f as p,z as y,t as w,i as x,j as k,k as i,d as n,r as v,h as _}from"../../custom-element.js";import{b as E}from"../../attributes.js";var C=p('<button><span class="mc-tag__label svelte-re604y"> </span></button>');const z={hash:"svelte-re604y",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * 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__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 z(i,e){v(e,!0),h(i,k);let l=n(e,"label",7),s=n(e,"disabled",7,!1),a=n(e,"size",7,"m"),f=p(e,["$$slots","$$events","$$legacy","$$host","label","disabled","size"]);var r=C();E(r,()=>({class:`mc-tag mc-tag-interactive ${a()!=="m"?`mc-tag--${a()}`:""}`,disabled:s(),...f}),void 0,void 0,"svelte-nym64e");var d=m(r),g=m(d,!0);return c(d),c(r),y(()=>_(g,l())),w(i,r),x({get label(){return l()},set label(t){l(t),o()},get disabled(){return s()},set disabled(t=!1){s(t),o()},get size(){return a()},set size(t="m"){a(t),o()}})}customElements.define("mc-tag-interactive",b(z,{label:{},disabled:{},size:{}},[],[],!0));
+ */.mc-tag.svelte-re604y {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-re604y {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-re604y {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-re604y, .mc-tag.svelte-re604y: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-re604y {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-re604y:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-re604y: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-re604y {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-re604y:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-re604y: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-re604y {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-re604y {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-re604y {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-re604y:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-re604y: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-re604y {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-re604y {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-re604y {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-re604y {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-re604y:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):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-re604y:has(:where(.svelte-re604y):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-re604y .mc-tag__label:where(.svelte-re604y) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-re604y {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-re604y {padding-inline-start:0.75rem;}`};function M(d,e){u(e,!0),h(d,z);let o=s(e,"label",7),l=s(e,"disabled",7,!1),t=s(e,"size",7,"m"),g=y(e,["$$slots","$$events","$$legacy","$$host","label","disabled","size"]);var m={get label(){return o()},set label(r){o(r),i()},get disabled(){return l()},set disabled(r=!1){l(r),i()},get size(){return t()},set size(r="m"){t(r),i()}},a=C();E(a,()=>({class:`mc-tag mc-tag-interactive ${t()!=="m"?`mc-tag--${t()}`:""}`,disabled:l(),...g}),void 0,void 0,"svelte-re604y");var c=n(a),f=n(c,!0);return v(c),v(a),w(()=>_(f,o())),x(d,a),k(m)}customElements.define("mc-tag-interactive",b(M,{label:{},disabled:{},size:{}},[],[],!0));
 //# sourceMappingURL=TagInteractive.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagInteractive.js","sources":["../../../src/components/tags/TagInteractive.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-interactive' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    label: string;\n    disabled?: boolean;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { label, disabled = false, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<button\n  class={`mc-tag mc-tag-interactive ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-interactive';\n</style>\n"],"names":["label","$.prop","$$props","disabled","size","attrs","$.rest_props"],"mappings":";;;;;mxJAAA,oBAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,mBAAW,EAAK,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAJ,EAAA,0FAIf,MAAA,6BAAAE,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,mBAErEC,mFAEyBL,EAAK,CAAA,CAAA,qGARV,GAAK,6CAAS,IAAG,YAC3C"}
+{"version":3,"file":"TagInteractive.js","sources":["../../../src/components/tags/TagInteractive.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-interactive' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    label: string;\n    disabled?: boolean;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { label, disabled = false, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<button\n  class={`mc-tag mc-tag-interactive ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-interactive';\n</style>\n"],"names":["label","$.prop","$$props","disabled","size","attrs","$.rest_props"],"mappings":";;oiMAAA,oBAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,mBAAW,EAAK,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAJ,EAAA,sKAA3B,GAAK,6CAAS,IAAG,4BAIL,MAAA,6BAAAE,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAErEC,mFAEyBL,EAAK,CAAA,CAAA,aAPpC"}

package/dist/components/tags/TagInteractive.svelte

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

package/dist/components/tags/TagRemovable.js

@@ -1,7 +1,4 @@
-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:`/**
+import{c as j,p as _,b as l,A as R,t as k,i as C,j as E,k as s,e as B,g as F,v as H,a as A,f as D,z as S,s as p,d as g,r as m,h as w}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as x,a as q,b as G}from"../../attributes.js";import{C as I}from"../../CrossCircleFilled24.js";import"../../legacy.js";var J=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 z(n,e){_(e,!1);let c=l(e,"id",12,void 0),i=l(e,"style",12,void 0),d=l(e,"className",12,void 0),o=l(e,"fill",12,void 0),v=l(e,"size",12,"1.25rem");var f={get id(){return c()},set id(a){c(a),s()},get style(){return i()},set style(a){i(a),s()},get className(){return d()},set className(a){d(a),s()},get fill(){return o()},set fill(a){o(a),s()},get size(){return v()},set size(a){v(a),s()}},r=J();return k(()=>{x(r,"id",c()),q(r,i()),B(r,0,F(d())),x(r,"fill",o())}),C(n,r),E(f)}customElements.define("cross-circle-filled-20",j(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function K(n,e){dispatchEvent(new CustomEvent("remove-tag",{detail:e()}))}var O=D('<span><span class="mc-tag__label svelte-14ecgj3"> </span> <button class="mc-tag-removable__remove svelte-14ecgj3" type="button"><span class="mc-tag-removable__icon svelte-14ecgj3"><!></span> <span class="mc-tag-removable__text svelte-14ecgj3"> </span></button></span>');const Q={hash:"svelte-14ecgj3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * 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));
+ */.mc-tag.svelte-14ecgj3 {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-14ecgj3 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-14ecgj3 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-14ecgj3, .mc-tag.svelte-14ecgj3: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-14ecgj3 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-14ecgj3:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-14ecgj3: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-14ecgj3 {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-14ecgj3:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-14ecgj3: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-14ecgj3 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-14ecgj3 {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-14ecgj3 {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-14ecgj3:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-14ecgj3: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-14ecgj3 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-14ecgj3 {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-14ecgj3 {padding:0 0 0 0.5rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:1.5rem;height:1.5rem;padding:0.125rem;}.mc-tag-removable.mc-tag--s.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:1.25rem;height:1.25rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__remove:where(.svelte-14ecgj3) {width:2.5rem;height:2.5rem;}.mc-tag-removable.mc-tag--l.svelte-14ecgj3 .mc-tag-removable__icon:where(.svelte-14ecgj3) {width:2rem;height:2rem;}.mc-tag-selectable.svelte-14ecgj3 {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-14ecgj3:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3:has(:where(.svelte-14ecgj3):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-14ecgj3 .mc-tag__label:where(.svelte-14ecgj3) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-14ecgj3 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-14ecgj3 {padding-inline-start:0.75rem;}`};function U(n,e){_(e,!0),A(n,Q);let c=l(e,"id",7),i=l(e,"label",7),d=l(e,"removableLabel",7,"Remove"),o=l(e,"size",7,"m"),v=S(e,["$$slots","$$events","$$legacy","$$host","id","label","removableLabel","size"]);var f={get id(){return c()},set id(t){c(t),s()},get label(){return i()},set label(t){i(t),s()},get removableLabel(){return d()},set removableLabel(t="Remove"){d(t),s()},get size(){return o()},set size(t="m"){o(t),s()}},r=O();G(r,()=>({class:`mc-tag mc-tag-removable  ${o()!=="m"?`mc-tag--${o()}`:""}`,id:c(),...v}),void 0,void 0,"svelte-14ecgj3");var a=g(r),y=g(a,!0);m(a);var b=p(a,2);b.__click=[K,c];var u=g(b),L=g(u);{var M=t=>{z(t,{"aria-hidden":"true"})},N=t=>{I(t,{"aria-hidden":"true"})};T(L,t=>{o()==="s"?t(M):t(N,!1)})}m(u);var h=p(u,2),P=g(h,!0);return m(h),m(b),m(r),k(()=>{w(y,i()),w(P,d())}),C(n,r),E(f)}H(["click"]);customElements.define("mc-tag-removable",j(U,{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;;;;;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]}
+{"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,gRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6GCeW,SAAAE,EAAYC,EAAAN,EAAG,CACtB,kBAAkB,YAAY,aAAY,CAAI,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;wjNAxBF,oBAeIA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,yBAAiB,QAAQ,EACzBN,eAAO,GAAG,EACPO,EAAAC,EAAAJ,EAAA,sOAFc,SAAQ,6CAClB,IAAG,4BAUuB,MAAA,4BAAAJ,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAEpEO,sFAG4DN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,eAhBxD","x_google_ignoreList":[0]}