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

package/dist/components/datepicker/Datepicker.svelte

@@ -0,0 +1,312 @@
+<svelte:options customElement={{ tag: 'm-datepicker' }} />
+
+<script lang="ts">
+  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
+
+  interface Props {
+    id: string;
+    name?: string;
+    value?: string | number;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm';
+    readonly?: boolean;
+    isclearable?: boolean;
+    clearlabel?: string;
+    [events: string]: string;
+  }
+
+  let {
+    id,
+    name = '',
+    value = '',
+    isinvalid = false,
+    disabled = false,
+    size = 'm',
+    readonly = false,
+    isclearable = false,
+    clearlabel = 'clear content',
+    ...events
+  }: Props = $props();
+
+  function onInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    value = target.value;
+  }
+
+  function clearValue() {
+    value = '';
+  }
+</script>
+
+<div
+  class="mc-datepicker mc-text-input"
+  class:is-invalid={isinvalid}
+  class:mc-text-input--s={size === 's'}
+  class:mc-datepicker--s={size === 's'}
+>
+  <input
+    class="mc-datepicker__control mc-text-input__control"
+    type="date"
+    bind:value
+    {id}
+    {name}
+    {disabled}
+    {readonly}
+    aria-invalid={isinvalid}
+    oninput={onInput}
+    {...events}
+  />
+
+  {#if isclearable && value}
+    <div class="mc-datepicker__controls-options mc-controls-options">
+      <button
+        type="button"
+        class="mc-controls-options__button"
+        onclick={clearValue}
+      >
+        <CrossCircleFilled24
+          class="mc-controls-options__icon"
+          aria-hidden="true"
+        />
+        <span class="mc-controls-options__label">{clearlabel}</span>
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-text-input {
+  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%;
+  height: 3rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-text-input__control {
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  outline: none;
+  padding: 0.75rem 0.6875rem;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+  flex-grow: 1;
+}
+.mc-text-input__control[type=number] {
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
+.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+}
+.mc-text-input__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-text-input__icon {
+  fill: var(--forms-color-icon-default, #666666);
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+}
+.mc-text-input:focus-within {
+  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-text-input:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-text-input:has(input: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);
+  pointer-events: none;
+}
+.mc-text-input:has(input[readonly]) {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-text-input:has(.mc-text-input__icon) {
+  padding-inline-start: 0.6875rem;
+}
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+  padding-inline-start: 0;
+}
+.mc-text-input:has(.mc-controls-options) {
+  padding-inline-end: 0.6875rem;
+}
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+  padding-inline-end: 0;
+}
+.mc-text-input--s {
+  height: 2rem;
+}
+.mc-text-input--s .mc-text-input__control {
+  padding: 0.375rem 0.6875rem;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+}
+.mc-text-input--s:has(.mc-text-input__icon) {
+  padding-inline-start: 0.4375rem;
+}
+.mc-text-input--s:has(.mc-controls-options) {
+  padding-inline-end: 0.4375rem;
+}
+.mc-text-input.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+}
+.mc-text-input.is-invalid:hover:not(:focus-within) {
+  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);
+}
+.mc-text-input * {
+  box-sizing: border-box;
+}
+
+/* stylelint-enable string-no-newline */
+.mc-datepicker {
+  border-radius: var(--radius-s, 0.25rem);
+  position: relative;
+}
+.mc-datepicker__control {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  font-family: var(--font-family, LeroyMerlin), sans-serif;
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  display: block;
+  padding: 0 0.75rem;
+}
+.mc-datepicker__control::-webkit-calendar-picker-indicator {
+  padding-right: 1rem;
+  opacity: 0;
+  transform: scale(2);
+}
+.mc-datepicker__control::-moz-calendar-picker-indicator {
+  padding-right: 1rem;
+  opacity: 0;
+  transform: scale(2);
+}
+.mc-datepicker__control.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+}
+.mc-datepicker__control.is-invalid:hover:not(:focus-within) {
+  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);
+}
+.mc-datepicker__control:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  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-datepicker__control:disabled:hover:not(:focus-within) {
+  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-datepicker:has(.mc-controls-options) {
+  padding-inline-end: 0;
+}
+.mc-datepicker:has(input: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);
+  pointer-events: all;
+  cursor: not-allowed;
+}
+.mc-datepicker:has(input:disabled):hover {
+  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-datepicker--s .mc-datepicker__control {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+}
+.mc-datepicker--s .mc-datepicker__control:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+}
+.mc-datepicker__controls-options {
+  position: absolute;
+  right: 2.75rem;
+  top: 0.75rem;
+}
+
+.mc-controls-options {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-controls-options__button {
+  background-color: transparent;
+  border-width: 0;
+  color: initial;
+  font-family: inherit;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--radius-full, 100%);
+}
+.mc-controls-options__button:hover .mc-controls-options__icon {
+  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
+}
+.mc-controls-options__button: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-controls-options__icon {
+  fill: var(--forms-color-icon-clear, #666666);
+}
+.mc-controls-options__button, .mc-controls-options__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-controls-options__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-controls-options__unit {
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--forms-color-text-default, #000000);
+}</style>

package/dist/components/datepicker/Datepicker.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    id: string;
+    name?: string;
+    value?: string | number;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    size?: 's' | 'm';
+    readonly?: boolean;
+    isclearable?: boolean;
+    clearlabel?: string;
+    [events: string]: string;
+}
+declare const Datepicker: import("svelte").Component<Props, {}, "">;
+type Datepicker = ReturnType<typeof Datepicker>;
+export default Datepicker;
+//# sourceMappingURL=Datepicker.svelte.d.ts.map

package/dist/components/datepicker/Datepicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AA+CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/drawer/Drawer.js

@@ -1,4 +1,4 @@
-import{c as q,a as F,d as r,A as Z,t as E,j as h,l as G,m as a,i as I,B as $,b as ee,f as _,s as v,g as d,k as M,a0 as N,r as c}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as te,s as S}from"../../slot.js";import{s as w,c as oe}from"../../attributes.js";import"../../legacy.js";import{C as re}from"../../Cross24.js";import{O as ae}from"../overlay/Overlay.js";var ne=Z('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function J(k,t){F(t,!1);let g=r(t,"id",12,void 0),l=r(t,"style",12,void 0),s=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),m=r(t,"size",12,"1.5rem");var i=ne();return E(()=>{w(i,"id",g()),oe(i,l()),I(i,0,$(s())),w(i,"fill",b())}),h(k,i),G({get id(){return g()},set id(o){g(o),a()},get style(){return l()},set style(o){l(o),a()},get className(){return s()},set className(o){s(o),a()},get fill(){return b()},set fill(o){b(o),a()},get size(){return m()},set size(o){m(o),a()}})}customElements.define("arrow-back-24",q(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var le=_('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Back"><!></button>'),de=_('<h2 class="mc-drawer__content__title svelte-1lmi8ae"> </h2>'),ce=_('<div class="mc-drawer__footer svelte-1lmi8ae"><!></div>'),ie=_('<section aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1lmi8ae" role="document"><div class="mc-drawer__header svelte-1lmi8ae"><!> <h2 class="mc-drawer__title svelte-1lmi8ae" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1lmi8ae"><div class="mc-drawer__content svelte-1lmi8ae" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const se={hash:"svelte-1lmi8ae",code:`/**
+import{c as q,p as F,b as r,A as Z,t as E,h,i as G,j as a,e as I,B as $,a as ee,f as _,s as v,d,g as M,o as N,r as c}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as te,s as S}from"../../slot.js";import{s as w,c as oe}from"../../attributes.js";import"../../legacy.js";import{C as re}from"../../Cross24.js";import{O as ae}from"../overlay/Overlay.js";var ne=Z('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function J(k,t){F(t,!1);let g=r(t,"id",12,void 0),l=r(t,"style",12,void 0),s=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),m=r(t,"size",12,"1.5rem");var i=ne();return E(()=>{w(i,"id",g()),oe(i,l()),I(i,0,$(s())),w(i,"fill",b())}),h(k,i),G({get id(){return g()},set id(o){g(o),a()},get style(){return l()},set style(o){l(o),a()},get className(){return s()},set className(o){s(o),a()},get fill(){return b()},set fill(o){b(o),a()},get size(){return m()},set size(o){m(o),a()}})}customElements.define("arrow-back-24",q(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var le=_('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Back"><!></button>'),de=_('<h2 class="mc-drawer__content__title svelte-1lmi8ae"> </h2>'),ce=_('<div class="mc-drawer__footer svelte-1lmi8ae"><!></div>'),ie=_('<section aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1lmi8ae" role="document"><div class="mc-drawer__header svelte-1lmi8ae"><!> <h2 class="mc-drawer__title svelte-1lmi8ae" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1lmi8ae" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1lmi8ae"><div class="mc-drawer__content svelte-1lmi8ae" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const se={hash:"svelte-1lmi8ae",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-drawer.svelte-1lmi8ae {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
 @media (width >= 680px) {.mc-drawer.svelte-1lmi8ae {padding:1rem;}

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          on:click={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","$$value"],"mappings":"gsBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;;;;+5WCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAA,CAAE,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAA,CAAE,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,qHAmBkBE,CAAM,kBAJfR,EAAI,GAAAS,EAAAC,CAAA,qKAsBkCR,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAhB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAgB,EAAAC,CAAA,mBAI3BlB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,wBACUE,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVS,EAAA,UAAAC,EAAA,GAAM,EAAE,MAAQ,UAAYV,GAAO,8CA5BvC,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAW,EAAA,IAAA,GAAE,oCACN,IAAA,OAAAA,EAAA,IAAA,GAAE,YAWrB","x_google_ignoreList":[0]}
+{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          on:click={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","$$value"],"mappings":"qrBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;;;;+5WCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAA,CAAE,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAA,CAAE,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,qHAmBkBE,CAAM,kBAJfR,EAAI,GAAAS,EAAAC,CAAA,qKAsBkCR,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAhB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAgB,EAAAC,CAAA,mBAI3BlB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,wBACUE,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVS,EAAA,UAAAC,EAAA,GAAM,EAAE,MAAQ,UAAYV,GAAO,8CA5BvC,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAW,EAAA,IAAA,GAAE,oCACN,IAAA,OAAAA,EAAA,IAAA,GAAE,YAWrB","x_google_ignoreList":[0]}

package/dist/components/drawer/Drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAsDtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAWF,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}

package/dist/components/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAkEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;;;;UAAmF,CAAC;AAC9E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAkEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/field/Field.js

@@ -1,7 +1,7 @@
-import{c as G,a as H,b as I,d as l,f as p,s as c,g as n,t as _,j as h,l as J,m as t,r,k as u,i as K}from"../../custom-element.js";import{i as Z}from"../../if.js";import{s as N}from"../../slot.js";import{s as z}from"../../attributes.js";var O=p('<span class="mc-field__requirement svelte-af7nn5" aria-hidden="true"> </span>'),P=p('<span class="mc-field__help svelte-af7nn5"> </span>'),Q=p("<span> </span>"),R=p('<div class="mc-field"><label class="mc-field__label svelte-af7nn5"> <!></label> <!> <div class="mc-field__content svelte-af7nn5"><!></div> <!></div>');const T={hash:"svelte-af7nn5",code:`/**
+import{c as G,p as H,a as I,b as t,f as p,s as c,d as n,t as _,h,i as J,j as l,r,g as u,e as K}from"../../custom-element.js";import{i as Z}from"../../if.js";import{s as N}from"../../slot.js";import{s as z}from"../../attributes.js";var O=p('<span class="mc-field__requirement svelte-af7nn5" aria-hidden="true"> </span>'),P=p('<span class="mc-field__help svelte-af7nn5"> </span>'),Q=p("<span> </span>"),R=p('<div class="mc-field"><label class="mc-field__label svelte-af7nn5"> <!></label> <!> <div class="mc-field__content svelte-af7nn5"><!></div> <!></div>');const T={hash:"svelte-af7nn5",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-af7nn5 {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__requirement.svelte-af7nn5, .mc-field__help.svelte-af7nn5 {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-af7nn5 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-af7nn5 {margin-top:0.5rem;}.mc-field__validation-message.svelte-af7nn5 {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-af7nn5::before, .mc-field__validation-message.is-invalid.svelte-af7nn5::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-af7nn5 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-af7nn5::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-af7nn5 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-af7nn5::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");}
 
-/* stylelint-enable string-no-newline */`};function U(C,a){H(a,!0),I(C,T);let b=l(a,"id",7),x=l(a,"label",7),d=l(a,"requirementtext",7),v=l(a,"helpid",7),m=l(a,"helptext",7),w=l(a,"messageid",7),q=l(a,"message",7),f=l(a,"isinvalid",7,!1),o=l(a,"isvalid",7,!1);var y=R(),g=n(y),k=n(g),B=c(k);{var j=e=>{var i=O(),s=n(i,!0);r(i),_(()=>u(s,d())),h(e,i)};Z(B,e=>{d()&&e(j)})}r(g);var M=c(g,2);{var D=e=>{var i=P(),s=n(i,!0);r(i),_(()=>{z(i,"id",v()),u(s,m())}),h(e,i)};Z(M,e=>{v()&&m()&&e(D)})}var E=c(M,2),F=n(E);N(F,a,"default",{}),r(E);var L=c(E,2);{var S=e=>{var i=Q();let s;var V=n(i,!0);r(i),_(A=>{z(i,"id",w()),s=K(i,1,"mc-field__validation-message svelte-af7nn5",null,s,A),u(V,q())},[()=>({"is-valid":o(),"is-invalid":f()})]),h(e,i)};Z(L,e=>{(f()||o())&&e(S)})}return r(y),_(()=>{z(g,"for",b()),u(k,`${x()??""} `)}),h(C,y),J({get id(){return b()},set id(e){b(e),t()},get label(){return x()},set label(e){x(e),t()},get requirementtext(){return d()},set requirementtext(e){d(e),t()},get helpid(){return v()},set helpid(e){v(e),t()},get helptext(){return m()},set helptext(e){m(e),t()},get messageid(){return w()},set messageid(e){w(e),t()},get message(){return q()},set message(e){q(e),t()},get isinvalid(){return f()},set isinvalid(e=!1){f(e),t()},get isvalid(){return o()},set isvalid(e=!1){o(e),t()}})}customElements.define("m-field",G(U,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!0));
+/* stylelint-enable string-no-newline */`};function U(C,a){H(a,!0),I(C,T);let b=t(a,"id",7),x=t(a,"label",7),d=t(a,"requirementtext",7),v=t(a,"helpid",7),m=t(a,"helptext",7),w=t(a,"messageid",7),q=t(a,"message",7),f=t(a,"isinvalid",7,!1),o=t(a,"isvalid",7,!1);var y=R(),g=n(y),M=n(g),B=c(M);{var j=e=>{var i=O(),s=n(i,!0);r(i),_(()=>u(s,d())),h(e,i)};Z(B,e=>{d()&&e(j)})}r(g);var k=c(g,2);{var D=e=>{var i=P(),s=n(i,!0);r(i),_(()=>{z(i,"id",v()),u(s,m())}),h(e,i)};Z(k,e=>{v()&&m()&&e(D)})}var E=c(k,2),F=n(E);N(F,a,"default",{}),r(E);var L=c(E,2);{var S=e=>{var i=Q();let s;var V=n(i,!0);r(i),_(A=>{z(i,"id",w()),s=K(i,1,"mc-field__validation-message svelte-af7nn5",null,s,A),u(V,q())},[()=>({"is-valid":o(),"is-invalid":f()})]),h(e,i)};Z(L,e=>{(f()||o())&&e(S)})}return r(y),_(()=>{z(g,"for",b()),u(M,`${x()??""} `)}),h(C,y),J({get id(){return b()},set id(e){b(e),l()},get label(){return x()},set label(e){x(e),l()},get requirementtext(){return d()},set requirementtext(e){d(e),l()},get helpid(){return v()},set helpid(e){v(e),l()},get helptext(){return m()},set helptext(e){m(e),l()},get messageid(){return w()},set messageid(e){w(e),l()},get message(){return q()},set message(e){q(e),l()},get isinvalid(){return f()},set isinvalid(e=!1){f(e),l()},get isvalid(){return o()},set isvalid(e=!1){o(e),l()}})}customElements.define("m-field",G(U,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!0));
 //# sourceMappingURL=Field.js.map

package/dist/{stories → components}/field/Field.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * > Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback.
  *
@@ -7,10 +7,10 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta<unknown>;
 export default _default;
-export declare const Default: StoryFn;
-export declare const Requierement: StoryFn;
-export declare const Helper: StoryFn;
-export declare const FullExample: StoryFn;
-export declare const Valid: StoryFn;
-export declare const Invalid: StoryFn;
+export declare const Default: any;
+export declare const Requierement: any;
+export declare const Helper: any;
+export declare const FullExample: any;
+export declare const Valid: any;
+export declare const Invalid: any;
 //# sourceMappingURL=Field.stories.d.ts.map

package/dist/components/field/Field.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBAoDE,IAAI,CAAC,OAAO,CAAC;AAlDlB,wBAkDmB;AAqBnB,eAAO,MAAM,OAAO,KAA2B,CAAC;AAuChD,eAAO,MAAM,YAAY,KAAoB,CAAC;AAQ9C,eAAO,MAAM,MAAM,KAAoB,CAAC;AAQxC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAU7C,eAAO,MAAM,KAAK,KAAoB,CAAC;AASvC,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAmF,CAAC;AAC7E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/flag/Flag.js

@@ -0,0 +1,4 @@
+import{c as d,p as g,a as i,b as m,f as v,z as p,d as l,h as u,i as b,j as h,r as n}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as k}from"../../attributes.js";var _=v('<div><span class="mc-flag__label"><!></span></div>');const q={hash:"svelte-qmwb81",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-flag.svelte-qmwb81 {padding:0 0.5rem;border-radius:var(--radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-qmwb81 {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-qmwb81 {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-qmwb81 {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function x(t,a){g(a,!0),i(t,q);let e=m(a,"appearance",7,"standard"),s=p(a,["$$slots","$$events","$$legacy","$$host","appearance"]);var r=_();k(r,()=>({class:`mc-flag ${e()!=="standard"?`mc-flag--${e()}`:""}`,...s}),void 0,void 0,"svelte-qmwb81");var o=l(r),f=l(o);return w(f,a,"default",{}),n(o),n(r),u(t,r),b({get appearance(){return e()},set appearance(c="standard"){e(c),h()}})}customElements.define("m-flag",d(x,{appearance:{}},["default"],[],!0));
+//# sourceMappingURL=Flag.js.map

package/dist/components/flag/Flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    /**\n     * Style du Flag\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    [key: string]: any;\n  }\n\n  let { appearance = 'standard', ...events }: Props = $props();\n</script>\n\n<div\n  class={`mc-flag ${appearance !== 'standard' ? `mc-flag--${appearance}` : ''}`}\n  {...events}\n>\n  <span class=\"mc-flag__label\">\n    <slot />\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","events","$.rest_props","$$props"],"mappings":";;i0BAAA,gBAYQ,IAAAA,qBAAa,UAAU,EAAKC,EAAMC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,YAAA,CAAA,sBAItB,MAAA,WAAAH,EAAU,IAAK,WAAyB,YAAAA,MAAe,EAAE,MACvEC,kJALe,WAAU,YAC/B"}

package/dist/components/flag/Flag.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content.
+ *
+ * The `MFlag` component is the **Svelte / WebComponent** implementation of the **Flag** component of Mozaic Design System.
+ * Full specification available in the Mozaic documentation.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Standard: any;
+export declare const Accent: any;
+export declare const Danger: any;
+export declare const Inverse: any;
+/**
+ * Story d’interaction simple (démonstration) :
+ * un clic sur l’hôte n’affecte pas le visuel mais valide que le composant est focusable/clicable si nécessaire.
+ */
+export declare const ClickableHost: any;
+//# sourceMappingURL=Flag.stories.d.ts.map

package/dist/components/flag/Flag.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAyBE,IAAI;AAvBT,wBAuBU;AAiBV,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAmB1C,eAAO,MAAM,MAAM,KAAoB,CAAC;AAexC,eAAO,MAAM,MAAM,KAAoB,CAAC;AAexC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAoBzC;;;GAGG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAC"}

package/dist/components/flag/Flag.stories.js

@@ -0,0 +1,113 @@
+import { userEvent, expect } from 'storybook/test';
+/**
+ * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content.
+ *
+ * The `MFlag` component is the **Svelte / WebComponent** implementation of the **Flag** component of Mozaic Design System.
+ * Full specification available in the Mozaic documentation.
+ */
+export default {
+    title: 'Indicators/Flag',
+    tags: ['autodocs', 'beta', 'version:2.0.0'],
+    context: 'sidebar',
+    args: {
+        appearance: 'standard',
+        label: 'Flag Label',
+    },
+    argTypes: {
+        appearance: {
+            description: 'Style du flag. Valeurs disponibles : `standard`, `accent`, `danger`, `inverse`',
+            control: { type: 'radio' },
+            options: ['standard', 'accent', 'danger', 'inverse'],
+        },
+        default: {
+            description: 'Contenu du flag (slot par défaut)',
+            table: {
+                category: 'Slots',
+            },
+            control: 'text',
+        },
+    },
+};
+const Template = (args) => {
+    const flag = document.createElement('m-flag');
+    flag.setAttribute('data-testid', args.label || 'Flag');
+    // Attributs
+    if (args.appearance)
+        flag.setAttribute('appearance', args.appearance);
+    // Slot (label)
+    const label = document.createElement('span');
+    label.innerText = args.label || 'Flag Label';
+    flag.appendChild(label);
+    return flag;
+};
+export const Standard = Template.bind({});
+Standard.args = {
+    appearance: 'standard',
+    label: 'Standard',
+};
+Standard.play = async ({ canvasElement }) => {
+    const MFlag = canvasElement.querySelector('m-flag');
+    const inner = MFlag?.shadowRoot?.querySelector('.mc-flag__label');
+    expect(inner).not.toBeNull();
+    expect(MFlag).toHaveTextContent('Standard');
+    // pas de modificateur attendu pour standard
+    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
+    expect(container?.className).not.toContain('mc-flag--');
+};
+export const Accent = Template.bind({});
+Accent.args = {
+    appearance: 'accent',
+    label: 'Accent',
+};
+Accent.play = async ({ canvasElement }) => {
+    const MFlag = canvasElement.querySelector('m-flag');
+    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
+    expect(container).not.toBeNull();
+    expect(MFlag).toHaveTextContent('Accent');
+    expect(container?.className).toContain('mc-flag--accent');
+};
+export const Danger = Template.bind({});
+Danger.args = {
+    appearance: 'danger',
+    label: 'Danger',
+};
+Danger.play = async ({ canvasElement }) => {
+    const MFlag = canvasElement.querySelector('m-flag');
+    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
+    expect(container).not.toBeNull();
+    expect(MFlag).toHaveTextContent('Danger');
+    expect(container?.className).toContain('mc-flag--danger');
+};
+export const Inverse = Template.bind({});
+Inverse.globals = {
+    backgrounds: {
+        value: 'inverse',
+    },
+};
+Inverse.args = {
+    appearance: 'inverse',
+    label: 'Inverse',
+};
+Inverse.play = async ({ canvasElement }) => {
+    const MFlag = canvasElement.querySelector('m-flag');
+    const container = MFlag?.shadowRoot?.querySelector('.mc-flag');
+    expect(container).not.toBeNull();
+    expect(MFlag).toHaveTextContent('Inverse');
+    expect(container?.className).toContain('mc-flag--inverse');
+};
+/**
+ * Story d’interaction simple (démonstration) :
+ * un clic sur l’hôte n’affecte pas le visuel mais valide que le composant est focusable/clicable si nécessaire.
+ */
+export const ClickableHost = Template.bind({});
+ClickableHost.args = {
+    appearance: 'accent',
+    label: 'Cliquable',
+};
+ClickableHost.play = async ({ canvasElement }) => {
+    const MFlag = canvasElement.querySelector('m-flag');
+    expect(MFlag).not.toBeNull();
+    await userEvent.click(MFlag);
+    // Le composant n’a pas d’événement spécifique par défaut, on vérifie juste le contenu.
+    expect(MFlag).toHaveTextContent('Cliquable');
+};