@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/accordionlist/AccordionList.svelte

@@ -161,7 +161,8 @@
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
   content: "";
   position: absolute;
   right: 0.75rem;
@@ -169,22 +170,22 @@
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 1rem;
+  background-color: var(--accordion-list-color-text-title, #000000);
   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));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__header:is(summary):active .mc-accordion__trigger::before {
-  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__header:is(summary):focus-visible {
   outline: none;
@@ -315,7 +316,8 @@
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
   content: "";
   position: absolute;
   right: 1rem;
@@ -323,9 +325,7 @@
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 1rem;
+  background-color: var(--accordion-list-color-text-title, #000000);
   z-index: 1;
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -348,16 +348,18 @@
   width: 100%;
 }
 .mc-accordion__trigger:hover::before {
-  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__trigger:active::before {
-  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__icon {
   flex-shrink: 0;
@@ -437,5 +439,5 @@
   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));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }</style>

package/dist/components/accordionlistItem/AccordionListItem.js

@@ -1,4 +1,4 @@
-import{o 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,n as y,j as g,v 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";import"../../branches.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:`/**
+import{o as H,c as J,e as K,a as N,p as u,s as x,t as z,u as O,b as v,d as P,f as w,h as t,i as y,m as g,w as Q,r as n,k as E}from"../../custom-element.js";import{i as I}from"../../if.js";import{a as R,s as X}from"../../slot.js";import{s as c}from"../../attributes.js";import{b as T}from"../../this.js";import{a as U}from"../../accordion-list.state.svelte.js";import"../../branches.js";var V=w('<span class="mc-accordion__icon svelte-k06wun"><!></span>'),W=w('<span class="mc-accordion__subtitle svelte-k06wun"> </span>'),Z=w('<p class="svelte-k06wun"> </p>'),$=w('<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 ee={hash:"svelte-k06wun",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 @supports (interpolate-size: allow-keywords) {
@@ -32,11 +32,11 @@ import{o 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 a
 @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;}
+}.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);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;content:"";position:absolute;right:1rem;top:50%;flex-shrink:0;width:1rem;height:1rem;background-color:var(--accordion-list-color-text-title, #000000);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;}
+}.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(0, 0, 0, 0.05));}.mc-accordion__trigger.svelte-k06wun:hover::after {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;}.mc-accordion__trigger.svelte-k06wun:active::before {background-color:var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-accordion__trigger.svelte-k06wun:active::after {mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;}.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;}
@@ -46,5 +46,5 @@ import{o 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 a
   }
   @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 A={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 D=e=>{var r=U(),d=t(r);X(d,o,"icon",{},null),n(r),v(e,r)};M(B,e=>{Y.icon&&e(D)})}var I=x(B,2),k=t(I),S=t(k,!0);n(k);var q=x(k,2);{var F=e=>{var r=V(),d=t(r,!0);n(r),z(()=>E(d,l())),v(e,r)};M(q,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(S,w()),a(s,"id",`content-${i()}`),a(s,"aria-hidden",!y(p)),a(s,"aria-labelledby",`accordion-${i()}`)}),v(C,m),O(A)}H(["click"]);customElements.define("m-accordion-list-item",J(ee,{id:{},title:{},subtitle:{},content:{}},["icon","content"],[],!0));
+}`};function re(C,o){const Y=R(o);K(o,!0),N(C,ee);let i=u(o,"id",7),_=u(o,"title",7),l=u(o,"subtitle",7),h=u(o,"content",7),p;const f=Q(()=>U.openIds.includes(i()));function A(){const e=new CustomEvent("update:open",{detail:{id:i(),open:y(f)},bubbles:!0,composed:!0});p.dispatchEvent(e)}var D={get id(){return i()},set id(e){i(e),g()},get title(){return _()},set title(e){_(e),g()},get subtitle(){return l()},set subtitle(e){l(e),g()},get content(){return h()},set content(e){h(e),g()}},m=$(),k=t(m),L=t(k),a=t(L),B=t(a);{var S=e=>{var r=V(),d=t(r);X(d,o,"icon",{},null),n(r),v(e,r)};I(B,e=>{Y.icon&&e(S)})}var M=x(B,2),b=t(M),j=t(b,!0);n(b);var q=x(b,2);{var F=e=>{var r=W(),d=t(r,!0);n(r),z(()=>E(d,l())),v(e,r)};I(q,e=>{l()&&e(F)})}n(M),n(a),n(L),n(k);var s=x(k,2),G=t(s);return X(G,o,"content",{},e=>{var r=Z(),d=t(r,!0);n(r),z(()=>E(d,h()||"")),v(e,r)}),n(s),n(m),T(m,e=>p=e,()=>p),z(()=>{c(a,"id",`accordion-${i()}`),c(a,"aria-controls",`content-${i()}`),c(a,"aria-expanded",y(f)),E(j,_()),c(s,"id",`content-${i()}`),c(s,"aria-hidden",!y(f)),c(s,"aria-labelledby",`accordion-${i()}`)}),O("click",a,()=>A()),v(C,m),P(D)}H(["click"]);customElements.define("m-accordion-list-item",J(re,{id:{},title:{},subtitle:{},content:{}},["icon","content"],[],{mode:"open"}));
 //# sourceMappingURL=AccordionListItem.js.map

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

@@ -1 +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"}
+{"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","$.delegated"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEA,kCAgCQA,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,EACAG,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,IA7B7BwC,EAAA,QAAAzB,EAAA,IAKgBN,EAAU,CAAA,MARhCE,CAAG,MAFI"}

package/dist/components/accordionlistItem/AccordionListItem.svelte

@@ -183,7 +183,8 @@
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
   content: "";
   position: absolute;
   right: 0.75rem;
@@ -191,22 +192,22 @@
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 1rem;
+  background-color: var(--accordion-list-color-text-title, #000000);
   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));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__header:is(summary):active .mc-accordion__trigger::before {
-  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__header:is(summary):focus-visible {
   outline: none;
@@ -337,7 +338,8 @@
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
   content: "";
   position: absolute;
   right: 1rem;
@@ -345,9 +347,7 @@
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 1rem;
+  background-color: var(--accordion-list-color-text-title, #000000);
   z-index: 1;
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -370,16 +370,18 @@
   width: 100%;
 }
 .mc-accordion__trigger:hover::before {
-  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__trigger:active::before {
-  background-color: var(--accordion-list-color-background-hover, rgba(70, 78, 99, 0.1));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .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");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
 .mc-accordion__icon {
   flex-shrink: 0;
@@ -459,5 +461,5 @@
   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));
+  background-color: var(--accordion-list-color-background-hover, rgba(0, 0, 0, 0.05));
 }</style>

package/dist/components/actionbottombar/ActionBottomBar.js

@@ -1,4 +1,4 @@
-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:`/**
+import{c as p,e as _,a as h,p as u,s as m,t as w,b as j,d as x,f as q,h as a,m as y,r as i,j as B,l 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) {
@@ -8,5 +8,5 @@ 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
 @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));
+}`};function E(n,t){_(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",p(E,{shadow:{attribute:"shadow",reflect:!0,type:"Boolean"}},["left","right"],[],{mode:"open"}));
 //# sourceMappingURL=ActionBottomBar.js.map

package/dist/components/actionlistbox/ActionListbox.js

@@ -1,10 +1,12 @@
-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:`/**
+import{c as V,e as W,a as X,p as f,B as Y,x as Z,s as g,t as A,b as w,d as $,f as k,i as a,h as s,m as p,v as ee,r as n,k as te,q as oe,j as ie,l as se}from"../../custom-element.js";import{o as ne}from"../../index-client.js";import{i as D}from"../../if.js";import{a as re,s as S}from"../../slot.js";import{a as le}from"../../attributes.js";import{b as y}from"../../this.js";import{I as ce}from"../iconbutton/IconButton.js";import{q as ae}from"../../Condition20.js";import{c as be}from"../../custom-element-forward-events.js";import"../../branches.js";import"../loader/Loader.js";var me=k('<h3 class="mc-listbox__title svelte-cf5eub"> </h3>'),ve=k("<div><!></div>"),ue=k('<div><div><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> <!>',1);const de={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.svelte-cf5eub:has(.mc-listbox__content:where(.svelte-cf5eub):not([popover])), .mc-listbox.svelte-cf5eub:has(.mc-listbox__content:where(.svelte-cf5eub):popover-open) {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, 4);}.mc-listbox:has(.mc-listbox__content:where(.svelte-cf5eub):not([popover])).is-visible.svelte-cf5eub, .mc-listbox:has(.mc-listbox__content:where(.svelte-cf5eub):popover-open).is-visible.svelte-cf5eub {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-listbox.svelte-cf5eub:has(.mc-listbox__content:where(.svelte-cf5eub):not([popover])), .mc-listbox.svelte-cf5eub:has(.mc-listbox__content:where(.svelte-cf5eub):popover-open) {opacity:1;}
+@media (width >= 680px) {.mc-listbox.svelte-cf5eub:has(.mc-listbox__content:where(.svelte-cf5eub):not([popover])), .mc-listbox.svelte-cf5eub:has(.mc-listbox__content:where(.svelte-cf5eub):popover-open) {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));
+}.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;}
+@media (width >= 680px) {.mc-listbox--top.svelte-cf5eub .mc-listbox__content:where(.svelte-cf5eub) {margin:0 0 8px;inset:auto;position-area:span-right top;}.mc-listbox--bottom.svelte-cf5eub .mc-listbox__content:where(.svelte-cf5eub) {margin:8px 0 0;inset:auto;position-area:span-right bottom;}.mc-listbox--left.svelte-cf5eub .mc-listbox__content:where(.svelte-cf5eub) {margin:0 8px 0 0;inset:auto;position-area:span-bottom left;}.mc-listbox--right.svelte-cf5eub .mc-listbox__content:where(.svelte-cf5eub) {margin:0 0 0 8px;inset:auto;position-area:span-bottom right;}
+}.mc-action-list.svelte-cf5eub {padding:0.5rem 0.5rem;margin:0;}.mc-action-list__element.svelte-cf5eub {height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, 0.25rem);flex-grow:1;}.mc-action-list__element.svelte-cf5eub:hover {background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-action-list__element--danger.svelte-cf5eub .mc-action-list__text:where(.svelte-cf5eub) {color:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-cf5eub .mc-action-list__icon:where(.svelte-cf5eub) {fill:var(--action-listbox-color-text-danger, #c61112);}.mc-action-list__element--danger.svelte-cf5eub:hover {background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));}.mc-action-list__element--disabled.svelte-cf5eub .mc-action-list__text:where(.svelte-cf5eub) {color:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-cf5eub .mc-action-list__icon:where(.svelte-cf5eub) {fill:var(--action-listbox-color-text-disabled, #b3b3b3);}.mc-action-list__element--disabled.svelte-cf5eub:hover {background-color:transparent;}.mc-action-list__button.svelte-cf5eub {background-color:transparent;color:var(--action-listbox-color-text-default, #000000);border:none;display:flex;align-items:center;gap:0.25rem;padding:0;padding:0 0.25rem;cursor:pointer;width:100%;height:100%;}.mc-action-list__button.svelte-cf5eub:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-action-list__text.svelte-cf5eub {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}.mc-action-list__icon.svelte-cf5eub {width:1.25rem;height:1.25rem;}.mc-action-list__divider.svelte-cf5eub {margin:0.5rem 0;}.mc-listbox__close.svelte-cf5eub {display:flex;align-items:center;justify-content:center;}`};function fe(E,i){const z=re(i);W(i,!0),X(E,de);let r=f(i,"open",15),m=f(i,"title",7),_=f(i,"position",7,"bottom"),h=f(i,"onclose",7);const F=crypto.randomUUID();let v,c,l=ee(null);function U(){h()?.();const e=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(e),r(!1)}function K(){const e=c?.querySelector('slot[name="item"]');return e?e.assignedElements().filter(o=>!o.hasAttribute("disabled")&&o.getAttribute("disabled")!=="true"):[]}function I(e){const t=K();if(!t.length)return;let o=0;if(!e){const d=t.findIndex(R=>R===document.activeElement);o=d===-1?0:(d+1)%t.length}t[o]?.focus()}function M(){!c||!a(l)||(r()?(c.showPopover({source:a(l)}),I(!0)):c.hidePopover({source:a(l)}))}function B(e){if(!r())return;const t=e.composedPath?e.composedPath():[];!t.includes(v)&&!t.includes(a(l))&&r(!1)}function O(e){e.preventDefault(),e.key==="Tab"&&I(),e.key==="Escape"&&(r(!1),(a(l)?.querySelector('slot[name="activator"]')).assignedElements()[0].focus())}Y(M),ne(()=>(document.addEventListener("mousedown",B),()=>{document.removeEventListener("mousedown",B)}));var T={get open(){return r()},set open(e){r(e),p()},get title(){return m()},set title(e){m(e),p()},get position(){return _()},set position(e="bottom"){_(e),p()},get onclose(){return h()},set onclose(e){h(e),p()}},C=ue(),b=Z(C),u=s(b);le(u,()=>({class:"mc-listbox__content",...z.activator?{id:F,popover:"manual",role:"dialog",tabindex:0,onkeydown:O}:{}}),void 0,void 0,void 0,"svelte-cf5eub");var x=s(u),L=s(x);{var G=e=>{var t=me(),o=s(t,!0);n(t),A(()=>te(o,m())),w(e,t)};D(L,e=>{m()&&e(G)})}var P=g(L,2),H=s(P);ce(H,{ghost:!0,"aria-label":"Close",onclick:U,$$slots:{icon:(e,t)=>{ae(e,{slot:"icon"})}}}),n(P),n(x);var j=g(x,2),q=s(j),J=s(q);S(J,i,"item",{},null),n(q),n(j),n(u),y(u,e=>c=e,()=>c),n(b),y(b,e=>v=e,()=>v);var N=g(b,2);{var Q=e=>{var t=ve(),o=s(t);S(o,i,"activator",{},null),n(t),y(t,d=>oe(l,d),()=>a(l)),w(e,t)};D(N,e=>{z.activator&&e(Q)})}return A(()=>ie(b,1,se({"mc-listbox":!0,[`mc-listbox--${_()}`]:!0}),"svelte-cf5eub")),w(E,C),$(T)}customElements.define("m-action-listbox",V(fe,{open:{attribute:"open",reflect:!0,type:"Boolean"},title:{},position:{},onclose:{}},["item","activator"],[],{mode:"open"},be));
 //# sourceMappingURL=ActionListbox.js.map

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

@@ -1 +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"}
+{"version":3,"file":"ActionListbox.js","sources":["../../../src/components/actionlistbox/ActionListbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-action-listbox',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n    },\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  import { onMount } from 'svelte';\n  import type { ActionListboxItem } from '../actionlistboxitem/ActionListboxItem.svelte';\n  import type { Button } from '../button/Button.svelte';\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   * @slot activator - The trigger used to toggle the listbox. It should contain one Button or IconButton.\n   * @event close {CustomEvent<void>} - Emits when the close button is clicked.\n   */\n  interface Props {\n    /**\n     * If `true`, displays the listbox when using the activator slot.\n     */\n    open?: boolean;\n    /**\n     * title displayed in mobile version.\n     */\n    title?: string;\n    /**\n     * Defines the position of the listbox relative to its trigger or container.\n     */\n    position?: 'top' | 'bottom' | 'left' | 'right';\n    /**\n     * Callback to trigger on close button click.\n     */\n    onclose?: () => void;\n  }\n\n  let { open = $bindable(), title, position = 'bottom', onclose }: Props = $props();\n\n  // TODO: Remove when typescript is up to date\n  type PopoverOptions = {\n    source: HTMLElement;\n  };\n\n  type Popover = {\n    showPopover: (options?: PopoverOptions) => void;\n    hidePopover: (options?: PopoverOptions) => void;\n  };\n\n  const id = crypto.randomUUID();\n\n  let element: HTMLElement;\n  let listbox: HTMLElement;\n  let activator: HTMLElement | null = $state(null);\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    open = false;\n  }\n\n  function getFocusableElements(): HTMLElement[] {\n    const slot = listbox?.querySelector('slot[name=\"item\"]') as HTMLSlotElement;\n    if (!slot) return [];\n\n    const assignedElements = slot.assignedElements() as HTMLElement[];\n    return assignedElements.filter((el) => {\n      return !el.hasAttribute('disabled') && el.getAttribute('disabled') !== 'true';\n    });\n  }\n\n  function focusListItem(first?: boolean) {\n    const items = getFocusableElements();\n    if (!items.length) return;\n\n    let focusedIndex = 0;\n\n    if (!first) {\n      const currentIndex = items.findIndex((item) => item === document.activeElement);\n\n      focusedIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n    }\n\n    (items[focusedIndex] as ActionListboxItem)?.focus();\n  }\n\n  function toggleListbox() {\n    if (!listbox || !activator) return;\n\n    if (open) {\n      (listbox as Popover).showPopover({ source: activator });\n      focusListItem(true);\n    } else {\n      (listbox as Popover).hidePopover({ source: activator });\n    }\n  }\n\n  function handleClickOutside(event: MouseEvent) {\n    if (!open) return;\n\n    const path = event.composedPath ? event.composedPath() : [];\n    if (!path.includes(element) && !path.includes(activator!)) {\n      open = false;\n    }\n  }\n\n  function onKeydown(event: KeyboardEvent) {\n    event.preventDefault();\n    if (event.key === 'Tab') {\n      focusListItem();\n    }\n\n    if (event.key === 'Escape') {\n      open = false;\n      const slot = activator?.querySelector('slot[name=\"activator\"]') as HTMLSlotElement;\n      const activatorBtn = slot.assignedElements()[0];\n      (activatorBtn as Element & Button).focus();\n    }\n  }\n\n  $effect(toggleListbox);\n\n  onMount(() => {\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  });\n</script>\n\n<div\n  bind:this={element}\n  class={{\n    'mc-listbox': true,\n    [`mc-listbox--${position}`]: true,\n  }}\n>\n  <div\n    bind:this={listbox}\n    class=\"mc-listbox__content\"\n    {...$$slots.activator\n      ? { id, popover: 'manual', role: 'dialog', tabindex: 0, onkeydown: onKeydown }\n      : {}}\n  >\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{#if $$slots.activator}\n  <div bind:this={activator}>\n    <slot name=\"activator\" />\n  </div>\n{/if}\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":["open","$.prop","$$props","title","position","onclose","id","element","listbox","activator","$.state","handleClose","event","getFocusableElements","slot","el","focusListItem","first","items","focusedIndex","currentIndex","item","toggleListbox","handleClickOutside","path","$.get","onKeydown","$.user_effect","onMount","div","$.first_child","fragment","div_1","$.child","$$slots","div_2","h3","root_1","$$render","consequent","span","$.sibling","node","IconButton","node_1","Cross24","$$anchor","div_3","ul","$.reset","$$value","node_3","div_4","root_3","$.set","consequent_1","$.template_effect","$.set_class","$.clsx","customElementForwardEvents"],"mappings":";;;;;;;;;;qnEAUA,mCAkCQA,EAAIC,EAAAC,EAAA,OAAA,EAAA,EAAgBC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,mBAAW,QAAQ,EAAEC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,QAYvDI,EAAK,OAAO,WAAU,MAExBC,EACAC,EACAC,EAAgCC,GAAO,IAAI,EAEtC,SAAAC,GAAc,CACrBN,MAAO,QAEDO,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBL,EAAQ,cAAcK,CAAK,EAE3BZ,EAAO,EAAK,CACd,CAES,SAAAa,GAAsC,CACvC,MAAAC,EAAON,GAAS,cAAc,mBAAmB,SAClDM,EAEoBA,EAAK,iBAAgB,EACtB,OAAQC,IACtBA,EAAG,aAAa,UAAU,GAAKA,EAAG,aAAa,UAAU,IAAM,MACxE,EALQ,CAAA,CAMX,UAESC,EAAcC,EAAiB,CAChC,MAAAC,EAAQL,EAAoB,EAC7B,GAAA,CAAAK,EAAM,OAAM,OAEb,IAAAC,EAAe,EAEd,GAAA,CAAAF,EAAO,OACJG,EAAeF,EAAM,UAAWG,GAASA,IAAS,SAAS,aAAa,EAE9EF,EAAeC,IAAY,GAAU,GAAKA,EAAe,GAAKF,EAAM,MACtE,CAECA,EAAMC,CAAY,GAAyB,MAAK,CACnD,CAES,SAAAG,GAAgB,CAClB,CAAAd,MAAYC,CAAS,IAEtBT,EAAI,GACLQ,EAAoB,YAAW,CAAG,SAAQC,CAAS,CAAA,CAAA,EACpDO,EAAc,EAAI,GAEjBR,EAAoB,YAAW,CAAG,SAAQC,CAAS,CAAA,CAAA,EAExD,UAESc,EAAmBX,EAAmB,KACxCZ,EAAI,EAAA,OAEH,MAAAwB,EAAOZ,EAAM,aAAeA,EAAM,aAAY,EAAA,CAAA,GAC/CY,EAAK,SAASjB,CAAO,GAAA,CAAMiB,EAAK,SAAQC,EAAChB,CAAS,CAAA,GACrDT,EAAO,EAAK,CAEhB,UAES0B,EAAUd,EAAsB,CACvCA,EAAM,eAAc,EAChBA,EAAM,MAAQ,OAChBI,EAAa,EAGXJ,EAAM,MAAQ,WAChBZ,EAAO,EAAK,GACFyB,EAAGhB,CAAS,GAAE,cAAc,wBAAwB,GACpC,iBAAgB,EAAG,CAAC,EACX,MAAK,EAE5C,CAEAkB,EAAQL,CAAa,EAErBM,GAAO,KACL,SAAS,iBAAiB,YAAaL,CAAkB,EAE5C,IAAA,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,EACD,+IAjG2C,SAAQ,sEAoGrDM,EAAAC,EAAAC,CAAA,EAOEC,EAAAC,EAPFJ,CAAA,KAOEG,oCAGK,GAAAE,EAAQ,WACN,GAAA5B,EAAI,QAAS,SAAU,KAAM,SAAU,SAAU,EAAG,UAAWoB,8CAGpE,IAAAS,EAAGF,EAPLD,CAAA,MAOEG,CAAG,iBAECC,EAAEC,GAAA,MAAFD,EAAE,EAAA,IAAFA,CAAE,aAA4BjC,EAAK,CAAA,CAAA,MAAnCiC,CAAE,WADAjC,EAAK,GAAAmC,EAAAC,CAAA,QAITC,EAAIC,EAAAC,EAAA,CAAA,MAAJF,CAAI,EACFG,GAAUC,EAAA,uCAAmCjC,wBAC3CkC,GAAOC,EAAA,CAAA,KAAA,MAAA,CAAA,QAFXN,CAAI,IALNL,CAAG,EAWH,IAAAY,IAXAZ,EAAG,CAAA,EAYDa,IADFD,CAAG,MACDC,CAAE,0BAAFA,CAAE,IADJD,CAAG,EAlBLE,EAAAjB,CAAA,IAAAA,EAAAkB,GACY1C,QAAAA,CAAO,EARrByC,EAAApB,CAAA,IAAAA,EAAAqB,GACY3C,QAAAA,CAAO,EADnB,IAAA4C,EAAAV,EAAAZ,EAAA,CAAA,iBAkCEuB,EAAGC,GAAA,MAAHD,CAAG,+BAAHA,CAAG,IAAHA,EAAGF,GAAAI,GAAY7C,EAASyC,CAAA,EAAA,IAAAzB,EAAThB,CAAS,CAAA,MAAxB2C,CAAG,WADDlB,EAAQ,WAASI,EAAAiB,CAAA,IAjCrBC,OAAAA,EAAA,IAAAC,GAAA5B,EAAA,EAAA6B,GAAA,CAGG,aAAc,GAAI,CAAA,eACFtD,OAAa,EAAI,CAAA,EAAA,eAAA,CAAA,aAN7B,yKAxIIuD"}

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

@@ -1,20 +1,77 @@
-import { render, fireEvent } from '@testing-library/svelte';
-import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach } 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();
+beforeEach(() => {
+    HTMLElement.prototype.showPopover = vi.fn();
+    HTMLElement.prototype.hidePopover = vi.fn();
+    Object.defineProperty(global, 'crypto', {
+        value: {
+            randomUUID: () => '123-test-id',
+        },
     });
-    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();
+});
+describe('ActionListbox Component', () => {
+    it('should render the title when provided', () => {
+        const title = 'Menu Options';
+        render(ActionListbox, { title });
+        expect(screen.getByText(title)).toBeTruthy();
+        expect(screen.getByRole('heading', { level: 3 }).classList.contains('mc-listbox__title')).toBeTruthy();
+    });
+    it('should not render the title if not provided', () => {
+        const { container } = render(ActionListbox);
+        const titleElement = container.querySelector('.mc-listbox__title');
+        expect(titleElement).toBeNull();
+    });
+    describe('Positioning Classes', () => {
+        it('should apply the default position class (bottom)', () => {
+            const { container } = render(ActionListbox);
+            const mainDiv = container.querySelector('.mc-listbox');
+            expect(mainDiv?.classList.contains('mc-listbox--bottom')).toBeTruthy();
+        });
+        it('should apply correct classes based on position prop', () => {
+            const { container } = render(ActionListbox, { position: 'left' });
+            const mainDiv = container.querySelector('.mc-listbox');
+            expect(mainDiv?.classList.contains('mc-listbox--left')).toBeTruthy();
+        });
+        it('should handle single position value', () => {
+            const { container } = render(ActionListbox, { position: 'top' });
+            const mainDiv = container.querySelector('.mc-listbox');
+            expect(mainDiv?.classList.contains('mc-listbox--top')).toBeTruthy();
+        });
+    });
+    describe('Events and Callbacks', () => {
+        it('should call onclose prop and dispatch close event when clicking the close button', async () => {
+            const onclose = vi.fn();
+            const { container } = render(ActionListbox, { onclose });
+            const closeEventSpy = vi.fn();
+            const element = container.querySelector('.mc-listbox');
+            element?.addEventListener('close', closeEventSpy);
+            const closeButton = screen.getByLabelText('Close');
+            await fireEvent.click(closeButton);
+            expect(onclose).toHaveBeenCalledTimes(1);
+            expect(closeEventSpy).toHaveBeenCalled();
+        });
+    });
+    describe('Open state logic', () => {
+        it('should set the popover attributes correctly', () => {
+            const { container } = render(ActionListbox);
+            const popoverContent = container.querySelector('.mc-listbox__content');
+            expect(popoverContent?.hasAttribute('popover')).toBe(false);
+        });
+        it('should reflect the open state if possible', async () => {
+            const { component } = render(ActionListbox, { open: true });
+            expect(component.open).toBe(true);
+        });
+        it('should close when clicking outside the component', async () => {
+            const { component } = render(ActionListbox, { open: true });
+            await fireEvent.mouseDown(document.body);
+            expect(component.open).toBe(false);
+        });
+        it('should NOT close when clicking inside the component', async () => {
+            const { component, container } = render(ActionListbox, { open: true });
+            const innerDiv = container.querySelector('.mc-listbox__content');
+            await fireEvent.mouseDown(innerDiv);
+            expect(component.open).toBe(true);
+        });
     });
 });

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '../button/Button.svelte';
 import './ActionListbox.svelte';
 import '../actionlistboxitem/ActionListboxItem.svelte';
 import '@mozaic-ds/icons-svelte/components/Copy20/Copy20.svelte';
@@ -9,4 +10,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+export declare const Activator: Story;
 //# sourceMappingURL=ActionListbox.stories.d.ts.map

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

@@ -1 +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"}
+{"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,yBAAyB,CAAC;AACjC,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,IAsDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,SAAS,EAAE,KAqDvB,CAAC"}

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

@@ -1,6 +1,7 @@
 import { action } from 'storybook/actions';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import '../button/Button.svelte';
 import './ActionListbox.svelte';
 import '../actionlistboxitem/ActionListboxItem.svelte';
 import '@mozaic-ds/icons-svelte/components/Copy20/Copy20.svelte';
@@ -10,12 +11,29 @@ 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' },
+    subcomponents: { 'm-action-listbox-item': 'm-action-listbox-item' },
+    argTypes: {
+        position: {
+            control: 'radio',
+            options: ['top', 'bottom', 'left', 'right'],
+            table: {
+                defaultValue: {
+                    summary: 'bottom',
+                },
+            },
+        },
+    },
     args: {
         title: 'Listbox title (optional)',
+        position: 'bottom',
     },
     render: (args) => html `
-    <m-action-listbox title="${ifDefined(args.title)}" @close="${action('close')}">
+    <m-action-listbox
+      title="${ifDefined(args.title)}"
+      position="${ifDefined(args.position)}"
+      ?open="${args.open}"
+      @close="${action('close')}"
+    >
       <m-action-listbox-item
         slot="item"
         label="Duplicate"
@@ -47,3 +65,56 @@ const meta = {
 };
 export default meta;
 export const Default = {};
+export const Activator = {
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        open: false,
+    },
+    render: (args) => html `
+    <m-action-listbox
+      title="${ifDefined(args.title)}"
+      position="${ifDefined(args.position)}"
+      ?open="${args.open}"
+      @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-button
+        slot="activator"
+        @click="${() => {
+        const listbox = document.querySelector('m-action-listbox');
+        listbox.open = !listbox.open;
+    }}"
+      >
+        Activator
+      </m-button>
+    </m-action-listbox>
+  `,
+};