@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/accordionlist/AccordionList.stories.js

@@ -0,0 +1,141 @@
+import { action } from 'storybook/actions';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './AccordionList.svelte';
+import '../accordionlistItem/AccordionListItem.svelte';
+import '@mozaic-ds/icons-svelte/components/Wrench32/Wrench32.svelte';
+import '@mozaic-ds/icons-svelte/components/Project32/Project32.svelte';
+import '@mozaic-ds/icons-svelte/components/Sharpening32/Sharpening32.svelte';
+const meta = {
+    title: 'Content/Accordion list',
+    component: 'm-accordion-list',
+    subcomponents: { 'm-accordion-list-item': 'm-accordion-list-item' },
+    tags: ['v2'],
+    args: {
+        value: ['1'],
+        default: `
+    <m-accordion-list-item title="How does the delivery work?" id="1">
+        <p slot="content">
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
+          with a tracking number as soon as your order is shipped.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="What payment methods are accepted?" id="2">
+        <p slot="content">
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="Can I return an item?">
+        <p slot="content">
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs
+          are at your expense unless the product is defective..
+        </p>
+      </m-accordion-list-item>
+    `,
+    },
+    render: (args) => html `
+    <m-accordion-list
+      appearance="${ifDefined(args.appearance)}"
+      value="${args.value?.join(',')}"
+      @update:open="${action('update:open')}"
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-accordion-list>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Ghost = {
+    args: {
+        appearance: 'ghost',
+    },
+};
+export const WithIcons = {
+    args: {
+        default: `
+    <m-accordion-list-item title="How does the delivery work?">
+        <wrench-32 slot="icon"></wrench-32>
+
+        <p slot="content">
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
+          with a tracking number as soon as your order is shipped.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="What payment methods are accepted?">
+        <project-32 slot="icon"></project-32>
+
+        <p slot="content">
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="Can I return an item?">
+        <sharpening-32 slot="icon"></sharpening-32>
+
+        <p slot="content">
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs
+          are at your expense unless the product is defective..
+        </p>
+      </m-accordion-list-item>`,
+    },
+};
+export const WithSubtitle = {
+    args: {
+        default: `
+      <m-accordion-list-item
+        title="How does the delivery work?"
+        subtitle="Shipping & tracking information"
+      >
+        <p slot="content">
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
+          with a tracking number as soon as your order is shipped.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item
+        title="What payment methods are accepted?"
+        subtitle="Payments & billing options"
+      >
+        <p slot="content">
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="Can I return an item?" subtitle="Returns & refund policy">
+        <p slot="content">
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs
+          are at your expense unless the product is defective..
+        </p>
+      </m-accordion-list-item>
+    `,
+    },
+};
+export const WithSingleBehavior = {
+    args: {
+        default: `
+      <m-accordion-list-item title="How does the delivery work?">
+        <p slot="content">
+          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
+          with a tracking number as soon as your order is shipped.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="What payment methods are accepted?">
+        <p slot="content">
+          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
+        </p>
+      </m-accordion-list-item>
+
+      <m-accordion-list-item title="Can I return an item?">
+        <p slot="content">
+          Yes, you have 30 days to return an item in its original condition. Return shipping costs
+          are at your expense unless the product is defective..
+        </p>
+      </m-accordion-list-item>
+    `,
+    },
+};

package/dist/components/accordionlist/AccordionList.svelte

@@ -0,0 +1,441 @@
+<svelte:options customElement={{ tag: 'm-accordion-list', extend: customElementForwardEvents }} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import { customElementForwardEvents } from '../../utils';
+  import { accordion, update } from './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 default - Use this slot to display the accordion items.
+   */
+
+  interface Props {
+    /**
+     * Defines the visual appearance of the button.
+     */
+    appearance?: 'standard' | 'ghost';
+    /**
+     * Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior..
+     */
+    behavior?: 'multiple' | 'single';
+    /**
+     * IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded.
+     */
+    value?: string[];
+  }
+
+  let { appearance = 'standard', behavior = 'multiple', value = $bindable([]) }: Props = $props();
+
+  let element: HTMLElement;
+
+  $effect(() => {
+    update([...value]);
+  });
+
+  onMount(() => {
+    const handler = (event: Event) => {
+      const customEvent = event as CustomEvent;
+      const itemId = customEvent.detail.id;
+
+      if (behavior === 'single') {
+        update(accordion.openIds.includes(itemId) ? [] : [itemId]);
+        value = [itemId];
+      } else {
+        const set = new SvelteSet([...accordion.openIds]);
+        if (set.has(itemId)) {
+          set.delete(itemId);
+        } else {
+          set.add(itemId);
+        }
+        update([...set]);
+        value = [...accordion.openIds];
+      }
+    };
+
+    element.addEventListener('update:open', handler);
+
+    return () => {
+      element.removeEventListener('update:open', handler);
+    };
+  });
+</script>
+
+<div bind:this={element} class={['mc-accordion', `mc-accordion--${appearance}`]}>
+  <slot />
+</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/accordionlist/AccordionList.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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 default - Use this slot to display the accordion items.
+ */
+interface Props {
+    /**
+     * Defines the visual appearance of the button.
+     */
+    appearance?: 'standard' | 'ghost';
+    /**
+     * Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior..
+     */
+    behavior?: 'multiple' | 'single';
+    /**
+     * IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded.
+     */
+    value?: 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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AccordionList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "value">;
+type AccordionList = InstanceType<typeof AccordionList>;
+export default AccordionList;
+//# sourceMappingURL=AccordionList.svelte.d.ts.map

package/dist/components/accordionlist/AccordionList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/accordionlist/AccordionList.svelte.ts"],"names":[],"mappings":"AASE;;;;GAIG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAsDH,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,aAAa;;;;;;eAAqF,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}

package/dist/components/accordionlist/README.md

@@ -0,0 +1,18 @@
+# `m-accordion-list`
+
+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 |
+|------|-------------|------|---------|
+| `appearance` | Defines the visual appearance of the button. | `'standard'` `'ghost'` | `standard` |
+| `behavior` | Component behavior: `multiple` allows all items to be open simultaneously, `single` ensures only one item is open at a time. For native HTML implementation, the `single` behavior uses the HTML5 `name` attribute on `<details>` elements for browser-native exclusive behavior.. | `'multiple'` `'single'` | `multiple` |
+| `value` | IDs of the Accordion items that are currently open. Updating this array controls which sections are expanded. | `string[]` | `$bindable([])` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to display the accordion items. |
+

package/dist/components/accordionlist/accordion-list.state.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare const accordion: {
+    openIds: string[];
+};
+export declare function update(value: string[]): void;
+//# sourceMappingURL=accordion-list.state.svelte.d.ts.map

package/dist/components/accordionlist/accordion-list.state.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-list.state.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/accordionlist/accordion-list.state.svelte.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;aAAqB,MAAM,EAAE;CAEjD,CAAC;AAEH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,QAErC"}

package/dist/components/accordionlist/accordion-list.state.svelte.js

@@ -0,0 +1,6 @@
+export const accordion = $state({
+    openIds: [],
+});
+export function update(value) {
+    accordion.openIds = [...value];
+}