@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/components/tags/TagRemovable.svelte

@@ -0,0 +1,247 @@
+<svelte:options customElement={{ tag: 'mc-tag-removable' }} />
+
+<script lang="ts">
+  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
+  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';
+
+  interface Props {
+    id: string;
+    label: string;
+    removableLabel?: string;
+    size?: 's' | 'm' | 'l';
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    label,
+    removableLabel = 'Remove',
+    size = 'm',
+    ...attrs
+  }: Props = $props();
+
+  function handleRemove() {
+    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));
+  }
+</script>
+
+<span
+  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}
+  {id}
+  {...attrs}
+>
+  <span class="mc-tag__label">{label}</span>
+  <button class="mc-tag-removable__remove" type="button" onclick={handleRemove}>
+    <span class="mc-tag-removable__icon">
+      {#if size === 's'}
+        <CrossCircleFilled20 aria-hidden="true" />
+      {:else}
+        <CrossCircleFilled24 aria-hidden="true" />
+      {/if}
+    </span>
+    <span class="mc-tag-removable__text">{removableLabel}</span>
+  </button>
+</span>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-tag {
+  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 {
+  font-size: var(--font-size-50, 0.75rem);
+  border-radius: 1.5rem;
+  height: 1.5rem;
+  padding-inline: 0.5rem;
+}
+.mc-tag--l {
+  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: 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 {
+  color: currentColor;
+}
+
+.mc-tag-interactive {
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-tag-interactive:not(:disabled):hover {
+  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, 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 {
+  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:not(:disabled):hover {
+  background: var(--tag-color-background-selected-hover, #006902);
+}
+.mc-tag-contextualised:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-tag-contextualised.mc-tag--s {
+  padding-inline-end: 0.5rem;
+  padding-inline-start: 0.25rem;
+}
+
+.mc-tag-removable {
+  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 {
+  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:hover {
+  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, 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: var(--tag-color-delete-icon, #c9d0de);
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-tag-removable__text {
+  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 {
+  padding: 0 0 0 0.5rem;
+}
+.mc-tag-removable.mc-tag--s .mc-tag-removable__remove {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.125rem;
+}
+.mc-tag-removable.mc-tag--s .mc-tag-removable__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-tag-removable.mc-tag--l .mc-tag-removable__remove {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mc-tag-removable.mc-tag--l .mc-tag-removable__icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.mc-tag-selectable {
+  gap: 0.25rem;
+  white-space: nowrap;
+  cursor: pointer;
+  padding-inline-start: 0.5rem;
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-tag-selectable:hover {
+  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, 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: var(--tag-color-background-selected, #117f03);
+  color: var(--tag-color-text-inverse, #ffffff);
+  border: none;
+}
+.mc-tag-selectable:has(: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:has(: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:has(: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:has(:disabled)::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+.mc-tag-selectable .mc-tag__input {
+  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 .mc-tag__label {
+  user-select: none;
+}
+.mc-tag-selectable.mc-tag--s {
+  padding-inline-start: 0.25rem;
+  gap: 0.125rem;
+}
+.mc-tag-selectable.mc-tag--l {
+  padding-inline-start: 0.75rem;
+}</style>

package/dist/components/tags/TagRemovable.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    id: string;
+    label: string;
+    removableLabel?: string;
+    size?: 's' | 'm' | 'l';
+    [key: string]: any;
+}
+declare const TagRemovable: import("svelte").Component<Props, {}, "">;
+type TagRemovable = ReturnType<typeof TagRemovable>;
+export default TagRemovable;
+//# sourceMappingURL=TagRemovable.svelte.d.ts.map

package/dist/components/tags/TagRemovable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagRemovable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagRemovable.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAuCH,QAAA,MAAM,YAAY,2CAAsC,CAAC;AACzD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/tags/TagSelectable.js

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

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

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

package/dist/components/tags/TagSelectable.svelte

@@ -0,0 +1,247 @@
+<svelte:options customElement={{ tag: 'mc-tag-selectable' }} />
+
+<script lang="ts">
+  interface Props {
+    id: string;
+    name?: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm' | 'l';
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    name,
+    label,
+    checked = $bindable(false),
+    disabled = false,
+    size = 'm',
+    ...attrs
+  }: Props = $props();
+
+  function handleChange(e: Event) {
+    checked = (e.target as HTMLInputElement).checked;
+  }
+</script>
+
+<label
+  class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`}
+  {id}
+  {...attrs}
+>
+  <input
+    type="checkbox"
+    class="mc-tag__input"
+    {id}
+    {name}
+    {checked}
+    {disabled}
+    onchange={handleChange}
+  />
+  <span class="mc-tag__label">{label}</span>
+</label>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-tag {
+  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 {
+  font-size: var(--font-size-50, 0.75rem);
+  border-radius: 1.5rem;
+  height: 1.5rem;
+  padding-inline: 0.5rem;
+}
+.mc-tag--l {
+  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: 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 {
+  color: currentColor;
+}
+
+.mc-tag-interactive {
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-tag-interactive:not(:disabled):hover {
+  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, 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 {
+  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:not(:disabled):hover {
+  background: var(--tag-color-background-selected-hover, #006902);
+}
+.mc-tag-contextualised:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-tag-contextualised.mc-tag--s {
+  padding-inline-end: 0.5rem;
+  padding-inline-start: 0.25rem;
+}
+
+.mc-tag-removable {
+  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 {
+  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:hover {
+  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, 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: var(--tag-color-delete-icon, #c9d0de);
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-tag-removable__text {
+  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 {
+  padding: 0 0 0 0.5rem;
+}
+.mc-tag-removable.mc-tag--s .mc-tag-removable__remove {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.125rem;
+}
+.mc-tag-removable.mc-tag--s .mc-tag-removable__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-tag-removable.mc-tag--l .mc-tag-removable__remove {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mc-tag-removable.mc-tag--l .mc-tag-removable__icon {
+  width: 2rem;
+  height: 2rem;
+}
+
+.mc-tag-selectable {
+  gap: 0.25rem;
+  white-space: nowrap;
+  cursor: pointer;
+  padding-inline-start: 0.5rem;
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-tag-selectable:hover {
+  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, 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: var(--tag-color-background-selected, #117f03);
+  color: var(--tag-color-text-inverse, #ffffff);
+  border: none;
+}
+.mc-tag-selectable:has(: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:has(: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:has(: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:has(:disabled)::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--color-text-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+}
+.mc-tag-selectable .mc-tag__input {
+  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 .mc-tag__label {
+  user-select: none;
+}
+.mc-tag-selectable.mc-tag--s {
+  padding-inline-start: 0.25rem;
+  gap: 0.125rem;
+}
+.mc-tag-selectable.mc-tag--l {
+  padding-inline-start: 0.75rem;
+}</style>

package/dist/components/tags/TagSelectable.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    id: string;
+    name?: string;
+    label: string;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm' | 'l';
+    [key: string]: any;
+}
+declare const TagSelectable: import("svelte").Component<Props, {}, "checked">;
+type TagSelectable = ReturnType<typeof TagSelectable>;
+export default TagSelectable;
+//# sourceMappingURL=TagSelectable.svelte.d.ts.map

package/dist/components/tags/TagSelectable.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagSelectable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagSelectable.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8BH,QAAA,MAAM,aAAa,kDAAsC,CAAC;AAC1D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/textarea/Textarea.js

@@ -1,7 +1,7 @@
-import{c as x,a as b,b as g,d as a,f as w,w as y,h as p,i as _,j as o,y as k}from"../../custom-element.js";import{b as S,C}from"../../attributes.js";import{a as j}from"../../input.js";var z=w("<textarea></textarea>");const A={hash:"svelte-xani2i",code:`/**
+import{c as u,a as b,b as x,d as r,f as _,x as w,j as z,l as p,m as l,z as y}from"../../custom-element.js";import{b as k,C}from"../../attributes.js";import{a as E}from"../../input.js";var Z=_("<textarea></textarea>");const M={hash:"svelte-m9azs8",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */
+/* stylelint-disable string-no-newline */.mc-field__label.svelte-m9azs8, .mc-field__legend.svelte-m9azs8 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-m9azs8 {padding-inline:0;}.mc-field__requirement.svelte-m9azs8, .mc-field__help.svelte-m9azs8 {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-m9azs8 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-m9azs8 {margin-top:0.5rem;}.mc-field__validation-message.svelte-m9azs8 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-m9azs8::before, .mc-field__validation-message.is-invalid.svelte-m9azs8::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-m9azs8 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-m9azs8::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(--field-color-validation-valid, %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-m9azs8 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-m9azs8::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(--field-color-validation-invalid, %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-m9azs8 {color:var(--field-color-validation-loading, #666666);}.mc-field--group.svelte-m9azs8 {border-width:0;margin-inline:0;padding:0;}
 
-/* stylelint-enable string-no-newline */.mc-textarea.svelte-xani2i {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:1rem;line-height:1.5;min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-xani2i::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-xani2i:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-xani2i: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-xani2i: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-xani2i {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-xani2i {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-xani2i:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}`};function D(h,r){b(r,!0),g(h,A);let l=a(r,"name",7),i=a(r,"value",15),s=a(r,"placeholder",7),d=a(r,"rows",7,2),t=a(r,"isinvalid",7),c=a(r,"disabled",7,!1),m=a(r,"minlength",7),v=a(r,"maxlength",7),f=a(r,"readonly",7),u=y(r,["$$slots","$$events","$$legacy","$$host","name","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly"]);var n=z();return k(n),S(n,e=>({class:"mc-textarea","aria-invalid":t(),name:l(),id:l(),placeholder:s(),rows:d(),disabled:c(),minlength:m(),maxlength:v(),readonly:f(),spellcheck:"false",...u,[C]:e}),[()=>({"is-invalid":t()})],"svelte-xani2i"),j(n,i),p(h,n),_({get name(){return l()},set name(e){l(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return s()},set placeholder(e){s(e),o()},get rows(){return d()},set rows(e=2){d(e),o()},get isinvalid(){return t()},set isinvalid(e){t(e),o()},get disabled(){return c()},set disabled(e=!1){c(e),o()},get minlength(){return m()},set minlength(e){m(e),o()},get maxlength(){return v()},set maxlength(e){v(e),o()},get readonly(){return f()},set readonly(e){f(e),o()}})}customElements.define("m-textarea",x(D,{name:{},value:{},placeholder:{},rows:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{}},[],[],!0));
+/* stylelint-enable string-no-newline */.mc-textarea.svelte-m9azs8 {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-m9azs8::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-m9azs8: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-m9azs8: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-m9azs8: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-m9azs8 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-m9azs8 {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-m9azs8: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 S(g,a){b(a,!0),x(g,M);let o=r(a,"name",7),s=r(a,"value",15),d=r(a,"placeholder",7),n=r(a,"rows",7,2),i=r(a,"isinvalid",7),m=r(a,"disabled",7,!1),v=r(a,"minlength",7),c=r(a,"maxlength",7),f=r(a,"readonly",7),h=w(a,["$$slots","$$events","$$legacy","$$host","name","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly"]);var t=Z();return y(t),k(t,e=>({class:"mc-textarea","aria-invalid":i(),name:o(),id:o(),placeholder:d(),rows:n(),disabled:m(),minlength:v(),maxlength:c(),readonly:f(),spellcheck:"false",...h,[C]:e}),[()=>({"is-invalid":i()})],void 0,"svelte-m9azs8"),E(t,s),z(g,t),p({get name(){return o()},set name(e){o(e),l()},get value(){return s()},set value(e){s(e),l()},get placeholder(){return d()},set placeholder(e){d(e),l()},get rows(){return n()},set rows(e=2){n(e),l()},get isinvalid(){return i()},set isinvalid(e){i(e),l()},get disabled(){return m()},set disabled(e=!1){m(e),l()},get minlength(){return v()},set minlength(e){v(e),l()},get maxlength(){return c()},set maxlength(e){c(e),l()},get readonly(){return f()},set readonly(e){f(e),l()}})}customElements.define("m-textarea",u(S,{name:{},value:{},placeholder:{},rows:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{}},[],[],!0));
 //# 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    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n    ...events\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  {...events}\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","isinvalid","disabled","minlength","maxlength","readonly","events","$.rest_props"],"mappings":";;;;;8mDAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAQT,EAAAC,EAAA,WAAA,CAAA,EACLS,EAAAC,EAAAV,EAAA,4MAQSI,EAAS,cAEnBN,EAAI,uGAQJW,8BAXcL,EAAS,CAAA,EAAA,6NAblB,EAAC,4GAEG,GAAK"}
+{"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    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n    ...events\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  {...events}\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","isinvalid","disabled","minlength","maxlength","readonly","events","$.rest_props"],"mappings":";;;;;suDAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAQT,EAAAC,EAAA,WAAA,CAAA,EACLS,EAAAC,EAAAV,EAAA,4MAQSI,EAAS,cAEnBN,EAAI,uGAQJW,8BAXcL,EAAS,CAAA,EAAA,oOAblB,EAAC,4GAEG,GAAK,+KAMpB"}