npm - @mozaic-ds/web-components - Versions diffs - 1.4.0 → 1.5.1 - Mend

@mozaic-ds/web-components 1.4.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/dist/components/button/Button.svelte CHANGED Viewed

@@ -11,7 +11,6 @@
 />
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import Loader from '../loader/Loader.svelte';
   /**
    * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
@@ -21,7 +20,6 @@
    */
   interface Props {
     [key: string]: any;
     /**
      * Defines the visual style of the button.
      */
@@ -54,14 +52,6 @@
      * If `true`, a loading state is displayed.
      */
     isloading?: boolean;
-    /**
-     * The content displayed in the button.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert an icon for the Button.
-     */
-    icon?: Snippet;
   }
   let {
@@ -73,22 +63,10 @@
     disabled,
     isloading,
     iconposition,
-    children,
-    icon,
     ...attrs
   }: Props = $props();
 </script>
-{#snippet displayIcon()}
-  <span class="mc-button__icon">
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
-  </span>
-{/snippet}
 <button
   class={[
     'mc-button',
@@ -104,7 +82,9 @@
   {...attrs}
 >
   {#if iconposition === 'left' && !isloading}
-    {@render displayIcon()}
+    <span class="mc-button__icon">
+      <slot name="icon" />
+    </span>
   {/if}
   {#if isloading}
@@ -114,21 +94,21 @@
   {/if}
   {#if iconposition === 'only'}
-    {@render displayIcon()}
+    <span class="mc-button__icon">
+      <slot name="icon" />
+    </span>
   {/if}
   {#if iconposition !== 'only'}
     <span class={['mc-button__label', isloading && 'hidden']}>
-      {#if children}
-        {@render children()}
-      {:else}
-        <slot />
-      {/if}
+      <slot />
     </span>
   {/if}
   {#if iconposition === 'right'}
-    {@render displayIcon()}
+    <span class="mc-button__icon">
+      <slot name="icon" />
+    </span>
   {/if}
 </button>
@@ -333,6 +313,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;

package/dist/components/button/Button.svelte.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
  *
@@ -39,14 +38,6 @@ interface Props {
      * If `true`, a loading state is displayed.
      */
     isloading?: boolean;
-    /**
-     * The content displayed in the button.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert an icon for the Button.
-     */
-    icon?: Snippet;
 }
 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> & {

package/dist/components/button/Button.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"~~AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC~~;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;~~IAEnB~~;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;~~IACpB;;OAEG~~;~~IACH~~,~~QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAmFH,~~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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.svelte.ts"],"names":[],"mappings":"AAKE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwEH,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,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/button/README.md CHANGED Viewed

@@ -14,13 +14,13 @@ Buttons are key interactive elements used to perform actions and can be used as
 | `iconposition` | Controls the positioning of an icon in the button. | `'left'` `'right'` `'only'` |   |
 | `type` | Specifies the button's HTML `type` attribute. | `'button'` `'reset'` `'submit'` | `button` |
 | `isloading` | If `true`, a loading state is displayed. | `boolean` |   |
-| `children` | The content displayed in the button. | `Snippet` |   |
-| `icon` | Use this snippet to insert an icon for the Button. | `Snippet` |   |
 ## Slots
 | Name | Description |
 |------|-------------|
+| `icon` | Use this slot to insert an icon for the Button. |
+| `icon` | Use this slot to insert an icon for the Button. |
 | `default` | The content displayed in the button. |
 | `icon` | Use this slot to insert an icon for the Button. |

package/dist/components/callout/Callout.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as O,p as P,a as Q,b as o,s as p,t as R,f as r,g as T,h as U,i as V,d as n,j as c,k as s,l as i,r as v,e as S}from"../../custom-element.js";import{s as w}from"../../snippet.js";import{i as y}from"../../if.js";import{s as z}from"../../slot.js";import{a as W}from"../../attributes.js";var X=U('<section><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const Y={hash:"svelte-1pnlv3f",code:`/**
+import{c as C,p as D,a as E,b as d,s as r,t as S,f as q,g as A,h as B,i as F,d as t,j as u,r as l,e as h}from"../../custom-element.js";import{s as m}from"../../slot.js";import{a as G}from"../../attributes.js";var H=B('<section><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const I={hash:"svelte-1pnlv3f",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-callout.svelte-1pnlv3f {border-radius:var(--border-radius-m, 0.5rem);background:var(--callout-color-background-standard, #eff1f6);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--callout-color-text, #000000);}.mc-callout__icon.svelte-1pnlv3f {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-1pnlv3f {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-1pnlv3f, .mc-callout__message.svelte-1pnlv3f {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-callout__title.svelte-1pnlv3f {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-callout__message.svelte-1pnlv3f {font-size:var(--font-size-100, 0.875rem);}.mc-callout__footer.svelte-1pnlv3f {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-1pnlv3f {background:var(--callout-color-background-standard, #eff1f6);}.mc-callout--accent.svelte-1pnlv3f {background:var(--callout-color-background-accent, #ebf5de);}.mc-callout--tips.svelte-1pnlv3f {background:var(--callout-color-background-tips, #ffebaf);}.mc-callout--inverse.svelte-1pnlv3f {background:var(--callout-color-background-inverse, #ffffff);}.mc-callout__footer.svelte-1pnlv3f:empty {display:none;}`};function Z(j,a){P(a,!0),Q(j,Y);let _=o(a,"title",7),g=o(a,"description",7),h=o(a,"appearance",7,"standard"),f=o(a,"icon",7),d=o(a,"children",7),m=o(a,"footer",7),q=V(a,["$$slots","$$events","$$legacy","$$host","title","description","appearance","icon","children","footer"]);var A={get title(){return _()},set title(e){_(e),c()},get description(){return g()},set description(e){g(e),c()},get appearance(){return h()},set appearance(e="standard"){h(e),c()},get icon(){return f()},set icon(e){f(e),c()},get children(){return d()},set children(e){d(e),c()},get footer(){return m()},set footer(e){m(e),c()}},u=X();W(u,()=>({class:["mc-callout",`mc-callout--${h()}`],role:"status",...q}),void 0,void 0,void 0,"svelte-1pnlv3f");var b=n(u),B=n(b);{var F=e=>{var t=s(),l=i(t);w(l,f),r(e,t)},G=e=>{var t=s(),l=i(t);z(l,a,"icon",{},null),r(e,t)};y(B,e=>{f()?e(F):e(G,!1)})}v(b);var C=p(b,2),k=n(C),H=n(k,!0);v(k);var x=p(k,2),I=n(x,!0);v(x);var D=p(x,2);{var J=e=>{var t=s(),l=i(t);w(l,d),r(e,t)},K=e=>{var t=s(),l=i(t);z(l,a,"default",{},null),r(e,t)};y(D,e=>{d()?e(J):e(K,!1)})}var E=p(D,2),L=n(E);{var M=e=>{var t=s(),l=i(t);w(l,m),r(e,t)},N=e=>{var t=s(),l=i(t);z(l,a,"footer",{},null),r(e,t)};y(L,e=>{m()?e(M):e(N,!1)})}return v(E),v(C),v(u),R(()=>{S(H,_()),S(I,g())}),r(j,u),T(A)}customElements.define("m-callout",O(Z,{title:{},description:{},appearance:{},icon:{},children:{},footer:{}},["icon","default","footer"],[],!0));
+ */.mc-callout.svelte-1pnlv3f {border-radius:var(--border-radius-m, 0.5rem);background:var(--callout-color-background-standard, #eff1f6);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--callout-color-text, #000000);}.mc-callout__icon.svelte-1pnlv3f {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-1pnlv3f {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-1pnlv3f, .mc-callout__message.svelte-1pnlv3f {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-callout__title.svelte-1pnlv3f {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-callout__message.svelte-1pnlv3f {font-size:var(--font-size-100, 0.875rem);}.mc-callout__footer.svelte-1pnlv3f {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-1pnlv3f {background:var(--callout-color-background-standard, #eff1f6);}.mc-callout--accent.svelte-1pnlv3f {background:var(--callout-color-background-accent, #ebf5de);}.mc-callout--tips.svelte-1pnlv3f {background:var(--callout-color-background-tips, #ffebaf);}.mc-callout--inverse.svelte-1pnlv3f {background:var(--callout-color-background-inverse, #ffffff);}.mc-callout__footer.svelte-1pnlv3f:empty {display:none;}`};function J(p,e){D(e,!0),E(p,I);let s=d(e,"title",7),c=d(e,"description",7),n=d(e,"appearance",7,"standard"),x=F(e,["$$slots","$$events","$$legacy","$$host","title","description","appearance"]);var k={get title(){return s()},set title(a){s(a),u()},get description(){return c()},set description(a){c(a),u()},get appearance(){return n()},set appearance(a="standard"){n(a),u()}},o=H();G(o,()=>({class:["mc-callout",`mc-callout--${n()}`],role:"status",...x}),void 0,void 0,void 0,"svelte-1pnlv3f");var i=t(o),w=t(i);m(w,e,"icon",{},null),l(i);var _=r(i,2),v=t(_),y=t(v,!0);l(v);var f=r(v,2),z=t(f,!0);l(f);var g=r(f,2);m(g,e,"default",{},null);var b=r(g,2),j=t(b);return m(j,e,"footer",{},null),l(b),l(_),l(o),S(()=>{h(y,s()),h(z,c())}),q(p,o),A(k)}customElements.define("m-callout",C(J,{title:{},description:{},appearance:{}},["icon","default","footer"],[],!0));
 //# sourceMappingURL=Callout.js.map

package/dist/components/callout/Callout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n ~~import type { Snippet } from 'svelte';\n~~ /*\n A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n \n @slot icon - Use this slot to insert an icon.\n * @slot default - Use this slot to insert custom content.\n * @slot footer - Use this slot to insert a button or a link in the footer of the callout.\n /\n interface Props {\n [key: string]: any;\n\n /\n Title of the callout.\n /\n title: string;\n /\n Description of the callout.\n /\n description: string;\n /\n Allows to define the callout appearance.\n /\n appearance?: 'standard' \| 'accent' \| 'tips' \| 'inverse';\n /\n Use this snippet to insert an icon.\n /\n icon?: Snippet;\n /\n Use this snippet to insert custom content.\n /\n children?: Snippet;\n /\n Use this snippet to insert a button or a link in the footer of the callout.\n */\n footer?: Snippet;\n }\n\n let {\n title~~,\n~~ description~~,\n~~ appearance = 'standard'~~,\n icon,\n children,\n footer,\n~~ ...attrs\n }: Props = $props();\n</script>\n\n<section class={['mc-callout', `mc-callout--${appearance}`]} role=\"status\" {...attrs}>\n <div class=\"mc-callout__icon\">\n ~~{#if icon}\n {@render icon()}\n {:else}\n~~ <slot name=\"icon\" />\n ~~{/if}\n~~ </div>\n <div class=\"mc-callout__content\">\n <h2 class=\"mc-callout__title\">{title}</h2>\n\n <p class=\"mc-callout__message\">\n {description}\n </p>\n\n ~~{#if children}\n {@render children()}\n {:else}\n~~ <slot />\n ~~{/if}~~\n\n <div class=\"mc-callout__footer\">\n ~~{#if footer}\n {@render footer()}\n {:else}\n~~ <slot name=\"footer\" />\n ~~{/if}\n~~ </div>\n </div>\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/callout';\n\n .mc-callout__footer:empty {\n display: none;\n }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","~~icon","children","footer","~~attrs","$.rest_props","section","root","div","~~$$render","consequent","alternate","~~div_1","h2","p","~~consequent_1","alternate_1","~~div_2","$.sibling","~~node_3~~"~~,"consequent_2","alternate_2"~~],"mappings":";;s3CAEA,~~oBAuCIA~~,EAAKC,EAAAC,EAAA,QAAA,CAAA,~~EACLC~~,EAAWF,EAAAC,EAAA,cAAA,CAAA,~~EACXE~~,qBAAa,UAAU,~~EACvBC~~,~~EAAIJ~~,~~EAAAC~~,EAAA,~~OAAA~~,~~CAAA~~,~~EACJI~~,~~EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAAMN,EAAAC,EAAA,SAAA,CAAA,EACHM,EAAAC,EAAAP,EAAA,yQAJU,WAAU,+JAQ1BQ,~~EAAOC,EAAA,IAAPD,QAAgB,MAAA,CAAA,~~4BAA6BN~~,EAAU,CAAA,EAAA,~~mBAAuBI~~,2CAC5E,IAAAI,IADFF,CAAO,MACLE,CAAG,~~kCAESP~~,~~CAAI,uEADVA,EAAI,EAAAQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADVH,~~CAAG,~~EAOH~~,~~IAAAI~~,~~IAPAJ~~,EAAG,CAAA,~~EAQDK~~,IADFD,CAAG,MACDC,EAAE,EAAA,IAAFA,CAAE,EAEF,IAAAC,IAFAD,EAAE,CAAA,MAEFC,EAAC,EAAA,IAADA,CAAC,UAADA,EAAC,CAAA,~~kCAKSZ,CAAQ,0EADdA,EAAQ,EAAAO,EAAAM,CAAA,EAAAN,EAAAO,EAAA,EAAA,QAMZC,~~EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,~~kCAESd~~,~~CAAM,yEADZA,EAAM,EAAAM,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,aADZJ,~~CAAG,~~IAbLL~~,CAAG,~~IARLN~~,CAAO,~~aAS2BV~~,GAAK,MAGjCG,GAAW,~~QAZjBO~~,CAAO,MAFA"}
1	+ {"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n /*\n A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n \n @slot icon - Use this slot to insert an icon.\n * @slot default - Use this slot to insert custom content.\n * @slot footer - Use this slot to insert a button or a link in the footer of the callout.\n /\n interface Props {\n [key: string]: any;\n /\n Title of the callout.\n /\n title: string;\n /\n Description of the callout.\n /\n description: string;\n /\n Allows to define the callout appearance.\n */\n appearance?: 'standard' \| 'accent' \| 'tips' \| 'inverse';\n }\n\n let { title, description, appearance = 'standard', ...attrs }: Props = $props();\n</script>\n\n<section class={['mc-callout', `mc-callout--${appearance}`]} role=\"status\" {...attrs}>\n <div class=\"mc-callout__icon\">\n <slot name=\"icon\" />\n </div>\n <div class=\"mc-callout__content\">\n <h2 class=\"mc-callout__title\">{title}</h2>\n\n <p class=\"mc-callout__message\">\n {description}\n </p>\n\n <slot />\n\n <div class=\"mc-callout__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/callout';\n\n .mc-callout__footer:empty {\n display: none;\n }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","attrs","$.rest_props","section","root","div","div_1","h2","p","div_2","$.sibling","node_1"],"mappings":";;s3CAEA,oBAwBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,qBAAa,UAAU,EAAKC,EAAKC,EAAAJ,EAAA,8OAApB,WAAU,YAGlDK,EAAOC,EAAA,IAAPD,QAAgB,MAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,mBAAuBC,2CAC5E,IAAAI,IADFF,CAAO,MACLE,CAAG,0BAAHA,CAAG,EAGH,IAAAC,IAHAD,EAAG,CAAA,EAIDE,IADFD,CAAG,MACDC,EAAE,EAAA,IAAFA,CAAE,EAEF,IAAAC,IAFAD,EAAE,CAAA,MAEFC,EAAC,EAAA,IAADA,CAAC,UAADA,EAAC,CAAA,+BAMDC,EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,mCAAHA,CAAG,IATLH,CAAG,IAJLH,CAAO,aAK2BP,GAAK,MAGjCG,GAAW,QARjBI,CAAO,MAFA"}

package/dist/components/callout/Callout.spec.js CHANGED Viewed

@@ -16,10 +16,7 @@ describe('m-callout component', () => {
         expect(getByText(defaultProps.description)).toBeTruthy();
         const footer = container.querySelector('.mc-callout__footer');
         expect(footer).toBeTruthy();
-        expect(footer.innerHTML.trim()).toBe('<!----><!---->');
-        // jsdom bug with double comment
-        // we remove the content because we are sure to only have double comment
-        footer.innerHTML = '';
+        expect(footer).toBeEmptyDOMElement();
         expect(getComputedStyle(footer).display).toBe('none');
     });
     it('applies correct appearance class', () => {

package/dist/components/callout/Callout.svelte CHANGED Viewed

@@ -1,7 +1,6 @@
 <svelte:options customElement={{ tag: 'm-callout' }} />
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   /**
    * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
    *
@@ -11,7 +10,6 @@
    */
   interface Props {
     [key: string]: any;
     /**
      * Title of the callout.
      */
@@ -24,38 +22,14 @@
      * Allows to define the callout appearance.
      */
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
-    /**
-     * Use this snippet to insert an icon.
-     */
-    icon?: Snippet;
-    /**
-     * Use this snippet to insert custom content.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert a button or a link in the footer of the callout.
-     */
-    footer?: Snippet;
   }
-  let {
-    title,
-    description,
-    appearance = 'standard',
-    icon,
-    children,
-    footer,
-    ...attrs
-  }: Props = $props();
+  let { title, description, appearance = 'standard', ...attrs }: Props = $props();
 </script>
 <section class={['mc-callout', `mc-callout--${appearance}`]} role="status" {...attrs}>
   <div class="mc-callout__icon">
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <slot name="icon" />
-    {/if}
+    <slot name="icon" />
   </div>
   <div class="mc-callout__content">
     <h2 class="mc-callout__title">{title}</h2>
@@ -64,18 +38,10 @@
       {description}
     </p>
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot />
-    {/if}
+    <slot />
     <div class="mc-callout__footer">
-      {#if footer}
-        {@render footer()}
-      {:else}
-        <slot name="footer" />
-      {/if}
+      <slot name="footer" />
     </div>
   </div>
 </section>

package/dist/components/callout/Callout.svelte.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
  *
@@ -20,18 +19,6 @@ interface Props {
      * Allows to define the callout appearance.
      */
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
-    /**
-     * Use this snippet to insert an icon.
-     */
-    icon?: Snippet;
-    /**
-     * Use this snippet to insert custom content.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert a button or a link in the footer of the callout.
-     */
-    footer?: Snippet;
 }
 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> & {

package/dist/components/callout/Callout.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"~~AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC~~;;;;;;GAMG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;~~IAEnB~~;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;~~IACxD;;OAEG~~;~~IACH~~,~~IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqDH,~~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,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;GAMG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAgCH,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,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/callout/README.md CHANGED Viewed

@@ -9,9 +9,6 @@ A callout is used to highlight additional information that can assist users with
 | `title*` | Title of the callout. | `string` |   |
 | `description*` | Description of the callout. | `string` |   |
 | `appearance` | Allows to define the callout appearance. | `'standard'` `'accent'` `'tips'` `'inverse'` | `standard` |
-| `icon` | Use this snippet to insert an icon. | `Snippet` |   |
-| `children` | Use this snippet to insert custom content. | `Snippet` |   |
-| `footer` | Use this snippet to insert a button or a link in the footer of the callout. | `Snippet` |   |
 ## Slots

package/dist/components/carousel/Carousel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as W,p as X,a as Y,b as f,A as Z,s as A,q as l,f as o,g as $,h as ee,i as te,d as c,x as C,j as h,w as re,k as _,l as g,r as d,v as se}from"../../custom-element.js";import{s as I}from"../../snippet.js";import{i as k}from"../../if.js";import{s as E}from"../../slot.js";import{a as le}from"../../attributes.js";import{b as ae}from"../../this.js";import{I as O}from"../iconbutton/IconButton.js";import{t as ie,s as ne}from"../../Condition20.js";import"../loader/Loader.js";var oe=ee('<div><div class="mc-carousel__header svelte-10qqjzd"><div class="mc-carousel__headings svelte-10qqjzd"><!></div> <div class="mc-carousel__controls svelte-10qqjzd"><!> <!></div></div> <div class="mc-carousel__content svelte-10qqjzd"><!></div></div>');const ce={hash:"svelte-10qqjzd",code:`/**
+import{c as F,p as N,a as R,b as z,A as T,s as _,n as t,f as V,g as G,h as H,i as J,d as a,v as j,j as A,u as K,r as n,q as M}from"../../custom-element.js";import{s as y}from"../../slot.js";import{a as Q}from"../../attributes.js";import{b as U}from"../../this.js";import{I as L}from"../iconbutton/IconButton.js";import{t as W,s as X}from"../../Condition20.js";import"../../if.js";import"../../branches.js";import"../loader/Loader.js";var Y=H('<div><div class="mc-carousel__header svelte-10qqjzd"><div class="mc-carousel__headings svelte-10qqjzd"><!></div> <div class="mc-carousel__controls svelte-10qqjzd"><!> <!></div></div> <div class="mc-carousel__content svelte-10qqjzd"><!></div></div>');const Z={hash:"svelte-10qqjzd",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mt-title.svelte-10qqjzd {font-weight:var(--font-accent, 600);}.mt-title--l.svelte-10qqjzd {font-size:var(--font-title-l, 1.75rem);line-height:calc(var(--font-title-l, 1.75rem) * var(--line-height-s, 1.3));}.mt-title--m.svelte-10qqjzd {font-size:var(--font-title-m, 1.5rem);line-height:calc(var(--font-title-m, 1.5rem) * var(--line-height-s, 1.3));}.mt-title--s.svelte-10qqjzd {font-size:var(--font-title-s, 1.125rem);line-height:calc(var(--font-title-s, 1.125rem) * var(--line-height-s, 1.3));}.mc-carousel.svelte-10qqjzd {display:flex;flex-direction:column;row-gap:1rem;}.mc-carousel__header.svelte-10qqjzd {display:flex;align-items:flex-start;}.mc-carousel__headings.svelte-10qqjzd {display:flex;flex-direction:column;row-gap:0.25rem;flex:1;align-items:flex-start;}.mc-carousel__controls.svelte-10qqjzd {display:flex;column-gap:0.5rem;margin:0.25rem 0.25rem 0 0;}.mc-carousel__content.svelte-10qqjzd {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;}.mc-carousel__content.svelte-10qqjzd > :where(.svelte-10qqjzd) {scroll-snap-align:start;}::slotted(*) {scroll-snap-align:start;}::slotted(.mc-carousel__title) {margin:0;}::slotted(.mc-carousel__sub-title) {margin:0;}`};function de(y,s){X(s,!0),Y(y,ce);let q=f(s,"previousButtonAriaLabel",7,"previous"),p=f(s,"nextButtonAriaLabel",7,"next"),v=f(s,"children",7),u=f(s,"header",7),S=te(s,["$$slots","$$events","$$legacy","$$host","previousButtonAriaLabel","nextButtonAriaLabel","children","header"]),a=re(0),i=null,b=null;const D={behavior:"smooth",block:"nearest",inline:"center"};function n(){if(!i)return[];const e=i.querySelector("slot");return e?e.assignedElements({flatten:!0}):[]}function L(e){n()[e]?.scrollIntoView(D)}function F(){l(a)>0&&L(l(a)-1)}function N(){const e=n();l(a)<e.length-1&&L(l(a)+1)}Z(()=>{if(i)return b=new IntersectionObserver(e=>{const t=e.find(r=>r.isIntersecting);if(t){const r=n();se(a,r.findIndex(U=>U===t.target),!0)}},{root:i,threshold:.9}),n().forEach(e=>b.observe(e)),()=>b?.disconnect()});const P=C(()=>l(a)===0),R=C(()=>l(a)===n().length-1);var T={get previousButtonAriaLabel(){return q()},set previousButtonAriaLabel(e="previous"){q(e),h()},get nextButtonAriaLabel(){return p()},set nextButtonAriaLabel(e="next"){p(e),h()},get children(){return v()},set children(e){v(e),h()},get header(){return u()},set header(e){u(e),h()}},m=oe();le(m,()=>({class:"mc-carousel",role:"group","aria-roledescription":"carousel","aria-labelledby":"mc-carousel__title",...S}),void 0,void 0,void 0,"svelte-10qqjzd");var x=c(m),z=c(x),V=c(z);{var G=e=>{var t=_(),r=g(t);I(r,u),o(e,t)},H=e=>{var t=_(),r=g(t);E(r,s,"header",{},null),o(e,t)};k(V,e=>{u()?e(G):e(H,!1)})}d(z);var B=A(z,2),w=c(B);O(w,{size:"s",outlined:!0,onclick:F,get disabled(){return l(P)},get"aria-label"(){return q()},icon:t=>{ie(t,{})},$$slots:{icon:!0}});var J=A(w,2);O(J,{size:"s",outlined:!0,onclick:N,get disabled(){return l(R)},get"aria-label"(){return p()},icon:t=>{ne(t,{})},$$slots:{icon:!0}}),d(B),d(x);var j=A(x,2),K=c(j);{var M=e=>{var t=_(),r=g(t);I(r,v),o(e,t)},Q=e=>{var t=_(),r=g(t);E(r,s,"default",{},null),o(e,t)};k(K,e=>{v()?e(M):e(Q,!1)})}return d(j),ae(j,e=>i=e,()=>i),d(m),o(y,m),$(T)}customElements.define("m-carousel",W(de,{previousButtonAriaLabel:{},nextButtonAriaLabel:{},children:{},header:{}},["header","default"],[],!0));
+ */.mt-title.svelte-10qqjzd {font-weight:var(--font-accent, 600);}.mt-title--l.svelte-10qqjzd {font-size:var(--font-title-l, 1.75rem);line-height:calc(var(--font-title-l, 1.75rem) * var(--line-height-s, 1.3));}.mt-title--m.svelte-10qqjzd {font-size:var(--font-title-m, 1.5rem);line-height:calc(var(--font-title-m, 1.5rem) * var(--line-height-s, 1.3));}.mt-title--s.svelte-10qqjzd {font-size:var(--font-title-s, 1.125rem);line-height:calc(var(--font-title-s, 1.125rem) * var(--line-height-s, 1.3));}.mc-carousel.svelte-10qqjzd {display:flex;flex-direction:column;row-gap:1rem;}.mc-carousel__header.svelte-10qqjzd {display:flex;align-items:flex-start;}.mc-carousel__headings.svelte-10qqjzd {display:flex;flex-direction:column;row-gap:0.25rem;flex:1;align-items:flex-start;}.mc-carousel__controls.svelte-10qqjzd {display:flex;column-gap:0.5rem;margin:0.25rem 0.25rem 0 0;}.mc-carousel__content.svelte-10qqjzd {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;}.mc-carousel__content.svelte-10qqjzd > :where(.svelte-10qqjzd) {scroll-snap-align:start;}::slotted(*) {scroll-snap-align:start;}::slotted(.mc-carousel__title) {margin:0;}::slotted(.mc-carousel__sub-title) {margin:0;}`};function ee(p,r){N(r,!0),R(p,Z);let d=z(r,"previousButtonAriaLabel",7,"previous"),u=z(r,"nextButtonAriaLabel",7,"next"),B=J(r,["$$slots","$$events","$$legacy","$$host","previousButtonAriaLabel","nextButtonAriaLabel"]),s=K(0),l=null,v=null;const C={behavior:"smooth",block:"nearest",inline:"center"};function o(){if(!l)return[];const e=l.querySelector("slot");return e?e.assignedElements({flatten:!0}):[]}function q(e){o()[e]?.scrollIntoView(C)}function w(){t(s)>0&&q(t(s)-1)}function $(){const e=o();t(s)<e.length-1&&q(t(s)+1)}T(()=>{if(l)return v=new IntersectionObserver(e=>{const i=e.find(g=>g.isIntersecting);if(i){const g=o();M(s,g.findIndex(D=>D===i.target),!0)}},{root:l,threshold:.9}),o().forEach(e=>v.observe(e)),()=>v?.disconnect()});const I=j(()=>t(s)===0),k=j(()=>t(s)===o().length-1);var E={get previousButtonAriaLabel(){return d()},set previousButtonAriaLabel(e="previous"){d(e),A()},get nextButtonAriaLabel(){return u()},set nextButtonAriaLabel(e="next"){u(e),A()}},c=Y();Q(c,()=>({class:"mc-carousel",role:"group","aria-roledescription":"carousel","aria-labelledby":"mc-carousel__title",...B}),void 0,void 0,void 0,"svelte-10qqjzd");var m=a(c),f=a(m),P=a(f);y(P,r,"header",{},null),n(f);var b=_(f,2),x=a(b);L(x,{size:"s",outlined:!0,onclick:w,get disabled(){return t(I)},get"aria-label"(){return d()},$$slots:{icon:(e,i)=>{W(e,{slot:"icon"})}}});var O=_(x,2);L(O,{size:"s",outlined:!0,onclick:$,get disabled(){return t(k)},get"aria-label"(){return u()},$$slots:{icon:(e,i)=>{X(e,{slot:"icon"})}}}),n(b),n(m);var h=_(m,2),S=a(h);return y(S,r,"default",{},null),n(h),U(h,e=>l=e,()=>l),n(c),V(p,c),G(E)}customElements.define("m-carousel",F(ee,{previousButtonAriaLabel:{},nextButtonAriaLabel:{}},["header","default"],[],!0));
 //# sourceMappingURL=Carousel.js.map

package/dist/components/carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-carousel' }} />\n\n<script lang=\"ts\">\n import ~~type { Snippet } from 'svelte';\n import~~ IconButton from '../iconbutton/IconButton.svelte';\n import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-svelte';\n /*\n A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.\n \n @slot default - Use this slot to insert a list of components to be displayed in the carousel.\n * @slot header - Use this slot to insert the title, subtitle or link of the carousel.\n /\n interface Props {\n [key: string]: any;\n /\n Aria label for the previous button.\n /\n previousButtonAriaLabel?: string;\n /\n Aria label for the next button.\n /\n nextButtonAriaLabel?: string;\n /\n Use this snippet to insert a list of components to be displayed in the carousel.\n /\n children?: Snippet;\n /\n Use this snippet to insert the title, subtitle or link of the carousel.\n /\n header?: Snippet;\n }\n\n let {\n previousButtonAriaLabel = 'previous',\n nextButtonAriaLabel = 'next',\n ~~children,\n header,\n~~ ...attrs\n }: Props = $props();\n\n // State\n let activeIndex = $state(0);\n let contentContainer: HTMLElement \| null = null;\n\n let observer: IntersectionObserver \| null = null;\n\n const scrollOptions: ScrollIntoViewOptions = {\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n };\n\n function getCarouselChildren(): HTMLElement[] {\n if (!contentContainer) return [];\n\n const slot = contentContainer.querySelector('slot') as HTMLSlotElement;\n return slot ? (slot.assignedElements({ flatten: true }) as HTMLElement[]) : [];\n }\n\n function scrollToChild(index: number) {\n const children = getCarouselChildren();\n children[index]?.scrollIntoView(scrollOptions);\n }\n\n function goPrevious() {\n if (activeIndex > 0) scrollToChild(activeIndex - 1);\n }\n\n function goNext() {\n const children = getCarouselChildren();\n if (activeIndex < children.length - 1) scrollToChild(activeIndex + 1);\n }\n\n $effect(() => {\n if (!contentContainer) return;\n\n observer = new IntersectionObserver(\n (entries) => {\n const entry = entries.find((e) => e.isIntersecting);\n if (entry) {\n const children = getCarouselChildren();\n activeIndex = children.findIndex((el) => el === entry.target);\n }\n },\n {\n root: contentContainer,\n threshold: 0.9,\n },\n );\n\n getCarouselChildren().forEach((el) => observer!.observe(el));\n\n return () => observer?.disconnect();\n });\n\n const isFirstChildActive = $derived(activeIndex === 0);\n const isLastChildActive = $derived(activeIndex === getCarouselChildren().length - 1);\n</script>\n\n<div\n class=\"mc-carousel\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n aria-labelledby=\"mc-carousel__title\"\n {...attrs}\n>\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__headings\">\n ~~{#if header}\n {@render header()}\n {:else}\n~~ <slot name=\"header\" />\n ~~{/if}\n~~ </div>\n\n <div class=\"mc-carousel__controls\">\n <IconButton\n size=\"s\"\n outlined\n onclick={goPrevious}\n disabled={isFirstChildActive}\n aria-label={previousButtonAriaLabel}\n >\n ~~{#snippet~~ icon~~()}~~\~~n <ChevronLeft20~~ />\n ~~{/snippet}\n~~ </IconButton>\n\n <IconButton\n size=\"s\"\n outlined\n onclick={goNext}\n disabled={isLastChildActive}\n aria-label={nextButtonAriaLabel}\n >\n ~~{#snippet~~ icon~~()}~~\~~n <ChevronRight20~~ />\n ~~{/snippet}\n~~ </IconButton>\n </div>\n </div>\n\n <div class=\"mc-carousel__content\" bind:this={contentContainer}>\n ~~{#if children}\n {@render children()}\n {:else}\n~~ <slot />\n ~~{/if}\n~~ </div>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/carousel';\n\n :global(::slotted()) {\n scroll-snap-align: start;\n }\n\n :global(::slotted(.mc-carousel__title)) {\n margin: 0;\n }\n\n :global(::slotted(.mc-carousel__sub-title)) {\n margin: 0;\n }\n</style>\n"],"names":["previousButtonAriaLabel","nextButtonAriaLabel","~~children~~","$.~~prop~~","$$props","~~header","attrs","$.rest_props","~~activeIndex","$.state","contentContainer","observer","scrollOptions","getCarouselChildren","slot","scrollToChild","index","goPrevious","$.get","goNext","$.user_effect","entries","entry","e","el","isFirstChildActive","$.derived","isLastChildActive","div","root","div_1","$.child","div_2","~~$$render~~","~~consequent~~","~~alternate~~","~~div_3~~","~~IconButton","node_3","~~$$anchor","~~ChevronLeft20~~","~~node_4","~~ChevronRight20","div_4","~~consequent_1","alternate_1","~~$$value","$.reset","$.append"],"mappings":";;irCAEA,~~iBA+BI~~,IAAAA,kCAA0B,UAAU,EACpCC,8BAAsB,MAAM,~~EAC5BC~~,~~EAAQC,~~EAAAC,~~EAAA,WAAA,CAAA,EACRC,EAAMF,~~EAAAC,EAAA,~~SAAA~~,~~CAAA,EACHE,EAAAC,GAAAH,EAAA,gHAIDI,~~EAAcC,~~GAAO~~,CAAC,EACtBC,EAAuC,KAEvCC,EAAwC,WAEtCC,EAAoC,CACxC,SAAU,SACV,MAAO,UACP,OAAQ,QAAQ,EAGT,SAAAC,GAAqC,KACvCH,EAAgB,MAAA,CAAA,EAEf,MAAAI,EAAOJ,EAAiB,cAAc,MAAM,EAC3C,OAAAI,EAAQA,EAAK,iBAAgB,CAAG,QAAS,EAAI,CAAA,EAAA,CAAA,CACtD,UAESC,EAAcC,EAAe,CACnBH,EAAmB,EAC3BG,CAAK,GAAG,eAAeJ,CAAa,CAC/C,CAES,SAAAK,GAAa,CAChBC,EAAAV,CAAW,EAAG,GAAGO,EAAaG,EAACV,CAAW,EAAG,CAAC,CACpD,CAES,SAAAW,GAAS,CACV,~~MAAAjB~~,~~EAAWW~~,EAAmB,IAChCL,CAAW,~~EAAGN~~,EAAS,OAAS,~~GAAGa~~,EAAaG,EAACV,CAAW,EAAG,CAAC,CACtE,~~CAEAY~~,EAAO,IAAO,~~IACPV~~,EAEL,OAAAC,MAAe,~~qBACZU~~,GAAY,OACLC,EAAQD,EAAQ,KAAME,GAAMA,EAAE,cAAc,EAC9C,GAAAD,EAAO,CACH,~~MAAApB~~,~~EAAWW~~,EAAmB,~~KACpCL~~,~~EAAcN~~,EAAS,~~UAAWsB~~,GAAOA,IAAOF,EAAM,MAAM,EAAA,EAAA,CAC9D,CACF,EAEE,CAAA,~~KAAMZ~~,EACN,UAAW,EAAG,GAIlBG,EAAmB,EAAG,~~QAASW~~,~~GAAOb~~,EAAU,~~QAAQa~~,CAAE,CAAA,EAE7C,~~IAAAb~~,GAAU,WAAU,CACnC,CAAC,~~QAEKc~~,EAAkBC,EAAA,~~IAAAR~~,EAAYV,CAAW,IAAK,CAAC,EAC/~~CmB~~,~~UAA6BnB~~,CAAW,IAAKK,EAAmB,EAAG,OAAS,CAAC,~~iFA/DvD~~,WAAU,2EACd,OAAM,~~kHAiE~~/Be,EAAAC,~~GAAA~~,~~KAAAD~~,~~qHAKKtB~~,2CAEH,~~IAAAwB~~,EAAGC,EAPLH,CAAA,EAQII,IADFF,CAAG,MACDE,CAAG,~~kCAES3B~~,~~CAAM,yEADZA,EAAM,EAAA4B,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADZH,~~CAAG,~~EAQH~~,~~IAAAI~~,~~IARAJ~~,EAAG,CAAA,~~MAQHI~~,CAAG,EACDC,EAAAC,EAAA,~~8BAGUrB~~,~~0BACCQ~~,CAAkB,~~4BAChBzB~~,EAAuB,~~GAEzB~~,~~KAAIuC~~,~~GAAA~~,~~CACXC~~,~~GAAaD~~,~~EAAA~~,~~EAAA~~,~~oCAIjBF~~,EAAAI,EAAA,~~8BAGUtB~~,~~0BACCQ~~,CAAiB,~~4BACf1B~~,EAAmB,~~GAErB~~,~~KAAIsC~~,~~GAAA~~,~~CACXG~~,~~GAAcH~~,~~EAAA~~,~~EAAA~~,~~yBArBpBH~~,CAAG,~~IATLN~~,CAAG,~~EAoCH~~,~~IAAAa~~,~~IApCAb~~,EAAG,CAAA,~~MAoCHa~~,CAAG,~~kCAESzC~~,~~CAAQ,0EADdA,EAAQ,EAAA+B,EAAAW,CAAA,EAAAX,EAAAY,EAAA,EAAA,aADdF,~~CAAG,~~KAAHA~~,~~EAAGG~~,~~GAAyCpC~~,~~EAAgBoC~~,EAAA,~~IAAhBpC~~,CAAgB,~~EA3C9DqC~~,~~EAAAnB~~,CAAA,~~EAAAoB~~,EAAAT,~~EAAAX,~~CAAA,MAFO"}
1	+ {"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-carousel' }} />\n\n<script lang=\"ts\">\n import IconButton from '../iconbutton/IconButton.svelte';\n import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-svelte';\n /*\n A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.\n \n @slot default - Use this slot to insert a list of components to be displayed in the carousel.\n * @slot header - Use this slot to insert the title, subtitle or link of the carousel.\n /\n interface Props {\n [key: string]: any;\n /\n Aria label for the previous button.\n /\n previousButtonAriaLabel?: string;\n /\n Aria label for the next button.\n /\n nextButtonAriaLabel?: string;\n }\n\n let {\n previousButtonAriaLabel = 'previous',\n nextButtonAriaLabel = 'next',\n ...attrs\n }: Props = $props();\n\n // State\n let activeIndex = $state(0);\n let contentContainer: HTMLElement \| null = null;\n\n let observer: IntersectionObserver \| null = null;\n\n const scrollOptions: ScrollIntoViewOptions = {\n behavior: 'smooth',\n block: 'nearest',\n inline: 'center',\n };\n\n function getCarouselChildren(): HTMLElement[] {\n if (!contentContainer) return [];\n\n const slot = contentContainer.querySelector('slot') as HTMLSlotElement;\n return slot ? (slot.assignedElements({ flatten: true }) as HTMLElement[]) : [];\n }\n\n function scrollToChild(index: number) {\n const children = getCarouselChildren();\n children[index]?.scrollIntoView(scrollOptions);\n }\n\n function goPrevious() {\n if (activeIndex > 0) scrollToChild(activeIndex - 1);\n }\n\n function goNext() {\n const children = getCarouselChildren();\n if (activeIndex < children.length - 1) scrollToChild(activeIndex + 1);\n }\n\n $effect(() => {\n if (!contentContainer) return;\n\n observer = new IntersectionObserver(\n (entries) => {\n const entry = entries.find((e) => e.isIntersecting);\n if (entry) {\n const children = getCarouselChildren();\n activeIndex = children.findIndex((el) => el === entry.target);\n }\n },\n {\n root: contentContainer,\n threshold: 0.9,\n },\n );\n\n getCarouselChildren().forEach((el) => observer!.observe(el));\n\n return () => observer?.disconnect();\n });\n\n const isFirstChildActive = $derived(activeIndex === 0);\n const isLastChildActive = $derived(activeIndex === getCarouselChildren().length - 1);\n</script>\n\n<div\n class=\"mc-carousel\"\n role=\"group\"\n aria-roledescription=\"carousel\"\n aria-labelledby=\"mc-carousel__title\"\n {...attrs}\n>\n <div class=\"mc-carousel__header\">\n <div class=\"mc-carousel__headings\">\n <slot name=\"header\" />\n </div>\n\n <div class=\"mc-carousel__controls\">\n <IconButton\n size=\"s\"\n outlined\n onclick={goPrevious}\n disabled={isFirstChildActive}\n aria-label={previousButtonAriaLabel}\n >\n <ChevronLeft20 slot=\"icon\" />\n </IconButton>\n\n <IconButton\n size=\"s\"\n outlined\n onclick={goNext}\n disabled={isLastChildActive}\n aria-label={nextButtonAriaLabel}\n >\n <ChevronRight20 slot=\"icon\" />\n </IconButton>\n </div>\n </div>\n\n <div class=\"mc-carousel__content\" bind:this={contentContainer}>\n <slot />\n </div>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/carousel';\n\n :global(::slotted()) {\n scroll-snap-align: start;\n }\n\n :global(::slotted(.mc-carousel__title)) {\n margin: 0;\n }\n\n :global(::slotted(.mc-carousel__sub-title)) {\n margin: 0;\n }\n</style>\n"],"names":["previousButtonAriaLabel","nextButtonAriaLabel","attrs","$.rest_props","$$props","activeIndex","$.state","contentContainer","observer","scrollOptions","getCarouselChildren","slot","scrollToChild","index","goPrevious","$.get","goNext","children","$.user_effect","entries","entry","e","el","isFirstChildActive","$.derived","isLastChildActive","div","root","div_1","$.child","div_2","div_3","IconButton","node_1","ChevronLeft20","$$anchor","node_2","ChevronRight20","div_4","$$value","$.reset","$.append"],"mappings":";;irCAEA,gBAsBI,IAAAA,kCAA0B,UAAU,EACpCC,8BAAsB,MAAM,EACzBC,EAAAC,EAAAC,EAAA,4FAIDC,EAAcC,EAAO,CAAC,EACtBC,EAAuC,KAEvCC,EAAwC,WAEtCC,EAAoC,CACxC,SAAU,SACV,MAAO,UACP,OAAQ,QAAQ,EAGT,SAAAC,GAAqC,KACvCH,EAAgB,MAAA,CAAA,EAEf,MAAAI,EAAOJ,EAAiB,cAAc,MAAM,EAC3C,OAAAI,EAAQA,EAAK,iBAAgB,CAAG,QAAS,EAAI,CAAA,EAAA,CAAA,CACtD,UAESC,EAAcC,EAAe,CACnBH,EAAmB,EAC3BG,CAAK,GAAG,eAAeJ,CAAa,CAC/C,CAES,SAAAK,GAAa,CAChBC,EAAAV,CAAW,EAAG,GAAGO,EAAaG,EAACV,CAAW,EAAG,CAAC,CACpD,CAES,SAAAW,GAAS,CACV,MAAAC,EAAWP,EAAmB,IAChCL,CAAW,EAAGY,EAAS,OAAS,GAAGL,EAAaG,EAACV,CAAW,EAAG,CAAC,CACtE,CAEAa,EAAO,IAAO,IACPX,EAEL,OAAAC,MAAe,qBACZW,GAAY,OACLC,EAAQD,EAAQ,KAAME,GAAMA,EAAE,cAAc,EAC9C,GAAAD,EAAO,CACH,MAAAH,EAAWP,EAAmB,IACpCL,EAAcY,EAAS,UAAWK,GAAOA,IAAOF,EAAM,MAAM,EAAA,EAAA,CAC9D,CACF,EAEE,CAAA,KAAMb,EACN,UAAW,EAAG,GAIlBG,EAAmB,EAAG,QAASY,GAAOd,EAAU,QAAQc,CAAE,CAAA,EAE7C,IAAAd,GAAU,WAAU,CACnC,CAAC,QAEKe,EAAkBC,EAAA,IAAAT,EAAYV,CAAW,IAAK,CAAC,EAC/CoB,UAA6BpB,CAAW,IAAKK,EAAmB,EAAG,OAAS,CAAC,iFA7DvD,WAAU,2EACd,OAAM,YA+D/BgB,EAAAC,EAAA,IAAAD,qHAKKxB,2CAEH,IAAA0B,EAAGC,EAPLH,CAAA,EAQII,IADFF,CAAG,MACDE,CAAG,4BAAHA,CAAG,EAIH,IAAAC,IAJAD,EAAG,CAAA,MAIHC,CAAG,EACDC,EAAAC,EAAA,8BAGUnB,0BACCS,CAAkB,4BAChBvB,EAAuB,yBAElCkC,EAAaC,EAAA,CAAA,KAAA,MAAA,CAAA,mBAGfH,EAAAI,EAAA,8BAGUpB,0BACCS,CAAiB,4BACfxB,EAAmB,yBAE9BoC,EAAcF,EAAA,CAAA,KAAA,MAAA,CAAA,QAlBlBJ,CAAG,IALLH,CAAG,EA4BH,IAAAU,IA5BAV,EAAG,CAAA,MA4BHU,CAAG,oCAAHA,CAAG,IAAHA,EAAGC,GAAyChC,EAAgBgC,EAAA,IAAhBhC,CAAgB,EAnC9DiC,EAAAd,CAAA,EAAAe,EAAAN,EAAAT,CAAA,MAFO"}

package/dist/components/carousel/Carousel.svelte CHANGED Viewed

@@ -1,7 +1,6 @@
 <svelte:options customElement={{ tag: 'm-carousel' }} />
 <script lang="ts">
-  import type { Snippet } from 'svelte';
   import IconButton from '../iconbutton/IconButton.svelte';
   import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-svelte';
   /**
@@ -20,21 +19,11 @@
      * Aria label for the next button.
      */
     nextButtonAriaLabel?: string;
-    /**
-     * Use this snippet to insert a list of components to be displayed in the carousel.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert the title, subtitle or link of the carousel.
-     */
-    header?: Snippet;
   }
   let {
     previousButtonAriaLabel = 'previous',
     nextButtonAriaLabel = 'next',
-    children,
-    header,
     ...attrs
   }: Props = $props();
@@ -106,11 +95,7 @@
 >
   <div class="mc-carousel__header">
     <div class="mc-carousel__headings">
-      {#if header}
-        {@render header()}
-      {:else}
-        <slot name="header" />
-      {/if}
+      <slot name="header" />
     </div>
     <div class="mc-carousel__controls">
@@ -121,9 +106,7 @@
         disabled={isFirstChildActive}
         aria-label={previousButtonAriaLabel}
       >
-        {#snippet icon()}
-          <ChevronLeft20 />
-        {/snippet}
+        <ChevronLeft20 slot="icon" />
       </IconButton>
       <IconButton
@@ -133,19 +116,13 @@
         disabled={isLastChildActive}
         aria-label={nextButtonAriaLabel}
       >
-        {#snippet icon()}
-          <ChevronRight20 />
-        {/snippet}
+        <ChevronRight20 slot="icon" />
       </IconButton>
     </div>
   </div>
   <div class="mc-carousel__content" bind:this={contentContainer}>
-    {#if children}
-      {@render children()}
-    {:else}
-      <slot />
-    {/if}
+    <slot />
   </div>
 </div>

package/dist/components/carousel/Carousel.svelte.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { Snippet } from 'svelte';
 /**
  * A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.
  *
@@ -15,14 +14,6 @@ interface Props {
      * Aria label for the next button.
      */
     nextButtonAriaLabel?: string;
-    /**
-     * Use this snippet to insert a list of components to be displayed in the carousel.
-     */
-    children?: Snippet;
-    /**
-     * Use this snippet to insert the title, subtitle or link of the carousel.
-     */
-    header?: Snippet;
 }
 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> & {

package/dist/components/carousel/Carousel.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/Carousel.svelte.ts"],"names":[],"mappings":"~~AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC~~;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;~~IAC7B;;OAEG~~;~~IACH~~,~~QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAkHH,~~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,QAAQ;;;;;;;;UAAqF,CAAC;AAClF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/Carousel.svelte.ts"],"names":[],"mappings":"AAME;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAmGH,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,QAAQ;;;;;;;;UAAqF,CAAC;AAClF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/components/carousel/README.md CHANGED Viewed

@@ -8,13 +8,11 @@ A Carousel allows users to browse through multiple items within a horizontal con
 |------|-------------|------|---------|
 | `previousButtonAriaLabel` | Aria label for the previous button. | `string` | `previous` |
 | `nextButtonAriaLabel` | Aria label for the next button. | `string` | `next` |
-| `children` | Use this snippet to insert a list of components to be displayed in the carousel. | `Snippet` |   |
-| `header` | Use this snippet to insert the title, subtitle or link of the carousel. | `Snippet` |   |
 ## Slots
 | Name | Description |
 |------|-------------|
-| `default` | Use this slot to insert a list of components to be displayed in the carousel. |
 | `header` | Use this slot to insert the title, subtitle or link of the carousel. |
+| `default` | Use this slot to insert a list of components to be displayed in the carousel. |

package/dist/components/checkbox/Checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as y,p as B,a as M,b as t,s as Z,t as g,f as b,g as q,h as p,i as H,d as u,j as r,r as _,e as j,n as D,o as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as S,s as V}from"../../attributes.js";import{a as A}from"../../input.js";import{c as G}from"../../custom-element-forward-events.js";var I=p('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),J=p("<div><input/> <!></div>");const K={hash:"svelte-zknfk3",code:`/**
+import{c as y,p as B,a as M,b as t,s as Z,t as g,f as b,g as q,h as p,i as H,d as u,j as r,r as _,e as j,l as D,m as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as S,s as V}from"../../attributes.js";import{a as A}from"../../input.js";import{c as G}from"../../custom-element-forward-events.js";import"../../branches.js";var I=p('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),J=p("<div><input/> <!></div>");const K={hash:"svelte-zknfk3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-zknfk3 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox--indented.svelte-zknfk3 {margin-left:1.75rem;}.mc-checkbox__label.svelte-zknfk3 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-zknfk3 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-zknfk3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-zknfk3: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-checkbox__input.svelte-zknfk3:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate, .mc-checkbox__input.svelte-zknfk3:disabled {border-color:transparent;}.mc-checkbox__input.svelte-zknfk3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-zknfk3:disabled + .mc-checkbox__label:where(.svelte-zknfk3) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:not(:disabled):checked:hover, .mc-checkbox__input.svelte-zknfk3:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}

package/dist/components/checkboxgroup/CheckboxGroup.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as q,p as H,a as j,b as t,m as A,f as u,g as D,h as p,i as F,j as s,r as _,d as k,s as G,q as r,t as E,n as L,o as S,e as V}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J}from"../../each.js";import{a as K,r as N,s as v}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";var Q=p('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=p('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=p("<div></div>");const U={hash:"svelte-11asba7",code:`/**
+import{c as q,p as H,a as j,b as t,k as A,f as u,g as D,h as p,i as F,j as s,r as _,d as k,s as G,n as r,t as E,l as L,m as S,e as V}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J}from"../../each.js";import{a as K,r as N,s as v}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";import"../../branches.js";var Q=p('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=p('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=p("<div></div>");const U={hash:"svelte-11asba7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-11asba7 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox--indented.svelte-11asba7 {margin-left:1.75rem;}.mc-checkbox__label.svelte-11asba7 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-11asba7 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-11asba7:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-11asba7: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-checkbox__input.svelte-11asba7:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate, .mc-checkbox__input.svelte-11asba7:disabled {border-color:transparent;}.mc-checkbox__input.svelte-11asba7:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled + .mc-checkbox__label:where(.svelte-11asba7) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:not(:disabled):checked:hover, .mc-checkbox__input.svelte-11asba7:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}

package/dist/components/checklistmenu/CheckListMenu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as q,p as w,a as D,b as u,k as g,l as v,f as m,g as E,j as d,q as e,x as f,d as F,r as L,t as N,n as P,o as S,h as A}from"../../custom-element.js";import{i as G}from"../../if.js";import{e as H,i as J}from"../../each.js";import{h as K}from"../../Condition20.js";import{B as O}from"../builtinmenu/BuiltInMenu.js";import{B as Q}from"../builtinmenuitem/BuiltInMenuItem.js";import"../../attributes.js";import"../../snippet.js";import"../../slot.js";import"../../svelte-element.js";var R=A("<span><!></span>");const T={hash:"svelte-1k60ooz",code:`/**
+import{o as w,c as B,p as D,a as E,b as f,t,f as p,g as F,h as b,j as h,r as v,n as o,d as g,v as L,l as M,m as N}from"../../custom-element.js";import{i as S}from"../../if.js";import{e as q,i as A}from"../../each.js";import{f as s}from"../../attributes.js";import{h as G}from"../../Condition20.js";import"../builtinmenu/BuiltInMenu.js";import"../builtinmenuitem/BuiltInMenuItem.js";import"../../branches.js";import"../../slot.js";import"../../svelte-element.js";var H=b('<span slot="icon"><!></span>'),I=b("<m-built-in-menu-item><!></m-built-in-menu-item>",2),J=b("<m-built-in-menu></m-built-in-menu>",2);const K={hash:"svelte-1k60ooz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-check-list-menu__icon.svelte-1k60ooz {fill:var(--built-in-menu-color-text-default, #404040);}.mc-check-list-menu__icon--selected.svelte-1k60ooz {fill:var(--built-in-menu-color-text-selected, #006902);}`};function U(h,l){w(l,!0),D(h,T);let r=u(l,"selected",15),o=u(l,"items",7),c=u(l,"outlined",7);var k={get selected(){return r()},set selected(t){r(t),d()},get items(){return o()},set items(t){o(t),d()},get outlined(){return c()},set outlined(t){c(t),d()}};return O(h,{get selected(){return r()},get outlined(){return c()},children:(t,V)=>{var p=g(),b=v(p);H(b,17,o,J,(y,s,a)=>{const B=f(()=>e(s).href?"a":"button");{const x=C=>{var _=g(),I=v(_);{var M=i=>{var n=R(),j=F(n);K(j,{}),L(n),N(()=>P(n,1,S({"mc-check-list-menu__icon":!0,"mc-check-list-menu__icon--selected":r()===a}),"svelte-1k60ooz")),m(i,n)};G(I,i=>{e(s).checked&&i(M)})}m(C,_)};let z=f(()=>r()===a),$=f(()=>e(B)==="button"?"menuitem":void 0);Q(y,{get label(){return e(s).label},get href(){return e(s).href},get target(){return e(s).target},get selected(){return e(z)},get role(){return e($)},onclick:()=>r(a),icon:x,$$slots:{icon:!0}})}}),m(t,p)},$$slots:{default:!0}}),E(k)}customElements.define("m-check-list-menu",q(U,{selected:{attribute:"selected",reflect:!0,type:"Number"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},items:{}},[],[],!0));
+ */.mc-check-list-menu__icon.svelte-1k60ooz {fill:var(--built-in-menu-color-text-default, #404040);}.mc-check-list-menu__icon--selected.svelte-1k60ooz {fill:var(--built-in-menu-color-text-selected, #006902);}`};function O(k,c){D(c,!0),E(k,K);let i=f(c,"selected",15),m=f(c,"items",7),u=f(c,"outlined",7);var y={get selected(){return i()},set selected(l){i(l),h()},get items(){return m()},set items(l){m(l),h()},get outlined(){return u()},set outlined(l){u(l),h()}},n=J();return t(()=>s(n,"selected",i())),t(()=>s(n,"outlined",u())),q(n,21,m,A,(l,r,d)=>{const z=L(()=>o(r).href?"a":"button");var e=I();s(e,"slot","item"),t(()=>s(e,"label",o(r).label)),t(()=>s(e,"href",o(r).href)),t(()=>s(e,"target",o(r).target)),t(()=>s(e,"selected",i()===d)),t(()=>s(e,"role",o(z)==="button"?"menuitem":void 0)),e.__click=()=>i(d);var x=g(e);{var C=_=>{var a=H(),j=g(a);G(j,{}),v(a),t(()=>M(a,1,N({"mc-check-list-menu__icon":!0,"mc-check-list-menu__icon--selected":i()===d}),"svelte-1k60ooz")),p(_,a)};S(x,_=>{o(r).checked&&_(C)})}v(e),p(l,e)}),v(n),p(k,n),F(y)}w(["click"]);customElements.define("m-check-list-menu",B(O,{selected:{attribute:"selected",reflect:!0,type:"Number"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},items:{}},[],[],!0));
 //# sourceMappingURL=CheckListMenu.js.map