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

package/dist/Cross20.js

@@ -0,0 +1,2 @@
+import{J as _,K as v,Q as p,L as g,Y as y,Z as x,U as b,F as m,G as N,H as w,c as z,p as L,b as f,q as C,t as E,h as F,i as T,j as c,e as k,u as A}from"./custom-element.js";import"./legacy.js";import{s as h,a as R}from"./attributes.js";function G(d,s,i){m&&N();var r=d,l,n,t=null,a=null;function e(){n&&(b(n),n=null),t&&(t.lastChild.remove(),r.before(t),t=null),n=a,a=null}_(()=>{if(l!==(l=s())){var u=x();if(l){var o=r;u&&(t=document.createDocumentFragment(),t.append(o=p())),a=g(()=>i(o,l))}u?y.add_callback(e):e()}},v),m&&(r=w)}var S=C('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path fill-rule="evenodd" d="M14.697 6.364a.75.75 0 1 0-1.061-1.061L10 8.939 6.363 5.303a.75.75 0 0 0-1.06 1.06L8.939 10l-3.636 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.06-1.06L11.06 10z"></path></svg>');function j(d,s){L(s,!1);let i=f(s,"id",12,void 0),r=f(s,"style",12,void 0),l=f(s,"className",12,void 0),n=f(s,"fill",12,void 0),t=f(s,"size",12,"1.25rem");var a=S();return E(()=>{h(a,"id",i()),R(a,r()),k(a,0,A(l())),h(a,"fill",n())}),F(d,a),T({get id(){return i()},set id(e){i(e),c()},get style(){return r()},set style(e){r(e),c()},get className(){return l()},set className(e){l(e),c()},get fill(){return n()},set fill(e){n(e),c()},get size(){return t()},set size(e){t(e),c()}})}customElements.define("cross-20",z(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{j as C,G as c};
+//# sourceMappingURL=Cross20.js.map

package/dist/Cross20.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cross20.js","sources":["../node_modules/svelte/src/internal/client/dom/blocks/svelte-component.js","../node_modules/@mozaic-ds/icons-svelte/dist/components/Cross20/Cross20.svelte"],"sourcesContent":["/** @import { TemplateNode, Dom, Effect } from '#client' */\n/** @import { Batch } from '../../reactivity/batch.js'; */\nimport { EFFECT_TRANSPARENT } from '#client/constants';\nimport { block, branch, pause_effect } from '../../reactivity/effects.js';\nimport { current_batch } from '../../reactivity/batch.js';\nimport { hydrate_next, hydrate_node, hydrating } from '../hydration.js';\nimport { create_text, should_defer_append } from '../operations.js';\n\n/**\n * @template P\n * @template {(props: P) => void} C\n * @param {TemplateNode} node\n * @param {() => C} get_component\n * @param {(anchor: TemplateNode, component: C) => Dom | void} render_fn\n * @returns {void}\n */\nexport function component(node, get_component, render_fn) {\n\tif (hydrating) {\n\t\thydrate_next();\n\t}\n\n\tvar anchor = node;\n\n\t/** @type {C} */\n\tvar component;\n\n\t/** @type {Effect | null} */\n\tvar effect;\n\n\t/** @type {DocumentFragment | null} */\n\tvar offscreen_fragment = null;\n\n\t/** @type {Effect | null} */\n\tvar pending_effect = null;\n\n\tfunction commit() {\n\t\tif (effect) {\n\t\t\tpause_effect(effect);\n\t\t\teffect = null;\n\t\t}\n\n\t\tif (offscreen_fragment) {\n\t\t\t// remove the anchor\n\t\t\t/** @type {Text} */ (offscreen_fragment.lastChild).remove();\n\n\t\t\tanchor.before(offscreen_fragment);\n\t\t\toffscreen_fragment = null;\n\t\t}\n\n\t\teffect = pending_effect;\n\t\tpending_effect = null;\n\t}\n\n\tblock(() => {\n\t\tif (component === (component = get_component())) return;\n\n\t\tvar defer = should_defer_append();\n\n\t\tif (component) {\n\t\t\tvar target = anchor;\n\n\t\t\tif (defer) {\n\t\t\t\toffscreen_fragment = document.createDocumentFragment();\n\t\t\t\toffscreen_fragment.append((target = create_text()));\n\t\t\t}\n\n\t\t\tpending_effect = branch(() => render_fn(target, component));\n\t\t}\n\n\t\tif (defer) {\n\t\t\t/** @type {Batch} */ (current_batch).add_callback(commit);\n\t\t} else {\n\t\t\tcommit();\n\t\t}\n\t}, EFFECT_TRANSPARENT);\n\n\tif (hydrating) {\n\t\tanchor = hydrate_node;\n\t}\n}\n","<svelte:options customElement={{ tag: 'cross-20', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.25rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M14.697 6.364a.75.75 0 1 0-1.061-1.061L10 8.939 6.363 5.303a.75.75 0 0 0-1.06 1.06L8.939 10l-3.636 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.06-1.06L11.06 10z\"/></svg>"],"names":["component","node","get_component","render_fn","hydrating","hydrate_next","anchor","effect","offscreen_fragment","pending_effect","commit","pause_effect","block","defer","should_defer_append","target","create_text","branch","current_batch","EFFECT_TRANSPARENT","hydrate_node","id","style","className","fill","size"],"mappings":"4OAgBO,SAASA,EAAUC,EAAMC,EAAeC,EAAW,CACrDC,GACHC,EAAc,EAGf,IAAIC,EAASL,EAGTD,EAGAO,EAGAC,EAAqB,KAGrBC,EAAiB,KAErB,SAASC,GAAS,CACbH,IACHI,EAAaJ,CAAM,EACnBA,EAAS,MAGNC,IAEkBA,EAAmB,UAAW,OAAQ,EAE3DF,EAAO,OAAOE,CAAkB,EAChCA,EAAqB,MAGtBD,EAASE,EACTA,EAAiB,IACnB,CAECG,EAAM,IAAM,CACX,GAAIZ,KAAeA,EAAYE,EAAa,GAE5C,KAAIW,EAAQC,EAAqB,EAEjC,GAAId,EAAW,CACd,IAAIe,EAAST,EAETO,IACHL,EAAqB,SAAS,uBAAwB,EACtDA,EAAmB,OAAQO,EAASC,GAAe,GAGpDP,EAAiBQ,EAAO,IAAMd,EAAUY,EAAQf,CAAS,CAAC,CAC7D,CAEMa,EACmBK,EAAe,aAAaR,CAAM,EAExDA,EAAQ,EAET,EAAES,CAAkB,EAEjBf,IACHE,EAASc,EAEX,wWC/EA,SAEa,IAAAC,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,mCAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E","x_google_ignoreList":[0,1]}

package/dist/Cross24.js

@@ -1,2 +1,2 @@
-import{c,p as o,b as l,A as g,t as h,h as v,i as p,j as a,e as y,B as _}from"./custom-element.js";import"./legacy.js";import{s as m,c as w}from"./attributes.js";var x=g('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z"></path></svg>');function z(u,s){o(s,!1);let i=l(s,"id",12,void 0),r=l(s,"style",12,void 0),n=l(s,"className",12,void 0),d=l(s,"fill",12,void 0),f=l(s,"size",12,"1.5rem");var t=x();return h(()=>{m(t,"id",i()),w(t,r()),y(t,0,_(n())),m(t,"fill",d())}),v(u,t),p({get id(){return i()},set id(e){i(e),a()},get style(){return r()},set style(e){r(e),a()},get className(){return n()},set className(e){n(e),a()},get fill(){return d()},set fill(e){d(e),a()},get size(){return f()},set size(e){f(e),a()}})}customElements.define("cross-24",c(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{z as C};
+import{c,p as o,b as l,q as g,t as h,h as v,i as p,j as a,e as y,u as _}from"./custom-element.js";import"./legacy.js";import{s as u,a as w}from"./attributes.js";var x=g('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z"></path></svg>');function z(m,s){o(s,!1);let i=l(s,"id",12,void 0),r=l(s,"style",12,void 0),n=l(s,"className",12,void 0),d=l(s,"fill",12,void 0),f=l(s,"size",12,"1.5rem");var t=x();return h(()=>{u(t,"id",i()),w(t,r()),y(t,0,_(n())),u(t,"fill",d())}),v(m,t),p({get id(){return i()},set id(e){i(e),a()},get style(){return r()},set style(e){r(e),a()},get className(){return n()},set className(e){n(e),a()},get fill(){return d()},set fill(e){d(e),a()},get size(){return f()},set size(e){f(e),a()}})}customElements.define("cross-24",c(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{z as C};
 //# sourceMappingURL=Cross24.js.map

package/dist/CrossCircleFilled24.js

@@ -1,2 +1,2 @@
-import{c as u,p as o,b as l,A as g,t as h,h as v,i as p,j as a,e as y,B as _}from"./custom-element.js";import"./legacy.js";import{s as c,c as w}from"./attributes.js";var x=g('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414"></path></svg>');function z(m,s){o(s,!1);let i=l(s,"id",12,void 0),r=l(s,"style",12,void 0),d=l(s,"className",12,void 0),n=l(s,"fill",12,void 0),f=l(s,"size",12,"1.5rem");var t=x();return h(()=>{c(t,"id",i()),w(t,r()),y(t,0,_(d())),c(t,"fill",n())}),v(m,t),p({get id(){return i()},set id(e){i(e),a()},get style(){return r()},set style(e){r(e),a()},get className(){return d()},set className(e){d(e),a()},get fill(){return n()},set fill(e){n(e),a()},get size(){return f()},set size(e){f(e),a()}})}customElements.define("cross-circle-filled-24",u(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{z as C};
+import{c as m,p as o,b as l,q as g,t as h,h as v,i as p,j as a,e as y,u as _}from"./custom-element.js";import"./legacy.js";import{s as u,a as w}from"./attributes.js";var x=g('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414"></path></svg>');function z(c,s){o(s,!1);let i=l(s,"id",12,void 0),r=l(s,"style",12,void 0),d=l(s,"className",12,void 0),n=l(s,"fill",12,void 0),f=l(s,"size",12,"1.5rem");var t=x();return h(()=>{u(t,"id",i()),w(t,r()),y(t,0,_(d())),u(t,"fill",n())}),v(c,t),p({get id(){return i()},set id(e){i(e),a()},get style(){return r()},set style(e){r(e),a()},get className(){return d()},set className(e){d(e),a()},get fill(){return n()},set fill(e){n(e),a()},get size(){return f()},set size(e){f(e),a()}})}customElements.define("cross-circle-filled-24",m(z,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));export{z as C};
 //# sourceMappingURL=CrossCircleFilled24.js.map

package/dist/attributes.js

@@ -1,2 +1,2 @@
-import{E as H,X as p,H as U,q,a6 as K,L as T,a1 as z,a7 as F,a8 as X,a9 as Z,aa as J,ab as Q,ac as W,ad as m,ae as x,m as aa,af as ra,B as ea,e as ia,ag as sa,ah as ta,n as ua,ai as fa,aj as la,ak as oa,al as ca,am as na,an as da,ao as _a,T as $}from"./custom-element.js";function va(a,r){var e=void 0,i;H(()=>{e!==(e=r())&&(i&&(p(i),i=null),e&&(i=U(()=>{q(()=>e(a))})))})}function M(a,r={},e,i){for(var s in e){var u=e[s];r[s]!==u&&(e[s]==null?a.style.removeProperty(s):a.style.setProperty(s,u,i))}}function ba(a,r,e,i){var s=a.__style;if(T||s!==r){var u=K(r,i);(!T||u!==a.getAttribute("style"))&&(u==null?a.removeAttribute("style"):a.style.cssText=u),a.__style=r}else i&&(Array.isArray(i)?(M(a,e==null?void 0:e[0],i[0]),M(a,e==null?void 0:e[1],i[1],"important")):M(a,e,i));return i}function w(a,r,e=!1){if(a.multiple){if(r==null)return;if(!z(r))return F();for(var i of a.options)i.selected=r.includes(N(i));return}for(i of a.options){var s=N(i);if(X(s,r)){i.selected=!0;return}}(!e||r!==void 0)&&(a.selectedIndex=-1)}function j(a){var r=new MutationObserver(()=>{w(a,a.__value)});r.observe(a,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),Z(()=>{r.disconnect()})}function ya(a,r,e=r){var i=!0;J(a,"change",s=>{var u=s?"[selected]":":checked",_;if(a.multiple)_=[].map.call(a.querySelectorAll(u),N);else{var v=a.querySelector(u)??a.querySelector("option:not([disabled])");_=v&&N(v)}e(_)}),q(()=>{var s=r();if(w(a,s,i),i&&s===void 0){var u=a.querySelector(":checked");u!==null&&(s=N(u),e(s))}a.__value=s,i=!1}),j(a)}function N(a){return"__value"in a?a.__value:a.value}const k=Symbol("class"),E=Symbol("style"),B=Symbol("is custom element"),V=Symbol("is html");function Sa(a){if(T){var r=!1,e=()=>{if(!r){if(r=!0,a.hasAttribute("value")){var i=a.value;I(a,"value",null),a.value=i}if(a.hasAttribute("checked")){var s=a.checked;I(a,"checked",null),a.checked=s}}};a.__on_r=e,da(e),_a()}}function ka(a,r){var e=O(a);e.value===(e.value=r??void 0)||a.value===r&&(r!==0||a.nodeName!=="PROGRESS")||(a.value=r??"")}function Ea(a,r){var e=O(a);e.checked!==(e.checked=r??void 0)&&(a.checked=r)}function ha(a,r){r?a.hasAttribute("selected")||a.setAttribute("selected",""):a.removeAttribute("selected")}function I(a,r,e,i){var s=O(a);T&&(s[r]=a.getAttribute(r),r==="src"||r==="srcset"||r==="href"&&a.nodeName==="LINK")||s[r]!==(s[r]=e)&&(r==="loading"&&(a[Q]=e),e==null?a.removeAttribute(r):typeof e!="string"&&Y(a).includes(r)?a[r]=e:a.setAttribute(r,e))}function Aa(a,r,e,i,s=!1){var u=O(a),_=u[B],v=!u[V];let b=T&&_;b&&$(!1);var l=r||{},y=a.tagName==="OPTION";for(var S in r)S in e||(e[S]=null);e.class?e.class=ea(e.class):(i||e[k])&&(e.class=null),e[E]&&(e.style??(e.style=null));var h=Y(a);for(const t in e){let f=e[t];if(y&&t==="value"&&f==null){a.value=a.__value="",l[t]=f;continue}if(t==="class"){var L=a.namespaceURI==="http://www.w3.org/1999/xhtml";ia(a,L,f,i,r==null?void 0:r[k],e[k]),l[t]=f,l[k]=e[k];continue}if(t==="style"){ba(a,f,r==null?void 0:r[E],e[E]),l[t]=f,l[E]=e[E];continue}var A=l[t];if(!(f===A&&!(f===void 0&&a.hasAttribute(t)))){l[t]=f;var n=t[0]+t[1];if(n!=="$$")if(n==="on"){const d={},g="$$"+t;let o=t.slice(2);var C=ca(o);if(sa(o)&&(o=o.slice(0,-7),d.capture=!0),!C&&A){if(f!=null)continue;a.removeEventListener(o,l[g],d),l[g]=null}if(f!=null)if(C)a[`__${o}`]=f,ua([o]);else{let D=function(G){l[t].call(this,G)};l[g]=ta(o,a,D,d)}else C&&(a[`__${o}`]=void 0)}else if(t==="style")I(a,t,f);else if(t==="autofocus")fa(a,!!f);else if(!_&&(t==="__value"||t==="value"&&f!=null))a.value=a.__value=f;else if(t==="selected"&&y)ha(a,f);else{var c=t;v||(c=la(c));var P=c==="defaultValue"||c==="defaultChecked";if(f==null&&!_&&!P)if(u[t]=null,c==="value"||c==="checked"){let d=a;const g=r===void 0;if(c==="value"){let o=d.defaultValue;d.removeAttribute(c),d.defaultValue=o,d.value=d.__value=g?o:null}else{let o=d.defaultChecked;d.removeAttribute(c),d.defaultChecked=o,d.checked=g?o:!1}}else a.removeAttribute(t);else P||h.includes(c)&&(_||typeof f!="string")?(a[c]=f,c in u&&(u[c]=oa)):typeof f!="function"&&I(a,c,f)}}}return b&&$(!0),l}function Na(a,r,e=[],i=[],s,u=!1){x(e,i,_=>{var v=void 0,b={},l=a.nodeName==="SELECT",y=!1;if(H(()=>{var h=r(..._.map(aa)),L=Aa(a,v,h,s,u);y&&l&&"value"in h&&w(a,h.value);for(let n of Object.getOwnPropertySymbols(b))h[n]||p(b[n]);for(let n of Object.getOwnPropertySymbols(h)){var A=h[n];n.description===ra&&(!v||A!==v[n])&&(b[n]&&p(b[n]),b[n]=U(()=>va(a,()=>A))),L[n]=A}v=L}),l){var S=a;q(()=>{w(S,v.value,!0),j(S)})}y=!0})}function O(a){return a.__attributes??(a.__attributes={[B]:a.nodeName.includes("-"),[V]:a.namespaceURI===W})}var R=new Map;function Y(a){var r=R.get(a.nodeName);if(r)return r;R.set(a.nodeName,r=[]);for(var e,i=a,s=Element.prototype;s!==i;){e=na(i);for(var u in e)e[u].set&&r.push(u);i=m(i)}return r}export{k as C,Na as a,Ea as b,ba as c,ya as d,ka as e,ha as f,Sa as r,I as s};
+import{J as U,W as M,L as j,x as P,a7 as G,F as T,a6 as K,a8 as z,a9 as J,aa as W,ab as Z,ac as Q,ad as X,ae as m,af as x,m as aa,ag as ra,u as ea,e as ia,ah as sa,ai as ta,n as ua,aj as fa,ak as la,al as oa,am as ca,an as na,ao as da,ap as _a,R}from"./custom-element.js";function va(a,r){var e=void 0,i;U(()=>{e!==(e=r())&&(i&&(M(i),i=null),e&&(i=j(()=>{P(()=>e(a))})))})}function C(a,r={},e,i){for(var s in e){var u=e[s];r[s]!==u&&(e[s]==null?a.style.removeProperty(s):a.style.setProperty(s,u,i))}}function ba(a,r,e,i){var s=a.__style;if(T||s!==r){var u=G(r,i);(!T||u!==a.getAttribute("style"))&&(u==null?a.removeAttribute("style"):a.style.cssText=u),a.__style=r}else i&&(Array.isArray(i)?(C(a,e==null?void 0:e[0],i[0]),C(a,e==null?void 0:e[1],i[1],"important")):C(a,e,i));return i}function w(a,r,e=!1){if(a.multiple){if(r==null)return;if(!K(r))return z();for(var i of a.options)i.selected=r.includes(E(i));return}for(i of a.options){var s=E(i);if(J(s,r)){i.selected=!0;return}}(!e||r!==void 0)&&(a.selectedIndex=-1)}function H(a){var r=new MutationObserver(()=>{w(a,a.__value)});r.observe(a,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),W(()=>{r.disconnect()})}function ya(a,r,e=r){var i=!0;Z(a,"change",s=>{var u=s?"[selected]":":checked",_;if(a.multiple)_=[].map.call(a.querySelectorAll(u),E);else{var v=a.querySelector(u)??a.querySelector("option:not([disabled])");_=v&&E(v)}e(_)}),P(()=>{var s=r();if(w(a,s,i),i&&s===void 0){var u=a.querySelector(":checked");u!==null&&(s=E(u),e(s))}a.__value=s,i=!1}),H(a)}function E(a){return"__value"in a?a.__value:a.value}const k=Symbol("class"),N=Symbol("style"),V=Symbol("is custom element"),Y=Symbol("is html");function Sa(a){if(T){var r=!1,e=()=>{if(!r){if(r=!0,a.hasAttribute("value")){var i=a.value;I(a,"value",null),a.value=i}if(a.hasAttribute("checked")){var s=a.checked;I(a,"checked",null),a.checked=s}}};a.__on_r=e,da(e),_a()}}function ka(a,r){var e=O(a);e.value===(e.value=r??void 0)||a.value===r&&(r!==0||a.nodeName!=="PROGRESS")||(a.value=r??"")}function Na(a,r){var e=O(a);e.checked!==(e.checked=r??void 0)&&(a.checked=r)}function ha(a,r){r?a.hasAttribute("selected")||a.setAttribute("selected",""):a.removeAttribute("selected")}function I(a,r,e,i){var s=O(a);T&&(s[r]=a.getAttribute(r),r==="src"||r==="srcset"||r==="href"&&a.nodeName==="LINK")||s[r]!==(s[r]=e)&&(r==="loading"&&(a[Q]=e),e==null?a.removeAttribute(r):typeof e!="string"&&B(a).includes(r)?a[r]=e:a.setAttribute(r,e))}function Aa(a,r,e,i,s=!1){var u=O(a),_=u[V],v=!u[Y];let b=T&&_;b&&R(!1);var l=r||{},y=a.tagName==="OPTION";for(var S in r)S in e||(e[S]=null);e.class?e.class=ea(e.class):(i||e[k])&&(e.class=null),e[N]&&(e.style??(e.style=null));var h=B(a);for(const t in e){let f=e[t];if(y&&t==="value"&&f==null){a.value=a.__value="",l[t]=f;continue}if(t==="class"){var L=a.namespaceURI==="http://www.w3.org/1999/xhtml";ia(a,L,f,i,r==null?void 0:r[k],e[k]),l[t]=f,l[k]=e[k];continue}if(t==="style"){ba(a,f,r==null?void 0:r[N],e[N]),l[t]=f,l[N]=e[N];continue}var A=l[t];if(!(f===A&&!(f===void 0&&a.hasAttribute(t)))){l[t]=f;var n=t[0]+t[1];if(n!=="$$")if(n==="on"){const d={},g="$$"+t;let o=t.slice(2);var p=ca(o);if(sa(o)&&(o=o.slice(0,-7),d.capture=!0),!p&&A){if(f!=null)continue;a.removeEventListener(o,l[g],d),l[g]=null}if(f!=null)if(p)a[`__${o}`]=f,ua([o]);else{let D=function(F){l[t].call(this,F)};l[g]=ta(o,a,D,d)}else p&&(a[`__${o}`]=void 0)}else if(t==="style")I(a,t,f);else if(t==="autofocus")fa(a,!!f);else if(!_&&(t==="__value"||t==="value"&&f!=null))a.value=a.__value=f;else if(t==="selected"&&y)ha(a,f);else{var c=t;v||(c=la(c));var q=c==="defaultValue"||c==="defaultChecked";if(f==null&&!_&&!q)if(u[t]=null,c==="value"||c==="checked"){let d=a;const g=r===void 0;if(c==="value"){let o=d.defaultValue;d.removeAttribute(c),d.defaultValue=o,d.value=d.__value=g?o:null}else{let o=d.defaultChecked;d.removeAttribute(c),d.defaultChecked=o,d.checked=g?o:!1}}else a.removeAttribute(t);else q||h.includes(c)&&(_||typeof f!="string")?(a[c]=f,c in u&&(u[c]=oa)):typeof f!="function"&&I(a,c,f)}}}return b&&R(!0),l}function Ea(a,r,e=[],i=[],s,u=!1){x(e,i,_=>{var v=void 0,b={},l=a.nodeName==="SELECT",y=!1;if(U(()=>{var h=r(..._.map(aa)),L=Aa(a,v,h,s,u);y&&l&&"value"in h&&w(a,h.value);for(let n of Object.getOwnPropertySymbols(b))h[n]||M(b[n]);for(let n of Object.getOwnPropertySymbols(h)){var A=h[n];n.description===ra&&(!v||A!==v[n])&&(b[n]&&M(b[n]),b[n]=j(()=>va(a,()=>A))),L[n]=A}v=L}),l){var S=a;P(()=>{w(S,v.value,!0),H(S)})}y=!0})}function O(a){return a.__attributes??(a.__attributes={[V]:a.nodeName.includes("-"),[Y]:a.namespaceURI===X})}var $=new Map;function B(a){var r=$.get(a.nodeName);if(r)return r;$.set(a.nodeName,r=[]);for(var e,i=a,s=Element.prototype;s!==i;){e=na(i);for(var u in e)e[u].set&&r.push(u);i=m(i)}return r}export{k as C,ba as a,Ea as b,Na as c,ya as d,ka as e,ha as f,Sa as r,I as s};
 //# sourceMappingURL=attributes.js.map

package/dist/bundle.d.ts

@@ -0,0 +1,43 @@
+import './components/avatar/Avatar.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/field/Field.js';
+import './components/link/Link.js';
+import './components/loader/Loader.js';
+import './components/textinput/Textinput.js';
+import './components/overlay/Overlay.js';
+import './components/overlayloader/OverlayLoader.js';
+import './components/radio/Radio.js';
+import './components/radiogroup/RadioGroup.js';
+import './components/quantityselector/QuantitySelector.js';
+import './components/numberbadge/NumberBadge.js';
+import './components/statusbadge/StatusBadge.js';
+import './components/togglegroup/ToggleGroup.js';
+import './components/breadcrumb/Breadcrumb.js';
+import './components/statusnotification/StatusNotification.js';
+import './components/passwordinput/PasswordInput.js';
+import './components/modal/Modal.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/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

@@ -0,0 +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"}

package/dist/bundle.js

@@ -1,9 +1,12 @@
+import './components/avatar/Avatar.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/field/Field.js';
 import './components/link/Link.js';
@@ -16,7 +19,6 @@ import './components/radiogroup/RadioGroup.js';
 import './components/quantityselector/QuantitySelector.js';
 import './components/numberbadge/NumberBadge.js';
 import './components/statusbadge/StatusBadge.js';
-import './components/statusdot/StatusDot.js';
 import './components/togglegroup/ToggleGroup.js';
 import './components/breadcrumb/Breadcrumb.js';
 import './components/statusnotification/StatusNotification.js';
@@ -25,8 +27,8 @@ import './components/modal/Modal.js';
 import './components/tags/Tag.js';
 import './components/tags/TagContextualised.js';
 import './components/tags/TagInteractive.js';
-import './components/tags/TagSelectable.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';

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,7 @@
+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:`/**
+ * 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));
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Initials: Story;
+export declare const Icon: Story;
+//# sourceMappingURL=Avatar.stories.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,67 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@mozaic-ds/icons-svelte/custom-elements/Profile24/Profile24.js';
+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.',
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            description: 'Determines the size of the avatar.',
+            control: { type: '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: {
+        default: `
+      <img src="/images/Avatar.png" alt="Dieter Rams" loading="lazy"/>
+    `,
+    },
+    render: (args) => html `
+    <m-avatar size=${ifDefined(args.size)}>
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-avatar>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Initials = {
+    args: {
+        default: `
+      DS
+    `,
+    },
+};
+export const Icon = {
+    args: {
+        default: `
+      <profile-24></profile-24>
+    `,
+    },
+};

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,63 @@
+<svelte:options customElement={{ tag: 'm-avatar' }} />
+
+<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.
+   */
+  interface Props {
+    /**
+     * Determines the size of the avatar.
+     */
+		size: 's' | 'm' | 'l'
+	}
+
+  let { size = 's'}: Props = $props();
+</script>
+
+<div class={["mc-avatar", size && `mc-avatar--${size}`]} >
+  <slot/>
+</div>
+
+<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;
+  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 img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.mc-avatar--m {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.125rem;
+}
+.mc-avatar--l {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.5rem;
+}
+
+::slotted(img) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}</style>

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

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+interface Props {
+    /**
+     * Determines the size of the avatar.
+     */
+    size: 's' | 'm' | 'l';
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Avatar = InstanceType<typeof Avatar>;
+export default Avatar;
+//# sourceMappingURL=Avatar.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,11 @@
-import{c as E,p as L,a as B,b as v,f as g,d as i,t as u,h as k,i as M,j as h,r as l,e as p,B as z,m as o,g as A}from"../../custom-element.js";import{e as D,i as S}from"../../each.js";import{s as _}from"../../attributes.js";var q=g('<li class="mc-breadcrumb__item svelte-1m7fbjk"><a><span class="mc-link__label svelte-1m7fbjk"> </span></a></li>'),F=g('<nav aria-label="Breadcrumb"><ol class="mc-breadcrumb__container svelte-1m7fbjk"></ol></nav>');const G={hash:"svelte-1m7fbjk",code:`/**
+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:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-breadcrumb.svelte-1m7fbjk {color:var(--breadcrumb-color-text-standard, #000000);}.mc-breadcrumb__container.svelte-1m7fbjk {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;flex-wrap:wrap;gap:0.25rem;}.mc-breadcrumb__item.svelte-1m7fbjk {background-position:left center;background-repeat:no-repeat;}.mc-breadcrumb__item.svelte-1m7fbjk: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-1m7fbjk: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-1m7fbjk: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-1m7fbjk, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk {cursor:default;text-decoration:none;}.mc-breadcrumb__current.svelte-1m7fbjk, .mc-breadcrumb__current.svelte-1m7fbjk:active, .mc-breadcrumb__current.svelte-1m7fbjk:focus, .mc-breadcrumb__current.svelte-1m7fbjk:hover, .mc-breadcrumb__current.svelte-1m7fbjk:visited, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:active, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:focus, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:hover, .mc-breadcrumb__current.mc-link.svelte-1m7fbjk:visited {color:currentcolor;}.mc-breadcrumb--inverse.svelte-1m7fbjk {color:var(--breadcrumb-color-text-inverse, #ffffff);}.mc-breadcrumb--inverse.svelte-1m7fbjk .mc-breadcrumb__item:where(.svelte-1m7fbjk):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-1m7fbjk .mc-breadcrumb__item:where(.svelte-1m7fbjk):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-1m7fbjk {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-1m7fbjk {line-height:1.3;}.mc-link__icon.svelte-1m7fbjk {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1m7fbjk:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1m7fbjk) {text-decoration:underline;}.mc-link.svelte-1m7fbjk: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-1m7fbjk {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-1m7fbjk {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1m7fbjk {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1m7fbjk {--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-1m7fbjk {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-1m7fbjk .mc-link__label:where(.svelte-1m7fbjk) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-1m7fbjk:hover .mc-link__label:where(.svelte-1m7fbjk) {border-color:transparent;}.mc-link--inline.svelte-1m7fbjk {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1m7fbjk .mc-link__label:where(.svelte-1m7fbjk) {line-height:1;}.mc-link--inline.svelte-1m7fbjk:hover {text-decoration:none;}`};function H(b,m){L(m,!0),B(b,G);let t=v(m,"appearance",7,"standard"),n=v(m,"links",23,()=>[]);const j=e=>e===n().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 c=F(),d=i(c);return D(d,21,n,S,(e,r,x)=>{var s=q(),a=i(s),f=i(a),y=i(f,!0);l(f),l(a),l(s),u(C=>{_(a,"href",o(r).href),_(a,"target",o(r).target),p(a,1,C,"svelte-1m7fbjk"),A(y,o(r).label)},[()=>z(w(j(x)))]),k(e,s)}),l(d),l(c),u(()=>p(c,1,`mc-breadcrumb mc-breadcrumb--${t()}`,"svelte-1m7fbjk")),k(b,c),M({get appearance(){return t()},set appearance(e="standard"){t(e),h()},get links(){return n()},set links(e=[]){n(e),h()}})}customElements.define("m-breadcrumb",E(H,{options:{attribute:"links",reflect:!0,type:"Array"},appearance:{},links:{}},[],[],!0));
+ */
+/**
+ * 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));
 //# 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    props: {\n      options: { reflect: true, type: 'Array', attribute: 'links' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  interface BreadcrumbLink {\n    label: string;\n    href: string;\n    target: '_blank' | '_self' | '_parent' | '_top' | undefined;\n  }\n\n  interface Props {\n    appearance?: 'standard' | 'inverse';\n    links?: BreadcrumbLink[];\n  }\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","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAqBQ,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,EAAA,EAAA,OAAAC,EAAAF,CAAI,EAAC,IAAI,EACPC,EAAA,EAAA,SAAAC,EAAAF,CAAI,EAAC,MAAM,4BAGWG,EAAAC,EAAAF,EAAAF,CAAI,EAAC,KAAK,UAFjCL,EAAWF,EAAWC,CAAK,CAAA,CAAA,CAAA,kEATHL,EAAU,CAAA,GAAA,gBAAA,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\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"}

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

@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Inverse: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Inverse: Story;
 //# sourceMappingURL=Breadcrumb.stories.d.ts.map

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,EAAW,MAAM,sBAAsB,CAAC;wBA4BrD,IAAI;AAxBT,wBAwBU;AAsBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAsBzC,eAAO,MAAM,OAAO,KAAoB,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,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"}

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

@@ -1,78 +1,75 @@
-import { within, expect } from 'storybook/test';
-// --- Documentation setup
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+const meta = {
     title: 'Navigation/Breadcrumb',
-    tags: ['autodocs', 'new'],
+    component: 'm-breadcrumb',
     parameters: {
         docs: {
             description: {
-                component: 'A breadcrumb displays the hierarchical path to the current page and helps users navigate back to previous levels easily.<br/>' +
-                    'The `m-breadcrumb` component is the **Svelte / WebComponent** implementation of the **Breadcrumb** from the Mozaic Design System.<br/>' +
-                    'See the [Mozaic documentation](https://mozaic.adeo.cloud/components/breadcrumb/) for design guidelines.',
+                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: 'select' },
+            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',
+            },
         },
     },
-};
-// --- Template function
-const Template = (args) => {
-    const breadcrumb = document.createElement('m-breadcrumb');
-    breadcrumb.setAttribute('appearance', args.appearance || 'standard');
-    // Inject links directly as property
-    breadcrumb.links = args.links || [];
-    return breadcrumb;
-};
-// --- Base args
-const baseLinks = [
-    { label: 'Home', href: '#' },
-    { label: 'level 01', href: '#' },
-    { label: 'level 02', href: '#' },
-    { label: 'Current Page', href: '#' },
-];
-// --- Default story
-export const Default = Template.bind({});
-Default.args = {
-    appearance: 'standard',
-    links: baseLinks,
-};
-Default.play = async ({ canvasElement }) => {
-    const breadcrumbEl = canvasElement.querySelector('m-breadcrumb');
-    const shadowRoot = breadcrumbEl?.shadowRoot;
-    if (!shadowRoot)
-        throw new Error('ShadowRoot not found');
-    const links = shadowRoot.querySelectorAll('a');
-    expect(links.length).toBe(4);
-    const lastLink = links[links.length - 1];
-    expect(lastLink.classList.contains('mc-breadcrumb__current')).toBe(true);
-    const nav = shadowRoot.querySelector('nav');
-    expect(nav?.classList.contains('mc-breadcrumb--standard')).toBe(true);
-};
-// --- Inverse appearance story
-export const Inverse = Template.bind({});
-Inverse.globals = {
-    backgrounds: {
-        value: 'inverse',
+    args: {
+        links: [
+            {
+                label: 'Home',
+                href: '#',
+            },
+            {
+                label: 'level 01',
+                href: '#',
+            },
+            {
+                label: 'level 02',
+                href: '#',
+            },
+            {
+                label: 'Current Page',
+                href: '#',
+            },
+        ],
+        ariaLabel: 'breadcrumb',
     },
+    render: (args) => html `
+    <m-breadcrumb
+      appearance=${ifDefined(args.appearance)}
+      aria-label=${args.ariaLabel}
+      .links=${args.links}
+    ></m-breadcrumb>
+  `,
 };
-Inverse.args = {
-    appearance: 'inverse',
-    links: baseLinks,
-};
-Inverse.play = async ({ canvasElement }) => {
-    const breadcrumbEl = canvasElement.querySelector('m-breadcrumb');
-    const shadowRoot = breadcrumbEl?.shadowRoot;
-    if (!shadowRoot)
-        throw new Error('ShadowRoot not found');
-    const nav = shadowRoot.querySelector('nav');
-    expect(nav?.classList.contains('mc-breadcrumb--inverse')).toBe(true);
+export default meta;
+export const Default = {};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };