@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,13 +1,19 @@
+import type { Snippet } from 'svelte';
 /**
  * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
  *
- * @slot default - Use this slot to insert the image, icon or intials of the avatar.
+ * @slot default - Use this slot to insert the image, icon or initials of the avatar.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Determines the size of the avatar.
      */
     size: 's' | 'm' | 'l';
+    /**
+     * Use this snippet to insert the image, icon or initials of the avatar.
+     */
+    children?: Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACvB;AAiBH,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"}
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBH,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/avatar/README.md

@@ -7,10 +7,11 @@ An avatar is a graphical representation of a user, entity, or group, commonly di
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
 | `size*` | Determines the size of the avatar. | `'s'` `'m'` `'l'` | `s` |
+| `children` | Use this snippet to insert the image, icon or initials of the avatar. | `Snippet` |   |
 
 ## Slots
 
 | Name | Description |
 |------|-------------|
-| `default` | Use this slot to insert the image, icon or intials of the avatar. |
+| `default` | Use this slot to insert the image, icon or initials of the avatar. |
 

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,8 @@
-import{c as E,p as L,a as B,b as u,f as _,r as $,d as c,h as b,i as M,j as x,e as t,t as j,m as z,n as m,l as D,g as S}from"../../custom-element.js";import{e as q,i as A}from"../../each.js";import{a as F,s as f}from"../../attributes.js";var G=_('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),H=_('<nav><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const I={hash:"svelte-1ihiex7",code:`/**
+import{c as E,p as L,a as B,b as u,f as b,g as $,h as _,i as M,d as c,j as x,r as t,t as j,o as z,q as m,n as q,e as D}from"../../custom-element.js";import{e as S,i as A}from"../../each.js";import{a as F,s as f}from"../../attributes.js";var G=_('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),H=_('<nav><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const I={hash:"svelte-1ihiex7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.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-width-s, 0.0625rem) 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 J(d,a){L(a,!0),B(d,I);let r=u(a,"appearance",7,"standard"),l=u(a,"links",7),p=$(a,["$$slots","$$events","$$legacy","$$host","appearance","links"]);const g=e=>e===l().length-1;var k={get appearance(){return r()},set appearance(e="standard"){r(e),x()},get links(){return l()},set links(e){l(e),x()}},n=H();F(n,()=>({class:`mc-breadcrumb mc-breadcrumb--${r()}`,"aria-label":"Breadcrumb",...p}),void 0,void 0,void 0,"svelte-1ihiex7");var h=c(n);return q(h,21,l,A,(e,s,w)=>{var o=G(),i=c(o),v=c(i),y=c(v,!0);t(v),t(i),t(o),j(C=>{f(i,"href",m(s).href),f(i,"target",m(s).target),D(i,1,C,"svelte-1ihiex7"),S(y,m(s).label)},[()=>z(["mc-link","mc-link--m","mc-link--inline",r()&&`mc-link--${r()}`,g(w)&&"mc-breadcrumb__current"])]),b(e,o)}),t(h),t(n),b(d,n),M(k)}customElements.define("m-breadcrumb",E(J,{appearance:{},links:{}},[],[],!0));
+}.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-width-s, 0.0625rem) 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 J(d,a){L(a,!0),B(d,I);let r=u(a,"appearance",7,"standard"),l=u(a,"links",7),p=M(a,["$$slots","$$events","$$legacy","$$host","appearance","links"]);const g=e=>e===l().length-1;var k={get appearance(){return r()},set appearance(e="standard"){r(e),x()},get links(){return l()},set links(e){l(e),x()}},n=H();F(n,()=>({class:`mc-breadcrumb mc-breadcrumb--${r()}`,"aria-label":"Breadcrumb",...p}),void 0,void 0,void 0,"svelte-1ihiex7");var h=c(n);return S(h,21,l,A,(e,s,w)=>{var o=G(),i=c(o),v=c(i),y=c(v,!0);t(v),t(i),t(o),j(C=>{f(i,"href",m(s).href),f(i,"target",m(s).target),q(i,1,C,"svelte-1ihiex7"),D(y,m(s).label)},[()=>z(["mc-link","mc-link--m","mc-link--inline",r()&&`mc-link--${r()}`,g(w)&&"mc-breadcrumb__current"])]),b(e,o)}),t(h),t(n),b(d,n),$(k)}customElements.define("m-breadcrumb",E(J,{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  }}\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    links: 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  }\n\n  let { appearance = 'standard', links, ...attrs }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n</script>\n\n<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label=\"Breadcrumb\" {...attrs}>\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={[\n            'mc-link',\n            'mc-link--m',\n            'mc-link--inline',\n            appearance && `mc-link--${appearance}`,\n            isLastLink(index) && 'mc-breadcrumb__current',\n          ]}\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","attrs","$.rest_props","isLastLink","index","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;8xDAAA,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAExCG,EAAcC,GAAkBA,IAAUN,EAAK,EAAC,OAAS,uDAF5C,WAAU,iHAKaD,EAAU,CAAA,gCAAgCI,sDAE3EI,OAAAA,EAAAC,EAAA,GAAAR,OAASS,EAAIH,IAAA,wDAGRI,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BASWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,WAPtC,UACA,aACA,kBACAV,iBAA0BA,EAAU,CAAA,GACpCM,EAAWC,CAAK,GAAK,2DAdjC"}
+{"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    [key: string]: any;\n    /**\n     * Allows to define the breadcrumb appearance.\n     */\n    appearance: 'standard' | 'inverse';\n    /**\n     * Links of the breadcrumb.\n     */\n    links: 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  }\n\n  let { appearance = 'standard', links, ...attrs }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n</script>\n\n<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label=\"Breadcrumb\" {...attrs}>\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={[\n            'mc-link',\n            'mc-link--m',\n            'mc-link--inline',\n            appearance && `mc-link--${appearance}`,\n            isLastLink(index) && 'mc-breadcrumb__current',\n          ]}\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","attrs","$.rest_props","isLastLink","index","nav","root","ol","$.index","$$anchor","link","li","root_1","a","$.child","span","$.reset","$.get","$.set_class","$0","$.set_text","text"],"mappings":";;;;;;8xDAMA,gBA6BQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAExCG,EAAcC,GAAkBA,IAAUN,EAAK,EAAC,OAAS,uDAF5C,WAAU,2DAK9BO,EAAGC,EAAA,IAAHD,8CAA2CR,EAAU,CAAA,gCAAgCI,2CACnF,IAAAM,IADFF,CAAG,WACDE,EAAE,GACMT,EAAKU,EAAA,CAAAC,EAAIC,EAAIN,IAAA,KACjBO,EAAEC,EAAA,EACAC,EAAAC,EADFH,CAAE,EAYEI,EAAID,EAXND,CAAA,MAWEE,EAAI,EAAA,IAAJA,CAAI,EAXNC,EAAAH,CAAA,IADFF,CAAE,UACAE,EAAA,OAAAI,EACOP,CAAI,EAAC,IAAI,IADhBG,EAAA,SAAAI,EAESP,CAAI,EAAC,MAAM,EAFpBQ,EAAAL,EAAA,EAAAM,EAAA,gBAAA,EAW+BC,EAAAC,EAAAJ,EAAAP,CAAI,EAAC,KAAK,WAPtC,UACA,aACA,kBACAb,iBAA0BA,EAAU,CAAA,GACpCM,EAAWC,CAAK,GAAK,iCAT1BO,CAAE,MAFNJ,CAAE,IADJF,CAAG,MAAHA,CAAG,MAFI"}

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -9,6 +9,7 @@
    * 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 {
+    [key: string]: any;
     /**
      * Allows to define the breadcrumb appearance.
      */

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

@@ -2,6 +2,7 @@
  * 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 {
+    [key: string]: any;
     /**
      * Allows to define the breadcrumb appearance.
      */

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;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;QACX;;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;CACJ;AAmCH,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,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;QACX;;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;CACJ;AAmCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/builtinmenu/BuiltInMenu.js

@@ -0,0 +1,4 @@
+import{c as y,p as k,a as B,b as a,t as w,f as c,g as j,h as D,d as v,j as d,k as f,l as b,r as p,n as E,o as I}from"../../custom-element.js";import{s as M}from"../../snippet.js";import{i as S}from"../../if.js";import{s as q}from"../../slot.js";var z=D('<nav aria-label="menu"><ul class="mc-built-in-menu__list svelte-9dcxnv"><!></ul></nav>');const A={hash:"svelte-9dcxnv",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-built-in-menu.svelte-9dcxnv {display:inline-block;width:15rem;padding:0.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, 0.25rem);}.mc-built-in-menu--outlined.svelte-9dcxnv {border:1px solid var(--color-border-primary, #cccccc);}.mc-built-in-menu__list.svelte-9dcxnv {list-style:none;margin:0;padding:0;}`};function C(u,t){k(t,!0),B(u,A);let o=a(t,"selected",15),s=a(t,"outlined",7),l=a(t,"children",7);var _={get selected(){return o()},set selected(e){o(e),d()},get outlined(){return s()},set outlined(e){s(e),d()},get children(){return l()},set children(e){l(e),d()}},r=z(),m=v(r),h=v(m);{var g=e=>{var n=f(),i=b(n);M(i,l),c(e,n)},x=e=>{var n=f(),i=b(n);q(i,t,"item",{},null),c(e,n)};S(h,e=>{l()?e(g):e(x,!1)})}return p(m),p(r),w(()=>E(r,1,I({"mc-built-in-menu":!0,"mc-built-in-menu--outlined":s()}),"svelte-9dcxnv")),c(u,r),j(_)}customElements.define("m-built-in-menu",y(C,{outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},selected:{},children:{}},["item"],[],!0));export{C as B};
+//# sourceMappingURL=BuiltInMenu.js.map

package/dist/components/builtinmenu/BuiltInMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuiltInMenu.js","sources":["../../../src/components/builtinmenu/BuiltInMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-built-in-menu',\n    props: {\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.\n   *\n   * @slot item - use this slot to insert `m-menu-item` components.\n   */\n  interface Props {\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n    /**\n     * use this snippet to insert `m-menu-item` components.\n     */\n    children?: Snippet;\n  }\n\n  let { selected = $bindable(), outlined, children }: Props = $props();\n</script>\n\n<nav\n  class={{\n    'mc-built-in-menu': true,\n    'mc-built-in-menu--outlined': outlined,\n  }}\n  aria-label=\"menu\"\n>\n  <ul class=\"mc-built-in-menu__list\">\n    {#if children}\n      {@render children()}\n    {:else}\n      <slot name=\"item\" />\n    {/if}\n  </ul>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu';\n</style>\n"],"names":["selected","$.prop","$$props","outlined","children","nav","root","ul","$.child","$$render","consequent","alternate","$.reset","$.append","$$anchor"],"mappings":";;0YASA,oBAsBQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,yKAGjDG,EAAAC,EAAA,EAOEC,EAAEC,EAPJH,CAAA,MAOEE,CAAE,kCAEUH,CAAQ,uEADdA,EAAQ,EAAAK,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdJ,CAAE,EAPJK,EAAAP,CAAA,UAAAA,OAEG,mBAAoB,GACpB,6BAA8BF,EAAQ,sBAHzCU,EAAAC,EAAAT,CAAA,MAFO"}

package/dist/components/builtinmenu/BuiltInMenu.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './BuiltInMenu.svelte';
+import '../builtinmenuitem/BuiltInMenuItem.svelte';
+import '@mozaic-ds/icons-svelte/components/Less24/Less24.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithIcons: Story;
+export declare const Outlined: Story;
+//# sourceMappingURL=BuiltInMenu.stories.d.ts.map

package/dist/components/builtinmenu/BuiltInMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuiltInMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/builtinmenu/BuiltInMenu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,2CAA2C,CAAC;AACnD,OAAO,yDAAyD,CAAC;AAEjE,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/dist/components/builtinmenu/BuiltInMenu.stories.js

@@ -0,0 +1,61 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './BuiltInMenu.svelte';
+import '../builtinmenuitem/BuiltInMenuItem.svelte';
+import '@mozaic-ds/icons-svelte/components/Less24/Less24.svelte';
+const meta = {
+    title: 'Navigation/Built-in Menu',
+    component: 'm-built-in-menu',
+    subcomponents: { 'm-built-in-menu-item': 'm-built-in-menu-item' },
+    tags: ['v2'],
+    args: {
+        selected: 1,
+        item: `
+      <m-built-in-menu-item slot="item" label="Label">
+      </m-built-in-menu-item>
+
+      <m-built-in-menu-item slot="item" label="Label" selected="true">
+      </m-built-in-menu-item>
+
+      <m-built-in-menu-item slot="item" label="Label">
+      </m-built-in-menu-item>
+
+      <m-built-in-menu-item slot="item" label="Label">
+      </m-built-in-menu-item>
+    `,
+    },
+    render: (args) => html `
+    <m-built-in-menu .selected=${ifDefined(args.selected)} ?outlined=${args.outlined}>
+      ${unsafeHTML(ifDefined(args.item))}
+    </m-built-in-menu>
+  `,
+};
+export default meta;
+export const Default = {};
+export const WithIcons = {
+    args: {
+        item: `
+      <m-built-in-menu-item slot="item" label="Label" selected="true">
+        <less-24 slot="icon"></less-24>
+      </m-built-in-menu-item>
+
+      <m-built-in-menu-item slot="item" label="Label">
+        <less-24 slot="icon"></less-24>
+      </m-built-in-menu-item>
+
+      <m-built-in-menu-item slot="item" label="Label">
+        <less-24 slot="icon"></less-24>
+      </m-built-in-menu-item>
+
+      <m-built-in-menu-item slot="item" label="Label">
+        <less-24 slot="icon"></less-24>
+      </m-built-in-menu-item>
+    `,
+    },
+};
+export const Outlined = {
+    args: {
+        outlined: true,
+    },
+};

package/dist/components/builtinmenu/BuiltInMenu.svelte

@@ -0,0 +1,142 @@
+<svelte:options
+  customElement={{
+    tag: 'm-built-in-menu',
+    props: {
+      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  /**
+   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+   *
+   * @slot item - use this slot to insert `m-menu-item` components.
+   */
+  interface Props {
+    /**
+     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+     */
+    selected?: number;
+    /**
+     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+     */
+    outlined?: boolean;
+    /**
+     * use this snippet to insert `m-menu-item` components.
+     */
+    children?: Snippet;
+  }
+
+  let { selected = $bindable(), outlined, children }: Props = $props();
+</script>
+
+<nav
+  class={{
+    'mc-built-in-menu': true,
+    'mc-built-in-menu--outlined': outlined,
+  }}
+  aria-label="menu"
+>
+  <ul class="mc-built-in-menu__list">
+    {#if children}
+      {@render children()}
+    {:else}
+      <slot name="item" />
+    {/if}
+  </ul>
+</nav>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-built-in-menu {
+  display: inline-block;
+  width: 15rem;
+  padding: 0.5rem;
+  background-color: var(--built-in-menu-color-background-default, #ffffff);
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-built-in-menu--outlined {
+  border: 1px solid var(--color-border-primary, #cccccc);
+}
+.mc-built-in-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.mc-built-in-menu__item {
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+}
+.mc-built-in-menu__item--selected .mc-built-in-menu__button,
+.mc-built-in-menu__item--selected .mc-built-in-menu__link {
+  background-color: var(--built-in-menu-color-background-selected, #ebf5de);
+}
+.mc-built-in-menu__item--selected .mc-built-in-menu__label {
+  color: var(--built-in-menu-color-text-selected, #006902);
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-built-in-menu__item--selected .mc-built-in-menu__icon {
+  fill: var(--built-in-menu-color-text-selected, #006902);
+}
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button, .mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link,
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:focus-visible,
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:focus-visible {
+  background-color: var(--built-in-menu-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label {
+  color: var(--built-in-menu-color-text-default, #404040);
+}
+.mc-built-in-menu__item--selected, .mc-built-in-menu__item:has(+ .mc-built-in-menu__item--selected), .mc-built-in-menu__item:last-child, .mc-built-in-menu__item:hover, .mc-built-in-menu__item:has(+ .mc-built-in-menu__item:hover) {
+  border-bottom: 1px solid transparent;
+}
+.mc-built-in-menu__icon {
+  flex: 0 0 auto;
+}
+.mc-built-in-menu__button {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--built-in-menu-color-background-default, #ffffff);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  overflow: hidden;
+  border: none;
+  cursor: pointer;
+}
+.mc-built-in-menu__link {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--built-in-menu-color-background-default, #ffffff);
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  overflow: hidden;
+  text-decoration: none;
+}
+.mc-built-in-menu__label {
+  flex: 1 1 auto;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--built-in-menu-color-text-default, #404040);
+  /* Truncature */
+  overflow: hidden;
+  display: -webkit-box;
+  text-align: left;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}</style>

package/dist/components/builtinmenu/BuiltInMenu.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/**
+ * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+ *
+ * @slot item - use this slot to insert `m-menu-item` components.
+ */
+interface Props {
+    /**
+     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+     */
+    selected?: number;
+    /**
+     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+     */
+    outlined?: boolean;
+    /**
+     * use this snippet to insert `m-menu-item` components.
+     */
+    children?: Snippet;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BuiltInMenu: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    item: {};
+}, {}, "selected">;
+type BuiltInMenu = InstanceType<typeof BuiltInMenu>;
+export default BuiltInMenu;
+//# sourceMappingURL=BuiltInMenu.svelte.d.ts.map

package/dist/components/builtinmenu/BuiltInMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuiltInMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/builtinmenu/BuiltInMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCH,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;AAUD,QAAA,MAAM,WAAW;;;;kBAAqF,CAAC;AACrF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/components/builtinmenu/BuiltinMenu.spec.js

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/svelte';
+import { it, expect, describe } from 'vitest';
+import BuiltInMenu from './BuiltInMenu.svelte';
+describe('BuiltInMenu component', () => {
+    it('sets outlined modifier class when outlined prop is set to true', async () => {
+        const { container } = render(BuiltInMenu, {
+            props: { outlined: true },
+        });
+        const nav = container.querySelector('nav');
+        expect(nav?.classList.contains('mc-built-in-menu--outlined')).toBe(true);
+    });
+    it('toggles outlined modifier class when outlined prop changes', async () => {
+        const { container } = render(BuiltInMenu, {
+            props: {},
+        });
+        const nav = container.querySelector('nav');
+        expect(nav?.classList.contains('mc-built-in-menu--outlined')).toBe(false);
+    });
+});

package/dist/components/builtinmenu/README.md

@@ -0,0 +1,18 @@
+# `m-built-in-menu`
+
+A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `selected` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | `$bindable()` |
+| `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` |   |
+| `children` | use this snippet to insert `m-menu-item` components. | `Snippet` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `item` | use this slot to insert `m-menu-item` components. |
+

package/dist/components/builtinmenuitem/BuiltInMenuItem.js

@@ -0,0 +1,8 @@
+import{c as S,p as T,a as A,b as i,q as f,l as h,s as x,t as F,f as s,k as y,g as G,h as I,x as H,d as j,j as l,r as B,e as J}from"../../custom-element.js";import{s as K}from"../../snippet.js";import{i as L}from"../../if.js";import{s as O}from"../../slot.js";import{e as P}from"../../svelte-element.js";import{a as z}from"../../attributes.js";import{s as Q}from"../../Condition20.js";var U=I('<!> <span class="mc-built-in-menu__label svelte-eugnvn"> </span> <!>',1),V=I("<li><!></li>");const W={hash:"svelte-eugnvn",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-built-in-menu.svelte-eugnvn {display:inline-block;width:15rem;padding:0.5rem;background-color:var(--built-in-menu-color-background-default, #ffffff);border-radius:var(--border-radius-s, 0.25rem);}.mc-built-in-menu--outlined.svelte-eugnvn {border:1px solid var(--color-border-primary, #cccccc);}.mc-built-in-menu__list.svelte-eugnvn {list-style:none;margin:0;padding:0;}.mc-built-in-menu__item.svelte-eugnvn {display:flex;align-items:center;height:3.5rem;border-bottom:1px solid var(--divider-color-primary, #cccccc);}.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__button:where(.svelte-eugnvn),
+.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__link:where(.svelte-eugnvn) {background-color:var(--built-in-menu-color-background-selected, #ebf5de);}.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__label:where(.svelte-eugnvn) {color:var(--built-in-menu-color-text-selected, #006902);font-weight:var(--font-weight-semi-bold, 600);}.mc-built-in-menu__item--selected.svelte-eugnvn .mc-built-in-menu__icon:where(.svelte-eugnvn) {fill:var(--built-in-menu-color-text-selected, #006902);}.mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button:where(.svelte-eugnvn), .mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link:where(.svelte-eugnvn),
+.mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:where(.svelte-eugnvn):focus-visible,
+.mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:where(.svelte-eugnvn):focus-visible {background-color:var(--built-in-menu-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-built-in-menu__item.svelte-eugnvn:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label:where(.svelte-eugnvn) {color:var(--built-in-menu-color-text-default, #404040);}.mc-built-in-menu__item--selected.svelte-eugnvn, .mc-built-in-menu__item.svelte-eugnvn:last-child, .mc-built-in-menu__item.svelte-eugnvn:hover {border-bottom:1px solid transparent;}.mc-built-in-menu__icon.svelte-eugnvn {flex:0 0 auto;}.mc-built-in-menu__button.svelte-eugnvn {width:100%;height:100%;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;border:none;cursor:pointer;}.mc-built-in-menu__link.svelte-eugnvn {width:100%;height:100%;border-radius:var(--border-radius-s, 0.25rem);background-color:var(--built-in-menu-color-background-default, #ffffff);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;overflow:hidden;text-decoration:none;}.mc-built-in-menu__label.svelte-eugnvn {flex:1 1 auto;margin-left:0.5rem;margin-right:1rem;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--built-in-menu-color-text-default, #404040);
+  /* Truncature */overflow:hidden;display:-webkit-box;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}`};function X(p,t){T(t,!0),A(p,W);let c=i(t,"label",7),u=i(t,"href",7),v=i(t,"target",7),m=i(t,"selected",7),o=i(t,"icon",7),b=i(t,"attrs",7);const d=H(()=>u()?"a":"button");var q={get label(){return c()},set label(e){c(e),l()},get href(){return u()},set href(e){u(e),l()},get target(){return v()},set target(e){v(e),l()},get selected(){return m()},set selected(e){m(e),l()},get icon(){return o()},set icon(e){o(e),l()},get attrs(){return b()},set attrs(e){b(e),l()}},a=V();z(a,()=>({class:{"mc-built-in-menu__item":!0,"mc-built-in-menu__item--selected":m()},...m()?{"aria-current":!0}:{},...b()}),void 0,void 0,void 0,"svelte-eugnvn");var C=j(a);return P(C,()=>f(d),!1,(e,D)=>{z(e,()=>({class:`mc-built-in-menu__${f(d)==="button"?"button":"link"}`,...f(d)==="a"&&{href:u(),target:v()}}),void 0,void 0,void 0,"svelte-eugnvn");var w=U(),k=h(w);{var E=n=>{var r=y(),g=h(r);K(g,o),s(n,r)},M=n=>{var r=y(),g=h(r);O(g,t,"icon",{},null),s(n,r)};L(k,n=>{o()?n(E):n(M,!1)})}var _=x(k,2),N=j(_,!0);B(_);var R=x(_,2);Q(R,{className:"mc-built-in-menu__icon"}),F(()=>J(N,c())),s(D,w)}),B(a),s(p,a),G(q)}customElements.define("m-built-in-menu-item",S(X,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},label:{},href:{},target:{},icon:{},attrs:{}},["icon"],[],!0));export{X as B};
+//# sourceMappingURL=BuiltInMenuItem.js.map

package/dist/components/builtinmenuitem/BuiltInMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuiltInMenuItem.js","sources":["../../../src/components/builtinmenuitem/BuiltInMenuItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-built-in-menu-item',\n    props: {\n      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import { ChevronRight20 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.\n   *\n   * @slot icon - Use this slot to insert an icon before the label.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The label used for the menu item.\n     */\n    label: string;\n    /**\n     * URL for the menu item link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /**\n     * If `true`, the menu item will be selected.\n     */\n    selected: boolean;\n    /**\n     * Use this snippet to insert an icon before the label.\n     */\n    icon?: Snippet;\n  }\n\n  let { label, href, target, selected, icon, attrs }: Props = $props();\n\n  const tag = $derived(href ? 'a' : 'button');\n</script>\n\n<li\n  class={{\n    'mc-built-in-menu__item': true,\n    'mc-built-in-menu__item--selected': selected,\n  }}\n  {...selected ? { 'aria-current': true } : {}}\n  {...attrs}\n>\n  <svelte:element\n    this={tag}\n    class={`mc-built-in-menu__${tag === 'button' ? 'button' : 'link'}`}\n    {...tag === 'a' && { href, target }}\n  >\n    {#if icon}\n      {@render icon()}\n    {:else}\n      <slot name=\"icon\" />\n    {/if}\n\n    <span class=\"mc-built-in-menu__label\">\n      {label}\n    </span>\n\n    <ChevronRight20 className=\"mc-built-in-menu__icon\" />\n  </svelte:element>\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu';\n</style>\n"],"names":["label","$.prop","$$props","href","target","selected","icon","attrs","tag","$.derived","li","root","node","$.child","$$element","$$anchor","$.get","$$render","consequent","alternate","span","$.sibling","node_1","ChevronRight20","node_4","$.reset","$.append"],"mappings":";;;;;;uJASA,oBAgCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEI,EAAIL,EAAAC,EAAA,OAAA,CAAA,EAAEK,EAAKN,EAAAC,EAAA,QAAA,CAAA,EAE1C,MAAAM,EAAGC,EAAA,IAAYN,EAAI,EAAG,IAAM,QAAQ,wSAG3CO,EAAAC,EAAA,IAAAD,eAEG,yBAA0B,GAC1B,mCAAoCL,EAAQ,MAE1CA,EAAQ,EAAA,CAAK,eAAgB,EAAI,EAAA,CAAA,KACjCE,EAAK,0CANV,IAAAK,EAAAC,EAAAH,CAAA,mBASSF,CAAG,EAAA,GAAA,CAAAM,EAAAC,IAAA,WACmB,MAAA,qBAAAC,EAAAR,CAAG,IAAK,SAAW,SAAW,MAAM,QAC5DA,CAAG,IAAK,KAAG,CAAM,KAAAL,EAAI,EAAE,OAAAC,EAAM,CAAA,2FAGtBE,CAAI,uEADVA,EAAI,EAAAW,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QAMRC,EAAIC,EAAAC,EAAA,CAAA,MAAJF,EAAI,EAAA,IAAJA,CAAI,UAAJA,EAAI,CAAA,EAIJG,EAAcC,EAAA,CAAA,UAAA,wBAAA,CAAA,YAHZxB,EAAK,CAAA,CAAA,WApBXyB,EAAAf,CAAA,EAAAgB,EAAAX,EAAAL,CAAA,MAFO"}

package/dist/components/builtinmenuitem/BuiltInMenuItem.spec.js

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import BuiltInMenuItem from './BuiltInMenuItem.svelte';
+describe('MenuItem component', () => {
+    it('renders as a button by default with the provided label', () => {
+        const { container, getByText } = render(BuiltInMenuItem, { props: { label: 'Settings' } });
+        expect(getByText('Settings')).toBeTruthy();
+        const button = container.querySelector('button');
+        expect(button).toBeTruthy();
+        expect(button?.classList.contains('mc-built-in-menu__button')).toBe(true);
+        const li = container.querySelector('li');
+        expect(li).toBeTruthy();
+        expect(li?.classList.contains('mc-built-in-menu__item')).toBe(true);
+        expect(li?.classList.contains('mc-built-in-menu__item--selected')).toBe(false);
+        expect(li?.hasAttribute('aria-current')).toBe(false);
+        expect(container.querySelector('.mc-built-in-menu__icon')).toBeTruthy();
+    });
+    it('applies selected state and aria-current when selected is true', () => {
+        const { container } = render(BuiltInMenuItem, { props: { label: 'Selected', selected: true } });
+        const li = container.querySelector('li');
+        expect(li).toBeTruthy();
+        expect(li?.classList.contains('mc-built-in-menu__item--selected')).toBe(true);
+        expect(li?.getAttribute('aria-current')).toBe('true');
+    });
+    it('renders as an anchor when tag="a" and forwards href and target', () => {
+        const { container, getByText } = render(BuiltInMenuItem, {
+            props: { label: 'Home', tag: 'a', href: '/home', target: '_blank' },
+        });
+        expect(getByText('Home')).toBeTruthy();
+        const a = container.querySelector('a');
+        expect(a).toBeTruthy();
+        expect(a?.classList.contains('mc-built-in-menu__link')).toBe(true);
+        expect(a?.getAttribute('href')).toBe('/home');
+        expect(a?.getAttribute('target')).toBe('_blank');
+    });
+});