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

package/dist/components/tags/TagRemovable.svelte

@@ -46,38 +46,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 {
@@ -88,13 +85,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;
 }
@@ -103,19 +100,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;
 }
@@ -126,8 +123,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 {
@@ -140,18 +137,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;
 }
@@ -191,19 +188,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 {
@@ -211,22 +208,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/TagSelectable.js

@@ -1,7 +1,4 @@
-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:`/**
+import{v as x,c as w,p as y,a as k,b as t,f as _,d as f,s as C,t as E,i as M,j as P,k as o,z as B,r as b,h as H}from"../../custom-element.js";import{b as S,r as j,s as u,c as D}from"../../attributes.js";function T(l,a){a(l.target.checked)}var q=_('<label><input type="checkbox" class="mc-tag__input svelte-1myzar6"/> <span class="mc-tag__label svelte-1myzar6"> </span></label>');const A={hash:"svelte-1myzar6",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__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));
+ */.mc-tag.svelte-1myzar6 {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-1myzar6 {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-1myzar6 {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-1myzar6, .mc-tag.svelte-1myzar6: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-1myzar6 {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-1myzar6:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-1myzar6: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-1myzar6 {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-1myzar6:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-1myzar6: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-1myzar6 {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-1myzar6 {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-1myzar6 {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-1myzar6:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-1myzar6: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-1myzar6 {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-1myzar6 {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-1myzar6 {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-1myzar6 {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-1myzar6:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):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-1myzar6:has(:where(.svelte-1myzar6):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-1myzar6:has(:where(.svelte-1myzar6):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-1myzar6:has(:where(.svelte-1myzar6):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-1myzar6:has(:where(.svelte-1myzar6):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-1myzar6:has(:where(.svelte-1myzar6):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-1myzar6 .mc-tag__input:where(.svelte-1myzar6) {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-1myzar6 .mc-tag__label:where(.svelte-1myzar6) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-1myzar6 {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-1myzar6 {padding-inline-start:0.75rem;}`};function F(l,a){y(a,!0),k(l,A);let s=t(a,"id",7),n=t(a,"name",7),m=t(a,"label",7),i=t(a,"checked",15,!1),g=t(a,"disabled",7,!1),d=t(a,"size",7,"m"),h=B(a,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","disabled","size"]);var p={get id(){return s()},set id(e){s(e),o()},get name(){return n()},set name(e){n(e),o()},get label(){return m()},set label(e){m(e),o()},get checked(){return i()},set checked(e=!1){i(e),o()},get disabled(){return g()},set disabled(e=!1){g(e),o()},get size(){return d()},set size(e="m"){d(e),o()}},c=q();S(c,()=>({class:`mc-tag mc-tag-selectable ${d()!=="m"?`mc-tag--${d()}`:""}`,id:s(),...h}),void 0,void 0,"svelte-1myzar6");var r=f(c);j(r),r.__change=[T,i];var v=C(r,2),z=f(v,!0);return b(v),b(c),E(()=>{u(r,"id",s()),u(r,"name",n()),D(r,i()),r.disabled=g(),H(z,m())}),M(l,c),P(p)}x(["change"]);customElements.define("mc-tag-selectable",w(F,{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;;;;;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"}
+{"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,EAAQC,EAAE,CAC9BA,EAAWD,EAAE,OAA4B,OAAO,CAClD;;2xMAzBF,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,gRAHiB,GAAK,qDACd,GAAK,6CACT,IAAG,4BAUuB,MAAA,4BAAAI,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAEpEC,gEASQV,EAAYE,CAAA,2GAEKK,GAAK,eAhBpC"}

package/dist/components/tags/TagSelectable.svelte

@@ -46,38 +46,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 {
@@ -88,13 +85,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;
 }
@@ -103,19 +100,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;
 }
@@ -126,8 +123,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 {
@@ -140,18 +137,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;
 }
@@ -191,19 +188,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 {
@@ -211,22 +208,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/Tags.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/Tags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAoBrD,IAAI;AAlBT,wBAkBU;AAYV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}
+{"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/Tags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA2BrD,IAAI;AAzBT,wBAyBU;AAYV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/components/tags/Tags.stories.js

@@ -1,6 +1,12 @@
 export default {
     title: 'Indicators/Tag/Informative',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/tags/TagsContextualised.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AAtBT,wBAsBU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}
+{"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAgCrD,IAAI;AA7BT,wBA6BU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}

package/dist/components/tags/TagsContextualised.stories.js

@@ -1,7 +1,13 @@
 import { expect, waitFor } from 'storybook/test';
 export default {
     title: 'Indicators/Tag/Contextualised',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/tags/TagsInteractive.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}
+{"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/components/tags/TagsInteractive.stories.js

@@ -2,7 +2,13 @@ import { userEvent, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
 export default {
     title: 'Indicators/Tag/Interactive',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/tags/TagsRemovable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}
+{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}

package/dist/components/tags/TagsRemovable.stories.js

@@ -2,7 +2,13 @@ import { userEvent, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
 export default {
     title: 'Indicators/Tag/Removable',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/tags/TagsSelectable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAsCrD,IAAI;AAlCT,wBAkCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}
+{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA6CrD,IAAI;AAzCT,wBAyCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}

package/dist/components/tags/TagsSelectable.stories.js

@@ -2,7 +2,13 @@ import { userEvent, expect } from 'storybook/test';
 import { action } from 'storybook/actions';
 export default {
     title: 'Indicators/Tag/Selectable',
-    tags: ['autodocs', 'beta'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
+            },
+        },
+    },
     argTypes: {
         label: {
             control: 'text',

package/dist/components/textarea/README.md

@@ -0,0 +1,19 @@
+# `m-textarea`
+
+A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the textarea, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the textarea element, used for form submission. | `string` |   |
+| `value` | The current value of the textarea field. | `string` `number` |   |
+| `placeholder` | Text displayed when the textarea is empty. | `string` |   |
+| `isinvalid` | If `true`, the textarea is marked as invalid. | `boolean` |   |
+| `disabled` | If `true`, the textarea is disabled and non-interactive. | `boolean` |   |
+| `rows` | The number of visible text lines in the textarea. | `number` | `2` |
+| `minlength` | Minimum number of characters required for the textarea. | `number` |   |
+| `maxlength` | Maximum number of characters allowed in the textarea. | `number` |   |
+| `readonly` | If `true`, the textarea is read-only (cannot be edited). | `boolean` |   |
+

package/dist/components/textarea/Textarea.js

@@ -1,10 +1,4 @@
-import{c as x,p as _,a as w,b as l,f as p,h as C,i as k,j as a,C as E}from"../../custom-element.js";import{b as Z,C as M}from"../../attributes.js";import{c as z}from"../../input.js";var S=p("<textarea></textarea>");const B={hash:"svelte-1y5h8gs",code:`/**
+import{c as g,p as w,a as y,b as o,f as p,t as z,i as j,j as q,k as t,y as _,e as k,g as E}from"../../custom-element.js";import{s as l}from"../../attributes.js";import{c as D}from"../../input.js";import{c as F}from"../../custom-element-forward-events.js";var O=p("<textarea></textarea>");const S={hash:"svelte-1qbzujl",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */.mc-field__label.svelte-1y5h8gs, .mc-field__legend.svelte-1y5h8gs {font-size:0.875rem;line-height:1.3;font-weight:400;color:#000000;}.mc-field__legend.svelte-1y5h8gs {padding-inline:0;}.mc-field__requirement.svelte-1y5h8gs, .mc-field__help.svelte-1y5h8gs {font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:#666666;}.mc-field__help.svelte-1y5h8gs {display:block;margin-top:0.125rem;}.mc-field__content.svelte-1y5h8gs {margin-top:0.5rem;}.mc-field__validation-message.svelte-1y5h8gs {font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-1y5h8gs::before, .mc-field__validation-message.is-invalid.svelte-1y5h8gs::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-1y5h8gs {color:#117f03;}.mc-field__validation-message.is-valid.svelte-1y5h8gs::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='%23117f03' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-1y5h8gs {color:#c61112;}.mc-field__validation-message.is-invalid.svelte-1y5h8gs::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='%23c61112' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-loading.svelte-1y5h8gs {color:#666666;}.mc-field--group.svelte-1y5h8gs {border-width:0;margin-inline:0;padding:0;}
-
-/* stylelint-enable string-no-newline */.mc-textarea.svelte-1y5h8gs {font-family:inherit;transition:box-shadow 200ms ease;background-color:#ffffff;border:1px solid #666666;border-radius:0.25rem;transition:all ease 200ms;color:#000000;display:block;width:100%;font-size:1rem;line-height:1.5;min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-1y5h8gs::placeholder {color:#666666;}.mc-textarea.svelte-1y5h8gs:hover {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-textarea.svelte-1y5h8gs:focus {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-textarea.svelte-1y5h8gs:disabled {background-color:#d9d9d9;cursor:not-allowed;border-color:transparent;box-shadow:none;color:#737373;}.mc-textarea[readonly].svelte-1y5h8gs {border-color:#cccccc;pointer-events:none;}.mc-textarea.is-invalid.svelte-1y5h8gs {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-textarea.is-invalid.svelte-1y5h8gs:hover {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}`};function D(y,t){_(t,!0),w(y,B);let i=l(t,"name",7),r=l(t,"value",15),o=l(t,"placeholder",7),d=l(t,"rows",7,2),g=l(t,"isvalid",7),n=l(t,"isinvalid",7),m=l(t,"disabled",7,!1),c=l(t,"minlength",7),h=l(t,"maxlength",7),v=l(t,"readonly",7),f=l(t,"oninput",7),u=l(t,"onchange",7),b=l(t,"onblur",7);var s=S();return E(s),Z(s,e=>({class:"mc-textarea","aria-invalid":n(),name:i(),id:i(),placeholder:o(),rows:d(),disabled:m(),minlength:c(),maxlength:h(),...v()?{readonly:!0}:{},spellcheck:"false",oninput:f(),onchange:u(),onblur:b(),[M]:e}),[()=>({"is-invalid":n(),"is-valid":g()})],void 0,"svelte-1y5h8gs"),z(s,r),C(y,s),k({get name(){return i()},set name(e){i(e),a()},get value(){return r()},set value(e){r(e),a()},get placeholder(){return o()},set placeholder(e){o(e),a()},get rows(){return d()},set rows(e=2){d(e),a()},get isvalid(){return g()},set isvalid(e){g(e),a()},get isinvalid(){return n()},set isinvalid(e){n(e),a()},get disabled(){return m()},set disabled(e=!1){m(e),a()},get minlength(){return c()},set minlength(e){c(e),a()},get maxlength(){return h()},set maxlength(e){h(e),a()},get readonly(){return v()},set readonly(e){v(e),a()},get oninput(){return f()},set oninput(e){f(e),a()},get onchange(){return u()},set onchange(e){u(e),a()},get onblur(){return b()},set onblur(e){b(e),a()}})}customElements.define("m-textarea",x(D,{name:{},value:{},placeholder:{},rows:{},isvalid:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{},oninput:{},onchange:{},onblur:{}},[],[],!0));
+ */.mc-textarea.svelte-1qbzujl {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-m, 1.5);min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-1qbzujl::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-1qbzujl:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-1qbzujl:focus {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-textarea.svelte-1qbzujl:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-textarea[readonly].svelte-1qbzujl {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-1qbzujl {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-1qbzujl:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}`};function T(h,a){w(a,!0),y(h,S);let s=o(a,"id",7),n=o(a,"name",7),i=o(a,"value",7),c=o(a,"placeholder",7),d=o(a,"isinvalid",7),m=o(a,"disabled",7),v=o(a,"rows",7,2),u=o(a,"minlength",7),b=o(a,"maxlength",7),f=o(a,"readonly",7);var x={get id(){return s()},set id(e){s(e),t()},get name(){return n()},set name(e){n(e),t()},get value(){return i()},set value(e){i(e),t()},get placeholder(){return c()},set placeholder(e){c(e),t()},get isinvalid(){return d()},set isinvalid(e){d(e),t()},get disabled(){return m()},set disabled(e){m(e),t()},get rows(){return v()},set rows(e=2){v(e),t()},get minlength(){return u()},set minlength(e){u(e),t()},get maxlength(){return b()},set maxlength(e){b(e),t()},get readonly(){return f()},set readonly(e){f(e),t()}},r=O();return _(r),z(()=>{k(r,1,E(["mc-textarea",d()&&"is-invalid"]),"svelte-1qbzujl"),l(r,"aria-invalid",d()),l(r,"name",n()),l(r,"id",s()),l(r,"placeholder",c()),l(r,"rows",v()),r.disabled=m(),l(r,"minlength",u()),l(r,"maxlength",b()),r.readOnly=f()}),D(r,i),j(h,r),q(x)}customElements.define("m-textarea",g(T,{id:{},name:{},value:{},placeholder:{},isinvalid:{},disabled:{},rows:{},minlength:{},maxlength:{},readonly:{}},[],[],!0,F));
 //# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n    oninput?: (event: Event) => void;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isvalid,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n    oninput,\n    onchange,\n    onblur,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  class:is-valid={isvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {...readonly ? { readonly: true } : {}}\n  spellcheck=\"false\"\n  {oninput}\n  {onchange}\n  {onblur}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isvalid","isinvalid","disabled","minlength","maxlength","readonly","oninput","onchange","onblur"],"mappings":";;;;;;;;4kCAAA,oBAoBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAAOL,EAAAC,EAAA,UAAA,CAAA,EACPK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,mBAAW,EAAK,EAChBC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,EAAOX,EAAAC,EAAA,UAAA,CAAA,EACPW,EAAQZ,EAAAC,EAAA,WAAA,CAAA,EACRY,EAAMb,EAAAC,EAAA,SAAA,CAAA,oEASMK,EAAS,cAEnBP,EAAI,uEAMJW,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,iEAVb,CAAA,KAAA,CAAA,aAAAJ,EAAS,aACXD,EAAO,CAAA,EAAA,qOAjBd,EAAC,+JAGG,GAAK,wUAQpB"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options\n  customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minlength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class={['mc-textarea', isinvalid && 'is-invalid']}\n  aria-invalid={isinvalid}\n  {name}\n  {id}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;ysDAAA,oBAqDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,gKA/D8CM"}