@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/actionlistbox/ActionListbox.svelte

@@ -0,0 +1,213 @@
+<svelte:options
+  customElement={{
+    tag: 'm-action-listbox',
+    extend: customElementForwardEvents,
+  }}
+/>
+
+<script lang="ts">
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import { Cross24 } from '@mozaic-ds/icons-svelte';
+  import { customElementForwardEvents } from '../../utils';
+
+  /**
+   * 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.
+   * @event close {CustomEvent<void>} - Emits when the close button is clicked.
+   */
+  interface Props {
+    /**
+     * title displayed in mobile version.
+     */
+    title?: string;
+    /**
+     * Callback to trigger on close button click.
+     */
+    onclose?: () => void;
+  }
+
+  let { title, onclose }: Props = $props();
+
+  let element: HTMLElement;
+
+  function handleClose() {
+    onclose?.();
+
+    const event = new CustomEvent('close', {
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  }
+</script>
+
+<div bind:this={element} class="mc-listbox">
+  <div class="mc-listbox__content">
+    <div class="mc-listbox__header">
+      {#if title}
+        <h3 class="mc-listbox__title">{title}</h3>
+      {/if}
+
+      <span class="mc-listbox__close">
+        <IconButton ghost aria-label="Close" onclick={handleClose}>
+          <Cross24 slot="icon" />
+        </IconButton>
+      </span>
+    </div>
+    <div class="mc-listbox__body">
+      <ul class="mc-action-list" role="menu">
+        <slot name="item" />
+      </ul>
+    </div>
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-listbox {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1;
+  padding: 0.5rem;
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+}
+.mc-listbox.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+.mc-listbox {
+  opacity: 1;
+}
+@media (width >= 680px) {
+  .mc-listbox {
+    position: relative;
+    display: block;
+    padding: 0;
+    background-color: transparent;
+  }
+}
+.mc-listbox__content {
+  border: var(--border-width-s, 0.0625rem) solid var(--color-border-primary, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  width: 100%;
+  z-index: 10;
+  background-color: var(--color-background-primary, #ffffff);
+  pointer-events: all;
+}
+@media (width >= 680px) {
+  .mc-listbox__content {
+    width: 18.75rem;
+  }
+}
+.mc-listbox__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 4rem;
+}
+@media (width >= 680px) {
+  .mc-listbox__header {
+    display: none;
+  }
+}
+.mc-listbox__title {
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--color-text-tertiary, #666666);
+  text-align: center;
+  margin: 0;
+}
+.mc-listbox__close {
+  position: absolute;
+  right: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-listbox__body {
+  overflow: hidden;
+}
+
+.mc-action-list {
+  padding: 0.5rem 0.5rem;
+  margin: 0;
+}
+.mc-action-list__element {
+  height: 2.5rem;
+  cursor: pointer;
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-action-list__element:hover {
+  background-color: var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-action-list__element--danger .mc-action-list__text {
+  color: var(--action-listbox-color-text-danger, #c61112);
+}
+.mc-action-list__element--danger .mc-action-list__icon {
+  fill: var(--action-listbox-color-text-danger, #c61112);
+}
+.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);
+}
+.mc-action-list__element--disabled .mc-action-list__icon {
+  fill: var(--action-listbox-color-text-disabled, #b3b3b3);
+}
+.mc-action-list__element--disabled:hover {
+  background-color: transparent;
+}
+.mc-action-list__button {
+  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 {
+  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 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-action-list__divider {
+  margin: 0.5rem 0;
+}
+
+.mc-listbox__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ * @event close {CustomEvent<void>} - Emits when the close button is clicked.
+ */
+interface Props {
+    /**
+     * title displayed in mobile version.
+     */
+    title?: string;
+    /**
+     * Callback to trigger on close button click.
+     */
+    onclose?: () => void;
+}
+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 ActionListbox: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    item: {};
+}, {}, "">;
+type ActionListbox = InstanceType<typeof ActionListbox>;
+export default ActionListbox;
+//# sourceMappingURL=ActionListbox.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/actionlistbox/README.md

@@ -0,0 +1,23 @@
+# `m-action-listbox`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `title` | title displayed in mobile version. | `string` |   |
+| `onclose` | Callback to trigger on close button click. | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `item` | The content displayed in the listbox item. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `close` | Emits when the close button is clicked. | `CustomEvent<void>` |
+

package/dist/components/actionlistboxitem/ActionListboxItem.js

@@ -0,0 +1,4 @@
+import{u as F,c as I,p as L,a as S,b as a,l 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,n as G,o 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"../../snippet.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:`/**
+ * 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(u,t){const z=K(t);L(t,!0),S(u,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()}},k=R(),p=q(k);{var E=e=>{var r=P(),_=i(r);O(_,{}),o(r),b(e,r)};y(p,e=>{v()&&e(E)})}var f=w(p,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(u,k),C(D)}F(["click"]);customElements.define("m-action-listbox-item",I(U,{label:{},disabled:{},appearance:{},divider:{},onclick:{}},["icon"],[],!0,N));
+//# sourceMappingURL=ActionListboxItem.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,37 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import ActionListboxItem from './ActionListboxItem.svelte';
+describe('ActionListboxItem', () => {
+    it('renders the provided label', () => {
+        const { getByText } = render(ActionListboxItem, { props: { label: 'Edit item' } });
+        expect(getByText('Edit item')).toBeTruthy();
+    });
+    it('adds danger class when appearance="danger"', () => {
+        const { container } = render(ActionListboxItem, {
+            props: { label: 'Delete', appearance: 'danger' },
+        });
+        expect(container.querySelector('.mc-action-list__element--danger')).toBeTruthy();
+    });
+    it('adds disabled class when disabled is true', () => {
+        const { container } = render(ActionListboxItem, {
+            props: { label: 'Disabled', disabled: true },
+        });
+        expect(container.querySelector('.mc-action-list__element--disabled')).toBeTruthy();
+    });
+    it('renders a divider when divider is true', () => {
+        const { container } = render(ActionListboxItem, {
+            props: { label: 'With divider', divider: true },
+        });
+        expect(container.querySelector('.mc-action-list__divider')).toBeTruthy();
+    });
+    it('calls onclick handler when the button is clicked', async () => {
+        const handle = vi.fn();
+        const { getByRole } = render(ActionListboxItem, {
+            props: { label: 'Click me', onclick: handle },
+        });
+        const li = getByRole('menuitem');
+        const btn = li.querySelector('button');
+        await fireEvent.click(btn);
+        expect(handle).toHaveBeenCalled();
+    });
+});

package/dist/components/actionlistboxitem/ActionListboxItem.svelte

@@ -0,0 +1,136 @@
+<svelte:options
+  customElement={{
+    tag: 'm-action-listbox-item',
+    extend: customElementForwardEvents,
+  }}
+/>
+
+<script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
+  /**
+   * 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 icon - Use this slot to display an icon in the listbox item.
+   */
+  import Divider from '../divider/Divider.svelte';
+
+  interface Props {
+    /**
+     * The label displayed for the item.
+     */
+    label: string;
+    /**
+     * If `true`, the item will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Allows to define the item appearance.
+     */
+    appearance?: 'standard' | 'danger';
+    /**
+     * Add a divider on top of the item.
+     */
+    divider?: boolean;
+    /**
+     * Callback to trigger on item click.
+     */
+    onclick?: () => void;
+  }
+
+  let { label, disabled, appearance, divider, onclick }: Props = $props();
+</script>
+
+{#if divider}
+  <span class="mc-action-list__divider">
+    <Divider></Divider>
+  </span>
+{/if}
+<li
+  class={{
+    'mc-action-list__element': true,
+    'mc-action-list__element--danger': appearance === 'danger',
+    'mc-action-list__element--disabled': disabled,
+  }}
+  role="menuitem"
+>
+  <button type="button" class="mc-action-list__button" {onclick}>
+    {#if $$slots.icon}
+      <span class="mc-action-list__icon">
+        <slot name="icon" />
+      </span>
+    {/if}
+
+    <p class="mc-action-list__text">{label}</p>
+  </button>
+</li>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-action-list {
+  padding: 0.5rem 0.5rem;
+  margin: 0;
+}
+.mc-action-list__element {
+  height: 2.5rem;
+  cursor: pointer;
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-action-list__element:hover {
+  background-color: var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-action-list__element--danger .mc-action-list__text {
+  color: var(--action-listbox-color-text-danger, #c61112);
+}
+.mc-action-list__element--danger .mc-action-list__icon {
+  fill: var(--action-listbox-color-text-danger, #c61112);
+}
+.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);
+}
+.mc-action-list__element--disabled .mc-action-list__icon {
+  fill: var(--action-listbox-color-text-disabled, #b3b3b3);
+}
+.mc-action-list__element--disabled:hover {
+  background-color: transparent;
+}
+.mc-action-list__button {
+  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 {
+  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 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-action-list__divider {
+  margin: 0.5rem 0;
+}
+
+.mc-action-list__divider {
+  display: block;
+}</style>

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

@@ -0,0 +1,43 @@
+interface Props {
+    /**
+     * The label displayed for the item.
+     */
+    label: string;
+    /**
+     * If `true`, the item will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Allows to define the item appearance.
+     */
+    appearance?: 'standard' | 'danger';
+    /**
+     * Add a divider on top of the item.
+     */
+    divider?: boolean;
+    /**
+     * Callback to trigger on item click.
+     */
+    onclick?: () => void;
+}
+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 ActionListboxItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type ActionListboxItem = InstanceType<typeof ActionListboxItem>;
+export default ActionListboxItem;
+//# sourceMappingURL=ActionListboxItem.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/actionlistboxitem/README.md

@@ -0,0 +1,20 @@
+# `m-action-listbox-item`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | The label displayed for the item. | `string` |   |
+| `disabled` | If `true`, the item will be disabled. | `boolean` |   |
+| `appearance` | Allows to define the item appearance. | `'standard'` `'danger'` |   |
+| `divider` | Add a divider on top of the item. | `boolean` |   |
+| `onclick` | Callback to trigger on item click. | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to display an icon in the listbox item. |
+

package/dist/components/avatar/Avatar.js

@@ -1,4 +1,4 @@
-import{c as n,p as l,a as d,b as c,f as m,d as f,t as v,i as h,j as g,k as u,r as b,e as p,g as w}from"../../custom-element.js";import{s as z}from"../../slot.js";var y=m("<div><!></div>");const _={hash:"svelte-1g4aw6b",code:`/**
+import{c as p,p as w,a as z,b as d,f as n,g as _,h as y,i as k,d as x,j as c,k as m,l as f,r as j}from"../../custom-element.js";import{s as A}from"../../snippet.js";import{i as D}from"../../if.js";import{s as E}from"../../slot.js";import{a as S}from"../../attributes.js";var $=y("<div><!></div>");const q={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 x(s,a){l(a,!0),d(s,_);let e=c(a,"size",7,"s");var r={get size(){return e()},set size(o="s"){e(o),u()}},t=y(),i=f(t);return z(i,a,"default",{}),b(t),v(()=>p(t,1,w(["mc-avatar",e()&&`mc-avatar--${e()}`]),"svelte-1g4aw6b")),h(s,t),g(r)}customElements.define("m-avatar",n(x,{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 B(l,t){w(t,!0),z(l,q);let r=d(t,"size",7,"s"),s=d(t,"children",7),v=k(t,["$$slots","$$events","$$legacy","$$host","size","children"]);var h={get size(){return r()},set size(e="s"){r(e),c()},get children(){return s()},set children(e){s(e),c()}},i=$();S(i,()=>({class:["mc-avatar",r()&&`mc-avatar--${r()}`],...v}),void 0,void 0,void 0,"svelte-1g4aw6b");var g=x(i);{var u=e=>{var a=m(),o=f(a);A(o,s),n(e,a)},b=e=>{var a=m(),o=f(a);E(o,t,"default",{},null),n(e,a)};D(g,e=>{s()?e(u):e(b,!1)})}return j(i),n(l,i),_(h)}customElements.define("m-avatar",p(B,{size:{},children:{}},["default"],[],!0));
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n  /**\n   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n   *\n   * @slot default - Use this slot to insert the image, icon or intials of the avatar.\n   */\n  interface Props {\n    /**\n     * Determines the size of the avatar.\n     */\n    size: 's' | 'm' | 'l';\n  }\n\n  let { size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]}>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/avatar';\n\n  ::slotted(img) {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n</style>\n"],"names":["size"],"mappings":";;gqBAAA,gBAeQ,IAAAA,eAAO,GAAG,2CAAH,IAAG,wEAGL,YAAaA,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,CAAA,aAFpD"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n   *\n   * @slot default - Use this slot to insert the image, icon or initials of the avatar.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the size of the avatar.\n     */\n    size: 's' | 'm' | 'l';\n    /**\n     * Use this snippet to insert the image, icon or initials of the avatar.\n     */\n    children?: Snippet;\n  }\n\n  let { size = 's', children, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>\n  {#if children}\n    {@render children()}\n  {:else}\n    <slot />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/avatar';\n\n  ::slotted(img) {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n</style>\n"],"names":["size","children","$.prop","$$props","attrs","$.rest_props","div","root","$$render","consequent","alternate"],"mappings":";;gqBAEA,gBAmBQ,IAAAA,eAAO,GAAG,EAAEC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uGAAvB,IAAG,iEAGjBG,EAAGC,EAAA,IAAHD,eAAY,YAAaN,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,KAASI,mDAA5DE,CAAG,kCAESL,CAAQ,0EADdA,EAAQ,EAAAO,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdJ,CAAG,MAAHA,CAAG,MAFI"}

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
+import '@mozaic-ds/icons-svelte/components/Profile24/Profile24.svelte';
+import './Avatar.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gEAAgE,CAAC;AAExE,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,+DAA+D,CAAC;AACvE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}

package/dist/components/avatar/Avatar.stories.js

@@ -1,7 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
+import '@mozaic-ds/icons-svelte/components/Profile24/Profile24.svelte';
+import './Avatar.svelte';
 const meta = {
     title: 'Content/Avatar',
     component: 'm-avatar',
@@ -33,7 +34,7 @@ export const Initials = {
 export const Icon = {
     args: {
         default: `
-      <profile-24></profile-24>
+      <Profile-24></profile-24>
     `,
     },
 };

package/dist/components/avatar/Avatar.svelte

@@ -1,23 +1,33 @@
 <svelte:options customElement={{ tag: 'm-avatar' }} />
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   /**
    * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
    *
-   * @slot default - Use this slot to insert the image, icon or intials of the avatar.
+   * @slot default - Use this slot to insert the image, icon or initials of the avatar.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Determines the size of the avatar.
      */
     size: 's' | 'm' | 'l';
+    /**
+     * Use this snippet to insert the image, icon or initials of the avatar.
+     */
+    children?: Snippet;
   }
 
-  let { size = 's' }: Props = $props();
+  let { size = 's', children, ...attrs }: Props = $props();
 </script>
 
-<div class={['mc-avatar', size && `mc-avatar--${size}`]}>
-  <slot />
+<div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
 </div>
 
 <style>/**