@mozaic-ds/web-components 1.3.0 → 1.5.0

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,m as z,n as m,l as D,e 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:`/**
  * 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 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),$(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 v,p as b,a as f,b as a,t as p,f as _,g,h as x,d as u,j as d,r as c,l as h,m as y}from"../../custom-element.js";import{s as k}from"../../slot.js";var w=x('<nav aria-label="menu"><ul class="mc-built-in-menu__list svelte-9dcxnv"><!></ul></nav>');const B={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 j(s,e){b(e,!0),f(s,B);let i=a(e,"selected",15),l=a(e,"outlined",7);var o={get selected(){return i()},set selected(n){i(n),d()},get outlined(){return l()},set outlined(n){l(n),d()}},t=w(),r=u(t),m=u(r);return k(m,e,"item",{},null),c(r),c(t),p(()=>h(t,1,y({"mc-built-in-menu":!0,"mc-built-in-menu--outlined":l()}),"svelte-9dcxnv")),_(s,t),g(o)}customElements.define("m-built-in-menu",v(j,{outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},selected:{}},["item"],[],!0));
+//# 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  /**\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\n  let { selected = $bindable(), outlined }: 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    <slot name=\"item\" />\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","nav","root","ul","$.child","$.reset","$.append","$$anchor"],"mappings":";;0YASA,oBAiBQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAQF,EAAAC,EAAA,WAAA,CAAA,oHAGvCE,EAAAC,EAAA,EAOEC,EAAEC,EAPJH,CAAA,MAOEE,CAAE,iCAAFA,CAAE,EAPJE,EAAAJ,CAAA,UAAAA,OAEG,mBAAoB,GACpB,6BAA8BD,EAAQ,sBAHzCM,EAAAC,EAAAN,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: { 'BuiltInMenuItem': '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,133 @@
+<svelte:options
+  customElement={{
+    tag: 'm-built-in-menu',
+    props: {
+      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  /**
+   * 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;
+  }
+
+  let { selected = $bindable(), outlined }: 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">
+    <slot name="item" />
+  </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,36 @@
+/**
+ * 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;
+}
+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":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,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,17 @@
+# `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` |   |
+
+## 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 I,p as C,a as D,b as n,n as v,y as E,s as _,t as M,f,g as N,h as k,v as R,d as h,j as i,r as p,e as S}from"../../custom-element.js";import{s as T}from"../../slot.js";import{e as q}from"../../svelte-element.js";import{a as w}from"../../attributes.js";import{s as A}from"../../Condition20.js";import"../../branches.js";var F=k('<!> <span class="mc-built-in-menu__label svelte-eugnvn"> </span> <!>',1),G=k("<li><!></li>");const H={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 J(b,t){C(t,!0),D(b,H);let m=n(t,"label",7),l=n(t,"href",7),o=n(t,"target",7),r=n(t,"selected",7),s=n(t,"attrs",7);const a=R(()=>l()?"a":"button");var x={get label(){return m()},set label(e){m(e),i()},get href(){return l()},set href(e){l(e),i()},get target(){return o()},set target(e){o(e),i()},get selected(){return r()},set selected(e){r(e),i()},get attrs(){return s()},set attrs(e){s(e),i()}},u=G();w(u,()=>({class:{"mc-built-in-menu__item":!0,"mc-built-in-menu__item--selected":r()},...r()?{"aria-current":!0}:{},...s()}),void 0,void 0,void 0,"svelte-eugnvn");var y=h(u);return q(y,()=>v(a),!1,(e,j)=>{w(e,()=>({class:`mc-built-in-menu__${v(a)==="button"?"button":"link"}`,...v(a)==="a"&&{href:l(),target:o()}}),void 0,void 0,void 0,"svelte-eugnvn");var d=F(),g=E(d);T(g,t,"icon",{},null);var c=_(g,2),z=h(c,!0);p(c);var B=_(c,2);A(B,{className:"mc-built-in-menu__icon"}),M(()=>S(z,m())),f(j,d)}),p(u),f(b,u),N(x)}customElements.define("m-built-in-menu-item",I(J,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},label:{},href:{},target:{},attrs:{}},["icon"],[],!0));
+//# 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 { 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\n  let { label, href, target, selected, 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    <slot name=\"icon\" />\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","attrs","tag","$.derived","li","root","node","$.child","$$element","$$anchor","$.get","span","$.sibling","node_1","ChevronRight20","node_2","$.reset","$.append"],"mappings":";;;;;;uJASA,oBA2BQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EAEpC,MAAAK,EAAGC,EAAA,IAAYL,EAAI,EAAG,IAAM,QAAQ,2PAG3CM,EAAAC,EAAA,IAAAD,eAEG,yBAA0B,GAC1B,mCAAoCJ,EAAQ,MAE1CA,EAAQ,EAAA,CAAK,eAAgB,EAAI,EAAA,CAAA,KACjCC,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,KAAAJ,EAAI,EAAE,OAAAC,EAAM,CAAA,qFAIhCY,EAAIC,EAAAC,EAAA,CAAA,MAAJF,EAAI,EAAA,IAAJA,CAAI,UAAJA,EAAI,CAAA,EAIJG,EAAcC,EAAA,CAAA,UAAA,wBAAA,CAAA,YAHZpB,EAAK,CAAA,CAAA,WAhBXqB,EAAAZ,CAAA,EAAAa,EAAAR,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');
+    });
+});

package/dist/components/builtinmenuitem/BuiltInMenuItem.svelte

@@ -0,0 +1,156 @@
+<svelte:options
+  customElement={{
+    tag: 'm-built-in-menu-item',
+    props: {
+      selected: { reflect: true, type: 'Boolean', attribute: 'selected' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { ChevronRight20 } from '@mozaic-ds/icons-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 icon - Use this slot to insert an icon before the label.
+   */
+  interface Props {
+    [key: string]: any;
+    /**
+     * The label used for the menu item.
+     */
+    label: string;
+    /**
+     * URL for the menu item link.
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * If `true`, the menu item will be selected.
+     */
+    selected: boolean;
+  }
+
+  let { label, href, target, selected, attrs }: Props = $props();
+
+  const tag = $derived(href ? 'a' : 'button');
+</script>
+
+<li
+  class={{
+    'mc-built-in-menu__item': true,
+    'mc-built-in-menu__item--selected': selected,
+  }}
+  {...selected ? { 'aria-current': true } : {}}
+  {...attrs}
+>
+  <svelte:element
+    this={tag}
+    class={`mc-built-in-menu__${tag === 'button' ? 'button' : 'link'}`}
+    {...tag === 'a' && { href, target }}
+  >
+    <slot name="icon" />
+
+    <span class="mc-built-in-menu__label">
+      {label}
+    </span>
+
+    <ChevronRight20 className="mc-built-in-menu__icon" />
+  </svelte:element>
+</li>
+
+<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/builtinmenuitem/BuiltInMenuItem.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 icon - Use this slot to insert an icon before the label.
+ */
+interface Props {
+    [key: string]: any;
+    /**
+     * The label used for the menu item.
+     */
+    label: string;
+    /**
+     * URL for the menu item link.
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * If `true`, the menu item will be selected.
+     */
+    selected: boolean;
+}
+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 BuiltInMenuItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type BuiltInMenuItem = InstanceType<typeof BuiltInMenuItem>;
+export default BuiltInMenuItem;
+//# sourceMappingURL=BuiltInMenuItem.svelte.d.ts.map