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

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,8 @@
-import{c as E,p as L,a as B,b as v,f as g,d as i,t as u,h as k,i as M,j as h,r as l,e as p,B as z,m as o,g as A}from"../../custom-element.js";import{e as D,i as S}from"../../each.js";import{s as _}from"../../attributes.js";var q=g('<li class="mc-breadcrumb__item svelte-1m7fbjk"><a><span class="mc-link__label svelte-1m7fbjk"> </span></a></li>'),F=g('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1m7fbjk"></ol></nav>');const G={hash:"svelte-1m7fbjk",code:`/**
+import{c as B,p as M,a as j,b as u,f as g,d as c,t as b,h as x,i as z,j as f,r as a,e as _,u as D,m,g as S}from"../../custom-element.js";import{e as q,i as A}from"../../each.js";import{s as p}from"../../attributes.js";var F=g('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),G=g('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const H={hash:"svelte-1ihiex7",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-breadcrumb.svelte-1m7fbjk {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1m7fbjk {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1m7fbjk {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1m7fbjk:not(:first-child) {padding-inline-start:1.5rem;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(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
-@media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1m7fbjk:nth-last-child(2) {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(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}.mc-breadcrumb__item.svelte-1m7fbjk:not(:nth-last-child(2)) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
-}.mc-breadcrumb__current.svelte-1m7fbjk, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1m7fbjk, .mc-breadcrumb__current.svelte-1m7fbjk:active, .mc-breadcrumb__current.svelte-1m7fbjk:focus, .mc-breadcrumb__current.svelte-1m7fbjk:hover, .mc-breadcrumb__current.svelte-1m7fbjk:visited, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:active, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:focus, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:hover, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1m7fbjk {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1m7fbjk .mc-breadcrumb__item:where(.svelte-1m7fbjk):not(:first-child) {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(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
-@media screen and (max-width: 679px) {.mc-breadcrumb--inverse.svelte-1m7fbjk .mc-breadcrumb__item:where(.svelte-1m7fbjk):nth-last-child(2) {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(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}
-}.mc-link.svelte-1m7fbjk {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1m7fbjk {line-height:1.3;}.mc-link__icon.svelte-1m7fbjk {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1m7fbjk:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1m7fbjk) {text-decoration:underline;}.mc-link.svelte-1m7fbjk: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-link--m.svelte-1m7fbjk {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1m7fbjk {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1m7fbjk {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1m7fbjk {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1m7fbjk {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1m7fbjk .mc-link__label:where(.svelte-1m7fbjk) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-1m7fbjk:hover .mc-link__label:where(.svelte-1m7fbjk) {border-color:transparent;}.mc-link--inline.svelte-1m7fbjk {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1m7fbjk .mc-link__label:where(.svelte-1m7fbjk) {line-height:1;}.mc-link--inline.svelte-1m7fbjk:hover {text-decoration:none;}`};function H(b,m){L(m,!0),B(b,G);let t=v(m,"appearance",7,"standard"),n=v(m,"links",23,()=>[]);const j=e=>e===n().length-1;function w(e){const r=["mc-link","mc-link--m","mc-link--inline"];return t()&&r.push(`mc-link--${t()}`),e&&r.push("mc-breadcrumb__current"),r.join(" ")}var c=F(),d=i(c);return D(d,21,n,S,(e,r,x)=>{var s=q(),a=i(s),f=i(a),y=i(f,!0);l(f),l(a),l(s),u(C=>{_(a,"href",o(r).href),_(a,"target",o(r).target),p(a,1,C,"svelte-1m7fbjk"),A(y,o(r).label)},[()=>z(w(j(x)))]),k(e,s)}),l(d),l(c),u(()=>p(c,1,`mc-breadcrumb mc-breadcrumb--${t()}`,"svelte-1m7fbjk")),k(b,c),M({get appearance(){return t()},set appearance(e="standard"){t(e),h()},get links(){return n()},set links(e=[]){n(e),h()}})}customElements.define("m-breadcrumb",E(H,{options:{attribute:"links",reflect:!0,type:"Array"},appearance:{},links:{}},[],[],!0));
+ */.mc-breadcrumb.svelte-1ihiex7 {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1ihiex7 {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1ihiex7 {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1ihiex7:not(:first-child) {padding-inline-start:1.5rem;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(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
+@media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1ihiex7:nth-last-child(2) {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(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}.mc-breadcrumb__item.svelte-1ihiex7:not(:nth-last-child(2)) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
+}.mc-breadcrumb__current.svelte-1ihiex7, .mc-breadcrumb__current.mc-link.svelte-1ihiex7 {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1ihiex7, .mc-breadcrumb__current.svelte-1ihiex7:active, .mc-breadcrumb__current.svelte-1ihiex7:focus, .mc-breadcrumb__current.svelte-1ihiex7:hover, .mc-breadcrumb__current.svelte-1ihiex7:visited, .mc-breadcrumb__current.mc-link.svelte-1ihiex7, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:active, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:focus, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:hover, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1ihiex7 {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1ihiex7 .mc-breadcrumb__item:where(.svelte-1ihiex7):not(:first-child) {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(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
+@media screen and (max-width: 679px) {.mc-breadcrumb--inverse.svelte-1ihiex7 .mc-breadcrumb__item:where(.svelte-1ihiex7):nth-last-child(2) {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(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}
+}.mc-link.svelte-1ihiex7 {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1ihiex7 {line-height:1.3;}.mc-link__icon.svelte-1ihiex7 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1ihiex7:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1ihiex7) {text-decoration:underline;}.mc-link.svelte-1ihiex7: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-link--m.svelte-1ihiex7 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1ihiex7 {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1ihiex7 {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1ihiex7 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1ihiex7 {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-1ihiex7:hover .mc-link__label:where(.svelte-1ihiex7) {border-color:transparent;}.mc-link--inline.svelte-1ihiex7 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {line-height:1;}.mc-link--inline.svelte-1ihiex7:hover {text-decoration:none;}`};function I(d,s){M(s,!0),j(d,H);let i=u(s,"appearance",7,"standard"),l=u(s,"links",23,()=>[]);const k=e=>e===l().length-1;function w(e){const r=["mc-link","mc-link--m","mc-link--inline"];return i()&&r.push(`mc-link--${i()}`),e&&r.push("mc-breadcrumb__current"),r.join(" ")}var C={get appearance(){return i()},set appearance(e="standard"){i(e),f()},get links(){return l()},set links(e=[]){l(e),f()}},n=G(),h=c(n);return q(h,21,l,A,(e,r,E)=>{var o=F(),t=c(o),v=c(t),y=c(v,!0);a(v),a(t),a(o),b(L=>{p(t,"href",m(r).href),p(t,"target",m(r).target),_(t,1,L,"svelte-1ihiex7"),S(y,m(r).label)},[()=>D(w(k(E)))]),x(e,o)}),a(h),a(n),b(()=>_(n,1,`mc-breadcrumb mc-breadcrumb--${i()}`,"svelte-1ihiex7")),x(d,n),z(C)}customElements.define("m-breadcrumb",B(I,{appearance:{},links:{}},[],[],!0));
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-breadcrumb',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'links' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  interface BreadcrumbLink {\n    label: string;\n    href: string;\n    target: '_blank' | '_self' | '_parent' | '_top' | undefined;\n  }\n\n  interface Props {\n    appearance?: 'standard' | 'inverse';\n    links?: BreadcrumbLink[];\n  }\n\n  let { appearance = 'standard', links = [] }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n\n  function setClasses(isCurrent: boolean): string {\n    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (isCurrent) {\n      classes.push('mc-breadcrumb__current');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<nav\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\n  <ol class=\"mc-breadcrumb__container\">\n    {#each links as link, index (index)}\n      <li class=\"mc-breadcrumb__item\">\n        <a\n          href={link.href}\n          target={link.target}\n          class={setClasses(isLastLink(index))}\n        >\n          <span class=\"mc-link__label\">{link.label}</span>\n        </a>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/breadcrumb';\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","setClasses","isCurrent","classes","$.each","ol","link","$.set_attribute","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAqBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAA,CAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,WAEtDK,EAAWC,EAA4B,CACxC,MAAAC,EAAW,CAAA,UAAW,aAAc,iBAAiB,EACvD,OAAAR,EAAU,GACZQ,EAAQ,KAAI,YAAaR,EAAU,CAAA,EAAA,EAEjCO,GACFC,EAAQ,KAAK,wBAAwB,EAEhCA,EAAQ,KAAK,GAAG,CACzB,kBAQSC,OAAAA,EAAAC,EAAA,GAAAT,OAASU,EAAIN,IAAA,wDAGRO,EAAA,EAAA,OAAAC,EAAAF,CAAI,EAAC,IAAI,EACPC,EAAA,EAAA,SAAAC,EAAAF,CAAI,EAAC,MAAM,4BAGWG,EAAAC,EAAAF,EAAAF,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,CAAA,kEATHL,EAAU,CAAA,GAAA,gBAAA,CAAA,0DAjB9B,WAAU,8DAc/B"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-breadcrumb'\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n   */\n  interface Props {\n    /**\n     * Allows to define the breadcrumb appearance.\n     */\n    appearance: 'standard' | 'inverse';\n    /**\n     * Links of the breadcrumb.\n     */\n\t\tlinks: Array<{\n      /**\n       * The label displayed for the link.\n       */\n      label: string;\n      /**\n       * URL for the link.\n       */\n      href: string;\n      /**\n       * Where to open the link.\n       */\n      target?: '_blank' | '_self' | '_parent' | '_top';\n    }>;\n\t}\n\n  let { appearance = 'standard', links = []}: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n\n  function setClasses(isCurrent: boolean): string {\n    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (isCurrent) {\n      classes.push('mc-breadcrumb__current');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<nav\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\n  <ol class=\"mc-breadcrumb__container\">\n    {#each links as link, index (index)}\n      <li class=\"mc-breadcrumb__item\">\n        <a\n          href={link.href}\n          target={link.target}\n          class={setClasses(isLastLink(index))}\n        >\n          <span class=\"mc-link__label\">{link.label}</span>\n        </a>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/breadcrumb';\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","setClasses","isCurrent","classes","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAA,CAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,WAEtDK,EAAWC,EAA4B,CACxC,MAAAC,EAAO,CAAI,UAAW,aAAc,iBAAiB,EACvD,OAAAR,EAAU,GACZQ,EAAQ,KAAI,YAAaR,EAAU,CAAA,EAAA,EAEjCO,GACFC,EAAQ,KAAK,wBAAwB,EAEhCA,EAAQ,KAAK,GAAG,CACzB,sDAbmB,WAAU,2EAqBpBC,OAAAA,EAAAC,EAAA,GAAAT,OAASU,EAAIN,IAAA,wDAGRO,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BAGWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,CAAA,kEATHL,EAAU,CAAA,GAAA,gBAAA,CAAA,aAHnD"}

package/dist/components/breadcrumb/Breadcrumb.stories.d.ts

@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Inverse: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Inverse: Story;
 //# sourceMappingURL=Breadcrumb.stories.d.ts.map

package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,sBAAsB,CAAC;wBA4BrD,IAAI;AAxBT,wBAwBU;AAsBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAsBzC,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAkEX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/breadcrumb/Breadcrumb.stories.js

@@ -1,78 +1,75 @@
-import { within, expect } from 'storybook/test';
-// --- Documentation setup
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+const meta = {
     title: 'Navigation/Breadcrumb',
-    tags: ['autodocs', 'new'],
+    component: 'm-breadcrumb',
     parameters: {
         docs: {
             description: {
-                component: 'A breadcrumb displays the hierarchical path to the current page and helps users navigate back to previous levels easily.<br/>' +
-                    'The `m-breadcrumb` component is the **Svelte / WebComponent** implementation of the **Breadcrumb** from the Mozaic Design System.<br/>' +
-                    'See the [Mozaic documentation](https://mozaic.adeo.cloud/components/breadcrumb/) for design guidelines.',
+                component: 'A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.',
             },
         },
     },
     argTypes: {
         appearance: {
             description: 'Define the visual appearance of the breadcrumb',
-            control: { type: 'select' },
+            control: { type: 'radio' },
             options: ['standard', 'inverse'],
+            table: {
+                type: {
+                    summary: 'standard | inverse',
+                },
+                defaultValue: {
+                    summary: 'standard',
+                },
+                category: 'attributes',
+            },
         },
         links: {
             description: 'List of breadcrumb links (label + href)',
             control: 'object',
+            table: {
+                type: {
+                    summary: '{ label: string; href: string; target?: _blank | _self | _parent | _top; }[]',
+                },
+                category: 'attributes',
+            },
         },
     },
-};
-// --- Template function
-const Template = (args) => {
-    const breadcrumb = document.createElement('m-breadcrumb');
-    breadcrumb.setAttribute('appearance', args.appearance || 'standard');
-    // Inject links directly as property
-    breadcrumb.links = args.links || [];
-    return breadcrumb;
-};
-// --- Base args
-const baseLinks = [
-    { label: 'Home', href: '#' },
-    { label: 'level 01', href: '#' },
-    { label: 'level 02', href: '#' },
-    { label: 'Current Page', href: '#' },
-];
-// --- Default story
-export const Default = Template.bind({});
-Default.args = {
-    appearance: 'standard',
-    links: baseLinks,
-};
-Default.play = async ({ canvasElement }) => {
-    const breadcrumbEl = canvasElement.querySelector('m-breadcrumb');
-    const shadowRoot = breadcrumbEl?.shadowRoot;
-    if (!shadowRoot)
-        throw new Error('ShadowRoot not found');
-    const links = shadowRoot.querySelectorAll('a');
-    expect(links.length).toBe(4);
-    const lastLink = links[links.length - 1];
-    expect(lastLink.classList.contains('mc-breadcrumb__current')).toBe(true);
-    const nav = shadowRoot.querySelector('nav');
-    expect(nav?.classList.contains('mc-breadcrumb--standard')).toBe(true);
-};
-// --- Inverse appearance story
-export const Inverse = Template.bind({});
-Inverse.globals = {
-    backgrounds: {
-        value: 'inverse',
+    args: {
+        links: [
+            {
+                label: 'Home',
+                href: '#',
+            },
+            {
+                label: 'level 01',
+                href: '#',
+            },
+            {
+                label: 'level 02',
+                href: '#',
+            },
+            {
+                label: 'Current Page',
+                href: '#',
+            },
+        ],
+        ariaLabel: 'breadcrumb',
     },
+    render: (args) => html `
+    <m-breadcrumb
+      appearance=${ifDefined(args.appearance)}
+      aria-label=${args.ariaLabel}
+      .links=${args.links}
+    ></m-breadcrumb>
+  `,
 };
-Inverse.args = {
-    appearance: 'inverse',
-    links: baseLinks,
-};
-Inverse.play = async ({ canvasElement }) => {
-    const breadcrumbEl = canvasElement.querySelector('m-breadcrumb');
-    const shadowRoot = breadcrumbEl?.shadowRoot;
-    if (!shadowRoot)
-        throw new Error('ShadowRoot not found');
-    const nav = shadowRoot.querySelector('nav');
-    expect(nav?.classList.contains('mc-breadcrumb--inverse')).toBe(true);
+export default meta;
+export const Default = {};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -1,25 +1,38 @@
 <svelte:options
   customElement={{
-    tag: 'm-breadcrumb',
-    props: {
-      options: { reflect: true, type: 'Array', attribute: 'links' },
-    },
+    tag: 'm-breadcrumb'
   }}
 />
 
 <script lang="ts">
-  interface BreadcrumbLink {
-    label: string;
-    href: string;
-    target: '_blank' | '_self' | '_parent' | '_top' | undefined;
-  }
-
+  /**
+   * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+   */
   interface Props {
-    appearance?: 'standard' | 'inverse';
-    links?: BreadcrumbLink[];
-  }
+    /**
+     * Allows to define the breadcrumb appearance.
+     */
+    appearance: 'standard' | 'inverse';
+    /**
+     * Links of the breadcrumb.
+     */
+		links: Array<{
+      /**
+       * The label displayed for the link.
+       */
+      label: string;
+      /**
+       * URL for the link.
+       */
+      href: string;
+      /**
+       * Where to open the link.
+       */
+      target?: '_blank' | '_self' | '_parent' | '_top';
+    }>;
+	}
 
-  let { appearance = 'standard', links = [] }: Props = $props();
+  let { appearance = 'standard', links = []}: Props = $props();
 
   const isLastLink = (index: number) => index === links.length - 1;
 

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,11 +1,28 @@
-interface BreadcrumbLink {
-    label: string;
-    href: string;
-    target: '_blank' | '_self' | '_parent' | '_top' | undefined;
-}
+/**
+ * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+ */
 interface Props {
-    appearance?: 'standard' | 'inverse';
-    links?: BreadcrumbLink[];
+    /**
+     * Allows to define the breadcrumb appearance.
+     */
+    appearance: 'standard' | 'inverse';
+    /**
+     * Links of the breadcrumb.
+     */
+    links: Array<{
+        /**
+         * The label displayed for the link.
+         */
+        label: string;
+        /**
+         * URL for the link.
+         */
+        href: string;
+        /**
+         * Where to open the link.
+         */
+        target?: '_blank' | '_self' | '_parent' | '_top';
+    }>;
 }
 declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7D;AAED,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACpC,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AA4CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACL,KAAK,EAAE,KAAK,CAAC;QACT;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC,CAAC;CACL;AAwCF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/button/Button.js

@@ -1,5 +1,5 @@
-import{c as K,p as M,a as N,b as r,f,z as O,s as C,d as h,h as d,i as P,j as n,r as m,t as Q,e as R,w as D,x as E}from"../../custom-element.js";import{i as b}from"../../if.js";import{s as L}from"../../slot.js";import{a as T,C as U}from"../../attributes.js";import{L as V}from"../loader/Loader.js";var W=f('<span class="mc-button__icon svelte-145hc6c"><!></span>'),X=f("<span><!></span>"),Y=f('<span class="mc-button__icon svelte-145hc6c"><!></span>'),Z=f("<button><!> <!> <!> <!></button>");const $={hash:"svelte-145hc6c",code:`/**
+import{c as M,p as N,a as O,b as n,f as z,D as P,s as C,d as h,h as d,i as Q,j as a,r as m,t as R,e as T,A as D,B as E}from"../../custom-element.js";import{i as b}from"../../if.js";import{s as B}from"../../slot.js";import{b as U,C as V}from"../../attributes.js";import{L as W}from"../loader/Loader.js";var X=z('<span class="mc-button__icon svelte-ozghz9"><!></span>'),Y=z("<span><!></span>"),Z=z('<span class="mc-button__icon svelte-ozghz9"><!></span>'),$=z("<button><!> <!> <!> <!></button>");const oo={hash:"svelte-ozghz9",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-145hc6c {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-145hc6c:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-145hc6c:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-145hc6c .mc-button__label:where(.svelte-145hc6c) {font-size:var(--font-size-150, 1rem);}.mc-button__label.svelte-145hc6c {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-145hc6c {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-145hc6c: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-button--s.svelte-145hc6c {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-145hc6c .mc-button__label:where(.svelte-145hc6c) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-145hc6c {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-145hc6c .mc-button__label:where(.svelte-145hc6c) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-145hc6c {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-145hc6c .mc-button__label:where(.svelte-145hc6c) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c) {width:2rem;height:2rem;}.mc-button--l.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-145hc6c {padding:0.25rem;}.mc-button--outlined.svelte-145hc6c {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-145hc6c:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-145hc6c:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-145hc6c {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-145hc6c:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-145hc6c:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-145hc6c {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-145hc6c:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-145hc6c:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-145hc6c {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-145hc6c:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-145hc6c:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-145hc6c {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-145hc6c:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-145hc6c:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-145hc6c {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--loading.svelte-145hc6c .mc-button__label:where(.svelte-145hc6c),
-.mc-button--loading.svelte-145hc6c .mc-button__icon:where(.svelte-145hc6c) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-145hc6c {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-145hc6c:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-145hc6c:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-145hc6c {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-145hc6c:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-145hc6c:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-145hc6c {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-145hc6c:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-145hc6c:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-145hc6c {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-145hc6c:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-145hc6c:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-145hc6c {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-145hc6c:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-145hc6c:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-145hc6c {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-145hc6c:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-145hc6c:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-145hc6c {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-145hc6c:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-145hc6c:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-145hc6c {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-145hc6c:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-145hc6c:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-145hc6c:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button__icon.svelte-145hc6c {pointer-events:none;}.hidden.svelte-145hc6c {visibility:hidden;}.loader-style.svelte-145hc6c {color:currentColor;position:absolute;}`};function oo(S,t){M(t,!0),N(S,$);let k=r(t,"appearance",7,"standard"),_=r(t,"size",7,"m"),p=r(t,"ghost",7,!1),w=r(t,"outlined",7,!1),a=r(t,"iconmode",7),y=r(t,"disabled",7,!1),z=r(t,"type",7,"button"),s=r(t,"isloading",7,!1),v=r(t,"hasiconslot",7,!1),q=O(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconmode","disabled","type","isloading","hasiconslot"]);var g=Z();T(g,o=>({class:`mc-button mc-button--${_()} mc-button--${k()}`,disabled:y(),type:z(),...q,[U]:o}),[()=>({"mc-button--ghost":p(),"mc-button--outlined":w(),"mc-button--icon-only":a()==="only","mc-button--loading":s()})],void 0,"svelte-145hc6c");var j=h(g);{var F=o=>{V(o,{theme:"standard",style:"color: currentColor; position: absolute;",size:"m",text:""})};b(j,o=>{s()&&o(F)})}var B=C(j,2);{var G=o=>{var e=W(),l=h(e);{var u=c=>{var i=D(),x=E(i);L(x,t,"icon",{}),d(c,i)};b(l,c=>{v()&&c(u)})}m(e),d(o,e)};b(B,o=>{(a()==="left"||a()==="only")&&o(G)})}var A=C(B,2);{var H=o=>{var e=X();let l;var u=h(e);L(u,t,"default",{}),m(e),Q(c=>l=R(e,1,"mc-button__label svelte-145hc6c",null,l,c),[()=>({hidden:s()})]),d(o,e)};b(A,o=>{a()!=="only"&&o(H)})}var I=C(A,2);{var J=o=>{var e=Y(),l=h(e);{var u=c=>{var i=D(),x=E(i);L(x,t,"icon",{}),d(c,i)};b(l,c=>{v()&&c(u)})}m(e),d(o,e)};b(I,o=>{a()==="right"&&o(J)})}return m(g),d(S,g),P({get appearance(){return k()},set appearance(o="standard"){k(o),n()},get size(){return _()},set size(o="m"){_(o),n()},get ghost(){return p()},set ghost(o=!1){p(o),n()},get outlined(){return w()},set outlined(o=!1){w(o),n()},get iconmode(){return a()},set iconmode(o){a(o),n()},get disabled(){return y()},set disabled(o=!1){y(o),n()},get type(){return z()},set type(o="button"){z(o),n()},get isloading(){return s()},set isloading(o=!1){s(o),n()},get hasiconslot(){return v()},set hasiconslot(o=!1){v(o),n()}})}customElements.define("m-button",K(oo,{appearance:{},size:{},ghost:{},outlined:{},iconmode:{},disabled:{},type:{},isloading:{},hasiconslot:{}},["icon","default"],[],!0));export{oo as B};
+ */.mc-button.svelte-ozghz9 {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-ozghz9:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-ozghz9:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9 {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-ozghz9 {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-ozghz9 {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-ozghz9 {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9: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-button--s.svelte-ozghz9 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-ozghz9 {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-ozghz9 {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:2rem;height:2rem;}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-ozghz9 {padding:0.25rem;}.mc-button--outlined.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-ozghz9 {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-ozghz9 {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-ozghz9 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-ozghz9 {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--loading.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9),
+.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-ozghz9 {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-ozghz9 {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-ozghz9 {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-ozghz9 {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button__icon.svelte-ozghz9 {pointer-events:none;}.hidden.svelte-ozghz9 {visibility:hidden;}.loader-style.svelte-ozghz9 {color:currentColor;position:absolute;}`};function to(L,t){N(t,!0),O(L,oo);let f=n(t,"appearance",7,"standard"),k=n(t,"size",7,"m"),_=n(t,"ghost",7,!1),p=n(t,"outlined",7,!1),c=n(t,"iconmode",7),w=n(t,"disabled",7,!1),y=n(t,"type",7,"button"),s=n(t,"isloading",7,!1),g=n(t,"hasiconslot",7,!1),q=P(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconmode","disabled","type","isloading","hasiconslot"]);var F={get appearance(){return f()},set appearance(o="standard"){f(o),a()},get size(){return k()},set size(o="m"){k(o),a()},get ghost(){return _()},set ghost(o=!1){_(o),a()},get outlined(){return p()},set outlined(o=!1){p(o),a()},get iconmode(){return c()},set iconmode(o){c(o),a()},get disabled(){return w()},set disabled(o=!1){w(o),a()},get type(){return y()},set type(o="button"){y(o),a()},get isloading(){return s()},set isloading(o=!1){s(o),a()},get hasiconslot(){return g()},set hasiconslot(o=!1){g(o),a()}},v=$();U(v,o=>({class:`mc-button mc-button--${k()} mc-button--${f()}`,disabled:w(),type:y(),...q,[V]:o}),[()=>({"mc-button--ghost":_(),"mc-button--outlined":p(),"mc-button--icon-only":c()==="only","mc-button--loading":s()})],void 0,"svelte-ozghz9");var S=h(v);{var G=o=>{W(o,{theme:"standard",style:"color: currentColor; position: absolute;",size:"m",text:""})};b(S,o=>{s()&&o(G)})}var j=C(S,2);{var H=o=>{var e=X(),l=h(e);{var u=r=>{var i=D(),x=E(i);B(x,t,"icon",{}),d(r,i)};b(l,r=>{g()&&r(u)})}m(e),d(o,e)};b(j,o=>{(c()==="left"||c()==="only")&&o(H)})}var A=C(j,2);{var I=o=>{var e=Y();let l;var u=h(e);B(u,t,"default",{}),m(e),R(r=>l=T(e,1,"mc-button__label svelte-ozghz9",null,l,r),[()=>({hidden:s()})]),d(o,e)};b(A,o=>{c()!=="only"&&o(I)})}var J=C(A,2);{var K=o=>{var e=Z(),l=h(e);{var u=r=>{var i=D(),x=E(i);B(x,t,"icon",{}),d(r,i)};b(l,r=>{g()&&r(u)})}m(e),d(o,e)};b(J,o=>{c()==="right"&&o(K)})}return m(v),d(L,v),Q(F)}customElements.define("m-button",M(to,{appearance:{},size:{},ghost:{},outlined:{},iconmode:{},disabled:{},type:{},isloading:{},hasiconslot:{}},["icon","default"],[],!0));export{to as B};
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n  import type {\n    ButtonIconMode,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n  } from './button.types';\n\n  import Loader from '../loader/Loader.svelte';\n\n  interface Props {\n    appearance?: ButtonStyle;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconmode?: ButtonIconMode;\n    disabled?: boolean;\n    type?: ButtonType;\n    isloading?: boolean;\n    hasiconslot?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconmode,\n    disabled = false,\n    type = 'button',\n    isloading = false,\n    hasiconslot = false,\n    ...events\n  }: Props = $props();\n</script>\n\n<button\n  class={`mc-button mc-button--${size} mc-button--${appearance}`}\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  class:mc-button--icon-only={iconmode === 'only'}\n  class:mc-button--loading={isloading}\n  {disabled}\n  {type}\n  {...events}\n>\n  {#if isloading}\n    <Loader\n      theme=\"standard\"\n      style=\"color: currentColor; position: absolute;\"\n      size=\"m\"\n      text=\"\"\n    />\n  {/if}\n\n  {#if iconmode === 'left' || iconmode === 'only'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconmode !== 'only'}\n    <span class=\"mc-button__label\" class:hidden={isloading}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconmode === 'right'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-button__icon {\n    pointer-events: none;\n  }\n\n  .hidden {\n    visibility: hidden;\n  }\n\n  .loader-style {\n    color: currentColor;\n    position: absolute;\n  }\n</style>\n"],"names":["appearance","size","ghost","outlined","iconmode","$.prop","$$props","disabled","type","isloading","hasiconslot","events","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4","consequent_5"],"mappings":";;;kpMAAA,gBA0BI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACfC,oBAAY,EAAK,EACjBC,sBAAc,EAAK,EAChBC,EAAAC,EAAAN,EAAA,6JAK0B,MAAA,wBAAAL,kBAAmBD,EAAU,CAAA,4BAOxDW,oCANoBT,EAAK,wBACFC,EAAQ,EACP,uBAAAC,EAAQ,IAAK,4BACfK,EAAS,uJAK9BA,EAAS,GAAAI,EAAAC,CAAA,0GAWLJ,EAAW,GAAAG,EAAAE,CAAA,0BAFfX,EAAa,IAAA,QAAUA,MAAa,SAAMS,EAAAG,CAAA,uJASAP,EAAS,CAAA,EAAA,CAAA,kBADnDL,MAAa,QAAMS,EAAAI,CAAA,0GAQfP,EAAW,GAAAG,EAAAK,CAAA,yBAFfd,MAAa,SAAOS,EAAAM,CAAA,wEA9CV,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ,uDACH,GAAK,2DACH,GAAK,YAGvB"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n  import type {\n    ButtonIconMode,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n  } from './button.types';\n\n  import Loader from '../loader/Loader.svelte';\n\n  interface Props {\n    appearance?: ButtonStyle;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconmode?: ButtonIconMode;\n    disabled?: boolean;\n    type?: ButtonType;\n    isloading?: boolean;\n    hasiconslot?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconmode,\n    disabled = false,\n    type = 'button',\n    isloading = false,\n    hasiconslot = false,\n    ...events\n  }: Props = $props();\n</script>\n\n<button\n  class={`mc-button mc-button--${size} mc-button--${appearance}`}\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  class:mc-button--icon-only={iconmode === 'only'}\n  class:mc-button--loading={isloading}\n  {disabled}\n  {type}\n  {...events}\n>\n  {#if isloading}\n    <Loader\n      theme=\"standard\"\n      style=\"color: currentColor; position: absolute;\"\n      size=\"m\"\n      text=\"\"\n    />\n  {/if}\n\n  {#if iconmode === 'left' || iconmode === 'only'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconmode !== 'only'}\n    <span class=\"mc-button__label\" class:hidden={isloading}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconmode === 'right'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-button__icon {\n    pointer-events: none;\n  }\n\n  .hidden {\n    visibility: hidden;\n  }\n\n  .loader-style {\n    color: currentColor;\n    position: absolute;\n  }\n</style>\n"],"names":["appearance","size","ghost","outlined","iconmode","$.prop","$$props","disabled","type","isloading","hasiconslot","events","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4","consequent_5"],"mappings":";;;6mMAAA,iBA0BI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACfC,oBAAY,EAAK,EACjBC,sBAAc,EAAK,EAChBC,EAAAC,EAAAN,EAAA,+LATU,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ,uDACH,GAAK,2DACH,GAAK,2BAMU,MAAA,wBAAAL,EAAI,gBAAeD,EAAU,CAAA,4BAOxDW,oCANoBT,EAAK,wBACFC,EAAQ,EACP,uBAAAC,EAAQ,IAAK,4BACfK,EAAS,sJAK9BA,EAAS,GAAAI,EAAAC,CAAA,0GAWLJ,EAAW,GAAAG,EAAAE,CAAA,0BAFfX,EAAQ,IAAK,QAAUA,EAAQ,IAAK,SAAMS,EAAAG,CAAA,sJASAP,EAAS,CAAA,EAAA,CAAA,kBADnDL,EAAQ,IAAK,QAAMS,EAAAI,CAAA,0GAQfP,EAAW,GAAAG,EAAAK,CAAA,yBAFfd,EAAQ,IAAK,SAAOS,EAAAM,CAAA,2BAnC3B"}

package/dist/components/button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBA8DE,IAAI;AA5DT,wBA4DU;AA6BV,eAAO,MAAM,MAAM,KAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAc1C,eAAO,MAAM,KAAK,KAAoB,CAAC;AAqBvC,eAAO,MAAM,IAAI,KAAoB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA8DE,IAAI;AA5DT,wBA4DU;AA6BV,eAAO,MAAM,MAAM,KAAoB,CAAC;AAUxC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAc1C,eAAO,MAAM,KAAK,KAAoB,CAAC;AAqBvC,eAAO,MAAM,IAAI,KAAoB,CAAC"}

package/dist/components/button/Button.stories.js

@@ -1,4 +1,5 @@
 import { action } from 'storybook/actions';
+import ChevronRight32 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
 import { userEvent, expect, within, fn } from 'storybook/test';
 /**
  * Buttons are used to trigger actions. Their appearance depends on the type of action required from the user or the context.

package/dist/components/button/Button.svelte

@@ -85,10 +85,29 @@
 .mc-button {
   color: var(--button-color-filled-standard-font, #ffffff);
   background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
   font-weight: var(--font-weight-semi-bold, 600);
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
   display: inline-flex;
   justify-content: center;
   vertical-align: middle;
@@ -104,21 +123,6 @@
   gap: 0.25rem;
   cursor: pointer;
 }
-.mc-button:hover {
-  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
-}
-.mc-button:active {
-  background-color: var(--button-color-filled-standard-active-background, #242938);
-}
-.mc-button:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
-  border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
-  cursor: not-allowed;
-}
-.mc-button .mc-button__label {
-  font-size: var(--font-size-150, 1rem);
-}
 .mc-button__label {
   font-size: var(--font-size-150, 1rem);
 }

package/dist/components/callout/Callout.js

@@ -0,0 +1,7 @@
+import{c as j,p as C,a as D,b as m,f as E,d as t,s as r,t as S,h as q,i as A,j as u,r as l,e as B,u as F,g as h}from"../../custom-element.js";import{s as d}from"../../slot.js";var G=E('<section role="status"><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const H={hash:"svelte-1pnlv3f",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* create columns */
+/* create columns */
+/* create custom named columns with custom content */.mc-callout.svelte-1pnlv3f {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;background:var(--callout-color-background-standard, #eff1f6);position:relative;box-sizing:border-box;color:var(--callout-color-text, #000000);}.mc-callout__icon.svelte-1pnlv3f {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-1pnlv3f {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-1pnlv3f, .mc-callout__message.svelte-1pnlv3f {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-callout__title.svelte-1pnlv3f {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-callout__message.svelte-1pnlv3f {font-size:var(--font-size-100, 0.875rem);}.mc-callout__footer.svelte-1pnlv3f {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-1pnlv3f {background:var(--callout-color-background-standard, #eff1f6);}.mc-callout--accent.svelte-1pnlv3f {background:var(--callout-color-background-accent, #ebf5de);}.mc-callout--tips.svelte-1pnlv3f {background:var(--callout-color-background-tips, #ffebaf);}.mc-callout--inverse.svelte-1pnlv3f {background:var(--callout-color-background-inverse, #ffffff);}.mc-callout__footer.svelte-1pnlv3f:empty {display:none;}`};function I(p,e){C(e,!0),D(p,H);let c=m(e,"title",7),s=m(e,"description",7),n=m(e,"appearance",7,"standard");var x={get title(){return c()},set title(a){c(a),u()},get description(){return s()},set description(a){s(a),u()},get appearance(){return n()},set appearance(a="standard"){n(a),u()}},o=G(),i=t(o),k=t(i);d(k,e,"icon",{}),l(i);var _=r(i,2),v=t(_),w=t(v,!0);l(v);var f=r(v,2),y=t(f,!0);l(f);var g=r(f,2);d(g,e,"default",{});var b=r(g,2),z=t(b);return d(z,e,"footer",{}),l(b),l(_),l(o),S(()=>{B(o,1,F(["mc-callout",`mc-callout--${n()}`]),"svelte-1pnlv3f"),h(w,c()),h(y,s())}),q(p,o),A(x)}customElements.define("m-callout",j(I,{title:{},description:{},appearance:{}},["icon","default","footer"],[],!0));
+//# sourceMappingURL=Callout.js.map

package/dist/components/callout/Callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let {\n    title,\n    description,\n    appearance = 'standard',\n  }: Props = $props();\n</script>\n\n<section class={[\"mc-callout\", `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\"/>\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{ title }</h2>\n\n    <p class=\"mc-callout__message\">\n      { description }\n    </p>\n\n    <slot/>\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\"/>\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;;;;i6CAAA,oBAsBIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,qBAAa,UAAU,iKAAV,WAAU,0NAIVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAKpBJ,GAAK,MAGjCG,GAAW,eAVnB"}

package/dist/components/callout/Callout.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/custom-elements/ImageAlt32/ImageAlt32.js';
+import '@mozaic-ds/icons-svelte/custom-elements/ArrowNext20/ArrowNext20.js';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Tips: Story;
+export declare const Inverse: Story;
+export declare const WithButton: Story;
+export declare const WithButtons: Story;
+export declare const WithLink: {
+    args: {
+        footer: string;
+    };
+};
+//# sourceMappingURL=Callout.stories.d.ts.map

package/dist/components/callout/Callout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IAiFX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}