@mozaic-ds/web-components 1.0.0-beta.7 → 1.0.0

package/dist/bundle.d.ts.map

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

package/dist/bundle.js

@@ -1,42 +1,43 @@
 import './components/avatar/Avatar.js';
+import './components/breadcrumb/Breadcrumb.js';
 import './components/button/Button.js';
 import './components/callout/Callout.js';
-import './components/iconbutton/IconButton.js';
 import './components/checkbox/Checkbox.js';
 import './components/checkboxgroup/CheckboxGroup.js';
-import './components/textarea/Textarea.js';
-import './components/select/Select.js';
-import './components/toaster/Toaster.js';
-import './components/toggle/Toggle.js';
+import './components/circularprogressbar/CircularProgressbar.js';
+import './components/datepicker/Datepicker.js';
+import './components/drawer/Drawer.js';
 import './components/field/Field.js';
+import './components/flag/Flag.js';
+import './components/iconbutton/IconButton.js';
+import './components/linearprogressbarbuffer/LinearProgressbarBuffer.js';
+import './components/linearprogressbarpercentage/LinearProgressbarPercentage.js';
 import './components/link/Link.js';
 import './components/loader/Loader.js';
-import './components/textinput/Textinput.js';
+import './components/loadingoverlay/LoadingOverlay.js';
+import './components/modal/Modal.js';
+import './components/numberbadge/NumberBadge.js';
 import './components/overlay/Overlay.js';
-import './components/overlayloader/OverlayLoader.js';
+import './components/pagination/Pagination.js';
+import './components/passwordinput/PasswordInput.js';
+import './components/pincode/Pincode.js';
+import './components/quantityselector/QuantitySelector.js';
 import './components/radio/Radio.js';
 import './components/radiogroup/RadioGroup.js';
-import './components/quantityselector/QuantitySelector.js';
-import './components/numberbadge/NumberBadge.js';
+import './components/select/Select.js';
 import './components/statusbadge/StatusBadge.js';
-import './components/togglegroup/ToggleGroup.js';
-import './components/breadcrumb/Breadcrumb.js';
+import './components/statusdot/StatusDot.js';
 import './components/statusnotification/StatusNotification.js';
-import './components/passwordinput/PasswordInput.js';
-import './components/modal/Modal.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/pagination/Pagination.js';
-import './components/tabs/Tab.js';
-import './components/tabs/Tabs.js';
-import './components/drawer/Drawer.js';
-import './components/flag/Flag.js';
-import './components/pincode/Pincode.js';
-import './components/datepicker/Datepicker.js';
+import './components/textarea/Textarea.js';
+import './components/textinput/Textinput.js';
+import './components/toaster/Toaster.js';
+import './components/toggle/Toggle.js';
+import './components/togglegroup/ToggleGroup.js';
 import './components/tooltip/Tooltip.js';
-import './components/linearprogressbarpercentage/LinearProgressbarPercentage.js';
-import './components/linearprogressbarbuffer/LinearProgressbarBuffer.js';
-import './components/circularprogressbar/CircularProgressbar.js';

package/dist/components/avatar/Avatar.js

@@ -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,h,i as u,j as g,r as p,e as w,u 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 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:`/**
  * 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),g()}},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),u(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(--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));
 //# sourceMappingURL=Avatar.js.map

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

@@ -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  interface Props {\n    /**\n     * Determines the size of the avatar.\n     */\n\t\tsize: 's' | 'm' | 'l'\n\t}\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,gBAaQ,IAAAA,eAAO,GAAG,2CAAH,IAAG,wEAGL,YAAaA,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,CAAA,aAFpD"}
+{"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\t\tsize: 's' | 'm' | 'l'\n\t}\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"}

package/dist/components/avatar/Avatar.spec.js

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Avatar from './Avatar.svelte';
+describe('m-avatar component', () => {
+    it('renders with default size "s"', () => {
+        const { container } = render(Avatar);
+        const div = container.querySelector('div.mc-avatar');
+        expect(div).toBeTruthy();
+        expect(div?.classList.contains('mc-avatar--s')).toBe(true);
+    });
+    it('applies correct size class for size "l"', () => {
+        const { container } = render(Avatar, { props: { size: 'l' } });
+        const div = container.querySelector('div.mc-avatar');
+        expect(div).toBeTruthy();
+        expect(div?.classList.contains('mc-avatar--l')).toBe(true);
+    });
+});

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

@@ -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,IAgDX,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"}
+{"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,IAoBX,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

@@ -4,38 +4,12 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
 const meta = {
     title: 'Content/Avatar',
-    component: 'm-status-dot',
-    parameters: {
-        docs: {
-            description: {
-                component: '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.',
-            },
-        },
-    },
+    component: 'm-avatar',
+    tags: ['v2'],
     argTypes: {
         size: {
-            description: 'Determines the size of the avatar.',
-            control: { type: 'radio' },
+            control: 'inline-radio',
             options: ['s', 'm', 'l'],
-            table: {
-                type: {
-                    summary: 's | m | l',
-                },
-                defaultValue: {
-                    summary: 's',
-                },
-                category: 'attributes',
-            },
-        },
-        default: {
-            description: 'Use this slot to insert the image, icon or intials of the avatar.',
-            control: { type: 'text' },
-            table: {
-                type: {
-                    summary: 'any',
-                },
-                category: 'slots',
-            },
         },
     },
     args: {

package/dist/components/avatar/Avatar.svelte

@@ -3,6 +3,8 @@
 <script lang="ts">
   /**
    * 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.
+   * 
+   * @slot default - Use this slot to insert the image, icon or intials of the avatar.
    */
   interface Props {
     /**

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,5 +1,7 @@
 /**
  * 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.
+ *
+ * @slot default - Use this slot to insert the image, icon or intials of the avatar.
  */
 interface Props {
     /**

package/dist/components/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACL,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;CACrB;AAiBF,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"}
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACL,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;CACrB;AAiBF,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/avatar/README.md

@@ -0,0 +1,16 @@
+# `m-avatar`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `size*` | Determines the size of the avatar. | `'s'` `'m'` `'l'` | `s` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert the image, icon or intials of the avatar. |
+

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,8 @@
-import{c as B,p as M,a as j,b as u,f as g,d as c,t as b,h as x,i as z,j as f,r as a,e as _,u as D,m,g as S}from"../../custom-element.js";import{e as q,i as A}from"../../each.js";import{s as p}from"../../attributes.js";var F=g('<li class="mc-breadcrumb__item svelte-1ihiex7"><a><span class="mc-link__label svelte-1ihiex7"> </span></a></li>'),G=g('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1ihiex7"></ol></nav>');const H={hash:"svelte-1ihiex7",code:`/**
+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:`/**
  * 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 I(d,s){M(s,!0),j(d,H);let i=u(s,"appearance",7,"standard"),l=u(s,"links",23,()=>[]);const k=e=>e===l().length-1;function w(e){const r=["mc-link","mc-link--m","mc-link--inline"];return i()&&r.push(`mc-link--${i()}`),e&&r.push("mc-breadcrumb__current"),r.join(" ")}var C={get appearance(){return i()},set appearance(e="standard"){i(e),f()},get links(){return l()},set links(e=[]){l(e),f()}},n=G(),h=c(n);return q(h,21,l,A,(e,r,E)=>{var o=F(),t=c(o),v=c(t),y=c(v,!0);a(v),a(t),a(o),b(L=>{p(t,"href",m(r).href),p(t,"target",m(r).target),_(t,1,L,"svelte-1ihiex7"),S(y,m(r).label)},[()=>D(w(k(E)))]),x(e,o)}),a(h),a(n),b(()=>_(n,1,`mc-breadcrumb mc-breadcrumb--${i()}`,"svelte-1ihiex7")),x(d,n),z(C)}customElements.define("m-breadcrumb",B(I,{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-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));
 //# sourceMappingURL=Breadcrumb.js.map

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

@@ -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\t\tlinks: 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\t}\n\n  let { appearance = 'standard', links = []}: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n\n  function setClasses(isCurrent: boolean): string {\n    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (isCurrent) {\n      classes.push('mc-breadcrumb__current');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<nav\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\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={setClasses(isLastLink(index))}\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","setClasses","isCurrent","classes","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,GAAA,IAAA,CAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,WAEtDK,EAAWC,EAA4B,CACxC,MAAAC,EAAO,CAAI,UAAW,aAAc,iBAAiB,EACvD,OAAAR,EAAU,GACZQ,EAAQ,KAAI,YAAaR,EAAU,CAAA,EAAA,EAEjCO,GACFC,EAAQ,KAAK,wBAAwB,EAEhCA,EAAQ,KAAK,GAAG,CACzB,sDAbmB,WAAU,2EAqBpBC,OAAAA,EAAAC,EAAA,GAAAT,OAASU,EAAIN,IAAA,wDAGRO,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BAGWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,CAAA,kEATHL,EAAU,CAAA,GAAA,gBAAA,CAAA,aAHnD"}
+{"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\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\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,wEAUpBK,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,4FAdQL,EAAU,CAAA,GAAA,gBAAA,CAAA,aAHnD"}

package/dist/components/breadcrumb/Breadcrumb.spec.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Breadcrumb from './Breadcrumb.svelte';
+describe('m-breadcrumb component', () => {
+    const links = [
+        { label: 'Home', href: '/' },
+        { label: 'Category', href: '/category' },
+        { label: 'Item', href: '/category/item', target: '_blank' },
+    ];
+    it('renders with default appearance "standard"', () => {
+        const { container } = render(Breadcrumb, { props: { links } });
+        const nav = container.querySelector('nav.mc-breadcrumb');
+        expect(nav).toBeTruthy();
+        expect(nav?.classList.contains('mc-breadcrumb--standard')).toBe(true);
+        const items = container.querySelectorAll('li.mc-breadcrumb__item');
+        expect(items.length).toBe(links.length);
+        const anchors = container.querySelectorAll('a.mc-link');
+        expect(anchors[anchors.length - 1].classList.contains('mc-breadcrumb__current')).toBe(true);
+    });
+    it('renders with "inverse" appearance when set', () => {
+        const { container } = render(Breadcrumb, {
+            props: { links, appearance: 'inverse' },
+        });
+        const nav = container.querySelector('nav.mc-breadcrumb');
+        expect(nav?.classList.contains('mc-breadcrumb--inverse')).toBe(true);
+        const anchors = container.querySelectorAll('a.mc-link--inverse');
+        expect(anchors.length).toBe(links.length);
+    });
+    it('applies href and target attributes on links correctly', () => {
+        const { container } = render(Breadcrumb, { props: { links } });
+        links.forEach((link, i) => {
+            const anchor = container.querySelectorAll('a.mc-link')[i];
+            expect(anchor).toHaveAttribute('href', link.href);
+            if (link.target) {
+                expect(anchor).toHaveAttribute('target', link.target);
+            }
+            else {
+                expect(anchor).not.toHaveAttribute('target');
+            }
+        });
+    });
+});

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

@@ -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,IAkEX,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"}
+{"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,IAmCX,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

@@ -3,39 +3,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 const meta = {
     title: 'Navigation/Breadcrumb',
     component: 'm-breadcrumb',
-    parameters: {
-        docs: {
-            description: {
-                component: '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.',
-            },
-        },
-    },
-    argTypes: {
-        appearance: {
-            description: 'Define the visual appearance of the breadcrumb',
-            control: { type: 'radio' },
-            options: ['standard', 'inverse'],
-            table: {
-                type: {
-                    summary: 'standard | inverse',
-                },
-                defaultValue: {
-                    summary: 'standard',
-                },
-                category: 'attributes',
-            },
-        },
-        links: {
-            description: 'List of breadcrumb links (label + href)',
-            control: 'object',
-            table: {
-                type: {
-                    summary: '{ label: string; href: string; target?: _blank | _self | _parent | _top; }[]',
-                },
-                category: 'attributes',
-            },
-        },
-    },
     args: {
         links: [
             {
@@ -55,12 +22,16 @@ const meta = {
                 href: '#',
             },
         ],
-        ariaLabel: 'breadcrumb',
+    },
+    argTypes: {
+        appearance: {
+            control: 'radio',
+            options: ['standard', 'inverse'],
+        },
     },
     render: (args) => html `
     <m-breadcrumb
       appearance=${ifDefined(args.appearance)}
-      aria-label=${args.ariaLabel}
       .links=${args.links}
     ></m-breadcrumb>
   `,

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -1,6 +1,6 @@
 <svelte:options
   customElement={{
-    tag: 'm-breadcrumb'
+    tag: 'm-breadcrumb',
   }}
 />
 
@@ -16,7 +16,7 @@
     /**
      * Links of the breadcrumb.
      */
-		links: Array<{
+    links: Array<{
       /**
        * The label displayed for the link.
        */
@@ -30,22 +30,11 @@
        */
       target?: '_blank' | '_self' | '_parent' | '_top';
     }>;
-	}
+  }
 
-  let { appearance = 'standard', links = []}: Props = $props();
+  let { appearance = 'standard', links }: Props = $props();
 
   const isLastLink = (index: number) => index === links.length - 1;
-
-  function setClasses(isCurrent: boolean): string {
-    const classes = ['mc-link', 'mc-link--m', 'mc-link--inline'];
-    if (appearance) {
-      classes.push(`mc-link--${appearance}`);
-    }
-    if (isCurrent) {
-      classes.push('mc-breadcrumb__current');
-    }
-    return classes.join(' ');
-  }
 </script>
 
 <nav
@@ -58,7 +47,13 @@
         <a
           href={link.href}
           target={link.target}
-          class={setClasses(isLastLink(index))}
+          class={[
+            'mc-link',
+            'mc-link--m',
+            'mc-link--inline',
+            appearance && `mc-link--${appearance}`,
+            isLastLink(index) && 'mc-breadcrumb__current',
+          ]}
         >
           <span class="mc-link__label">{link.label}</span>
         </a>

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACL,KAAK,EAAE,KAAK,CAAC;QACT;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC,CAAC;CACL;AAwCF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC,CAAC;CACJ;AAmCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/breadcrumb/README.md

@@ -0,0 +1,11 @@
+# `m-breadcrumb`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `appearance*` | Allows to define the breadcrumb appearance. | `'standard'` `'inverse'` | `standard` |
+| `links*` | Links of the breadcrumb. | `Array<{ label: string; href: string; target?: '_blank'` `'_self'` `'_parent'` `'_top'; }>` |   |
+

package/dist/components/button/Button.js

@@ -1,5 +1,5 @@
-import{c as M,p as N,a as O,b as n,f as z,D as P,s as C,d as h,h as d,i as Q,j as a,r as m,t as R,e as T,A as D,B as E}from"../../custom-element.js";import{i as b}from"../../if.js";import{s as B}from"../../slot.js";import{b as U,C as V}from"../../attributes.js";import{L as W}from"../loader/Loader.js";var X=z('<span class="mc-button__icon svelte-ozghz9"><!></span>'),Y=z("<span><!></span>"),Z=z('<span class="mc-button__icon svelte-ozghz9"><!></span>'),$=z("<button><!> <!> <!> <!></button>");const oo={hash:"svelte-ozghz9",code:`/**
+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:`/**
  * 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;}.mc-button__icon.svelte-ozghz9 {pointer-events:none;}.hidden.svelte-ozghz9 {visibility:hidden;}.loader-style.svelte-ozghz9 {color:currentColor;position:absolute;}`};function to(L,t){N(t,!0),O(L,oo);let f=n(t,"appearance",7,"standard"),k=n(t,"size",7,"m"),_=n(t,"ghost",7,!1),p=n(t,"outlined",7,!1),c=n(t,"iconmode",7),w=n(t,"disabled",7,!1),y=n(t,"type",7,"button"),s=n(t,"isloading",7,!1),g=n(t,"hasiconslot",7,!1),q=P(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconmode","disabled","type","isloading","hasiconslot"]);var F={get appearance(){return f()},set appearance(o="standard"){f(o),a()},get size(){return k()},set size(o="m"){k(o),a()},get ghost(){return _()},set ghost(o=!1){_(o),a()},get outlined(){return p()},set outlined(o=!1){p(o),a()},get iconmode(){return c()},set iconmode(o){c(o),a()},get disabled(){return w()},set disabled(o=!1){w(o),a()},get type(){return y()},set type(o="button"){y(o),a()},get isloading(){return s()},set isloading(o=!1){s(o),a()},get hasiconslot(){return g()},set hasiconslot(o=!1){g(o),a()}},v=$();U(v,o=>({class:`mc-button mc-button--${k()} mc-button--${f()}`,disabled:w(),type:y(),...q,[V]:o}),[()=>({"mc-button--ghost":_(),"mc-button--outlined":p(),"mc-button--icon-only":c()==="only","mc-button--loading":s()})],void 0,"svelte-ozghz9");var S=h(v);{var G=o=>{W(o,{theme:"standard",style:"color: currentColor; position: absolute;",size:"m",text:""})};b(S,o=>{s()&&o(G)})}var j=C(S,2);{var H=o=>{var e=X(),l=h(e);{var u=r=>{var i=D(),x=E(i);B(x,t,"icon",{}),d(r,i)};b(l,r=>{g()&&r(u)})}m(e),d(o,e)};b(j,o=>{(c()==="left"||c()==="only")&&o(H)})}var A=C(j,2);{var I=o=>{var e=Y();let l;var u=h(e);B(u,t,"default",{}),m(e),R(r=>l=T(e,1,"mc-button__label svelte-ozghz9",null,l,r),[()=>({hidden:s()})]),d(o,e)};b(A,o=>{c()!=="only"&&o(I)})}var J=C(A,2);{var K=o=>{var e=Z(),l=h(e);{var u=r=>{var i=D(),x=E(i);B(x,t,"icon",{}),d(r,i)};b(l,r=>{g()&&r(u)})}m(e),d(o,e)};b(J,o=>{c()==="right"&&o(K)})}return m(v),d(L,v),Q(F)}customElements.define("m-button",M(to,{appearance:{},size:{},ghost:{},outlined:{},iconmode:{},disabled:{},type:{},isloading:{},hasiconslot:{}},["icon","default"],[],!0));export{to as B};
+.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};
 //# sourceMappingURL=Button.js.map

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

@@ -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 type {\n    ButtonIconMode,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n  } from './button.types';\n\n  import Loader from '../loader/Loader.svelte';\n\n  interface Props {\n    appearance?: ButtonStyle;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconmode?: ButtonIconMode;\n    disabled?: boolean;\n    type?: ButtonType;\n    isloading?: boolean;\n    hasiconslot?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconmode,\n    disabled = false,\n    type = 'button',\n    isloading = false,\n    hasiconslot = false,\n    ...events\n  }: Props = $props();\n</script>\n\n<button\n  class={`mc-button mc-button--${size} mc-button--${appearance}`}\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  class:mc-button--icon-only={iconmode === 'only'}\n  class:mc-button--loading={isloading}\n  {disabled}\n  {type}\n  {...events}\n>\n  {#if isloading}\n    <Loader\n      theme=\"standard\"\n      style=\"color: currentColor; position: absolute;\"\n      size=\"m\"\n      text=\"\"\n    />\n  {/if}\n\n  {#if iconmode === 'left' || iconmode === 'only'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n\n  {#if iconmode !== 'only'}\n    <span class=\"mc-button__label\" class:hidden={isloading}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconmode === 'right'}\n    <span class=\"mc-button__icon\">\n      {#if hasiconslot}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-button__icon {\n    pointer-events: none;\n  }\n\n  .hidden {\n    visibility: hidden;\n  }\n\n  .loader-style {\n    color: currentColor;\n    position: absolute;\n  }\n</style>\n"],"names":["appearance","size","ghost","outlined","iconmode","$.prop","$$props","disabled","type","isloading","hasiconslot","events","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4","consequent_5"],"mappings":";;;6mMAAA,iBA0BI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACfC,oBAAY,EAAK,EACjBC,sBAAc,EAAK,EAChBC,EAAAC,EAAAN,EAAA,+LATU,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ,uDACH,GAAK,2DACH,GAAK,2BAMU,MAAA,wBAAAL,EAAI,gBAAeD,EAAU,CAAA,4BAOxDW,oCANoBT,EAAK,wBACFC,EAAQ,EACP,uBAAAC,EAAQ,IAAK,4BACfK,EAAS,sJAK9BA,EAAS,GAAAI,EAAAC,CAAA,0GAWLJ,EAAW,GAAAG,EAAAE,CAAA,0BAFfX,EAAQ,IAAK,QAAUA,EAAQ,IAAK,SAAMS,EAAAG,CAAA,sJASAP,EAAS,CAAA,EAAA,CAAA,kBADnDL,EAAQ,IAAK,QAAMS,EAAAI,CAAA,0GAQfP,EAAW,GAAAG,EAAAK,CAAA,yBAFfd,EAAQ,IAAK,SAAOS,EAAAM,CAAA,2BAnC3B"}
+{"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,6DAWlB,UAAS,KAAA,IAAA,uBAL5BL,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"}