@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/actionlistbox/ActionListbox.svelte

@@ -1,6 +1,9 @@
 <svelte:options
   customElement={{
     tag: 'm-action-listbox',
+    props: {
+      open: { reflect: true, type: 'Boolean', attribute: 'open' },
+    },
     extend: customElementForwardEvents,
   }}
 />
@@ -9,27 +12,53 @@
   import IconButton from '../iconbutton/IconButton.svelte';
   import { Cross24 } from '@mozaic-ds/icons-svelte';
   import { customElementForwardEvents } from '../../utils';
+  import { onMount } from 'svelte';
+  import type { ActionListboxItem } from '../actionlistboxitem/ActionListboxItem.svelte';
+  import type { Button } from '../button/Button.svelte';
 
   /**
    * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
    *
    * @slot item - The content displayed in the listbox item.
+   * @slot activator - The trigger used to toggle the listbox. It should contain one Button or IconButton.
    * @event close {CustomEvent<void>} - Emits when the close button is clicked.
    */
   interface Props {
+    /**
+     * If `true`, displays the listbox when using the activator slot.
+     */
+    open?: boolean;
     /**
      * title displayed in mobile version.
      */
     title?: string;
+    /**
+     * Defines the position of the listbox relative to its trigger or container.
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
     /**
      * Callback to trigger on close button click.
      */
     onclose?: () => void;
   }
 
-  let { title, onclose }: Props = $props();
+  let { open = $bindable(), title, position = 'bottom', onclose }: Props = $props();
+
+  // TODO: Remove when typescript is up to date
+  type PopoverOptions = {
+    source: HTMLElement;
+  };
+
+  type Popover = {
+    showPopover: (options?: PopoverOptions) => void;
+    hidePopover: (options?: PopoverOptions) => void;
+  };
+
+  const id = crypto.randomUUID();
 
   let element: HTMLElement;
+  let listbox: HTMLElement;
+  let activator: HTMLElement | null = $state(null);
 
   function handleClose() {
     onclose?.();
@@ -39,11 +68,94 @@
       composed: true,
     });
     element.dispatchEvent(event);
+
+    open = false;
+  }
+
+  function getFocusableElements(): HTMLElement[] {
+    const slot = listbox?.querySelector('slot[name="item"]') as HTMLSlotElement;
+    if (!slot) return [];
+
+    const assignedElements = slot.assignedElements() as HTMLElement[];
+    return assignedElements.filter((el) => {
+      return !el.hasAttribute('disabled') && el.getAttribute('disabled') !== 'true';
+    });
+  }
+
+  function focusListItem(first?: boolean) {
+    const items = getFocusableElements();
+    if (!items.length) return;
+
+    let focusedIndex = 0;
+
+    if (!first) {
+      const currentIndex = items.findIndex((item) => item === document.activeElement);
+
+      focusedIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+    }
+
+    (items[focusedIndex] as ActionListboxItem)?.focus();
+  }
+
+  function toggleListbox() {
+    if (!listbox || !activator) return;
+
+    if (open) {
+      (listbox as Popover).showPopover({ source: activator });
+      focusListItem(true);
+    } else {
+      (listbox as Popover).hidePopover({ source: activator });
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!open) return;
+
+    const path = event.composedPath ? event.composedPath() : [];
+    if (!path.includes(element) && !path.includes(activator!)) {
+      open = false;
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    event.preventDefault();
+    if (event.key === 'Tab') {
+      focusListItem();
+    }
+
+    if (event.key === 'Escape') {
+      open = false;
+      const slot = activator?.querySelector('slot[name="activator"]') as HTMLSlotElement;
+      const activatorBtn = slot.assignedElements()[0];
+      (activatorBtn as Element & Button).focus();
+    }
   }
+
+  $effect(toggleListbox);
+
+  onMount(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
 </script>
 
-<div bind:this={element} class="mc-listbox">
-  <div class="mc-listbox__content">
+<div
+  bind:this={element}
+  class={{
+    'mc-listbox': true,
+    [`mc-listbox--${position}`]: true,
+  }}
+>
+  <div
+    bind:this={listbox}
+    class="mc-listbox__content"
+    {...$$slots.activator
+      ? { id, popover: 'manual', role: 'dialog', tabindex: 0, onkeydown: onKeydown }
+      : {}}
+  >
     <div class="mc-listbox__header">
       {#if title}
         <h3 class="mc-listbox__title">{title}</h3>
@@ -63,10 +175,16 @@
   </div>
 </div>
 
+{#if $$slots.activator}
+  <div bind:this={activator}>
+    <slot name="activator" />
+  </div>
+{/if}
+
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-.mc-listbox {
+.mc-listbox:has(.mc-listbox__content:not([popover])), .mc-listbox:has(.mc-listbox__content:popover-open) {
   position: fixed;
   inset: 0;
   display: flex;
@@ -82,17 +200,17 @@
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
   z-index: var(--overlay-z-index, 2);
 }
-.mc-listbox.is-visible {
+.mc-listbox:has(.mc-listbox__content:not([popover])).is-visible, .mc-listbox:has(.mc-listbox__content:popover-open).is-visible {
   opacity: 1;
   pointer-events: all;
   transition: opacity 0.4s ease, visibility 0ms;
   visibility: visible;
 }
-.mc-listbox {
+.mc-listbox:has(.mc-listbox__content:not([popover])), .mc-listbox:has(.mc-listbox__content:popover-open) {
   opacity: 1;
 }
 @media (width >= 680px) {
-  .mc-listbox {
+  .mc-listbox:has(.mc-listbox__content:not([popover])), .mc-listbox:has(.mc-listbox__content:popover-open) {
     position: relative;
     display: block;
     padding: 0;
@@ -141,6 +259,28 @@
 .mc-listbox__body {
   overflow: hidden;
 }
+@media (width >= 680px) {
+  .mc-listbox--top .mc-listbox__content {
+    margin: 0 0 8px;
+    inset: auto;
+    position-area: span-right top;
+  }
+  .mc-listbox--bottom .mc-listbox__content {
+    margin: 8px 0 0;
+    inset: auto;
+    position-area: span-right bottom;
+  }
+  .mc-listbox--left .mc-listbox__content {
+    margin: 0 8px 0 0;
+    inset: auto;
+    position-area: span-bottom left;
+  }
+  .mc-listbox--right .mc-listbox__content {
+    margin: 0 0 0 8px;
+    inset: auto;
+    position-area: span-bottom right;
+  }
+}
 
 .mc-action-list {
   padding: 0.5rem 0.5rem;
@@ -150,6 +290,7 @@
   height: 2.5rem;
   cursor: pointer;
   border-radius: var(--border-radius-s, 0.25rem);
+  flex-grow: 1;
 }
 .mc-action-list__element:hover {
   background-color: var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));
@@ -163,9 +304,6 @@
 .mc-action-list__element--danger:hover {
   background-color: var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));
 }
-.mc-action-list__element--disabled {
-  cursor: not-allowed;
-}
 .mc-action-list__element--disabled .mc-action-list__text {
   color: var(--action-listbox-color-text-disabled, #b3b3b3);
 }
@@ -175,8 +313,12 @@
 .mc-action-list__element--disabled:hover {
   background-color: transparent;
 }
+.mc-action-list__element--disabled button {
+  cursor: not-allowed;
+}
 .mc-action-list__button {
   background-color: transparent;
+  color: var(--action-listbox-color-text-default, #000000);
   border: none;
   display: flex;
   align-items: center;
@@ -187,11 +329,15 @@
   width: 100%;
   height: 100%;
 }
+.mc-action-list__button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
 .mc-action-list__text {
   font-size: var(--font-size-150, 1rem);
   font-weight: var(--font-weight-regular, 400);
   line-height: var(--line-height-s, 1.3);
-  color: var(--action-listbox-color-text-default, #000000);
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;

package/dist/components/actionlistbox/ActionListbox.svelte.d.ts

@@ -2,13 +2,22 @@
  * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
  *
  * @slot item - The content displayed in the listbox item.
+ * @slot activator - The trigger used to toggle the listbox. It should contain one Button or IconButton.
  * @event close {CustomEvent<void>} - Emits when the close button is clicked.
  */
 interface Props {
+    /**
+     * If `true`, displays the listbox when using the activator slot.
+     */
+    open?: boolean;
     /**
      * title displayed in mobile version.
      */
     title?: string;
+    /**
+     * Defines the position of the listbox relative to its trigger or container.
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
     /**
      * Callback to trigger on close button click.
      */
@@ -31,7 +40,8 @@ declare const ActionListbox: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
     item: {};
-}, {}, "">;
+    activator: {};
+}, {}, "open">;
 type ActionListbox = InstanceType<typeof ActionListbox>;
 export default ActionListbox;
 //# sourceMappingURL=ActionListbox.svelte.d.ts.map

package/dist/components/actionlistbox/ActionListbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/actionlistbox/ActionListbox.svelte.ts"],"names":[],"mappings":"AAQE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAoDH,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,aAAa;;;;UAAqF,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ActionListbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/actionlistbox/ActionListbox.svelte.ts"],"names":[],"mappings":"AAWE;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA4JH,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,aAAa;;;;;cAAqF,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/components/actionlistbox/README.md

@@ -6,7 +6,9 @@ An action list is a contextual menu that presents a list of available actions re
 
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
+| `open` | If `true`, displays the listbox when using the activator slot. | `boolean` | `$bindable()` |
 | `title` | title displayed in mobile version. | `string` |   |
+| `position` | Defines the position of the listbox relative to its trigger or container. | `'top'` `'bottom'` `'left'` `'right'` | `bottom` |
 | `onclose` | Callback to trigger on close button click. | `() => void` |   |
 
 ## Slots
@@ -14,6 +16,7 @@ An action list is a contextual menu that presents a list of available actions re
 | Name | Description |
 |------|-------------|
 | `item` | The content displayed in the listbox item. |
+| `activator` | The trigger used to toggle the listbox. It should contain one Button or IconButton. |
 
 ## Events
 

package/dist/components/actionlistboxitem/ActionListboxItem.js

@@ -1,4 +1,4 @@
-import{o as F,c as I,p as L,a as S,b as a,y as q,s as w,t as B,f as b,g as C,h as g,d as i,j as l,r as o,l as G,m as H,e as J}from"../../custom-element.js";import{i as y}from"../../if.js";import{a as K,s as M}from"../../slot.js";import{c as N}from"../../custom-element-forward-events.js";import{D as O}from"../divider/Divider.js";import"../../branches.js";import"../../attributes.js";var P=g('<span class="mc-action-list__divider svelte-rf7fkv"><!></span>'),Q=g('<span class="mc-action-list__icon svelte-rf7fkv"><!></span>'),R=g('<!> <li role="menuitem"><button type="button" class="mc-action-list__button svelte-rf7fkv"><!> <p class="mc-action-list__text svelte-rf7fkv"> </p></button></li>',1);const T={hash:"svelte-rf7fkv",code:`/**
+import{o as L,c as S,e as q,a as B,p as i,x as C,k as y,t as G,u as H,b as u,d as J,f as k,j as a,i as l,r as s,s as K,h as M,m as N}from"../../custom-element.js";import{i as E}from"../../if.js";import{a as O,s as P}from"../../slot.js";import{b as Q}from"../../this.js";import{c as R}from"../../custom-element-forward-events.js";import{D as T}from"../divider/Divider.js";import"../../branches.js";import"../../attributes.js";var U=k('<span class="mc-action-list__divider svelte-rf7fkv"><!></span>'),V=k('<span class="mc-action-list__icon svelte-rf7fkv"><!></span>'),W=k('<!> <li role="menuitem"><button type="button" class="mc-action-list__button svelte-rf7fkv"><!> <p class="mc-action-list__text svelte-rf7fkv"> </p></button></li>',1);const X={hash:"svelte-rf7fkv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-action-list__element.svelte-rf7fkv {height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, 0.25rem);}.mc-action-list__element.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));}.mc-action-list__element--disabled.svelte-rf7fkv {cursor:not-allowed;}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv:hover {background-color:transparent;}.mc-action-list__button.svelte-rf7fkv {background-color:transparent;border:none;display:flex;align-items:center;gap:0.25rem;padding:0;padding:0 0.25rem;cursor:pointer;width:100%;height:100%;}.mc-action-list__text.svelte-rf7fkv {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}.mc-action-list__icon.svelte-rf7fkv {width:1.25rem;height:1.25rem;}.mc-action-list__divider.svelte-rf7fkv {margin:0.5rem 0;}.mc-action-list__divider.svelte-rf7fkv {display:block;}`};function U(k,t){const z=K(t);L(t,!0),S(k,T);let s=a(t,"label",7),n=a(t,"disabled",7),c=a(t,"appearance",7),v=a(t,"divider",7),d=a(t,"onclick",7);var D={get label(){return s()},set label(e){s(e),l()},get disabled(){return n()},set disabled(e){n(e),l()},get appearance(){return c()},set appearance(e){c(e),l()},get divider(){return v()},set divider(e){v(e),l()},get onclick(){return d()},set onclick(e){d(e),l()}},p=R(),u=q(p);{var E=e=>{var r=P(),_=i(r);O(_,{}),o(r),b(e,r)};y(u,e=>{v()&&e(E)})}var f=w(u,2),m=i(f);m.__click=function(...e){d()?.apply(this,e)};var h=i(m);{var j=e=>{var r=Q(),_=i(r);M(_,t,"icon",{},null),o(r),b(e,r)};y(h,e=>{z.icon&&e(j)})}var x=w(h,2),A=i(x,!0);return o(x),o(m),o(f),B(()=>{G(f,1,H({"mc-action-list__element":!0,"mc-action-list__element--danger":c()==="danger","mc-action-list__element--disabled":n()}),"svelte-rf7fkv"),J(A,s())}),b(k,p),C(D)}F(["click"]);customElements.define("m-action-listbox-item",I(U,{label:{},disabled:{},appearance:{},divider:{},onclick:{}},["icon"],[],!0,N));
+ */.mc-action-list__element.svelte-rf7fkv {height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, 0.25rem);flex-grow:1;}.mc-action-list__element.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-rf7fkv:hover {background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__text:where(.svelte-rf7fkv) {color:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv .mc-action-list__icon:where(.svelte-rf7fkv) {fill:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-rf7fkv:hover {background-color:transparent;}.mc-action-list__element--disabled.svelte-rf7fkv button:where(.svelte-rf7fkv) {cursor:not-allowed;}.mc-action-list__button.svelte-rf7fkv {background-color:transparent;color:var(--action-listbox-color-text-default, #000000);border:none;display:flex;align-items:center;gap:0.25rem;padding:0;padding:0 0.25rem;cursor:pointer;width:100%;height:100%;}.mc-action-list__button.svelte-rf7fkv:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-action-list__text.svelte-rf7fkv {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}.mc-action-list__icon.svelte-rf7fkv {width:1.25rem;height:1.25rem;}.mc-action-list__divider.svelte-rf7fkv {margin:0.5rem 0;}.mc-action-list__divider.svelte-rf7fkv {display:block;}`};function Y(p,t){const z=O(t);q(t,!0),B(p,X);let c=i(t,"label",7),n=i(t,"disabled",7),v=i(t,"appearance",7),f=i(t,"divider",7),d=i(t,"onclick",7),m;function D(){m.focus()}var j={focus:D,get label(){return c()},set label(e){c(e),l()},get disabled(){return n()},set disabled(e){n(e),l()},get appearance(){return v()},set appearance(e){v(e),l()},get divider(){return f()},set divider(e){f(e),l()},get onclick(){return d()},set onclick(e){d(e),l()}},g=W(),h=C(g);{var A=e=>{var r=U(),b=a(r);T(b,{}),s(r),u(e,r)};E(h,e=>{f()&&e(A)})}var _=y(h,2),o=a(_),x=a(o);{var F=e=>{var r=V(),b=a(r);P(b,t,"icon",{},null),s(r),u(e,r)};E(x,e=>{z.icon&&e(F)})}var w=y(x,2),I=a(w,!0);return s(w),s(o),Q(o,e=>m=e,()=>m),s(_),G(()=>{K(_,1,M({"mc-action-list__element":!0,"mc-action-list__element--danger":v()==="danger","mc-action-list__element--disabled":n()}),"svelte-rf7fkv"),o.disabled=n(),N(I,c())}),H("click",o,function(...e){d()?.apply(this,e)}),u(p,g),J(j)}L(["click"]);customElements.define("m-action-listbox-item",S(Y,{label:{},disabled:{},appearance:{},divider:{},onclick:{}},["icon"],["focus"],{mode:"open"},R));
 //# sourceMappingURL=ActionListboxItem.js.map

package/dist/components/actionlistboxitem/ActionListboxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListboxItem.js","sources":["../../../src/components/actionlistboxitem/ActionListboxItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-action-listbox-item',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.\n   *\n   *  @slot icon - Use this slot to display an icon in the listbox item.\n   */\n  import Divider from '../divider/Divider.svelte';\n\n  interface Props {\n    /**\n     * The label displayed for the item.\n     */\n    label: string;\n    /**\n     * If `true`, the item will be disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Allows to define the item appearance.\n     */\n    appearance?: 'standard' | 'danger';\n    /**\n     * Add a divider on top of the item.\n     */\n    divider?: boolean;\n    /**\n     * Callback to trigger on item click.\n     */\n    onclick?: () => void;\n  }\n\n  let { label, disabled, appearance, divider, onclick }: Props = $props();\n</script>\n\n{#if divider}\n  <span class=\"mc-action-list__divider\">\n    <Divider></Divider>\n  </span>\n{/if}\n<li\n  class={{\n    'mc-action-list__element': true,\n    'mc-action-list__element--danger': appearance === 'danger',\n    'mc-action-list__element--disabled': disabled,\n  }}\n  role=\"menuitem\"\n>\n  <button type=\"button\" class=\"mc-action-list__button\" {onclick}>\n    {#if $$slots.icon}\n      <span class=\"mc-action-list__icon\">\n        <slot name=\"icon\" />\n      </span>\n    {/if}\n\n    <p class=\"mc-action-list__text\">{label}</p>\n  </button>\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/action-list';\n\n  .mc-action-list__divider {\n    display: block;\n  }\n</style>\n"],"names":["label","$.prop","$$props","disabled","appearance","divider","onclick","span","root_1","Divider","node_1","$$render","consequent","li","$.sibling","node","button","$.child","$$args","span_1","root_2","$$slots","consequent_1","p","node_2","$.reset","customElementForwardEvents"],"mappings":";;gzDAOA,iCAgCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAEE,EAAUH,EAAAC,EAAA,aAAA,CAAA,EAAEG,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAOL,EAAAC,EAAA,UAAA,CAAA,ySAIlDK,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAOC,EAAA,EAAA,IADTH,CAAI,MAAJA,CAAI,WADFF,EAAO,GAAAM,EAAAC,CAAA,IAKX,IAAAC,EAAAC,EAAAC,EAAA,CAAA,EAQEC,EAAMC,EARRJ,CAAA,EAQEG,EAAqD,QAAO,YAAAE,EAAA,CAAPZ,KAAO,MAAA,KAAAY,CAAA,WAA5DF,CAAM,iBAEFG,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFE,EAAQ,MAAIV,EAAAW,CAAA,QAMhBC,EAACT,EAAAU,EAAA,CAAA,MAADD,EAAC,EAAA,WAADA,CAAC,IAPHP,CAAM,EARRS,EAAAZ,CAAA,WAAAA,OAEG,0BAA2B,GAC3B,kCAAmCT,EAAU,IAAK,SAClD,oCAAqCD,EAAQ,yBAWZH,GAAK,eAtBlC,0IArCI0B"}
+{"version":3,"file":"ActionListboxItem.js","sources":["../../../src/components/actionlistboxitem/ActionListboxItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-action-listbox-item',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.\n   *\n   *  @slot icon - Use this slot to display an icon in the listbox item.\n   */\n  import Divider from '../divider/Divider.svelte';\n\n  export type ActionListboxItem = {\n    focus: () => void;\n  };\n\n  interface Props {\n    /**\n     * The label displayed for the item.\n     */\n    label: string;\n    /**\n     * If `true`, the item will be disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Allows to define the item appearance.\n     */\n    appearance?: 'standard' | 'danger';\n    /**\n     * Add a divider on top of the item.\n     */\n    divider?: boolean;\n    /**\n     * Callback to trigger on item click.\n     */\n    onclick?: () => void;\n  }\n\n  let { label, disabled, appearance, divider, onclick }: Props = $props();\n\n  let buttonEl: HTMLButtonElement;\n\n  export function focus() {\n    buttonEl.focus();\n  }\n</script>\n\n{#if divider}\n  <span class=\"mc-action-list__divider\">\n    <Divider></Divider>\n  </span>\n{/if}\n<li\n  class={{\n    'mc-action-list__element': true,\n    'mc-action-list__element--danger': appearance === 'danger',\n    'mc-action-list__element--disabled': disabled,\n  }}\n  role=\"menuitem\"\n>\n  <button bind:this={buttonEl} type=\"button\" class=\"mc-action-list__button\" {disabled} {onclick}>\n    {#if $$slots.icon}\n      <span class=\"mc-action-list__icon\">\n        <slot name=\"icon\" />\n      </span>\n    {/if}\n\n    <p class=\"mc-action-list__text\">{label}</p>\n  </button>\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/action-list';\n\n  .mc-action-list__divider {\n    display: block;\n  }\n</style>\n"],"names":["label","$.prop","$$props","disabled","appearance","divider","onclick","buttonEl","focus","span","root_1","Divider","node_1","$$render","consequent","li","$.sibling","node","button","$.child","span_1","root_2","$$slots","consequent_1","p","node_2","$$value","$.reset","$$args","customElementForwardEvents"],"mappings":";;unEAOA,iCAoCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAEE,EAAUH,EAAAC,EAAA,aAAA,CAAA,EAAEG,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAOL,EAAAC,EAAA,UAAA,CAAA,EAE/CK,EAEY,SAAAC,GAAQ,CACtBD,EAAS,MAAK,CAChB,gTAICE,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAOC,EAAA,EAAA,IADTH,CAAI,MAAJA,CAAI,WADFJ,EAAO,GAAAQ,EAAAC,CAAA,IAKX,IAAAC,EAAAC,EAAAC,EAAA,CAAA,EAQEC,EAAMC,EARRJ,CAAA,MAQEG,CAAM,iBAEFE,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFE,EAAQ,MAAIT,EAAAU,CAAA,QAMhBC,EAACR,EAAAS,EAAA,CAAA,MAADD,EAAC,EAAA,WAADA,CAAC,IAPHN,CAAM,IAANA,EAAMQ,GAAYnB,EAAQmB,EAAA,IAARnB,CAAQ,EAR5BoB,EAAAZ,CAAA,WAAAA,OAEG,0BAA2B,GAC3B,kCAAmCX,EAAU,IAAK,SAClD,oCAAqCD,EAAQ,qBAI9Ce,WAA0Ef,EAAQ,MAOhDH,GAAK,cAPvCkB,EAAM,YAAAU,EAAA,CAA+EtB,KAAO,MAAA,KAAAsB,CAAA,eAfvF,4JA/CIC"}

package/dist/components/actionlistboxitem/ActionListboxItem.svelte

@@ -14,6 +14,10 @@
    */
   import Divider from '../divider/Divider.svelte';
 
+  export type ActionListboxItem = {
+    focus: () => void;
+  };
+
   interface Props {
     /**
      * The label displayed for the item.
@@ -38,6 +42,12 @@
   }
 
   let { label, disabled, appearance, divider, onclick }: Props = $props();
+
+  let buttonEl: HTMLButtonElement;
+
+  export function focus() {
+    buttonEl.focus();
+  }
 </script>
 
 {#if divider}
@@ -53,7 +63,7 @@
   }}
   role="menuitem"
 >
-  <button type="button" class="mc-action-list__button" {onclick}>
+  <button bind:this={buttonEl} type="button" class="mc-action-list__button" {disabled} {onclick}>
     {#if $$slots.icon}
       <span class="mc-action-list__icon">
         <slot name="icon" />
@@ -75,6 +85,7 @@
   height: 2.5rem;
   cursor: pointer;
   border-radius: var(--border-radius-s, 0.25rem);
+  flex-grow: 1;
 }
 .mc-action-list__element:hover {
   background-color: var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));
@@ -88,9 +99,6 @@
 .mc-action-list__element--danger:hover {
   background-color: var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));
 }
-.mc-action-list__element--disabled {
-  cursor: not-allowed;
-}
 .mc-action-list__element--disabled .mc-action-list__text {
   color: var(--action-listbox-color-text-disabled, #b3b3b3);
 }
@@ -100,8 +108,12 @@
 .mc-action-list__element--disabled:hover {
   background-color: transparent;
 }
+.mc-action-list__element--disabled button {
+  cursor: not-allowed;
+}
 .mc-action-list__button {
   background-color: transparent;
+  color: var(--action-listbox-color-text-default, #000000);
   border: none;
   display: flex;
   align-items: center;
@@ -112,11 +124,15 @@
   width: 100%;
   height: 100%;
 }
+.mc-action-list__button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
 .mc-action-list__text {
   font-size: var(--font-size-150, 1rem);
   font-weight: var(--font-weight-regular, 400);
   line-height: var(--line-height-s, 1.3);
-  color: var(--action-listbox-color-text-default, #000000);
   text-decoration: none;
   white-space: nowrap;
   overflow: hidden;

package/dist/components/actionlistboxitem/ActionListboxItem.svelte.d.ts

@@ -1,3 +1,6 @@
+export type ActionListboxItem = {
+    focus: () => void;
+};
 interface Props {
     /**
      * The label displayed for the item.
@@ -37,7 +40,9 @@ declare const ActionListboxItem: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
     icon: {};
-}, {}, "">;
+}, {
+    focus: () => void;
+}, "">;
 type ActionListboxItem = InstanceType<typeof ActionListboxItem>;
 export default ActionListboxItem;
 //# sourceMappingURL=ActionListboxItem.svelte.d.ts.map

package/dist/components/actionlistboxitem/ActionListboxItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListboxItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/actionlistboxitem/ActionListboxItem.svelte.ts"],"names":[],"mappings":"AAYE,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAwCH,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,iBAAiB;;;;UAAqF,CAAC;AAC3F,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ActionListboxItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/actionlistboxitem/ActionListboxItem.svelte.ts"],"names":[],"mappings":"AAYE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA+CH,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,iBAAiB;;;;;;MAAqF,CAAC;AAC3F,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/components/avatar/Avatar.js

@@ -1,4 +1,4 @@
-import{c as l,p as d,a as c,b as m,f as v,g as f,h,i as u,d as g,j as b,r as p}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as z}from"../../attributes.js";var y=h("<div><!></div>");const _={hash:"svelte-1g4aw6b",code:`/**
+import{c as d,e as l,a as m,p as c,b as v,d as f,f as h,n as u,j as g,i as b,r as p}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as z}from"../../attributes.js";var y=h("<div><!></div>");const _={hash:"svelte-1g4aw6b",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-avatar.svelte-1g4aw6b {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:var(--border-radius-full, 100%);background:var(--color-background-secondary, #eff1f6);color:var(--color-text-secondary, #404040);font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);text-transform:uppercase;}.mc-avatar--m.svelte-1g4aw6b {width:3rem;height:3rem;font-size:var(--font-size-200, 1.125rem);}.mc-avatar--l.svelte-1g4aw6b {width:4rem;height:4rem;font-size:var(--font-size-300, 1.5rem);}.svelte-1g4aw6b::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function $(s,e){d(e,!0),c(s,_);let t=m(e,"size",7,"s"),r=u(e,["$$slots","$$events","$$legacy","$$host","size"]);var o={get size(){return t()},set size(n="s"){t(n),b()}},a=y();z(a,()=>({class:["mc-avatar",t()&&`mc-avatar--${t()}`],...r}),void 0,void 0,void 0,"svelte-1g4aw6b");var i=g(a);return w(i,e,"default",{},null),p(a),v(s,a),f(o)}customElements.define("m-avatar",l($,{size:{}},["default"],[],!0));
+ */.mc-avatar.svelte-1g4aw6b {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:var(--border-radius-full, 100%);background:var(--color-background-secondary, #eff1f6);color:var(--color-text-secondary, #404040);font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);text-transform:uppercase;}.mc-avatar--m.svelte-1g4aw6b {width:3rem;height:3rem;font-size:var(--font-size-200, 1.125rem);}.mc-avatar--l.svelte-1g4aw6b {width:4rem;height:4rem;font-size:var(--font-size-300, 1.5rem);}.svelte-1g4aw6b::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function $(s,e){l(e,!0),m(s,_);let t=c(e,"size",7,"s"),r=u(e,["$$slots","$$events","$$legacy","$$host","size"]);var o={get size(){return t()},set size(n="s"){t(n),b()}},a=y();z(a,()=>({class:["mc-avatar",t()&&`mc-avatar--${t()}`],...r}),void 0,void 0,void 0,"svelte-1g4aw6b");var i=g(a);return w(i,e,"default",{},null),p(a),v(s,a),f(o)}customElements.define("m-avatar",d($,{size:{}},["default"],[],{mode:"open"}));
 //# sourceMappingURL=Avatar.js.map

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,6 @@
-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:`/**
+import{c as B,e as C,a as L,p as f,b as _,d as D,f as g,n as E,j as s,i as p,r as l,k as R,t as S,h as q,l as h,s as A,m as F}from"../../custom-element.js";import{i as G}from"../../if.js";import{e as H,i as I}from"../../each.js";import{a as J,s as k}from"../../attributes.js";import{z as K}from"../../Condition20.js";import"../../branches.js";var M=g('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><!> <span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),N=g('<nav><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const O={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=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));
+ */.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;}
+@media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1ihiex7:nth-last-child(2) .mc-link__icon:where(.svelte-1ihiex7) {transform:rotate(180deg);}.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-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 P(d,n){C(n,!0),L(d,O);let i=f(n,"appearance",7,"standard"),a=f(n,"links",7),w=E(n,["$$slots","$$events","$$legacy","$$host","appearance","links"]);const y=e=>e===a().length-1;var $={get appearance(){return i()},set appearance(e="standard"){i(e),p()},get links(){return a()},set links(e){a(e),p()}},c=N();J(c,()=>({class:`mc-breadcrumb mc-breadcrumb--${i()}`,"aria-label":"Breadcrumb",...w}),void 0,void 0,void 0,"svelte-1ihiex7");var v=s(c);return H(v,21,a,I,(e,o,u)=>{var m=M(),r=s(m),b=s(r);{var z=t=>{K(t,{class:"mc-link__icon"})};G(b,t=>{u!==0&&t(z)})}var x=R(b,2),j=s(x,!0);l(x),l(r),l(m),S(t=>{k(r,"href",h(o).href),k(r,"target",h(o).target),A(r,1,t,"svelte-1ihiex7"),F(j,h(o).label)},[()=>q(["mc-link","mc-link--m","mc-link--inline",i()&&`mc-link--${i()}`,y(u)&&"mc-breadcrumb__current"])]),_(e,m)}),l(v),l(c),_(d,c),D($)}customElements.define("m-breadcrumb",B(P,{appearance:{},links:{}},[],[],{mode:"open"}));
 //# 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    [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"}
+{"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  import { ChevronRight20 } from \"@mozaic-ds/icons-svelte\";\n\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          {#if index !== 0}\n            <ChevronRight20 class=\"mc-link__icon\"/>\n          {/if}\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","node","ChevronRight20","$$render","consequent","span","$.sibling","$.reset","$.get","$.set_class","$0","$.set_text","text"],"mappings":";;;;0/EAMA,gBA+BQ,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,EACAI,EAAAD,EAAAD,CAAA,aAYIG,EAAcP,EAAA,CAAA,MAAA,eAAA,CAAA,WADZL,IAAU,GAACa,EAAAC,CAAA,QAGfC,EAAIC,EAAAL,EAAA,CAAA,MAAJI,EAAI,EAAA,IAAJA,CAAI,EAdNE,EAAAR,CAAA,IADFF,CAAE,UACAE,EAAA,OAAAS,EACOZ,CAAI,EAAC,IAAI,IADhBG,EAAA,SAAAS,EAESZ,CAAI,EAAC,MAAM,EAFpBa,EAAAV,EAAA,EAAAW,EAAA,gBAAA,EAc+BC,EAAAC,EAAAJ,EAAAZ,CAAI,EAAC,KAAK,WAVtC,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

@@ -5,6 +5,8 @@
 />
 
 <script lang="ts">
+  import { ChevronRight20 } from "@mozaic-ds/icons-svelte";
+
   /**
    * 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.
    */
@@ -53,6 +55,9 @@
             isLastLink(index) && 'mc-breadcrumb__current',
           ]}
         >
+          {#if index !== 0}
+            <ChevronRight20 class="mc-link__icon"/>
+          {/if}
           <span class="mc-link__label">{link.label}</span>
         </a>
       </li>
@@ -78,13 +83,9 @@
   background-position: left center;
   background-repeat: no-repeat;
 }
-.mc-breadcrumb__item: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: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:nth-last-child(2) .mc-link__icon {
+    transform: rotate(180deg);
   }
   .mc-breadcrumb__item:not(:nth-last-child(2)) {
     clip-path: inset(100%);
@@ -107,14 +108,6 @@
 .mc-breadcrumb--inverse {
   color: var(--breadcrumb-color-text-inverse, #ffffff);
 }
-.mc-breadcrumb--inverse .mc-breadcrumb__item: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 .mc-breadcrumb__item: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 {
   transition: box-shadow 200ms ease;

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,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"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAME;;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;AAuCH,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

@@ -1,4 +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:`/**
+import{c as v,e as b,a as f,p as r,t as p,b as _,d as x,f as g,j as u,i as d,r as c,s as h,h as y}from"../../custom-element.js";import{s as k}from"../../slot.js";var w=g('<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));
+ */.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=r(e,"selected",15),n=r(e,"outlined",7);var o={get selected(){return i()},set selected(l){i(l),d()},get outlined(){return n()},set outlined(l){n(l),d()}},t=w(),a=u(t),m=u(a);return k(m,e,"item",{},null),c(a),c(t),p(()=>h(t,1,y({"mc-built-in-menu":!0,"mc-built-in-menu--outlined":n()}),"svelte-9dcxnv")),_(s,t),x(o)}customElements.define("m-built-in-menu",v(j,{outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},selected:{}},["item"],[],{mode:"open"}));
 //# sourceMappingURL=BuiltInMenu.js.map