@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/accordionlistItem/AccordionListItem.js

@@ -0,0 +1,50 @@
+import{u as H,c as J,p as K,a as N,b as u,s as x,t as z,f as v,g as O,h as _,d as t,q as y,j as g,x as P,r as n,e as E}from"../../custom-element.js";import{i as M}from"../../if.js";import{a as Q,s as X}from"../../slot.js";import{s as a}from"../../attributes.js";import{b as R}from"../../this.js";import{a as T}from"../../accordion-list.state.svelte.js";var U=_('<span class="mc-accordion__icon svelte-k06wun"><!></span>'),V=_('<span class="mc-accordion__subtitle svelte-k06wun"> </span>'),W=_('<p class="svelte-k06wun"> </p>'),Z=_('<div class="mc-accordion__item svelte-k06wun"><div class="mc-accordion__header svelte-k06wun"><h2 class="mc-accordion__title svelte-k06wun"><button class="mc-accordion__trigger svelte-k06wun"><!> <div class="mc-accordion__title-wrapper svelte-k06wun"><span class="svelte-k06wun"> </span> <!></div></button></h2></div> <div class="mc-accordion__content svelte-k06wun" role="region"><!></div></div>');const $={hash:"svelte-k06wun",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@supports (interpolate-size: allow-keywords) {
+}.mc-accordion__item.svelte-k06wun {border-bottom:1px solid var(--accordion-list-color-border, #cccccc);}
+@media (prefers-reduced-motion: no-preference) {.mc-accordion__item.svelte-k06wun {transition:border-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-accordion__item.svelte-k06wun {transition:none;}
+}.mc-accordion__item.svelte-k06wun:last-child {border-bottom:none;}
+@supports (interpolate-size: allow-keywords) {
+  @media (prefers-reduced-motion: no-preference) {
+  }
+  @media (prefers-reduced-motion: reduce) {
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-accordion__header.svelte-k06wun {position:relative;background-color:var(--accordion-list-color-background-standard, #ffffff);}
+@media (prefers-reduced-motion: no-preference) {
+}
+@media (prefers-reduced-motion: reduce) {
+}.mc-accordion__title.svelte-k06wun {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-m, 1.5);display:block;margin-block:0;padding:0;font-family:inherit;position:relative;z-index:1;}.mc-accordion__title-wrapper.svelte-k06wun {display:flex;flex-direction:column;flex:1;min-width:0;}.mc-accordion__title-wrapper.svelte-k06wun > :where(.svelte-k06wun) {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis;}.mc-accordion__subtitle.svelte-k06wun {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-light, 300);line-height:var(--line-height-m, 1.5);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;margin-block:0;padding:0;color:var(--accordion-list-color-text-subtitle, #666666);position:relative;z-index:1;}
+@media (prefers-reduced-motion: no-preference) {.mc-accordion__trigger.svelte-k06wun {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
+}
+@media (prefers-reduced-motion: reduce) {.mc-accordion__trigger.svelte-k06wun {transition:none;}
+}.mc-accordion__trigger.svelte-k06wun:focus-visible {outline:none;}.mc-accordion__trigger.svelte-k06wun:focus-visible::before {box-shadow:inset 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-outer, #000000)), inset 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-mid, #ffffff));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-accordion__trigger.svelte-k06wun:disabled {cursor:not-allowed;opacity:0.5;pointer-events:none;}.mc-accordion__trigger.svelte-k06wun {display:flex;align-items:center;gap:0.5rem;padding:1rem 0.75rem;margin-block:0;background-color:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;position:relative;text-align:left;text-decoration:none;text-transform:none;vertical-align:baseline;appearance:none;}
+@media (prefers-reduced-motion: no-preference) {.mc-accordion__trigger.svelte-k06wun::before {transition:background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;}
+}
+@media (prefers-reduced-motion: reduce) {.mc-accordion__trigger.svelte-k06wun::before {transition:none;}
+}.mc-accordion__trigger.svelte-k06wun::before {content:"";position:absolute;inset:0.25rem;background-color:transparent;pointer-events:none;z-index:-1;outline:0 solid transparent;outline-offset:-0.125rem;border-radius:var(--border-radius-s, 0.25rem);}.mc-accordion__trigger.svelte-k06wun:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun)) {padding-right:2.25rem;}
+@media (prefers-reduced-motion: no-preference) {.mc-accordion__trigger.svelte-k06wun:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun))::after {transition:transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-accordion__trigger.svelte-k06wun:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun))::after {transition:none;}
+}.mc-accordion__trigger.svelte-k06wun:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun))::after {transform:translateY(-50%) rotateX(0deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");content:"";position:absolute;right:1rem;top:50%;flex-shrink:0;width:1rem;height:1rem;background-repeat:no-repeat;background-position:center;background-size:1rem;z-index:1;}
+@media (prefers-reduced-motion: no-preference) {.mc-accordion__trigger:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun))[aria-expanded=true].svelte-k06wun::after {transition:transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-accordion__trigger:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun))[aria-expanded=true].svelte-k06wun::after {transition:none;}
+}.mc-accordion__trigger:not(.mc-accordion__header:where(.svelte-k06wun):is(summary) .mc-accordion__trigger:where(.svelte-k06wun))[aria-expanded=true].svelte-k06wun::after {transform:translateY(-50%) rotateX(180deg);}.mc-accordion__trigger.svelte-k06wun:is(button:where(.svelte-k06wun)) {width:100%;}.mc-accordion__trigger.svelte-k06wun:hover::before {background-color:var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));}.mc-accordion__trigger.svelte-k06wun:hover::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");}.mc-accordion__trigger.svelte-k06wun:active::before {background-color:var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));}.mc-accordion__trigger.svelte-k06wun:active::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");}.mc-accordion__icon.svelte-k06wun {flex-shrink:0;width:2rem;height:2rem;fill:currentcolor;}.mc-accordion__content.svelte-k06wun {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);background-color:var(--accordion-list-color-background-standard, #ffffff);overflow:hidden;padding:0 0.75rem;max-height:0;}.mc-accordion__content.svelte-k06wun > :where(.svelte-k06wun):first-child {margin-top:0;}.mc-accordion__content.svelte-k06wun > :where(.svelte-k06wun):last-child {margin-bottom:0;}
+@media (prefers-reduced-motion: no-preference) {.mc-accordion__content.svelte-k06wun {transition:max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);}
+}
+@media (prefers-reduced-motion: reduce) {.mc-accordion__content.svelte-k06wun {transition:none;}
+}.mc-accordion__content[aria-hidden=false].svelte-k06wun {max-height:9999vh;padding-top:0.125rem;padding-bottom:1rem;}
+@supports (interpolate-size: allow-keywords) {
+  @media (prefers-reduced-motion: no-preference) {.mc-accordion__content.svelte-k06wun {transition:height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), content-visibility 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);transition-behavior:allow-discrete;}
+  }
+  @media (prefers-reduced-motion: reduce) {.mc-accordion__content.svelte-k06wun {transition:none;}
+  }.mc-accordion__content.svelte-k06wun {height:0;max-height:none;padding-top:0;padding-bottom:0;}.mc-accordion__content[aria-hidden=false].svelte-k06wun {height:auto;padding-top:0.125rem;padding-bottom:1rem;}
+}`};function ee(C,o){const Y=Q(o);K(o,!0),N(C,$);let i=u(o,"id",7),w=u(o,"title",7),l=u(o,"subtitle",7),f=u(o,"content",7),h;const p=P(()=>T.openIds.includes(i()));function j(){const e=new CustomEvent("update:open",{detail:{id:i(),open:y(p)},bubbles:!0,composed:!0});h.dispatchEvent(e)}var q={get id(){return i()},set id(e){i(e),g()},get title(){return w()},set title(e){w(e),g()},get subtitle(){return l()},set subtitle(e){l(e),g()},get content(){return f()},set content(e){f(e),g()}},m=Z(),b=t(m),L=t(b),c=t(L);c.__click=()=>j();var B=t(c);{var A=e=>{var r=U(),d=t(r);X(d,o,"icon",{},null),n(r),v(e,r)};M(B,e=>{Y.icon&&e(A)})}var I=x(B,2),k=t(I),D=t(k,!0);n(k);var S=x(k,2);{var F=e=>{var r=V(),d=t(r,!0);n(r),z(()=>E(d,l())),v(e,r)};M(S,e=>{l()&&e(F)})}n(I),n(c),n(L),n(b);var s=x(b,2),G=t(s);return X(G,o,"content",{},e=>{var r=W(),d=t(r,!0);n(r),z(()=>E(d,f()||"")),v(e,r)}),n(s),n(m),R(m,e=>h=e,()=>h),z(()=>{a(c,"id",`accordion-${i()}`),a(c,"aria-controls",`content-${i()}`),a(c,"aria-expanded",y(p)),E(D,w()),a(s,"id",`content-${i()}`),a(s,"aria-hidden",!y(p)),a(s,"aria-labelledby",`accordion-${i()}`)}),v(C,m),O(q)}H(["click"]);customElements.define("m-accordion-list-item",J(ee,{id:{},title:{},subtitle:{},content:{}},["icon","content"],[],!0));
+//# sourceMappingURL=AccordionListItem.js.map

package/dist/components/accordionlistItem/AccordionListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionListItem.js","sources":["../../../src/components/accordionlistItem/AccordionListItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-accordion-list-item' }} />\n\n<script lang=\"ts\">\n  import { accordion } from '../accordionlist/accordion-list.state.svelte';\n  /**\n   * 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.\n   *\n   * @slot icon - Use this slot to display an icon before the title.\n   * @slot content - Use this slot to display custom content.\n   * @event update:open {CustomEvent<boolean>} - Emits when the component state changes.\n   */\n\n  interface Props {\n    /**\n     * A unique identifier for the accordion item.\n     * It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),\n     * ensuring accessibility and tracking the open/closed state.\n     * If no ID is provided, a unique one is generated automatically.\n     */\n    id: string;\n    /**\n     * 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.\n     */\n    title: string;\n    /**\n     * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.\n     */\n    subtitle?: string;\n    /**\n     * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.\n     */\n    content?: string;\n  }\n\n  let { id, title, subtitle, content }: Props = $props();\n\n  let element: HTMLElement;\n\n  const open = $derived(accordion.openIds.includes(id));\n\n  function toggleItem() {\n    const event = new CustomEvent('update:open', {\n      detail: { id, open },\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<div bind:this={element} class=\"mc-accordion__item\">\n  <div class=\"mc-accordion__header\">\n    <h2 class=\"mc-accordion__title\">\n      <button\n        id={`accordion-${id}`}\n        class=\"mc-accordion__trigger\"\n        aria-controls={`content-${id}`}\n        aria-expanded={open}\n        onclick={() => toggleItem()}\n      >\n        {#if $$slots.icon}\n          <span class=\"mc-accordion__icon\">\n            <slot name=\"icon\" />\n          </span>\n        {/if}\n\n        <div class=\"mc-accordion__title-wrapper\">\n          <span>{title}</span>\n\n          {#if subtitle}\n            <span class=\"mc-accordion__subtitle\">\n              {subtitle}\n            </span>\n          {/if}\n        </div>\n      </button>\n    </h2>\n  </div>\n  <div\n    id={`content-${id}`}\n    class=\"mc-accordion__content\"\n    aria-hidden={!open}\n    aria-labelledby={`accordion-${id}`}\n    role=\"region\"\n  >\n    <slot name=\"content\">\n      <p>{content || ''}</p>\n    </slot>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/accordion-list';\n</style>\n"],"names":["id","$.prop","$$props","title","subtitle","content","element","open","accordion","toggleItem","event","div","root","div_1","h2","button","$.child","node","span","root_1","$$slots","$$render","consequent","div_2","$.sibling","span_1","span_2","root_2","consequent_1","$.reset","div_3","node_3","p","root_3","$.template_effect","$.set_text","text_2","$$value","$.set_attribute","$.get"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEA,iCAgCQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EAAEG,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAE9BI,EAEE,MAAAC,QAAgBC,EAAU,QAAQ,SAASR,EAAE,CAAA,CAAA,EAE1C,SAAAS,GAAa,OACdC,EAAK,IAAO,YAAY,cAAa,CACzC,QAAU,GAAAV,EAAE,EAAE,OAAAO,CAAI,CAAA,EAClB,QAAS,GACT,SAAU,KAEZD,EAAQ,cAAcI,CAAK,CAC7B,yMAGDC,EAAGC,EAAA,EACDC,IADFF,CAAG,EAECG,IADFD,CAAG,EAECE,EAAAC,EADFF,CAAE,EACAC,EAKC,YAAeN,EAAU,EAL1B,IAAAQ,EAAAD,EAAAD,CAAA,iBAQIG,EAAIC,EAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFE,EAAQ,MAAIC,EAAAC,CAAA,QAMhBC,EAAGC,EAAAP,EAAA,CAAA,EACDQ,IADFF,CAAG,MACDE,EAAI,EAAA,IAAJA,CAAI,UAAJA,EAAI,CAAA,iBAGFC,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFtB,EAAQ,CAAA,CAAA,MADVsB,CAAI,WADFtB,EAAQ,GAAAiB,EAAAO,CAAA,MAHdL,CAAG,EAbLM,EAAAd,CAAA,IADFD,CAAE,IADJD,CAAG,EA2BH,IAAAiB,EAAAN,EA3BAX,EAAG,CAAA,EA2BHkB,EAAAf,EAAAc,CAAA,oCAQIE,EAACC,EAAA,MAADD,EAAC,EAAA,IAADA,CAAC,EAAEE,EAAA,IAAAC,EAAAC,EAAA/B,EAAO,GAAI,EAAE,CAAA,MAAhB2B,CAAC,IARLH,EAAAC,CAAA,IA5BFnB,CAAG,IAAHA,EAAG0B,GAAY/B,EAAO+B,EAAA,IAAP/B,CAAO,SAGhBgC,EAAAvB,EAAA,KAAA,aACkBf,EAAE,CAAA,EAAA,EADpBsC,EAAAvB,EAAA,gBAAA,WAG2Bf,EAAE,CAAA,EAAA,EAH7BsC,EAAAvB,EAAA,gBAAAwB,EAIgBhC,CAAI,CAAA,MAUVJ,GAAK,EAWnBmC,EAAAR,EAAA,KAAA,WACgB9B,EAAE,CAAA,EAAA,EADlBsC,EAAAR,EAAA,cAAA,CAAAS,EAGehC,CAAI,CAAA,EAHnB+B,EAAAR,EAAA,kBAAA,aAI+B9B,EAAE,CAAA,EAAA,QAhCnCW,CAAG,MAFI"}

package/dist/components/accordionlistItem/AccordionListItem.spec.js

@@ -0,0 +1,75 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import AccordionListItem from './AccordionListItem.svelte';
+import { accordion, update } from '../accordionlist/accordion-list.state.svelte';
+describe('AccordionListItem (no slots, $state)', () => {
+    it('renders title and content correctly', () => {
+        const { getByText } = render(AccordionListItem, {
+            title: 'My Title',
+            content: 'My Content',
+        });
+        expect(getByText('My Title')).toBeTruthy();
+        expect(getByText('My Content')).toBeTruthy();
+    });
+    it('renders subtitle if provided', () => {
+        const { getByText } = render(AccordionListItem, {
+            title: 'My Title',
+            subtitle: 'My Subtitle',
+            content: 'Content',
+        });
+        expect(getByText('My Subtitle')).toBeTruthy();
+    });
+    it('generates unique id if not provided', () => {
+        const { container } = render(AccordionListItem, {
+            title: 'Title',
+            content: 'Content',
+        });
+        const button = container.querySelector('button.mc-accordion__trigger');
+        const content = container.querySelector('.mc-accordion__content');
+        expect(button.id).toMatch(/^accordion-/);
+        expect(content.id).toMatch(/^content-/);
+    });
+    it('respects provided id', () => {
+        const { container } = render(AccordionListItem, {
+            id: 'custom-id',
+            title: 'Title',
+            content: 'Content',
+        });
+        const button = container.querySelector('button.mc-accordion__trigger');
+        const content = container.querySelector('.mc-accordion__content');
+        expect(button.id).toBe('accordion-custom-id');
+        expect(content.id).toBe('content-custom-id');
+    });
+    it('emits update:open event when clicked', async () => {
+        const { container } = render(AccordionListItem, {
+            id: 'item1',
+            title: 'Title',
+            content: 'Content',
+        });
+        const button = container.querySelector('button.mc-accordion__trigger');
+        let emittedDetail;
+        container.addEventListener('update:open', (e) => {
+            const customEvent = e;
+            emittedDetail = customEvent.detail;
+        });
+        await fireEvent.click(button);
+        expect(emittedDetail).toBeDefined();
+        expect(emittedDetail.id).toBe('item1');
+        expect(typeof emittedDetail.open).toBe('boolean');
+    });
+    it('updates the accordion store via update() function', async () => {
+        const { container } = render(AccordionListItem, {
+            id: 'item1',
+            title: 'Title',
+            content: 'Content',
+        });
+        // reset store
+        update([]);
+        const button = container.querySelector('button.mc-accordion__trigger');
+        expect(accordion.openIds).not.toContain('item1');
+        await fireEvent.click(button);
+        // simulate store update manually (comme le ferait le parent)
+        update(['item1']);
+        expect(accordion.openIds).toContain('item1');
+    });
+});

package/dist/components/accordionlistItem/AccordionListItem.svelte

@@ -0,0 +1,463 @@
+<svelte:options customElement={{ tag: 'm-accordion-list-item' }} />
+
+<script lang="ts">
+  import { accordion } from '../accordionlist/accordion-list.state.svelte';
+  /**
+   * 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.
+   *
+   * @slot icon - Use this slot to display an icon before the title.
+   * @slot content - Use this slot to display custom content.
+   * @event update:open {CustomEvent<boolean>} - Emits when the component state changes.
+   */
+
+  interface Props {
+    /**
+     * 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.
+     */
+    id: string;
+    /**
+     * 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.
+     */
+    title: string;
+    /**
+     * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
+     */
+    subtitle?: string;
+    /**
+     * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
+     */
+    content?: string;
+  }
+
+  let { id, title, subtitle, content }: Props = $props();
+
+  let element: HTMLElement;
+
+  const open = $derived(accordion.openIds.includes(id));
+
+  function toggleItem() {
+    const event = new CustomEvent('update:open', {
+      detail: { id, open },
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  }
+</script>
+
+<div bind:this={element} class="mc-accordion__item">
+  <div class="mc-accordion__header">
+    <h2 class="mc-accordion__title">
+      <button
+        id={`accordion-${id}`}
+        class="mc-accordion__trigger"
+        aria-controls={`content-${id}`}
+        aria-expanded={open}
+        onclick={() => toggleItem()}
+      >
+        {#if $$slots.icon}
+          <span class="mc-accordion__icon">
+            <slot name="icon" />
+          </span>
+        {/if}
+
+        <div class="mc-accordion__title-wrapper">
+          <span>{title}</span>
+
+          {#if subtitle}
+            <span class="mc-accordion__subtitle">
+              {subtitle}
+            </span>
+          {/if}
+        </div>
+      </button>
+    </h2>
+  </div>
+  <div
+    id={`content-${id}`}
+    class="mc-accordion__content"
+    aria-hidden={!open}
+    aria-labelledby={`accordion-${id}`}
+    role="region"
+  >
+    <slot name="content">
+      <p>{content || ''}</p>
+    </slot>
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-accordion {
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--accordion-list-color-background-standard, #ffffff);
+  color: var(--accordion-list-color-text-title, #000000);
+  border: 1px solid var(--accordion-list-color-border, #cccccc);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+@supports (interpolate-size: allow-keywords) {
+  .mc-accordion {
+    interpolate-size: allow-keywords;
+  }
+}
+.mc-accordion__item {
+  border-bottom: 1px solid var(--accordion-list-color-border, #cccccc);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__item {
+    transition: border-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__item {
+    transition: none;
+  }
+}
+.mc-accordion__item:last-child {
+  border-bottom: none;
+}
+@supports (interpolate-size: allow-keywords) {
+  .mc-accordion__item:is(details)::details-content {
+    overflow: hidden;
+    height: 0;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .mc-accordion__item:is(details)::details-content {
+      transition: height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), content-visibility 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+      transition-behavior: allow-discrete;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mc-accordion__item:is(details)::details-content {
+      transition: none;
+    }
+  }
+  .mc-accordion__item:is(details)[open]::details-content {
+    height: auto;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__item:is(details)[open] .mc-accordion__header::after {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__item:is(details)[open] .mc-accordion__header::after {
+    transition: none;
+  }
+}
+.mc-accordion__item:is(details)[open] .mc-accordion__header::after {
+  transform: translateY(-50%) rotateX(180deg);
+}
+.mc-accordion__item:is(details) .mc-accordion__header {
+  list-style: none;
+  cursor: pointer;
+}
+.mc-accordion__item:is(details) .mc-accordion__header::-webkit-details-marker {
+  display: none;
+}
+.mc-accordion__item:is(details) .mc-accordion__header::marker {
+  display: none;
+}
+.mc-accordion__header {
+  position: relative;
+  background-color: var(--accordion-list-color-background-standard, #ffffff);
+}
+.mc-accordion__header:is(summary) {
+  display: block;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__header:is(summary)::after {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__header:is(summary)::after {
+    transition: none;
+  }
+}
+.mc-accordion__header:is(summary)::after {
+  transform: translateY(-50%) rotateX(0deg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  content: "";
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem;
+  z-index: 1;
+}
+.mc-accordion__header:is(summary):hover .mc-accordion__trigger::before {
+  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+}
+.mc-accordion__header:is(summary):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+}
+.mc-accordion__header:is(summary):active .mc-accordion__trigger::before {
+  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+}
+.mc-accordion__header:is(summary):active::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+}
+.mc-accordion__header:is(summary):focus-visible {
+  outline: none;
+}
+.mc-accordion__header:is(summary):focus-visible .mc-accordion__trigger::before {
+  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-accordion__title {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  line-height: var(--line-height-m, 1.5);
+  display: block;
+  margin-block: 0;
+  padding: 0;
+  font-family: inherit;
+  position: relative;
+  z-index: 1;
+}
+.mc-accordion__title-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.mc-accordion__title-wrapper > * {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mc-accordion__subtitle {
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-light, 300);
+  line-height: var(--line-height-m, 1.5);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-block: 0;
+  padding: 0;
+  color: var(--accordion-list-color-text-subtitle, #666666);
+  position: relative;
+  z-index: 1;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__trigger {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__trigger {
+    transition: none;
+  }
+}
+.mc-accordion__trigger:focus-visible {
+  outline: none;
+}
+.mc-accordion__trigger:focus-visible::before {
+  box-shadow: inset 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-outer, #000000)), inset 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-mid, #ffffff));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-accordion__trigger:disabled, .mc-accordion__trigger[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.mc-accordion__trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.75rem;
+  margin-block: 0;
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  text-transform: none;
+  vertical-align: baseline;
+  appearance: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__trigger::before {
+    transition: background-color 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), box-shadow 200ms ease;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__trigger::before {
+    transition: none;
+  }
+}
+.mc-accordion__trigger::before {
+  content: "";
+  position: absolute;
+  inset: 0.25rem;
+  background-color: transparent;
+  pointer-events: none;
+  z-index: -1;
+  outline: 0 solid transparent;
+  outline-offset: -0.125rem;
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger) {
+  padding-right: 2.25rem;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)::after {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)::after {
+    transition: none;
+  }
+}
+.mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)::after {
+  transform: translateY(-50%) rotateX(0deg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  content: "";
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem;
+  z-index: 1;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)[aria-expanded=true]::after {
+    transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)[aria-expanded=true]::after {
+    transition: none;
+  }
+}
+.mc-accordion__trigger:not(.mc-accordion__header:is(summary) .mc-accordion__trigger)[aria-expanded=true]::after {
+  transform: translateY(-50%) rotateX(180deg);
+}
+.mc-accordion__header:is(summary) .mc-accordion__trigger {
+  padding-right: 2.25rem;
+}
+.mc-accordion__trigger:is(button) {
+  width: 100%;
+}
+.mc-accordion__trigger:hover::before {
+  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+}
+.mc-accordion__trigger:hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+}
+.mc-accordion__trigger:active::before {
+  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+}
+.mc-accordion__trigger:active::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--accordion-list-color-text-title, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+}
+.mc-accordion__icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  fill: currentcolor;
+}
+.mc-accordion__content {
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-m, 1.5);
+  background-color: var(--accordion-list-color-background-standard, #ffffff);
+  overflow: hidden;
+  padding: 0 0.75rem;
+  max-height: 0;
+}
+.mc-accordion__content > :first-child {
+  margin-top: 0;
+}
+.mc-accordion__content > :last-child {
+  margin-bottom: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .mc-accordion__content {
+    transition: max-height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mc-accordion__content {
+    transition: none;
+  }
+}
+.mc-accordion__content[aria-hidden=false] {
+  max-height: 9999vh;
+  padding-top: 0.125rem;
+  padding-bottom: 1rem;
+}
+.mc-accordion__item[open] .mc-accordion__content {
+  max-height: 9999vh;
+  padding-top: 0.125rem;
+  padding-bottom: 1rem;
+}
+@supports (interpolate-size: allow-keywords) {
+  @media (prefers-reduced-motion: no-preference) {
+    .mc-accordion__content {
+      transition: height 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), padding 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67), content-visibility 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
+      transition-behavior: allow-discrete;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mc-accordion__content {
+      transition: none;
+    }
+  }
+  .mc-accordion__content {
+    height: 0;
+    max-height: none;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .mc-accordion__content[aria-hidden=false] {
+    height: auto;
+    padding-top: 0.125rem;
+    padding-bottom: 1rem;
+  }
+  .mc-accordion__item[open] .mc-accordion__content {
+    height: auto;
+    padding-top: 0.125rem;
+    padding-bottom: 1rem;
+  }
+}
+.mc-accordion--ghost {
+  background-color: transparent;
+  border: none;
+}
+.mc-accordion--ghost .mc-accordion__header, .mc-accordion--ghost .mc-accordion__content {
+  background-color: var(--accordion-list-color-background-ghost, rgba(255, 255, 255, 0.01));
+}
+.mc-accordion--ghost .mc-accordion__trigger:hover::before, .mc-accordion--ghost .mc-accordion__trigger:active::before {
+  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+}</style>

package/dist/components/accordionlistItem/AccordionListItem.svelte.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ *
+ * @slot icon - Use this slot to display an icon before the title.
+ * @slot content - Use this slot to display custom content.
+ * @event update:open {CustomEvent<boolean>} - Emits when the component state changes.
+ */
+interface Props {
+    /**
+     * 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.
+     */
+    id: string;
+    /**
+     * 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.
+     */
+    title: string;
+    /**
+     * An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item.
+     */
+    subtitle?: string;
+    /**
+     * The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements.
+     */
+    content?: string;
+}
+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 AccordionListItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    content: {};
+}, {}, "">;
+type AccordionListItem = InstanceType<typeof AccordionListItem>;
+export default AccordionListItem;
+//# sourceMappingURL=AccordionListItem.svelte.d.ts.map

package/dist/components/accordionlistItem/AccordionListItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionListItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/accordionlistItem/AccordionListItem.svelte.ts"],"names":[],"mappings":"AAKE;;;;;;GAMG;AAEH,UAAU,KAAK;IACb;;;;;OAKG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAwDH,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"}