@mozaic-ds/web-components 1.3.0 → 1.5.0

package/dist/components/accordionlistItem/README.md

@@ -0,0 +1,29 @@
+# `m-accordion-list-item`
+
+An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the accordion item.
+It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
+ensuring accessibility and tracking the open/closed state.
+If no ID is provided, a unique one is generated automatically. | `string` |   |
+| `title*` | The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content. | `string` |   |
+| `subtitle` | An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item. | `string` |   |
+| `content` | The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to display an icon before the title. |
+| `content` | Use this slot to display custom content. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:open` | Emits when the component state changes. | `CustomEvent<boolean>` |
+

package/dist/components/actionbottombar/ActionBottomBar.js

@@ -0,0 +1,12 @@
+import{c as _,p,a as h,b as u,s as m,t as w,f as j,g as x,h as q,d as a,j as y,r as i,l as B,m as D}from"../../custom-element.js";import{s as c}from"../../slot.js";import{D as k}from"../divider/Divider.js";import"../../attributes.js";var z=q('<div><div class="mc-action-bottom-bar__divider svelte-qg1igj"><!></div> <div class="mc-action-bottom-bar__left svelte-qg1igj"><!></div> <div class="mc-action-bottom-bar__right svelte-qg1igj"><!></div></div>');const A={hash:"svelte-qg1igj",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-action-bottom-bar.svelte-qg1igj {position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);}.mc-action-bottom-bar__divider.svelte-qg1igj {width:100%;}
+@media screen and (min-width: 679px) {
+}
+@media screen and (min-width: 679px) {
+}.mc-action-bottom-bar__left.svelte-qg1igj {padding-left:1rem;}
+@media screen and (min-width: 679px) {.mc-action-bottom-bar__left.svelte-qg1igj {padding-left:2rem;}
+}.mc-action-bottom-bar__right.svelte-qg1igj {margin-left:auto;padding:0.5rem 1rem 0.5rem 0;display:flex;gap:1rem;}
+@media screen and (min-width: 679px) {.mc-action-bottom-bar__right.svelte-qg1igj {padding:1rem 2rem 1rem 0;}
+}`};function E(n,t){p(t,!0),h(n,A);let o=u(t,"shadow",7);var l={get shadow(){return o()},set shadow(f){o(f),y()}},e=z(),r=a(e),g=a(r);k(g,{}),i(r);var s=m(r,2),b=a(s);c(b,t,"left",{},null),i(s);var d=m(s,2),v=a(d);return c(v,t,"right",{},null),i(d),i(e),w(()=>B(e,1,D(["mc-action-bottom-bar",o()&&"mc-action-bottom-bar--shadow"]),"svelte-qg1igj")),j(n,e),x(l)}customElements.define("m-action-bottom-bar",_(E,{shadow:{attribute:"shadow",reflect:!0,type:"Boolean"}},["left","right"],[],!0));
+//# sourceMappingURL=ActionBottomBar.js.map

package/dist/components/actionbottombar/ActionBottomBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBottomBar.js","sources":["../../../src/components/actionbottombar/ActionBottomBar.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-action-bottom-bar',\n    props: {\n      shadow: { reflect: true, type: 'Boolean', attribute: 'shadow' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Divider from '../divider/Divider.svelte';\n  /**\n   * The Action Bottom Bar is a user interface component that provides a fixed area at the bottom of the screen for displaying action buttons and status messages. It is typically used in forms or interactive sections of an application to allow users to perform actions such as saving, resetting, or deleting content, while also providing feedback on the current state of their changes.\n   *\n   * @slot left - The content displayed left side of the action bottom bar (e.g. StatusNotification or any element).\n   * @slot right - Use this slot to insert buttons of the action bottom bar.\n   */\n  interface Props {\n    /**\n     * If `true`, adds a shadow to the action bottom bar.\n     */\n    shadow?: boolean;\n  }\n\n  let { shadow }: Props = $props();\n</script>\n\n<div class={['mc-action-bottom-bar', shadow && 'mc-action-bottom-bar--shadow']}>\n  <div class=\"mc-action-bottom-bar__divider\">\n    <Divider />\n  </div>\n\n  <div class=\"mc-action-bottom-bar__left\">\n    <slot name=\"left\" />\n  </div>\n\n  <div class=\"mc-action-bottom-bar__right\">\n    <slot name=\"right\" />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/action-bottom-bar';\n</style>\n"],"names":["shadow","$.prop","$$props","div","root","div_1","Divider","node","div_2","div_3"],"mappings":";;;;;;;;;;mBASA,oBAeQA,EAAMC,EAAAC,EAAA,SAAA,CAAA,2DAGbC,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAG,EACDC,EAAOC,EAAA,EAAA,IADTF,CAAG,EAIH,IAAAG,IAJAH,EAAG,CAAA,MAIHG,CAAG,0BAAHA,CAAG,EAIH,IAAAC,IAJAD,EAAG,CAAA,MAIHC,CAAG,kCAAHA,CAAG,IATLN,CAAG,UAAHA,OAAY,uBAAwBH,KAAU,uDAA9CG,CAAG,MAFI"}

package/dist/components/actionbottombar/ActionBottomBar.spec.js

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ActionBottomBar from './ActionBottomBar.svelte';
+describe('ActionBottomBar', () => {
+    const renderComponent = (props = {}) => render(ActionBottomBar, { props });
+    it('renders the component', () => {
+        const { container } = renderComponent();
+        expect(container.firstChild).toBeTruthy();
+    });
+    it('does not apply shadow class by default', () => {
+        const { container } = renderComponent();
+        const root = container.firstElementChild;
+        expect(root?.classList.contains('mc-action-bottom-bar--shadow')).toBe(false);
+    });
+    it('applies shadow class when shadow is true', () => {
+        const { container } = renderComponent({ shadow: true });
+        const root = container.firstElementChild;
+        expect(root?.classList.contains('mc-action-bottom-bar--shadow')).toBe(true);
+    });
+});

package/dist/components/actionbottombar/ActionBottomBar.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './ActionBottomBar.svelte';
+import '../statusmessage/StatusMessage.svelte';
+import '../button/Button.svelte';
+import '@mozaic-ds/icons-svelte/components/Refresh24/Refresh24.svelte';
+import '@mozaic-ds/icons-svelte/components/Cross24/Cross24.svelte';
+import '@mozaic-ds/icons-svelte/components/Check24/Check24.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Shadow: Story;
+export declare const Unsaved: Story;
+export declare const SaveInProgress: Story;
+export declare const Saved: Story;
+export declare const WithoutReset: Story;
+export declare const WithoutDelete: Story;
+export declare const Mobile: Story;
+//# sourceMappingURL=ActionBottomBar.stories.d.ts.map

package/dist/components/actionbottombar/ActionBottomBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBottomBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/actionbottombar/ActionBottomBar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,0BAA0B,CAAC;AAClC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yBAAyB,CAAC;AAGjC,OAAO,+DAA+D,CAAC;AACvE,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAEnE,QAAA,MAAM,IAAI,EAAE,IA+BX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAW1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAC"}

package/dist/components/actionbottombar/ActionBottomBar.stories.js

@@ -0,0 +1,131 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './ActionBottomBar.svelte';
+import '../statusmessage/StatusMessage.svelte';
+import '../button/Button.svelte';
+// Icons
+import '@mozaic-ds/icons-svelte/components/Refresh24/Refresh24.svelte';
+import '@mozaic-ds/icons-svelte/components/Cross24/Cross24.svelte';
+import '@mozaic-ds/icons-svelte/components/Check24/Check24.svelte';
+const meta = {
+    title: 'Structure/Action Bottom Bar',
+    component: 'm-action-bottom-bar',
+    tags: ['v2'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '150px' },
+        },
+    },
+    args: {
+        left: `
+      <m-status-message slot="left" status="warning" label="999 unsaved changes"></m-status-message>
+    `,
+        right: `
+      <m-button slot="right" size="s" ghost="true">
+        Reset
+      </m-button>
+      <m-button slot="right" size="s" outlined="true" appearance="danger">
+        Delete
+      </m-button>
+      <m-button slot="right" size="s" appearance="accent">
+        Save
+      </m-button>
+    `,
+    },
+    render: (args) => html `
+    <m-action-bottom-bar ?shadow=${args.shadow}>
+      ${unsafeHTML(ifDefined(args.left))} ${unsafeHTML(ifDefined(args.right))}
+    </m-action-bottom-bar>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Shadow = {
+    args: {
+        shadow: true,
+    },
+};
+export const Unsaved = {
+    args: {
+        right: `
+      <m-button slot="right" size="s" appearance="accent">
+        Save
+      </m-button>
+    `,
+    },
+};
+export const SaveInProgress = {
+    args: {
+        left: `
+      <m-status-message slot="left" status="inprogress" label="Saving changes"></m-status-message>
+    `,
+        right: `
+      <m-button slot="right" size="s" appearance="accent">
+        Save
+      </m-button>
+    `,
+    },
+};
+export const Saved = {
+    args: {
+        left: `
+      <m-status-message slot="left" status="success" label="Changes saved"></m-status-message>
+    `,
+        right: `
+      <m-button slot="right" size="s" appearance="accent">
+        Save
+      </m-button>
+    `,
+    },
+};
+export const WithoutReset = {
+    args: {
+        right: `
+      <m-button slot="right" size="s" outlined="true" appearance="danger">
+        Delete
+      </m-button>
+      <m-button slot="right" size="s" appearance="accent">
+        Save
+      </m-button>
+    `,
+    },
+};
+export const WithoutDelete = {
+    args: {
+        right: `
+      <m-button slot="right" size="s" appearance="accent">
+        Save
+      </m-button>
+    `,
+    },
+};
+export const Mobile = {
+    args: {
+        right: `
+      <m-button 
+        slot="right"
+        ghost="true" 
+        icon-position="only"
+      >
+        <refresh-24></refresh-24>
+      </m-button>
+      <m-button 
+        slot="right"
+        outlined="true" 
+        appearance="danger" 
+        icon-position="only"
+      >
+        <cross-24></cross-24>
+      </m-button>
+      <m-button 
+        slot="right"
+        appearance="accent"
+        icon-position="only"
+      >
+        <check-24></check-24>
+      </m-button>
+    `,
+    },
+};

package/dist/components/actionbottombar/ActionBottomBar.svelte

@@ -0,0 +1,95 @@
+<svelte:options
+  customElement={{
+    tag: 'm-action-bottom-bar',
+    props: {
+      shadow: { reflect: true, type: 'Boolean', attribute: 'shadow' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import Divider from '../divider/Divider.svelte';
+  /**
+   * The Action Bottom Bar is a user interface component that provides a fixed area at the bottom of the screen for displaying action buttons and status messages. It is typically used in forms or interactive sections of an application to allow users to perform actions such as saving, resetting, or deleting content, while also providing feedback on the current state of their changes.
+   *
+   * @slot left - The content displayed left side of the action bottom bar (e.g. StatusNotification or any element).
+   * @slot right - Use this slot to insert buttons of the action bottom bar.
+   */
+  interface Props {
+    /**
+     * If `true`, adds a shadow to the action bottom bar.
+     */
+    shadow?: boolean;
+  }
+
+  let { shadow }: Props = $props();
+</script>
+
+<div class={['mc-action-bottom-bar', shadow && 'mc-action-bottom-bar--shadow']}>
+  <div class="mc-action-bottom-bar__divider">
+    <Divider />
+  </div>
+
+  <div class="mc-action-bottom-bar__left">
+    <slot name="left" />
+  </div>
+
+  <div class="mc-action-bottom-bar__right">
+    <slot name="right" />
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-action-bottom-bar {
+  position: fixed;
+  box-sizing: border-box;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--action-bottom-bar-color-background, #ffffff);
+}
+.mc-action-bottom-bar__divider {
+  width: 100%;
+}
+.mc-action-bottom-bar__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-action-bottom-bar__button--icon.mc-button {
+    display: none;
+  }
+}
+.mc-action-bottom-bar__button--text.mc-button {
+  display: none;
+}
+@media screen and (min-width: 679px) {
+  .mc-action-bottom-bar__button--text.mc-button {
+    display: block;
+  }
+}
+.mc-action-bottom-bar__left {
+  padding-left: 1rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-action-bottom-bar__left {
+    padding-left: 2rem;
+  }
+}
+.mc-action-bottom-bar__right {
+  margin-left: auto;
+  padding: 0.5rem 1rem 0.5rem 0;
+  display: flex;
+  gap: 1rem;
+}
+@media screen and (min-width: 679px) {
+  .mc-action-bottom-bar__right {
+    padding: 1rem 2rem 1rem 0;
+  }
+}</style>

package/dist/components/actionbottombar/ActionBottomBar.svelte.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The Action Bottom Bar is a user interface component that provides a fixed area at the bottom of the screen for displaying action buttons and status messages. It is typically used in forms or interactive sections of an application to allow users to perform actions such as saving, resetting, or deleting content, while also providing feedback on the current state of their changes.
+ *
+ * @slot left - The content displayed left side of the action bottom bar (e.g. StatusNotification or any element).
+ * @slot right - Use this slot to insert buttons of the action bottom bar.
+ */
+interface Props {
+    /**
+     * If `true`, adds a shadow to the action bottom bar.
+     */
+    shadow?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ActionBottomBar: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    left: {};
+    right: {};
+}, {}, "">;
+type ActionBottomBar = InstanceType<typeof ActionBottomBar>;
+export default ActionBottomBar;
+//# sourceMappingURL=ActionBottomBar.svelte.d.ts.map

package/dist/components/actionbottombar/ActionBottomBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBottomBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/actionbottombar/ActionBottomBar.svelte.ts"],"names":[],"mappings":"AAKE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAiCH,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,eAAe;;;;;UAAqF,CAAC;AACzF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/components/actionbottombar/README.md

@@ -0,0 +1,17 @@
+# `m-action-bottom-bar`
+
+The Action Bottom Bar is a user interface component that provides a fixed area at the bottom of the screen for displaying action buttons and status messages. It is typically used in forms or interactive sections of an application to allow users to perform actions such as saving, resetting, or deleting content, while also providing feedback on the current state of their changes.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `shadow` | If `true`, adds a shadow to the action bottom bar. | `boolean` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `left` | The content displayed left side of the action bottom bar (e.g. StatusNotification or any element). |
+| `right` | Use this slot to insert buttons of the action bottom bar. |
+

package/dist/components/actionlistbox/ActionListbox.js

@@ -0,0 +1,10 @@
+import{c as C,p as I,a as A,b as p,s as _,f as x,g as B,h as g,d as t,j as h,r as s,t as D,e as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{s as P}from"../../slot.js";import{b as S}from"../../this.js";import{I as q}from"../iconbutton/IconButton.js";import{n as G}from"../../Condition20.js";import{c as H}from"../../custom-element-forward-events.js";import"../../branches.js";import"../../attributes.js";import"../loader/Loader.js";var J=g('<h3 class="mc-listbox__title svelte-cf5eub"> </h3>'),K=g('<div class="mc-listbox svelte-cf5eub"><div class="mc-listbox__content svelte-cf5eub"><div class="mc-listbox__header svelte-cf5eub"><!> <span class="mc-listbox__close svelte-cf5eub"><!></span></div> <div class="mc-listbox__body svelte-cf5eub"><ul class="mc-action-list svelte-cf5eub" role="menu"><!></ul></div></div></div>');const M={hash:"svelte-cf5eub",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-listbox.svelte-cf5eub {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.svelte-cf5eub {opacity:1;}
+@media (width >= 680px) {.mc-listbox.svelte-cf5eub {position:relative;display:block;padding:0;background-color:transparent;}
+}.mc-listbox__content.svelte-cf5eub {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.svelte-cf5eub {width:18.75rem;}
+}.mc-listbox__header.svelte-cf5eub {display:flex;align-items:center;justify-content:center;position:relative;height:4rem;}
+@media (width >= 680px) {.mc-listbox__header.svelte-cf5eub {display:none;}
+}.mc-listbox__title.svelte-cf5eub {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.svelte-cf5eub {position:absolute;right:1.25rem;width:1.5rem;height:1.5rem;}.mc-listbox__body.svelte-cf5eub {overflow:hidden;}.mc-action-list.svelte-cf5eub {padding:0.5rem 0.5rem;margin:0;}.mc-listbox__close.svelte-cf5eub {display:flex;align-items:center;justify-content:center;}`};function N(d,i){I(i,!0),A(d,M);let o=p(i,"title",7),n=p(i,"onclose",7),c;function y(){n()?.();const e=new CustomEvent("close",{bubbles:!0,composed:!0});c.dispatchEvent(e)}var w={get title(){return o()},set title(e){o(e),h()},get onclose(){return n()},set onclose(e){n(e),h()}},r=K(),m=t(r),a=t(m),v=t(a);{var k=e=>{var l=J(),j=t(l,!0);s(l),D(()=>F(j,o())),x(e,l)};L(v,e=>{o()&&e(k)})}var b=_(v,2),z=t(b);q(z,{ghost:!0,"aria-label":"Close",onclick:y,$$slots:{icon:(e,l)=>{G(e,{slot:"icon"})}}}),s(b),s(a);var f=_(a,2),u=t(f),E=t(u);return P(E,i,"item",{},null),s(u),s(f),s(m),s(r),S(r,e=>c=e,()=>c),x(d,r),B(w)}customElements.define("m-action-listbox",C(N,{title:{},onclose:{}},["item"],[],!0,H));
+//# sourceMappingURL=ActionListbox.js.map

package/dist/components/actionlistbox/ActionListbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListbox.js","sources":["../../../src/components/actionlistbox/ActionListbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-action-listbox',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import { customElementForwardEvents } from '../../utils';\n\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 item - The content displayed in the listbox item.\n   * @event close {CustomEvent<void>} - Emits when the close button is clicked.\n   */\n  interface Props {\n    /**\n     * title displayed in mobile version.\n     */\n    title?: string;\n    /**\n     * Callback to trigger on close button click.\n     */\n    onclose?: () => void;\n  }\n\n  let { title, onclose }: Props = $props();\n\n  let element: HTMLElement;\n\n  function handleClose() {\n    onclose?.();\n\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<div bind:this={element} class=\"mc-listbox\">\n  <div class=\"mc-listbox__content\">\n    <div class=\"mc-listbox__header\">\n      {#if title}\n        <h3 class=\"mc-listbox__title\">{title}</h3>\n      {/if}\n\n      <span class=\"mc-listbox__close\">\n        <IconButton ghost aria-label=\"Close\" onclick={handleClose}>\n          <Cross24 slot=\"icon\" />\n        </IconButton>\n      </span>\n    </div>\n    <div class=\"mc-listbox__body\">\n      <ul class=\"mc-action-list\" role=\"menu\">\n        <slot name=\"item\" />\n      </ul>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/listbox';\n  @use '@mozaic-ds/styles/components/action-list';\n\n  .mc-listbox__close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n</style>\n"],"names":["title","$.prop","$$props","onclose","element","handleClose","event","div","root","div_1","div_2","h3","root_1","$$render","consequent","span","$.sibling","node","IconButton","node_1","Cross24","$$anchor","div_3","ul","$$value","customElementForwardEvents"],"mappings":";;;;;;;;iiBAOA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAEhBE,EAEK,SAAAC,GAAc,CACrBF,MAAO,QAEDG,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,2GAGDC,EAAGC,EAAA,EACDC,IADFF,CAAG,EAECG,IADFD,CAAG,MACDC,CAAG,iBAECC,EAAEC,EAAA,MAAFD,EAAE,EAAA,IAAFA,CAAE,YAA4BX,EAAK,CAAA,CAAA,MAAnCW,CAAE,WADAX,EAAK,GAAAa,EAAAC,CAAA,QAITC,EAAIC,EAAAC,EAAA,CAAA,MAAJF,CAAI,EACFG,EAAUC,EAAA,uCAAmCd,wBAC3Ce,EAAOC,EAAA,CAAA,KAAA,MAAA,CAAA,QAFXN,CAAI,IALNL,CAAG,EAWH,IAAAY,IAXAZ,EAAG,CAAA,EAYDa,IADFD,CAAG,MACDC,CAAE,iCAAFA,CAAE,IADJD,CAAG,IAZLb,CAAG,IADLF,CAAG,IAAHA,EAAGiB,GAAYpB,EAAOoB,EAAA,IAAPpB,CAAO,MAAtBG,CAAG,MAFI,mFAvCIkB,CAA0B,CAAA"}

package/dist/components/actionlistbox/ActionListbox.spec.js

@@ -0,0 +1,20 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import ActionListbox from './ActionListbox.svelte';
+describe('ActionListbox', () => {
+    it('renders title when provided', () => {
+        const { getByText } = render(ActionListbox, { props: { title: 'My Title' } });
+        expect(getByText('My Title')).toBeTruthy();
+    });
+    it('calls onclose and dispatches close event when close button is clicked', async () => {
+        const onclose = vi.fn();
+        const { container } = render(ActionListbox, { props: { onclose } });
+        const closeBtn = container.querySelector('button[aria-label="Close"]');
+        expect(closeBtn).toBeTruthy();
+        const closeListener = vi.fn();
+        container.addEventListener('close', closeListener);
+        await fireEvent.click(closeBtn);
+        expect(onclose).toHaveBeenCalled();
+        expect(closeListener).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './ActionListbox.svelte';
+import '../actionlistboxitem/ActionListboxItem.svelte';
+import '@mozaic-ds/icons-svelte/components/Copy20/Copy20.svelte';
+import '@mozaic-ds/icons-svelte/components/ArrowTopRight20/ArrowTopRight20.svelte';
+import '@mozaic-ds/icons-svelte/components/Download20/Download20.svelte';
+import '@mozaic-ds/icons-svelte/components/Trash20/Trash20.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+//# sourceMappingURL=ActionListbox.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionListbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/actionlistbox/ActionListbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,wBAAwB,CAAC;AAChC,OAAO,+CAA+C,CAAC;AACvD,OAAO,yDAAyD,CAAC;AACjE,OAAO,2EAA2E,CAAC;AACnF,OAAO,iEAAiE,CAAC;AACzE,OAAO,2DAA2D,CAAC;AAEnE,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/actionlistbox/ActionListbox.stories.js

@@ -0,0 +1,49 @@
+import { action } from 'storybook/actions';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './ActionListbox.svelte';
+import '../actionlistboxitem/ActionListboxItem.svelte';
+import '@mozaic-ds/icons-svelte/components/Copy20/Copy20.svelte';
+import '@mozaic-ds/icons-svelte/components/ArrowTopRight20/ArrowTopRight20.svelte';
+import '@mozaic-ds/icons-svelte/components/Download20/Download20.svelte';
+import '@mozaic-ds/icons-svelte/components/Trash20/Trash20.svelte';
+const meta = {
+    title: 'Overlay/ Action Listbox',
+    component: 'm-action-listbox',
+    subcomponents: { 'ActionListboxItem': 'm-action-listbox-item' },
+    args: {
+        title: 'Listbox title (optional)',
+    },
+    render: (args) => html `
+    <m-action-listbox title="${ifDefined(args.title)}" @close="${action('close')}">
+      <m-action-listbox-item
+        slot="item"
+        label="Duplicate"
+        disabled="true"
+        @click="${action('click')}"
+      >
+        <copy-20 slot="icon"></copy-20>
+      </m-action-listbox-item>
+
+      <m-action-listbox-item slot="item" label="Move to..." @click="${action('click')}">
+        <arrow-top-right-20 slot="icon"></arrow-top-right-20>
+      </m-action-listbox-item>
+
+      <m-action-listbox-item slot="item" label="Download" @click="${action('click')}">
+        <download-20 slot="icon"></download-20>
+      </m-action-listbox-item>
+
+      <m-action-listbox-item
+        slot="item"
+        label="Delete"
+        appearance="danger"
+        divider="true"
+        @click="${action('click')}"
+      >
+        <trash-20 slot="icon"></trash-20>
+      </m-action-listbox-item>
+    </m-action-listbox>
+  `,
+};
+export default meta;
+export const Default = {};