npm - @mozaic-ds/web-components - Versions diffs - 1.1.0 → 1.3.0 - Mend

@mozaic-ds/web-components 1.1.0 → 1.3.0

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 (406) hide show

package/dist/bundle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../src/bundle.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAC;AACvC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,yDAAyD,CAAC;AACjE,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iEAAiE,CAAC;AACzE,OAAO,yEAAyE,CAAC;AACjF,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uDAAuD,CAAC;AAC/D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,~~0BAA0B~~,CAAC;~~AAClC~~,OAAO,~~wCAAwC,CAAC;AAChD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,~~mCAAmC,CAAC;AAC3C,OAAO,~~oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,~~qCAAqC,CAAC;AAC7C,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC"}
1	+ {"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../src/bundle.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAC;AACvC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,yDAAyD,CAAC;AACjE,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iCAAiC,CAAC;AACzC,OAAO,iEAAiE,CAAC;AACzE,OAAO,yEAAyE,CAAC;AACjF,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6CAA6C,CAAC;AACrD,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,6CAA6C,CAAC;AACrD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC"}

package/dist/bundle.js CHANGED Viewed

@@ -2,14 +2,18 @@ import './components/avatar/Avatar.js';
 import './components/breadcrumb/Breadcrumb.js';
 import './components/button/Button.js';
 import './components/callout/Callout.js';
+import './components/carousel/Carousel.js';
 import './components/checkbox/Checkbox.js';
 import './components/checkboxgroup/CheckboxGroup.js';
 import './components/circularprogressbar/CircularProgressbar.js';
+import './components/container/Container.js';
 import './components/datepicker/Datepicker.js';
+import './components/divider/Divider.js';
 import './components/drawer/Drawer.js';
 import './components/field/Field.js';
 import './components/flag/Flag.js';
 import './components/iconbutton/IconButton.js';
+import './components/kpiitem/KpiItem.js';
 import './components/linearprogressbarbuffer/LinearProgressbarBuffer.js';
 import './components/linearprogressbarpercentage/LinearProgressbarPercentage.js';
 import './components/link/Link.js';
@@ -20,22 +24,21 @@ import './components/numberbadge/NumberBadge.js';
 import './components/overlay/Overlay.js';
 import './components/pagination/Pagination.js';
 import './components/passwordinput/PasswordInput.js';
+import './components/phonenumber/PhoneNumber.js';
 import './components/pincode/Pincode.js';
 import './components/quantityselector/QuantitySelector.js';
 import './components/radio/Radio.js';
 import './components/radiogroup/RadioGroup.js';
 import './components/select/Select.js';
+import './components/starrating/StarRating.js';
 import './components/statusbadge/StatusBadge.js';
 import './components/statusdot/StatusDot.js';
+import './components/statusmessage/StatusMessage.js';
 import './components/statusnotification/StatusNotification.js';
 import './components/segmentedcontrol/SegmentedControl.js';
 import './components/tab/Tab.js';
 import './components/tabs/Tabs.js';
-import './components/tags/Tag.js';
-import './components/tags/TagContextualised.js';
-import './components/tags/TagInteractive.js';
-import './components/tags/TagRemovable.js';
-import './components/tags/TagSelectable.js';
+import './components/tag/Tag.js';
 import './components/textarea/Textarea.js';
 import './components/textinput/Textinput.js';
 import './components/toaster/Toaster.js';

package/dist/components/avatar/Avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as n,p as l,a as c,b as d,f as m,d as f,t as v,i as h,j as g,k as u,r as p,e as w,g as b}from"../../custom-element.js";import{s as z}from"../../slot.js";var y=m("<div><!></div>");const _={hash:"svelte-1g4aw6b",code:`/**
+import{c as d,p as l,a as c,b as m,f as v,r as f,d as h,h as u,i as g,j as b,e as p}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as z}from"../../attributes.js";var y=v("<div><!></div>");const _={hash:"svelte-1g4aw6b",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-avatar.svelte-1g4aw6b {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:var(--radius-full, 100%);background:var(--color-background-secondary, #eff1f6);color:var(--color-text-secondary, #404040);font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);text-transform:uppercase;}.mc-avatar--m.svelte-1g4aw6b {width:3rem;height:3rem;font-size:var(--font-size-200, 1.125rem);}.mc-avatar--l.svelte-1g4aw6b {width:4rem;height:4rem;font-size:var(--font-size-300, 1.5rem);}.svelte-1g4aw6b::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function x(s,a){l(a,!0),c(s,_);let e=d(a,"size",7,"s");var r={get size(){return e()},set size(o="s"){e(o),u()}},t=y(),i=f(t);return z(i,a,"default",{}),p(t),v(()=>w(t,1,b(["mc-avatar",e()&&`mc-avatar--${e()}`]),"svelte-1g4aw6b")),h(s,t),g(r)}customElements.define("m-avatar",n(x,{size:{}},["default"],[],!0));
+ */.mc-avatar.svelte-1g4aw6b {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:var(--border-radius-full, 100%);background:var(--color-background-secondary, #eff1f6);color:var(--color-text-secondary, #404040);font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);text-transform:uppercase;}.mc-avatar--m.svelte-1g4aw6b {width:3rem;height:3rem;font-size:var(--font-size-200, 1.125rem);}.mc-avatar--l.svelte-1g4aw6b {width:4rem;height:4rem;font-size:var(--font-size-300, 1.5rem);}.svelte-1g4aw6b::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function $(s,e){l(e,!0),c(s,_);let t=m(e,"size",7,"s"),r=f(e,["$$slots","$$events","$$legacy","$$host","size"]);var o={get size(){return t()},set size(n="s"){t(n),b()}},a=y();z(a,()=>({class:["mc-avatar",t()&&`mc-avatar--${t()}`],...r}),void 0,void 0,void 0,"svelte-1g4aw6b");var i=h(a);return w(i,e,"default",{}),p(a),u(s,a),g(o)}customElements.define("m-avatar",d($,{size:{}},["default"],[],!0));
 //# sourceMappingURL=Avatar.js.map

package/dist/components/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n /*\n An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n \n @slot default - Use this slot to insert the image, icon or intials of the avatar.\n /\n interface Props {\n /\n Determines the size of the avatar.\n */\n size: 's' \| 'm' \| 'l';\n }\n\n let { size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]}>\n <slot />\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/avatar';\n\n ::slotted(img) {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n</style>\n"],"names":["size"],"mappings":";;~~ypBAAA~~,gBAeQ,IAAAA,eAAO,GAAG,~~2CAAH~~,IAAG,~~wEAGL~~,~~YAAaA~~,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,~~CAAA~~,~~EAAA,gBAAA,CAAA,aAFpD~~"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n /*\n An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n \n @slot default - Use this slot to insert the image, icon or intials of the avatar.\n /\n interface Props {\n /\n Determines the size of the avatar.\n */\n size: 's' \| 'm' \| 'l';\n }\n\n let { size = 's', ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>\n <slot />\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/avatar';\n\n ::slotted(img) {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n</style>\n"],"names":["size","attrs","$.rest_props","$$props"],"mappings":";;gqBAAA,gBAeQ,IAAAA,eAAO,GAAG,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,MAAA,CAAA,2CAAb,IAAG,mCAGL,YAAaH,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,KAASC,iGAF7D"}

package/dist/components/avatar/Avatar.stories.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
+import '@mozaic-ds/icons-svelte/svelte/Profile24/Profile24.svelte';
+import './Avatar.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/avatar/Avatar.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,~~gEAAgE~~,CAAC;~~AAExE~~,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}
1	+ {"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,2DAA2D,CAAC;AACnE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}

package/dist/components/avatar/Avatar.stories.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
+import '@mozaic-ds/icons-svelte/svelte/Profile24/Profile24.svelte';
+import './Avatar.svelte';
 const meta = {
     title: 'Content/Avatar',
     component: 'm-avatar',

package/dist/components/avatar/Avatar.svelte CHANGED Viewed

@@ -13,10 +13,10 @@
     size: 's' | 'm' | 'l';
   }
-  let { size = 's' }: Props = $props();
+  let { size = 's', ...attrs }: Props = $props();
 </script>
-<div class={['mc-avatar', size && `mc-avatar--${size}`]}>
+<div class={['mc-avatar', size && `mc-avatar--${size}`]} {...attrs}>
   <slot />
 </div>
@@ -30,7 +30,7 @@
   width: 2rem;
   height: 2rem;
   overflow: hidden;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   background: var(--color-background-secondary, #eff1f6);
   color: var(--color-text-secondary, #404040);
   font-size: var(--font-size-50, 0.75rem);

package/dist/components/breadcrumb/Breadcrumb.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import{c as L,p as B,a as M,b as u,f as g,d as n,t as b,i as x,j,k as f,r as t,e as _,g as z,m,h as D}from"../../custom-element.js";import{e as S,i as q}from"../../each.js";import{s as p}from"../../attributes.js";var A=g('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),F=g('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const G={hash:"svelte-1ihiex7",code:`/**
+import{c as E,p as L,a as B,b as u,f as _,r as $,d as c,h as b,i as M,j as x,e as t,t as j,m as z,n as m,l as D,g as S}from"../../custom-element.js";import{e as q,i as A}from"../../each.js";import{a as F,s as f}from"../../attributes.js";var G=_('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),H=_('<nav><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const I={hash:"svelte-1ihiex7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-breadcrumb.svelte-1ihiex7 {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1ihiex7 {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1ihiex7 {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1ihiex7:not(:first-child) {padding-inline-start:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
 @media screen and (max-width: 679px) {.mc-breadcrumb__item.svelte-1ihiex7:nth-last-child(2) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-standard, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}.mc-breadcrumb__item.svelte-1ihiex7:not(:nth-last-child(2)) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 }.mc-breadcrumb__current.svelte-1ihiex7, .mc-breadcrumb__current.mc-link.svelte-1ihiex7 {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1ihiex7, .mc-breadcrumb__current.svelte-1ihiex7:active, .mc-breadcrumb__current.svelte-1ihiex7:focus, .mc-breadcrumb__current.svelte-1ihiex7:hover, .mc-breadcrumb__current.svelte-1ihiex7:visited, .mc-breadcrumb__current.mc-link.svelte-1ihiex7, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:active, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:focus, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:hover, .mc-breadcrumb__current.mc-link.svelte-1ihiex7:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1ihiex7 {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1ihiex7 .mc-breadcrumb__item:where(.svelte-1ihiex7):not(:first-child) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");}
 @media screen and (max-width: 679px) {.mc-breadcrumb--inverse.svelte-1ihiex7 .mc-breadcrumb__item:where(.svelte-1ihiex7):nth-last-child(2) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--breadcrumb-color-icon-inverse, %23ffffff)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0'/%3E%3C/svg%3E");}
-}.mc-link.svelte-1ihiex7 {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1ihiex7 {line-height:1.3;}.mc-link__icon.svelte-1ihiex7 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1ihiex7:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1ihiex7) {text-decoration:underline;}.mc-link.svelte-1ihiex7:focus {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-link--m.svelte-1ihiex7 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1ihiex7 {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1ihiex7 {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1ihiex7 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1ihiex7 {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-1ihiex7:hover .mc-link__label:where(.svelte-1ihiex7) {border-color:transparent;}.mc-link--inline.svelte-1ihiex7 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {line-height:1;}.mc-link--inline.svelte-1ihiex7:hover {text-decoration:none;}`};function H(d,c){B(c,!0),M(d,G);let r=u(c,"appearance",7,"standard"),a=u(c,"links",7);const k=e=>e===a().length-1;var w={get appearance(){return r()},set appearance(e="standard"){r(e),f()},get links(){return a()},set links(e){a(e),f()}},l=F(),h=n(l);return S(h,21,a,q,(e,s,C)=>{var o=A(),i=n(o),v=n(i),E=n(v,!0);t(v),t(i),t(o),b(y=>{p(i,"href",m(s).href),p(i,"target",m(s).target),_(i,1,y,"svelte-1ihiex7"),D(E,m(s).label)},[()=>z(["mc-link","mc-link--m","mc-link--inline",r()&&`mc-link--${r()}`,k(C)&&"mc-breadcrumb__current"])]),x(e,o)}),t(h),t(l),b(()=>_(l,1,`mc-breadcrumb mc-breadcrumb--${r()}`,"svelte-1ihiex7")),x(d,l),j(w)}customElements.define("m-breadcrumb",L(H,{appearance:{},links:{}},[],[],!0));
+}.mc-link.svelte-1ihiex7 {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-1ihiex7 {line-height:1.3;}.mc-link__icon.svelte-1ihiex7 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1ihiex7:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1ihiex7) {text-decoration:underline;}.mc-link.svelte-1ihiex7:focus {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-link--m.svelte-1ihiex7 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1ihiex7 {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1ihiex7 {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1ihiex7 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1ihiex7 {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-1ihiex7:hover .mc-link__label:where(.svelte-1ihiex7) {border-color:transparent;}.mc-link--inline.svelte-1ihiex7 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1ihiex7 .mc-link__label:where(.svelte-1ihiex7) {line-height:1;}.mc-link--inline.svelte-1ihiex7:hover {text-decoration:none;}`};function J(d,a){L(a,!0),B(d,I);let r=u(a,"appearance",7,"standard"),l=u(a,"links",7),p=$(a,["$$slots","$$events","$$legacy","$$host","appearance","links"]);const g=e=>e===l().length-1;var k={get appearance(){return r()},set appearance(e="standard"){r(e),x()},get links(){return l()},set links(e){l(e),x()}},n=H();F(n,()=>({class:`mc-breadcrumb mc-breadcrumb--${r()}`,"aria-label":"Breadcrumb",...p}),void 0,void 0,void 0,"svelte-1ihiex7");var h=c(n);return q(h,21,l,A,(e,s,w)=>{var o=G(),i=c(o),v=c(i),y=c(v,!0);t(v),t(i),t(o),j(C=>{f(i,"href",m(s).href),f(i,"target",m(s).target),D(i,1,C,"svelte-1ihiex7"),S(y,m(s).label)},[()=>z(["mc-link","mc-link--m","mc-link--inline",r()&&`mc-link--${r()}`,g(w)&&"mc-breadcrumb__current"])]),b(e,o)}),t(h),t(n),b(d,n),M(k)}customElements.define("m-breadcrumb",E(J,{appearance:{},links:{}},[],[],!0));
 //# sourceMappingURL=Breadcrumb.js.map

package/dist/components/breadcrumb/Breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-breadcrumb',\n }}\n/>\n\n<script lang=\"ts\">\n /*\n A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n /\n interface Props {\n /\n Allows to define the breadcrumb appearance.\n /\n appearance: 'standard' \| 'inverse';\n /\n Links of the breadcrumb.\n /\n links: Array<{\n /\n The label displayed for the link.\n /\n label: string;\n /\n URL for the link.\n /\n href: string;\n /\n Where to open the link.\n */\n target?: '_blank' \| '_self' \| '_parent' \| '_top';\n }>;\n }\n\n let { appearance = 'standard', links }: Props = $props();\n\n const isLastLink = (index: number) => index === links.length - 1;\n</script>\n\n<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label=\"Breadcrumb\">\n <ol class=\"mc-breadcrumb__container\">\n {#each links as link, index (index)}\n <li class=\"mc-breadcrumb__item\">\n <a\n href={link.href}\n target={link.target}\n class={[\n 'mc-link',\n 'mc-link--m',\n 'mc-link--inline',\n appearance && `mc-link--${appearance}`,\n isLastLink(index) && 'mc-breadcrumb__current',\n ]}\n >\n <span class=\"mc-link__label\">{link.label}</span>\n </a>\n </li>\n {/each}\n </ol>\n</nav>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/breadcrumb';\n @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;~~kxDAAA~~,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,~~QAE9BC~~,EAAcC,GAAkBA,~~IAAUJ~~,EAAK,EAAC,OAAS,uDAF5C,WAAU,~~wEAOpBK~~,OAAAA,EAAAC,EAAA,~~GAAAN~~,~~OAASO~~,EAAIH,IAAA,wDAGRI,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BASWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,WAPtC,UACA,aACA,~~kBACAR~~,iBAA0BA,EAAU,CAAA,~~GACpCI~~,EAAWC,CAAK,GAAK,~~4FAZWL,EAAU,CAAA,GAAA,gBAAA,CAAA,aAFtD~~"}
1	+ {"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-breadcrumb',\n }}\n/>\n\n<script lang=\"ts\">\n /*\n A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n /\n interface Props {\n /\n Allows to define the breadcrumb appearance.\n /\n appearance: 'standard' \| 'inverse';\n /\n Links of the breadcrumb.\n /\n links: Array<{\n /\n The label displayed for the link.\n /\n label: string;\n /\n URL for the link.\n /\n href: string;\n /\n Where to open the link.\n */\n target?: '_blank' \| '_self' \| '_parent' \| '_top';\n }>;\n }\n\n let { appearance = 'standard', links, ...attrs }: Props = $props();\n\n const isLastLink = (index: number) => index === links.length - 1;\n</script>\n\n<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label=\"Breadcrumb\" {...attrs}>\n <ol class=\"mc-breadcrumb__container\">\n {#each links as link, index (index)}\n <li class=\"mc-breadcrumb__item\">\n <a\n href={link.href}\n target={link.target}\n class={[\n 'mc-link',\n 'mc-link--m',\n 'mc-link--inline',\n appearance && `mc-link--${appearance}`,\n isLastLink(index) && 'mc-breadcrumb__current',\n ]}\n >\n <span class=\"mc-link__label\">{link.label}</span>\n </a>\n </li>\n {/each}\n </ol>\n</nav>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/breadcrumb';\n @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","attrs","$.rest_props","isLastLink","index","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;8xDAAA,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAExCG,EAAcC,GAAkBA,IAAUN,EAAK,EAAC,OAAS,uDAF5C,WAAU,iHAKaD,EAAU,CAAA,gCAAgCI,sDAE3EI,OAAAA,EAAAC,EAAA,GAAAR,OAASS,EAAIH,IAAA,wDAGRI,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BASWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,WAPtC,UACA,aACA,kBACAV,iBAA0BA,EAAU,CAAA,GACpCM,EAAWC,CAAK,GAAK,2DAdjC"}

package/dist/components/breadcrumb/Breadcrumb.stories.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Breadcrumb.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;~~AAIrE~~,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
1	+ {"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/breadcrumb/Breadcrumb.stories.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import './Breadcrumb.svelte';
 const meta = {
     title: 'Navigation/Breadcrumb',
     component: 'm-breadcrumb',

package/dist/components/breadcrumb/Breadcrumb.svelte CHANGED Viewed

@@ -32,12 +32,12 @@
     }>;
   }
-  let { appearance = 'standard', links }: Props = $props();
+  let { appearance = 'standard', links, ...attrs }: Props = $props();
   const isLastLink = (index: number) => index === links.length - 1;
 </script>
-<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label="Breadcrumb">
+<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label="Breadcrumb" {...attrs}>
   <ol class="mc-breadcrumb__container">
     {#each links as link, index (index)}
       <li class="mc-breadcrumb__item">
@@ -164,7 +164,7 @@
   font-weight: var(--link-font-weight, 600);
 }
 .mc-link--stand-alone .mc-link__label {
-  border-bottom: var(--border-s, 1px) solid currentColor;
+  border-bottom: var(--border-width-s, 0.0625rem) solid currentColor;
 }
 .mc-link--stand-alone:hover .mc-link__label {
   border-color: transparent;

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

@@ -1,5 +1,5 @@
-import{c as G,p as H,a as I,b as n,f as s,z as J,d,s as v,i as b,j as K,k as a,r as u,t as M,e as N,g as O}from"../../custom-element.js";import{i}from"../../if.js";import{s as h}from"../../slot.js";import{b as P}from"../../attributes.js";import{L as Q}from"../loader/Loader.js";var R=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),T=s('<span class="mc-button__icon svelte-ozghz9" style="color: currentColor;position: absolute; visibility: visible;"><!></span>'),U=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),V=s("<span><!></span>"),W=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),X=s("<button><!> <!> <!> <!> <!></button>");const Y={hash:"svelte-ozghz9",code:`/**
+import{c as G,p as H,a as I,b as n,f as s,r as J,d,s as v,h as b,i as K,j as a,e as u,t as M,l as N,m as O}from"../../custom-element.js";import{i}from"../../if.js";import{s as h}from"../../slot.js";import{a as P}from"../../attributes.js";import{L as Q}from"../loader/Loader.js";var R=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),T=s('<span class="mc-button__icon svelte-ozghz9" style="color: currentColor;position: absolute; visibility: visible;"><!></span>'),U=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),V=s("<span><!></span>"),W=s('<span class="mc-button__icon svelte-ozghz9"><!></span>'),X=s("<button><!> <!> <!> <!> <!></button>");const Y={hash:"svelte-ozghz9",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-ozghz9 {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-ozghz9:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-ozghz9:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9 {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-ozghz9 {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-ozghz9 {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-ozghz9 {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9: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-button--s.svelte-ozghz9 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-ozghz9 {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-ozghz9 {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:2rem;height:2rem;}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-ozghz9 {padding:0.25rem;}.mc-button--outlined.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-ozghz9 {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-ozghz9 {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-ozghz9 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-ozghz9 {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--loading.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9),
-.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-ozghz9 {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-ozghz9 {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-ozghz9 {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-ozghz9 {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.hidden.svelte-ozghz9 {visibility:hidden;}`};function Z(w,e){H(e,!0),I(w,Y);let m=n(e,"appearance",7,"standard"),z=n(e,"size",7,"m"),f=n(e,"type",7,"button"),k=n(e,"ghost",7),_=n(e,"outlined",7),p=n(e,"disabled",7),l=n(e,"isloading",7),c=n(e,"iconposition",7),L=J(e,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","iconposition"]);var C={get appearance(){return m()},set appearance(o="standard"){m(o),a()},get size(){return z()},set size(o="m"){z(o),a()},get type(){return f()},set type(o="button"){f(o),a()},get ghost(){return k()},set ghost(o){k(o),a()},get outlined(){return _()},set outlined(o){_(o),a()},get disabled(){return p()},set disabled(o){p(o),a()},get isloading(){return l()},set isloading(o){l(o),a()},get iconposition(){return c()},set iconposition(o){c(o),a()}},g=X();P(g,()=>({class:["mc-button",`mc-button--${z()}`,`mc-button--${m()}`,k()&&"mc-button--ghost",_()&&"mc-button--outlined",l()&&"mc-button--loading",c()==="only"&&"mc-button--icon-only"],disabled:p(),type:f(),...L}),void 0,void 0,"svelte-ozghz9");var y=d(g);{var D=o=>{var t=R(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(y,o=>{c()==="left"&&!l()&&o(D)})}var x=v(y,2);{var E=o=>{var t=T(),r=d(t);Q(r,{appearance:"inverse",size:"s"}),u(t),b(o,t)};i(x,o=>{l()&&o(E)})}var j=v(x,2);{var S=o=>{var t=U(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(j,o=>{c()==="only"&&o(S)})}var B=v(j,2);{var q=o=>{var t=V(),r=d(t);h(r,e,"default",{}),u(t),M(()=>N(t,1,O(["mc-button__label",l()&&"hidden"]),"svelte-ozghz9")),b(o,t)};i(B,o=>{c()!=="only"&&o(q)})}var A=v(B,2);{var F=o=>{var t=W(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(A,o=>{c()==="right"&&o(F)})}return u(g),b(w,g),K(C)}customElements.define("m-button",G(Z,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{},isloading:{},iconposition:{}},["icon","default"],[],!0));export{Z as B};
+ */.mc-button.svelte-ozghz9 {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-ozghz9:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-ozghz9:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9 {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-ozghz9 {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-ozghz9 {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-ozghz9 {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-ozghz9: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-button--s.svelte-ozghz9 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--s.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-100, 0.875rem);}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.25rem;height:1.25rem;}.mc-button--s.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.25rem;height:1.25rem;}.mc-button--m.svelte-ozghz9 {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--m.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-150, 1rem);}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:1.5rem;height:1.5rem;}.mc-button--m.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:1.5rem;height:1.5rem;}.mc-button--l.svelte-ozghz9 {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--l.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9) {font-size:var(--font-size-200, 1.125rem);}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {width:2rem;height:2rem;}.mc-button--l.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9):only-child {width:2rem;height:2rem;}.mc-button--icon-only.svelte-ozghz9 {padding:0.25rem;}.mc-button--outlined.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-ozghz9 {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-ozghz9 {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-ozghz9 {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-ozghz9 {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-ozghz9 .mc-button__label:where(.svelte-ozghz9),
+.mc-button--loading.svelte-ozghz9 .mc-button__icon:where(.svelte-ozghz9) {visibility:hidden;}.mc-button--outlined.mc-button--standard.svelte-ozghz9 {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-ozghz9 {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-ozghz9 {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-ozghz9 {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-ozghz9 {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-ozghz9 {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-ozghz9 {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-ozghz9:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.hidden.svelte-ozghz9 {visibility:hidden;}`};function Z(w,e){H(e,!0),I(w,Y);let m=n(e,"appearance",7,"standard"),z=n(e,"size",7,"m"),f=n(e,"type",7,"button"),k=n(e,"ghost",7),_=n(e,"outlined",7),p=n(e,"disabled",7),l=n(e,"isloading",7),c=n(e,"iconposition",7),L=J(e,["$$slots","$$events","$$legacy","$$host","appearance","size","type","ghost","outlined","disabled","isloading","iconposition"]);var C={get appearance(){return m()},set appearance(o="standard"){m(o),a()},get size(){return z()},set size(o="m"){z(o),a()},get type(){return f()},set type(o="button"){f(o),a()},get ghost(){return k()},set ghost(o){k(o),a()},get outlined(){return _()},set outlined(o){_(o),a()},get disabled(){return p()},set disabled(o){p(o),a()},get isloading(){return l()},set isloading(o){l(o),a()},get iconposition(){return c()},set iconposition(o){c(o),a()}},g=X();P(g,()=>({class:["mc-button",`mc-button--${z()}`,`mc-button--${m()}`,k()&&"mc-button--ghost",_()&&"mc-button--outlined",l()&&"mc-button--loading",c()==="only"&&"mc-button--icon-only"],disabled:p(),type:f(),...L}),void 0,void 0,void 0,"svelte-ozghz9");var y=d(g);{var D=o=>{var t=R(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(y,o=>{c()==="left"&&!l()&&o(D)})}var x=v(y,2);{var E=o=>{var t=T(),r=d(t);Q(r,{appearance:"inverse",size:"s"}),u(t),b(o,t)};i(x,o=>{l()&&o(E)})}var j=v(x,2);{var S=o=>{var t=U(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(j,o=>{c()==="only"&&o(S)})}var B=v(j,2);{var q=o=>{var t=V(),r=d(t);h(r,e,"default",{}),u(t),M(()=>N(t,1,O(["mc-button__label",l()&&"hidden"]),"svelte-ozghz9")),b(o,t)};i(B,o=>{c()!=="only"&&o(q)})}var A=v(B,2);{var F=o=>{var t=W(),r=d(t);h(r,e,"icon",{}),u(t),b(o,t)};i(A,o=>{c()==="right"&&o(F)})}return u(g),b(w,g),K(C)}customElements.define("m-button",G(Z,{appearance:{},size:{},type:{},ghost:{},outlined:{},disabled:{},isloading:{},iconposition:{}},["icon","default"],[],!0));export{Z as B};
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n import Loader from '../loader/Loader.svelte';\n /*\n 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.\n \n @slot default - The content displayed in the button.\n * @slot icon - Use this slot to insert an icon for the Button.\n /\n interface Props {\n ~~[key: string]: any;\n~~ /\n Defines the visual style of the button.\n /\n appearance?: 'standard' \| 'accent' \| 'danger' \| 'inverse';\n /\n Determines the size of the button.\n /\n size?: 's' \| 'm' \| 'l';\n /\n If `true`, disables the button, making it non-interactive.\n /\n disabled?: boolean;\n /\n If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n /\n ghost?: boolean;\n /\n If `true`, the button gets an outlined style, usually with just the border and no solid background.\n /\n outlined?: boolean;\n /\n Controls the positioning of an icon in the button.\n /\n iconposition?: 'left' \| 'right' \| 'only';\n /\n Specifies the button's HTML `type` attribute.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n If `true`, a loading state is displayed.\n */\n isloading?: boolean;\n }\n\n let {\n appearance = 'standard',\n size = 'm',\n type = 'button',\n ghost,\n outlined,\n disabled,\n isloading,\n iconposition,\n ...attrs\n }: Props = $props();\n</script>\n\n<button\n class={[\n 'mc-button',\n `mc-button--${size}`,\n `mc-button--${appearance}`,\n ghost && 'mc-button--ghost',\n outlined && 'mc-button--outlined',\n isloading && 'mc-button--loading',\n iconposition === 'only' && 'mc-button--icon-only',\n ]}\n {disabled}\n {type}\n {...attrs}\n>\n {#if iconposition === 'left' && !isloading}\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n\n {#if isloading}\n <span\n class=\"mc-button__icon\"\n style=\"color: currentColor;position: absolute; visibility: visible;\"\n >\n <Loader appearance=\"inverse\" size=\"s\" />\n </span>\n {/if}\n\n {#if iconposition === 'only'}\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n\n {#if iconposition !== 'only'}\n <span class={['mc-button__label', isloading && 'hidden']}>\n <slot />\n </span>\n {/if}\n\n {#if iconposition === 'right'}\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n</button>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n\n .hidden {\n visibility: hidden;\n }\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","attrs","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":";;;o/LAAA,~~gBA+CI~~,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACTK,EAAAC,EAAAN,EAAA,qLARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,gTAYf,0BACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iDAIzBC,~~gHAECD~~,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAI,EAAAC,CAAA,uGAMrCL,EAAS,GAAAI,EAAAE,CAAA,mFASTL,EAAY,IAAK,QAAMG,EAAAG,CAAA,qFAOZ,mBAAoBP,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,kBADpDC,EAAY,IAAK,QAAMG,EAAAI,CAAA,mFAMvBP,EAAY,IAAK,SAAOG,EAAAK,CAAA,2BA3C/B"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n import Loader from '../loader/Loader.svelte';\n /*\n 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.\n \n @slot default - The content displayed in the button.\n * @slot icon - Use this slot to insert an icon for the Button.\n /\n interface Props {\n /\n Defines the visual style of the button.\n /\n appearance?: 'standard' \| 'accent' \| 'danger' \| 'inverse';\n /\n Determines the size of the button.\n /\n size?: 's' \| 'm' \| 'l';\n /\n If `true`, disables the button, making it non-interactive.\n /\n disabled?: boolean;\n /\n If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n /\n ghost?: boolean;\n /\n If `true`, the button gets an outlined style, usually with just the border and no solid background.\n /\n outlined?: boolean;\n /\n Controls the positioning of an icon in the button.\n /\n iconposition?: 'left' \| 'right' \| 'only';\n /\n Specifies the button's HTML `type` attribute.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n If `true`, a loading state is displayed.\n */\n isloading?: boolean;\n }\n\n let {\n appearance = 'standard',\n size = 'm',\n type = 'button',\n ghost,\n outlined,\n disabled,\n isloading,\n iconposition,\n ...attrs\n }: Props = $props();\n</script>\n\n<button\n class={[\n 'mc-button',\n `mc-button--${size}`,\n `mc-button--${appearance}`,\n ghost && 'mc-button--ghost',\n outlined && 'mc-button--outlined',\n isloading && 'mc-button--loading',\n iconposition === 'only' && 'mc-button--icon-only',\n ]}\n {disabled}\n {type}\n {...attrs}\n>\n {#if iconposition === 'left' && !isloading}\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n\n {#if isloading}\n <span\n class=\"mc-button__icon\"\n style=\"color: currentColor;position: absolute; visibility: visible;\"\n >\n <Loader appearance=\"inverse\" size=\"s\" />\n </span>\n {/if}\n\n {#if iconposition === 'only'}\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n\n {#if iconposition !== 'only'}\n <span class={['mc-button__label', isloading && 'hidden']}>\n <slot />\n </span>\n {/if}\n\n {#if iconposition === 'right'}\n <span class=\"mc-button__icon\">\n <slot name=\"icon\" />\n </span>\n {/if}\n</button>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n\n .hidden {\n visibility: hidden;\n }\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","attrs","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":";;;o/LAAA,gBA8CI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACTK,EAAAC,EAAAN,EAAA,qLARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,gTAYf,0BACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iDAIzBC,uHAECD,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAI,EAAAC,CAAA,uGAMrCL,EAAS,GAAAI,EAAAE,CAAA,mFASTL,EAAY,IAAK,QAAMG,EAAAG,CAAA,qFAOZ,mBAAoBP,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,kBADpDC,EAAY,IAAK,QAAMG,EAAAI,CAAA,mFAMvBP,EAAY,IAAK,SAAOG,EAAAK,CAAA,2BA3C/B"}

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

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Button.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;~~AAKrE~~,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAAU,CAAC;AAEhC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
1	+ {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,iBAAiB,CAAC;AACzB,OAAO,qEAAqE,CAAC;AAE7E,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAAU,CAAC;AAEhC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/components/button/Button.stories.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Button.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
 const meta = {
     title: 'Action/Button',
     component: 'm-button',

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

@@ -9,7 +9,6 @@
    * @slot icon - Use this slot to insert an icon for the Button.
    */
   interface Props {
-    [key: string]: any;
     /**
      * Defines the visual style of the button.
      */
@@ -139,7 +138,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -303,7 +302,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {

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

@@ -5,7 +5,6 @@
  * @slot icon - Use this slot to insert an icon for the Button.
  */
 interface Props {
-    [key: string]: any;
     /**
      * Defines the visual style of the button.
      */

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":"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;AAgEH,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;;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;AAgEH,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/callout/Callout.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as j,p as C,a as D,b as d,f as E,d as t,s as r,t as S,i as q,j as A,k as m,r as l,e as B,g as F,h}from"../../custom-element.js";import{s as u}from"../../slot.js";var G=E('<section role="status"><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 H={hash:"svelte-1pnlv3f",code:`/**
+import{c as C,p as D,a as E,b as d,f as S,r as q,d as t,s as r,t as A,h as B,i as F,j as m,e as l,g as h}from"../../custom-element.js";import{s as u}from"../../slot.js";import{a as G}from"../../attributes.js";var H=S('<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(--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 I(p,e){C(e,!0),D(p,H);let c=d(e,"title",7),s=d(e,"description",7),n=d(e,"appearance",7,"standard");var x={get title(){return c()},set title(a){c(a),m()},get description(){return s()},set description(a){s(a),m()},get appearance(){return n()},set appearance(a="standard"){n(a),m()}},o=G(),i=t(o),k=t(i);u(k,e,"icon",{}),l(i);var _=r(i,2),v=t(_),w=t(v,!0);l(v);var f=r(v,2),y=t(f,!0);l(f);var g=r(f,2);u(g,e,"default",{});var b=r(g,2),z=t(b);return u(z,e,"footer",{}),l(b),l(_),l(o),S(()=>{B(o,1,F(["mc-callout",`mc-callout--${n()}`]),"svelte-1pnlv3f"),h(w,c()),h(y,s())}),q(p,o),A(x)}customElements.define("m-callout",j(I,{title:{},description:{},appearance:{}},["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=q(e,["$$slots","$$events","$$legacy","$$host","title","description","appearance"]);var k={get title(){return s()},set title(a){s(a),m()},get description(){return c()},set description(a){c(a),m()},get appearance(){return n()},set appearance(a="standard"){n(a),m()}},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);u(w,e,"icon",{}),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);u(g,e,"default",{});var b=r(g,2),j=t(b);return u(j,e,"footer",{}),l(b),l(_),l(o),A(()=>{h(y,s()),h(z,c())}),B(p,o),F(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 /*\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 /\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' }: Props = $props();\n</script>\n\n<section class={['mc-callout', `mc-callout--${appearance}`]} role=\"status\">\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","~~$.set_class~~","~~section","~~$.~~clsx~~"],"mappings":"~~;;+2CAAA~~,oBAyBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,qBAAa,UAAU,~~iKAAV~~,~~WAAU~~,~~0NAGlCC~~,~~EAAAC,~~EAAA,~~EAAAC~~,~~EAAA~~,CAAA,~~4BAA6BH~~,EAAU,CAAA,EAAA,~~CAAA~~,~~EAAA~~,~~gBAAA,MAKrBJ,~~GAAK,MAGjCG,GAAW,eAVlB"}
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 /\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"],"mappings":";;s3CAAA,oBAyBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,qBAAa,UAAU,EAAKC,EAAKC,EAAAJ,EAAA,8OAApB,WAAU,4BAGlC,MAAA,CAAA,4BAA6BE,EAAU,CAAA,EAAA,mBAAuBC,2PAK5CL,GAAK,MAGjCG,GAAW,eAVlB"}

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

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/custom-elements/ImageAlt32/ImageAlt32.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ArrowNext20/ArrowNext20.js';
+import '@mozaic-ds/icons-svelte/svelte/ImageAlt32/ImageAlt32.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ArrowNext20/ArrowNext20.svelte';
+import './Callout.svelte';
+import '../button/Button.svelte';
+import '../link/Link.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,~~kEAAkE~~,CAAC;~~AAC1E~~,OAAO,~~oEAAoE~~,CAAC;~~AAE5E~~,QAAA,MAAM,IAAI,EAAE,IAyBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}
1	+ {"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,6DAA6D,CAAC;AACrE,OAAO,+DAA+D,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAyBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}

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

@@ -1,8 +1,11 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ImageAlt32/ImageAlt32.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ArrowNext20/ArrowNext20.js';
+import '@mozaic-ds/icons-svelte/svelte/ImageAlt32/ImageAlt32.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ArrowNext20/ArrowNext20.svelte';
+import './Callout.svelte';
+import '../button/Button.svelte';
+import '../link/Link.svelte';
 const meta = {
     title: 'Content/Callout',
     component: 'm-callout',

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

@@ -23,10 +23,10 @@
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
   }
-  let { title, description, appearance = 'standard' }: Props = $props();
+  let { title, description, appearance = 'standard', ...attrs }: Props = $props();
 </script>
-<section class={['mc-callout', `mc-callout--${appearance}`]} role="status">
+<section class={['mc-callout', `mc-callout--${appearance}`]} role="status" {...attrs}>
   <div class="mc-callout__icon">
     <slot name="icon" />
   </div>
@@ -49,7 +49,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 .mc-callout {
-  border-radius: var(--radius-m, 0.5rem);
+  border-radius: var(--border-radius-m, 0.5rem);
   background: var(--callout-color-background-standard, #eff1f6);
   display: flex;
   flex-flow: row wrap;

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

@@ -0,0 +1,4 @@
+import{c as w,p as j,b as a,A as P,t as D,h as L,i as A,j as n,l as M,m as O,a as X,u as Y,f as Z,r as $,d as h,s as y,n as u,D as I,x as ee,e as g,y as te}from"../../custom-element.js";import{s as E}from"../../slot.js";import{s as x,b as S,a as se}from"../../attributes.js";import{b as le}from"../../this.js";import{I as k}from"../iconbutton/IconButton.js";import"../../legacy.js";var ie=P('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0"></path></svg>');function F(f,t){j(t,!1);let o=a(t,"id",12,void 0),d=a(t,"style",12,void 0),c=a(t,"className",12,void 0),l=a(t,"fill",12,void 0),r=a(t,"size",12,"1.25rem");var v={get id(){return o()},set id(e){o(e),n()},get style(){return d()},set style(e){d(e),n()},get className(){return c()},set className(e){c(e),n()},get fill(){return l()},set fill(e){l(e),n()},get size(){return r()},set size(e){r(e),n()}},i=ie();return D(()=>{x(i,"id",o()),S(i,d()),M(i,0,O(c())),x(i,"fill",l())}),L(f,i),A(v)}customElements.define("chevron-left-20",w(F,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var re=P('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06"></path></svg>');function R(f,t){j(t,!1);let o=a(t,"id",12,void 0),d=a(t,"style",12,void 0),c=a(t,"className",12,void 0),l=a(t,"fill",12,void 0),r=a(t,"size",12,"1.25rem");var v={get id(){return o()},set id(e){o(e),n()},get style(){return d()},set style(e){d(e),n()},get className(){return c()},set className(e){c(e),n()},get fill(){return l()},set fill(e){l(e),n()},get size(){return r()},set size(e){r(e),n()}},i=re();return D(()=>{x(i,"id",o()),S(i,d()),M(i,0,O(c())),x(i,"fill",l())}),L(f,i),A(v)}customElements.define("chevron-right-20",w(R,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ae=Z('<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 ne={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;}.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 oe(f,t){j(t,!0),X(f,ne);let o=a(t,"previousButtonAriaLabel",7,"previous"),d=a(t,"nextButtonAriaLabel",7,"next"),c=$(t,["$$slots","$$events","$$legacy","$$host","previousButtonAriaLabel","nextButtonAriaLabel"]),l=ee(0),r=null,v=null;const i={behavior:"smooth",block:"nearest",inline:"center"};function e(){if(!r)return[];const s=r.querySelector("slot");return s?s.assignedElements({flatten:!0}):[]}function B(s){e()[s]?.scrollIntoView(i)}function T(){u(l)>0&&B(u(l)-1)}function V(){const s=e();u(l)<s.length-1&&B(u(l)+1)}Y(()=>{if(r)return v=new IntersectionObserver(s=>{const m=s.find(p=>p.isIntersecting);if(m){const p=e();te(l,p.findIndex(W=>W===m.target),!0)}},{root:r,threshold:.9}),e().forEach(s=>v.observe(s)),()=>v?.disconnect()});const G=I(()=>u(l)===0),H=I(()=>u(l)===e().length-1);var J={get previousButtonAriaLabel(){return o()},set previousButtonAriaLabel(s="previous"){o(s),n()},get nextButtonAriaLabel(){return d()},set nextButtonAriaLabel(s="next"){d(s),n()}},_=ae();se(_,()=>({class:"mc-carousel",role:"group","aria-roledescription":"carousel","aria-labelledby":"mc-carousel__title",...c}),void 0,void 0,void 0,"svelte-10qqjzd");var q=h(_),z=h(q),K=h(z);E(K,t,"header",{}),g(z);var N=y(z,2),C=h(N);k(C,{size:"s",outlined:!0,onclick:T,get disabled(){return u(G)},get"aria-label"(){return o()},$$slots:{icon:(s,m)=>{F(s,{slot:"icon"})}}});var Q=y(C,2);k(Q,{size:"s",outlined:!0,onclick:V,get disabled(){return u(H)},get"aria-label"(){return d()},$$slots:{icon:(s,m)=>{R(s,{slot:"icon"})}}}),g(N),g(q);var b=y(q,2),U=h(b);return E(U,t,"default",{}),g(b),le(b,s=>r=s,()=>r),g(_),L(f,_),A(J)}customElements.define("m-carousel",w(oe,{previousButtonAriaLabel:{},nextButtonAriaLabel:{}},["header","default"],[],!0));
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"Carousel.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft20/ChevronLeft20.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight20/ChevronRight20.svelte","../../../src/components/carousel/Carousel.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-20', shadow: 'none' }} />\n<script>\n export let id = undefined;\n export let style = undefined;\n export let className = undefined;\n export let fill = undefined;\n export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id} style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M11.78 5.303a.75.75 0 0 1 0 1.06L8.144 10l3.636 3.637a.75.75 0 0 1-1.06 1.06l-4.167-4.166a.75.75 0 0 1 0-1.061l4.166-4.167a.75.75 0 0 1 1.061 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-20', shadow: 'none' }} />\n<script>\n export let id = undefined;\n export let style = undefined;\n export let className = undefined;\n export let fill = undefined;\n export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id} style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M8.22 5.303a.75.75 0 0 1 1.06 0l4.167 4.167a.75.75 0 0 1 0 1.06L9.28 14.698a.75.75 0 1 1-1.06-1.06L11.856 10 8.22 6.364a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'm-carousel' }} />\n\n<script lang=\"ts\">\n import IconButton from '../iconbutton/IconButton.svelte';\n import ChevronLeft20 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft20/ChevronLeft20.svelte';\n import ChevronRight20 from '@mozaic-ds/icons-svelte/svelte/ChevronRight20/ChevronRight20.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 /**\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":["id","style","className","fill","size","previousButtonAriaLabel","nextButtonAriaLabel","attrs","$.rest_props","$$props","activeIndex","contentContainer","observer","scrollOptions","getCarouselChildren","slot","scrollToChild","index","goPrevious","$.get","goNext","children","$.user_effect","entries","entry","e","el","isFirstChildActive","$.derived","isLastChildActive","$.bind_this","div_4","$$value"],"mappings":"+rBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,iRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,maCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,iRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;spCCPA,iBAwBI,IAAAE,kCAA0B,UAAU,EACpCC,8BAAsB,MAAM,EACzBC,EAAAC,EAAAC,EAAA,4FAIDC,KAAqB,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,EAAAT,CAAW,EAAG,GAAGM,EAAaG,EAACT,CAAW,EAAG,CAAC,CACpD,CAES,SAAAU,GAAS,CACV,MAAAC,EAAWP,EAAmB,IAChCJ,CAAW,EAAGW,EAAS,OAAS,GAAGL,EAAaG,EAACT,CAAW,EAAG,CAAC,CACtE,CAEAY,EAAO,IAAO,IACPX,EAEL,OAAAC,MAAe,qBACZW,GAAY,OACLC,EAAQD,EAAQ,KAAME,GAAMA,EAAE,cAAc,EAC9C,GAAAD,EAAO,CACH,MAAAH,EAAWP,EAAmB,KACpCJ,EAAcW,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,EAAYT,CAAW,IAAK,CAAC,EAC/CmB,UAA6BnB,CAAW,IAAKI,EAAmB,EAAG,OAAS,CAAC,iFA7DvD,WAAU,2EACd,OAAM,2IAoE1BP,kJAWWW,0BACCS,CAAkB,4BAChBtB,EAAuB,+FAQ1Be,0BACCS,CAAiB,4BACfvB,EAAmB,8GAOQwB,GAAAC,EAAAC,GAAArB,QAAAA,CAAgB,kBArC/D","x_google_ignoreList":[0,1]}