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

package/dist/bundle.d.ts

@@ -1,43 +1,44 @@
 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';
 //# sourceMappingURL=bundle.d.ts.map

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,7 +1,4 @@
-import{c as o,p as l,a as m,b as n,f as d,d as c,t as f,h,i as v,j as u,r as p,e as g,u as x}from"../../custom-element.js";import{s as w}from"../../slot.js";var z=d("<div><!></div>");const y={hash:"svelte-1ox7lm2",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.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-avatar.svelte-1ox7lm2 {display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:100%;background:#eff1f6;color:#404040;font-size:0.75rem;font-weight:600;text-transform:uppercase;}.mc-avatar--m.svelte-1ox7lm2 {width:3rem;height:3rem;font-size:1.125rem;}.mc-avatar--l.svelte-1ox7lm2 {width:4rem;height:4rem;font-size:1.5rem;}.svelte-1ox7lm2::slotted(img) {display:block;width:100%;height:100%;object-fit:contain;}`};function _(s,a){l(a,!0),m(s,y);let e=n(a,"size",7,"s");var t=z(),r=c(t);return w(r,a,"default",{}),p(t),f(()=>g(t,1,x(["mc-avatar",e()&&`mc-avatar--${e()}`]),"svelte-1ox7lm2")),h(s,t),v({get size(){return e()},set size(i="s"){e(i),u()}})}customElements.define("m-avatar",o(_,{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":";;;;;seAAA,gBAaQ,IAAAA,eAAO,GAAG,kEAGL,YAAaA,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,CAAA,8CAHrC,IAAG,YAClB"}
+{"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 {
     /**
@@ -21,9 +23,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-avatar {
   display: flex;
   align-items: center;
@@ -31,11 +30,11 @@
   width: 2rem;
   height: 2rem;
   overflow: hidden;
-  border-radius: 100%;
-  background: #eff1f6;
-  color: #404040;
-  font-size: 0.75rem;
-  font-weight: 600;
+  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 img {
@@ -47,12 +46,12 @@
 .mc-avatar--m {
   width: 3rem;
   height: 3rem;
-  font-size: 1.125rem;
+  font-size: var(--font-size-200, 1.125rem);
 }
 .mc-avatar--l {
   width: 4rem;
   height: 4rem;
-  font-size: 1.5rem;
+  font-size: var(--font-size-300, 1.5rem);
 }
 
 ::slotted(img) {

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,11 +1,8 @@
-import{c as y,p as L,a as B,b as v,f as q,d as i,t as f,h as b,i as M,j as _,r as l,e as p,u as j,m as o,g as z}from"../../custom-element.js";import{e as D,i as S}from"../../each.js";import{s as g}from"../../attributes.js";var A=q('<li class="mc-breadcrumb__item svelte-5h7sq6"><a><span class="mc-link__label svelte-5h7sq6"> </span></a></li>'),F=q('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-5h7sq6"></ol></nav>');const G={hash:"svelte-5h7sq6",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.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-breadcrumb.svelte-5h7sq6 {color:#000000;}.mc-breadcrumb__container.svelte-5h7sq6 {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-5h7sq6 {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-5h7sq6: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='%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-5h7sq6: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='%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-5h7sq6: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-5h7sq6, .mc-breadcrumb__current.mc-link.svelte-5h7sq6 {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-5h7sq6, .mc-breadcrumb__current.svelte-5h7sq6:active, .mc-breadcrumb__current.svelte-5h7sq6:focus, .mc-breadcrumb__current.svelte-5h7sq6:hover, .mc-breadcrumb__current.svelte-5h7sq6:visited, .mc-breadcrumb__current.mc-link.svelte-5h7sq6, .mc-breadcrumb__current.mc-link.svelte-5h7sq6:active, .mc-breadcrumb__current.mc-link.svelte-5h7sq6:focus, .mc-breadcrumb__current.mc-link.svelte-5h7sq6:hover, .mc-breadcrumb__current.mc-link.svelte-5h7sq6:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-5h7sq6 {color:#ffffff;}.mc-breadcrumb--inverse.svelte-5h7sq6 .mc-breadcrumb__item:where(.svelte-5h7sq6):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='%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-5h7sq6 .mc-breadcrumb__item:where(.svelte-5h7sq6):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='%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-5h7sq6 {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:#000000;font-size:0.875rem;}.mc-link__label.svelte-5h7sq6 {line-height:1.3;}.mc-link__icon.svelte-5h7sq6 {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5h7sq6:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5h7sq6) {text-decoration:underline;}.mc-link.svelte-5h7sq6:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-5h7sq6 {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5h7sq6 {color:#666666;}.mc-link--accent.svelte-5h7sq6 {color:#117f03;}.mc-link--inverse.svelte-5h7sq6 {--focus-color-mid: #000000;--focus-color-outer: #ffffff;color:#ffffff;}.mc-link--stand-alone.svelte-5h7sq6 {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-5h7sq6 .mc-link__label:where(.svelte-5h7sq6) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-5h7sq6:hover .mc-link__label:where(.svelte-5h7sq6) {border-color:transparent;}.mc-link--inline.svelte-5h7sq6 {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5h7sq6 .mc-link__label:where(.svelte-5h7sq6) {line-height:1;}.mc-link--inline.svelte-5h7sq6:hover {text-decoration:none;}`};function H(h,c){L(c,!0),B(h,G);let t=v(c,"appearance",7,"standard"),a=v(c,"links",23,()=>[]);const k=e=>e===a().length-1;function w(e){const r=["mc-link","mc-link--m","mc-link--inline"];return t()&&r.push(`mc-link--${t()}`),e&&r.push("mc-breadcrumb__current"),r.join(" ")}var n=F(),d=i(n);return D(d,21,a,S,(e,r,x)=>{var m=A(),s=i(m),u=i(s),C=i(u,!0);l(u),l(s),l(m),f(E=>{g(s,"href",o(r).href),g(s,"target",o(r).target),p(s,1,E,"svelte-5h7sq6"),z(C,o(r).label)},[()=>j(w(k(x)))]),b(e,m)}),l(d),l(n),f(()=>p(n,1,`mc-breadcrumb mc-breadcrumb--${t()}`,"svelte-5h7sq6")),b(h,n),M({get appearance(){return t()},set appearance(e="standard"){t(e),_()},get links(){return a()},set links(e=[]){a(e),_()}})}customElements.define("m-breadcrumb",y(H,{appearance:{},links:{}},[],[],!0));
+ */.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));
 //# 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":";;;;;;;;;g9CAAA,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,EAAW,CAAA,UAAW,aAAc,iBAAiB,EACvD,OAAAR,EAAU,GACZQ,EAAQ,KAAI,YAAaR,EAAU,CAAA,EAAA,EAEjCO,GACFC,EAAQ,KAAK,wBAAwB,EAEhCA,EAAQ,KAAK,GAAG,CACzB,kBAQSC,OAAAA,EAAAC,EAAA,GAAAT,OAASU,EAAIN,IAAA,wDAGRO,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,2BAGWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,CAAA,kEATHL,EAAU,CAAA,GAAA,eAAA,CAAA,0DAjB9B,WAAU,8DAc/B"}
+{"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>
   `,