@mozaic-ds/web-components 0.28.1 → 1.0.0-alpha.0

package/public/components/link/Link.svelte

@@ -1,16 +1,16 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
+  // @ts-ignore Need to use internal Svelte function
   import { get_current_component } from 'svelte/internal';
-  import type { LinkIconPosition, LinkSize, LinkTheme } from './link.types';
+  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
   import { createEventForwarder } from '../../utilities/EventForward';
-  export let label: string;
   export let href: string;
   export let target: string;
-  export let theme: LinkTheme = undefined;
+  export let style: LinkStyle = undefined;
   export let disabled = false;
   export let size: LinkSize = 'm';
-  export let iconname: string | undefined = undefined;
+  export let inline = false;
   export let iconposition: LinkIconPosition | undefined = undefined;
 
   const forwardEvents = createEventForwarder(get_current_component());
@@ -19,32 +19,24 @@
   $: attributes = { ...$$restProps };
   $: delete attributes.class;
 
-  function generateIconName(iconName: string): string {
-    return `${iconName} size="1rem"`;
-  }
-
-  function generateIconClass(iconposition: string): string {
-    const classes = ['mc-link__icon'];
-
-    if (iconposition === 'left') {
-      classes.push('mc-link__icon--left');
-    }
-
-    if (iconposition === 'right') {
-      classes.push('mc-link__icon--right');
-    }
-    return classes.join(' ');
-  }
-
-  function setClasses(theme: LinkTheme, size: LinkSize): string {
+  function setClasses(
+    style: LinkStyle,
+    size: LinkSize,
+    inline: boolean,
+  ): string {
     const classes = ['mc-link'];
 
-    if (theme) {
-      classes.push(`mc-link--${theme}`);
+    if (style) {
+      classes.push(`mc-link--${style}`);
     }
     if (size) {
       classes.push(`mc-link--${size}`);
     }
+    if (inline) {
+      classes.push('mc-link--inline');
+    } else {
+      classes.push('mc-link--stand-alone');
+    }
     return classes.join(' ');
   }
 </script>
@@ -54,33 +46,26 @@
   on:click
   {href}
   {target}
-  class="{setClasses(theme, size)} {disabled ? 'is-disabled' : ''} {userClass}"
+  class="{setClasses(style, size, inline)} {disabled
+    ? 'is-disabled'
+    : ''} {userClass}"
   {...attributes}
 >
-  {#if (iconname || $$slots.icon) && iconposition === 'left'}
-    <span class={generateIconClass(iconposition)}>
-      {#if iconname}
-        {@html `<${generateIconName(iconname)} />`}
-      {:else if $$slots.icon}
-        <slot name="icon" />
-      {/if}
+  {#if iconposition === 'left'}
+    <span class="mc-link__icon">
+      <slot name="icon" />
     </span>
   {/if}
-
-  {label}
-
-  {#if (iconname || $$slots.icon) && iconposition === 'right'}
-    <span class={generateIconClass(iconposition)}>
-      {#if iconname}
-        {@html `<${generateIconName(iconname)} />`}
-      {:else if $$slots.icon}
-        <slot name="icon" />
-      {/if}
+  <span class="mc-link__label">
+    <slot />
+  </span>
+  {#if iconposition === 'right'}
+    <span class="mc-link__icon">
+      <slot name="icon" />
     </span>
   {/if}
 </a>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.links';
+  @use '@mozaic-ds/styles/components/link';
 </style>

package/public/components/link/link.types.d.ts

@@ -1,4 +1,4 @@
 export type LinkSize = 's' | 'm';
-export type LinkTheme = 'danger' | 'neutral' | 'light' | undefined;
+export type LinkStyle = 'accent' | 'inverse' | 'secondary' | 'primary' | undefined;
 export type LinkIconPosition = 'left' | 'right';
 //# sourceMappingURL=link.types.d.ts.map

package/public/components/link/link.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.types.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACjC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACnE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC"}
+{"version":3,"file":"link.types.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC;AACjC,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC"}

package/public/components/listbox/Listbox.nested.svelte

@@ -1,12 +1,11 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type { ListboxItems } from './listbox.types';
   import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   const uuid = Math.random();
 
@@ -33,7 +32,7 @@
 
   $: allSelected = selectall ?? false;
   $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];
-  $: value = value ? (determineSelectionState() as []) : [];
+  $: value = value ? determineSelectionState() : [];
   $: selectAllIndeterminate = true;
 
   function determineSelectionState(): [] {

package/public/components/listbox/Listbox.svelte

@@ -1,12 +1,11 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type { ListboxItems } from './listbox.types';
   import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let items: string;
   export let value: any;
@@ -76,7 +75,7 @@
               class="mc-listbox__input mc-checkbox__input"
               type="checkbox"
               value={item[datavalueexpr]}
-              checked={value.includes(item[datavalueexpr])}
+              checked={value && value.includes(item[datavalueexpr])}
               bind:group={value}
               on:change
             />

package/public/components/loader/Loader.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as r,b as a,f as s,s as o,c as i,e as n,J as l,d,n as c,h as m,j as h,k as f,l as k,m as u,o as p,u as x,v as _,y as g}from"../../index-c222d0b7.js";function w(e){let t,r;return{c(){t=n("span"),r=_(e[2]),m(t,"class","mc-loader__text")},m(e,s){a(e,t,s),f(t,r)},p(e,t){4&t&&g(r,e[2])},d(e){e&&u(t)}}}function b(e){let t,r,s,o,p,x,_,g,b=e[2]&&w(e),v=[{class:g=y(e[0],e[1])},e[3]],C={};for(let e=0;e<v.length;e+=1)C=i(C,v[e]);return{c(){t=n("div"),r=n("span"),s=l("svg"),o=l("circle"),_=d(),b&&b.c(),this.c=c,m(o,"class","mc-loader__path"),m(o,"cx","50%"),m(o,"cy","50%"),m(o,"r",p=z(e[0])),m(s,"class","mc-loader__icon"),m(s,"xmlns","http://www.w3.org/2000/svg"),m(s,"viewBox",x=$(e[0])),m(r,"class","mc-loader__spinner"),h(t,C)},m(e,i){a(e,t,i),f(t,r),f(r,s),f(s,o),f(t,_),b&&b.m(t,null)},p(e,[r]){1&r&&p!==(p=z(e[0]))&&m(o,"r",p),1&r&&x!==(x=$(e[0]))&&m(s,"viewBox",x),e[2]?b?b.p(e,r):(b=w(e),b.c(),b.m(t,null)):b&&(b.d(1),b=null),h(t,C=k(v,[3&r&&g!==(g=y(e[0],e[1]))&&{class:g},8&r&&e[3]]))},i:c,o:c,d(e){e&&u(t),b&&b.d()}}}function y(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}function $(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}function z(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}function v(e,t,r){const a=["size","theme","text"];let s=p(t,a),{size:o}=t,{theme:n}=t,{text:l}=t;return e.$$set=e=>{t=i(i({},t),x(e)),r(3,s=p(t,a)),"size"in e&&r(0,o=e.size),"theme"in e&&r(1,n=e.theme),"text"in e&&r(2,l=e.text)},[o,n,l,s]}class C extends e{constructor(e){super();const i=document.createElement("style");i.textContent=".mc-loader{color:#188803;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{-webkit-animation:rotate-loader 2s linear infinite;animation:rotate-loader 2s linear infinite;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;-webkit-animation:animate-dash-loader 2s ease-in-out infinite;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#ffffff}.mc-loader--light .mc-loader__path{stroke:currentColor}@-webkit-keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}@keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}",this.shadowRoot.appendChild(i),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},v,b,o,{size:0,theme:1,text:2},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["size","theme","text"]}get size(){return this.$$.ctx[0]}set size(e){this.$$set({size:e}),s()}get theme(){return this.$$.ctx[1]}set theme(e){this.$$set({theme:e}),s()}get text(){return this.$$.ctx[2]}set text(e){this.$$set({text:e}),s()}}export{C as default};
+import{c as e,S as t,i as s,f as r,s as a,a as l,p as o,e as d,D as h,b as c,d as n,E as i,t as p,g as u,h as m,y as k,m as v,n as f,q as _,F as x,G as g}from"../../index-c0bfe08f.js";import{g as w}from"../../spread-ed04f539.js";function $(e){l(e,"svelte-ud0phk",".mc-loader.svelte-ud0phk.svelte-ud0phk{color:var(--loader-color-standard, #464e63);align-items:center;display:inline-flex;flex-direction:column}.mc-loader.svelte-ud0phk .mc-loader__spinner.svelte-ud0phk{height:2rem;width:2rem}.mc-loader.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke-width:4}.mc-loader.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke:currentColor}.mc-loader__spinner.svelte-ud0phk.svelte-ud0phk:not(:only-child){margin-bottom:1rem}.mc-loader__icon.svelte-ud0phk.svelte-ud0phk{animation:svelte-ud0phk-rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path.svelte-ud0phk.svelte-ud0phk{fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;animation:svelte-ud0phk-animate-dash-loader 2s ease-in-out infinite}.mc-loader__text.svelte-ud0phk.svelte-ud0phk{font-size:1rem;color:currentcolor}.mc-loader.svelte-ud0phk:not(.mc-loader--text-visible) .mc-loader__text.svelte-ud0phk{clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-loader--s.svelte-ud0phk .mc-loader__spinner.svelte-ud0phk{height:1.5rem;width:1.5rem}.mc-loader--s.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke-width:4}.mc-loader--l.svelte-ud0phk .mc-loader__spinner.svelte-ud0phk{height:4rem;width:4rem}.mc-loader--l.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke-width:8}.mc-loader--accent.svelte-ud0phk.svelte-ud0phk{color:var(--loader-color-accent, #117f03)}.mc-loader--accent.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke:currentColor}.mc-loader--inverse.svelte-ud0phk.svelte-ud0phk{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke:currentColor}@keyframes svelte-ud0phk-rotate-loader{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes svelte-ud0phk-animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}")}function y(e){let t,s;return{c(){t=d("span"),s=x(e[2]),n(t,"class","mc-loader__text svelte-ud0phk")},m(e,r){u(e,t,r),m(t,s)},p(e,t){4&t&&g(s,e[2])},d(e){e&&v(t)}}}function z(e){let t,s,r,a,l,f,_,x,g=e[2]&&y(e),$=[{class:x=b(e[0],e[1])},e[3]],z={};for(let e=0;e<$.length;e+=1)z=o(z,$[e]);return{c(){t=d("div"),s=d("span"),r=h("svg"),a=h("circle"),_=c(),g&&g.c(),n(a,"class","mc-loader__path svelte-ud0phk"),n(a,"cx","50%"),n(a,"cy","50%"),n(a,"r",l=C(e[0])),n(r,"class","mc-loader__icon svelte-ud0phk"),n(r,"xmlns","http://www.w3.org/2000/svg"),n(r,"viewBox",f=j(e[0])),n(s,"class","mc-loader__spinner svelte-ud0phk"),i(t,z),p(t,"svelte-ud0phk",!0)},m(e,l){u(e,t,l),m(t,s),m(s,r),m(r,a),m(t,_),g&&g.m(t,null)},p(e,[s]){1&s&&l!==(l=C(e[0]))&&n(a,"r",l),1&s&&f!==(f=j(e[0]))&&n(r,"viewBox",f),e[2]?g?g.p(e,s):(g=y(e),g.c(),g.m(t,null)):g&&(g.d(1),g=null),i(t,z=w($,[3&s&&x!==(x=b(e[0],e[1]))&&{class:x},8&s&&e[3]])),p(t,"svelte-ud0phk",!0)},i:k,o:k,d(e){e&&v(t),g&&g.d()}}}function b(e,t){const s=["mc-loader"];return e&&s.push(`mc-loader--${e}`),t&&s.push(`mc-loader--${t}`),s.join(" ")}function j(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}function C(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}function B(e,t,s){const r=["size","theme","text"];let a=f(t,r),{size:l}=t,{theme:d}=t,{text:h}=t;return e.$$set=e=>{t=o(o({},t),_(e)),s(3,a=f(t,r)),"size"in e&&s(0,l=e.size),"theme"in e&&s(1,d=e.theme),"text"in e&&s(2,h=e.text)},[l,d,h,a]}class q extends t{constructor(e){super(),s(this,e,B,z,a,{size:0,theme:1,text:2},$)}get size(){return this.$$.ctx[0]}set size(e){this.$$set({size:e}),r()}get theme(){return this.$$.ctx[1]}set theme(e){this.$$set({theme:e}),r()}get text(){return this.$$.ctx[2]}set text(e){this.$$set({text:e}),r()}}e(q,{size:{},theme:{},text:{}},[],[],!0);export{q as default};
 //# sourceMappingURL=Loader.js.map

package/public/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  export let size: LoaderSize;\n  export let theme: LoaderTheme;\n  export let text: string;\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  }\n\n  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  }\n</script>\n\n<div class={setClasses(size, theme)} {...$$restProps}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.loader';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block","setClasses","attr","circle","circle_r_value","setCircleRadius","svg","svg_viewBox_value","setViewBox","div","append","dirty","class","div_class_value","size","theme","classes","push","join","viewBox","circleRadius","$$props","text"],"mappings":"6NA4EOA,EAAI,2CADPC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAI,wDAFJA,EAAI,IAAAK,EAAAL,eAhBCM,EAAWN,EAAI,GAAEA,EAAK,KAAOA,EAAW,mMAWzCO,EAAAC,EAAA,IAAAC,EAAAC,EAAgBV,EAAI,8EANhBO,EAAAI,EAAA,UAAAC,EAAAC,EAAWb,EAAI,sDAL9BC,EAqBKC,EAAAY,EAAAV,GApBHW,EAaMD,EAAAX,GAZJY,EAWKZ,EAAAQ,GANHI,EAKCJ,EAAAH,mCADI,EAAAQ,GAAAP,KAAAA,EAAAC,EAAgBV,EAAI,iBANhB,EAAAgB,GAAAJ,KAAAA,EAAAC,EAAWb,EAAI,uBAWvBA,EAAI,mFAhBCM,EAAWN,EAAI,GAAEA,EAAK,MAAA,CAAAiB,MAAAC,QAAOlB,EAAW,gDAjDzCM,EAAWa,EAAkBC,GAC9B,MAAAC,GAAW,oBAEbF,GACFE,EAAQC,KAAI,cAAeH,KAGzBC,GACFC,EAAQC,KAAI,cAAeF,KAGtBC,EAAQE,KAAK,KAGb,SAAAV,EAAWM,OACdK,SAEIL,OACD,IACHK,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,EAGA,SAAAd,EAAgBS,OACnBM,SAEIN,OACD,IACHM,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,uEAjDEN,GAAgBO,SAChBN,GAAkBM,QAClBC,GAAYD"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  export let size: LoaderSize;\n  export let theme: LoaderTheme;\n  export let text: string;\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  }\n\n  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  }\n</script>\n\n<div class={setClasses(size, theme)} {...$$restProps}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block","setClasses","attr","circle","circle_r_value","setCircleRadius","svg","svg_viewBox_value","setViewBox","div","append","dirty","class","div_class_value","size","theme","classes","push","join","viewBox","circleRadius","$$props","text"],"mappings":"ozEA4EOA,EAAI,yDADPC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAI,wDAFJA,EAAI,IAAAK,EAAAL,eAhBCM,EAAWN,EAAI,GAAEA,EAAK,KAAOA,EAAW,wMAWzCO,EAAAC,EAAA,IAAAC,EAAAC,EAAgBV,EAAI,4FANhBO,EAAAI,EAAA,UAAAC,EAAAC,EAAWb,EAAI,4FAL9BC,EAqBKC,EAAAY,EAAAV,GApBHW,EAaMD,EAAAX,GAZJY,EAWKZ,EAAAQ,GANHI,EAKCJ,EAAAH,mCADI,EAAAQ,GAAAP,KAAAA,EAAAC,EAAgBV,EAAI,iBANhB,EAAAgB,GAAAJ,KAAAA,EAAAC,EAAWb,EAAI,uBAWvBA,EAAI,mFAhBCM,EAAWN,EAAI,GAAEA,EAAK,MAAA,CAAAiB,MAAAC,QAAOlB,EAAW,wEAjDzCM,EAAWa,EAAkBC,GAC9B,MAAAC,GAAW,oBAEbF,GACFE,EAAQC,KAAI,cAAeH,KAGzBC,GACFC,EAAQC,KAAI,cAAeF,KAGtBC,EAAQE,KAAK,KAGb,SAAAV,EAAWM,OACdK,SAEIL,OACD,IACHK,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,EAGA,SAAAd,EAAgBS,OACnBM,SAEIN,OACD,IACHM,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,uEAjDEN,GAAgBO,SAChBN,GAAkBM,QAClBC,GAAYD"}

package/public/components/loader/Loader.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type { LoaderSize, LoaderTheme } from './loader.types';
@@ -80,6 +80,5 @@
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.loader';
+  @use '@mozaic-ds/styles/components/loader';
 </style>

package/public/components/loader/loader.types.d.ts

@@ -1,3 +1,3 @@
 export type LoaderSize = 's' | 'm' | 'l' | undefined;
-export type LoaderTheme = 'dark' | 'light' | 'primary' | undefined;
+export type LoaderTheme = 'inverse' | 'accent' | 'standard' | undefined;
 //# sourceMappingURL=loader.types.d.ts.map

package/public/components/loader/loader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.types.d.ts","sourceRoot":"","sources":["../../../src/components/loader/loader.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC"}
+{"version":3,"file":"loader.types.d.ts","sourceRoot":"","sources":["../../../src/components/loader/loader.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC"}

package/public/components/menu/Menu.svelte

@@ -1,10 +1,9 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   import type { menuType } from './menu.types';
   export let items: string;

package/public/components/modal/Modal.svelte

@@ -1,11 +1,9 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  import {
-    afterUpdate,
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { afterUpdate, createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   export let title: string;
   export let modaltitle: string;

package/public/components/notification/Notification.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type {
@@ -7,10 +7,9 @@
     NotificationSize,
   } from './notification.types';
   import { EventHandler } from '../../utilities/EventHandler';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let title: string;
   export let titletag: NotificationTitleTag = 'h3';

package/public/components/optionbutton/OptionButton.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag="" />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
@@ -10,8 +10,6 @@
   export let checked: boolean;
   export let options: string;
   export let justifycontent = 'space-between';
-  export let column = false;
-  export let gap = '1rem';
   $: parsedOptions = options ? (JSON.parse(options) as OptionItems[]) : [];
   $: userClass = $$props.class;
   $: attributes = { ...$$restProps };
@@ -31,9 +29,8 @@
 
 <div
   class="mc-option-group {userClass}"
-  class:mc-option-group--column={column}
   {...attributes}
-  style={`justify-content:${justifycontent}; gap:${gap}`}
+  style={`justify-content:${justifycontent}`}
 >
   {#each parsedOptions as option}
     <div
@@ -46,8 +43,7 @@
         type="radio"
         class="mc-option-button__input"
         name={option.name}
-        checked={option.checked}
-        value={option.id}
+        {checked}
         disabled={option.disabled}
         on:change={() => handleChange(option)}
       />
@@ -64,9 +60,5 @@
 
   .mc-option-group {
     display: flex;
-
-    &--column {
-      flex-direction: column;
-    }
   }
 </style>

package/public/components/overlay/Overlay.js

@@ -1,2 +1,2 @@
-import{S as i,i as s,a as t,b as e,f as a,s as o,c as n,e as l,n as r,j as c,t as b,k as p,l as v,m as y,o as m,u as d}from"../../index-c222d0b7.js";function u(i){let s,t,a=[{class:"mc-overlay"},i[1]],o={};for(let i=0;i<a.length;i+=1)o=n(o,a[i]);return{c(){s=l("div"),t=l("slot"),this.c=r,c(s,o),b(s,"is-visible",i[0])},m(i,a){e(i,s,a),p(s,t)},p(i,[t]){c(s,o=v(a,[{class:"mc-overlay"},2&t&&i[1]])),b(s,"is-visible",i[0])},i:r,o:r,d(i){i&&y(s)}}}function x(i,s,t){const e=["visible"];let a=m(s,e),{visible:o=!1}=s;return i.$$set=i=>{s=n(n({},s),d(i)),t(1,a=m(s,e)),"visible"in i&&t(0,o=i.visible)},[o,a]}class f extends i{constructor(i){super();const n=document.createElement("style");n.textContent=".mc-overlay{background-color:rgba(25, 25, 25, 0.7);-webkit-filter:blur(1px);filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;-webkit-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-overlay.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:rgba(25, 25, 25, 0.7);inset:0;opacity:0;position:fixed;pointer-events:none;-webkit-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}",this.shadowRoot.appendChild(n),s(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},x,u,o,{visible:0},null),i&&(i.target&&e(i.target,this,i.anchor),i.props&&(this.$set(i.props),a()))}static get observedAttributes(){return["visible"]}get visible(){return this.$$.ctx[0]}set visible(i){this.$$set({visible:i}),a()}}export{f as default};
+import{c as s,S as e,i,f as t,s as l,a,z as o,p as b,e as p,d as n,E as x,t as d,g as u,h as v,A as r,B as c,C as y,j as m,k as h,m as j,n as f,q as z}from"../../index-c0bfe08f.js";import{g as $}from"../../spread-ed04f539.js";function g(s){a(s,"svelte-tbzuju",".shadow--top-xs.svelte-tbzuju{box-shadow:0px -3px 5px -2px}.shadow--top-s.svelte-tbzuju{box-shadow:0px -5px 10px -2px}.shadow--top-m.svelte-tbzuju{box-shadow:0px -10px 20px -4px}.shadow--top-l.svelte-tbzuju{box-shadow:0px -20px 40px -8px}.shadow--bottom-xs.svelte-tbzuju{box-shadow:0px 3px 5px -2px}.shadow--bottom-s.svelte-tbzuju{box-shadow:0px 5px 10px -2px}.shadow--bottom-m.svelte-tbzuju{box-shadow:0px 10px 20px -4px}.shadow--bottom-l.svelte-tbzuju{box-shadow:0px 20px 40px -8px}.mc-overlay.svelte-tbzuju{filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-overlay.is-visible.svelte-tbzuju{opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}.mc-overlay-loader.svelte-tbzuju{inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;align-items:center;display:flex;justify-content:center}.mc-overlay-loader.is-visible.svelte-tbzuju{opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}")}function w(s){let e,i,t;const l=s[4].default,a=o(l,s,s[3],null);let f=[{class:"mc-overlay"},s[2]],z={};for(let s=0;s<f.length;s+=1)z=b(z,f[s]);return{c(){e=p("div"),i=p("div"),a&&a.c(),n(i,"role","dialog"),n(i,"tabindex","-1"),n(i,"aria-labelledby",s[1]),x(e,z),d(e,"is-visible",s[0]),d(e,"svelte-tbzuju",!0)},m(s,l){u(s,e,l),v(e,i),a&&a.m(i,null),t=!0},p(s,[o]){a&&a.p&&(!t||8&o)&&r(a,l,s,s[3],t?y(l,s[3],o,null):c(s[3]),null),(!t||2&o)&&n(i,"aria-labelledby",s[1]),x(e,z=$(f,[{class:"mc-overlay"},4&o&&s[2]])),d(e,"is-visible",s[0]),d(e,"svelte-tbzuju",!0)},i(s){t||(m(a,s),t=!0)},o(s){h(a,s),t=!1},d(s){s&&j(e),a&&a.d(s)}}}function B(s,e,i){const t=["isvisible","dialoglabel"];let l=f(e,t),{$$slots:a={},$$scope:o}=e,{isvisible:p=!1}=e,{dialoglabel:n}=e;return s.$$set=s=>{e=b(b({},e),z(s)),i(2,l=f(e,t)),"isvisible"in s&&i(0,p=s.isvisible),"dialoglabel"in s&&i(1,n=s.dialoglabel),"$$scope"in s&&i(3,o=s.$$scope)},[p,n,l,o,a]}class k extends e{constructor(s){super(),i(this,s,B,w,l,{isvisible:0,dialoglabel:1},g)}get isvisible(){return this.$$.ctx[0]}set isvisible(s){this.$$set({isvisible:s}),t()}get dialoglabel(){return this.$$.ctx[1]}set dialoglabel(s){this.$$set({dialoglabel:s}),t()}}s(k,{isvisible:{type:"Boolean"},dialoglabel:{}},["default"],[],!0);export{k as default};
 //# sourceMappingURL=Overlay.js.map

package/public/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let visible = false;\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={visible} {...$$restProps}>\n  <!-- @slot Use this slot to insert a centered content inside the overlay -->\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.overlay';\n</style>\n"],"names":["ctx","insert","target","div","anchor","append","slot","visible","$$props"],"mappings":"mMAMuDA,EAAW,oHAAxBA,EAAO,YAAjDC,EAGKC,EAAAC,EAAAC,GADHC,EAAOF,EAAAG,kDAF8CN,EAAW,uBAAxBA,EAAO,gFAHpCO,QAAAA,GAAU,GAAKC"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  export let isvisible = false;\n  export let dialoglabel: string;\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible} {...$$restProps}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["ctx","insert","target","div1","anchor","append","div0","isvisible","$$props","dialoglabel"],"mappings":"08CAOyDA,EAAW,2JAChBA,EAAW,4BADrBA,EAAS,oCAAnDC,EAKKC,EAAAC,EAAAC,GAJHC,EAGKF,EAAAG,mIAH6CN,EAAW,yCADNA,EAAW,uBAA1BA,EAAS,8LAJtCO,UAAAA,GAAY,GAAKC,eACjBC,GAAmBD"}

package/public/components/overlay/Overlay.svelte

@@ -1,15 +1,17 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  export let visible = false;
+  export let isvisible = false;
+  export let dialoglabel: string;
 </script>
 
-<div class="mc-overlay" class:is-visible={visible} {...$$restProps}>
-  <!-- @slot Use this slot to insert a centered content inside the overlay -->
-  <slot />
+<div class="mc-overlay" class:is-visible={isvisible} {...$$restProps}>
+  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
+    <!-- @slot Use this slot to insert a centered content inside the overlay -->
+    <slot />
+  </div>
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.overlay';
+  @use '@mozaic-ds/styles/components/overlay';
 </style>

package/public/components/overlay/OverlayLoader.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as i,b as r,f as s,s as a,e as o,d as n,n as l,h as c,t as d,k as m,m as f,v as h,y as b}from"../../index-c222d0b7.js";function p(e){let t,i;return{c(){t=o("span"),i=h(e[1]),c(t,"class","mc-loader__text")},m(e,s){r(e,t,s),m(t,i)},p(e,t){2&t&&b(i,e[1])},d(e){e&&f(t)}}}function k(e){let t,i,s,a,h=e[1]&&p(e);return{c(){t=o("div"),i=o("div"),s=o("span"),s.innerHTML='<svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle class="mc-loader__path" cx="50%" cy="50%" r="19"></circle></svg>',a=n(),h&&h.c(),this.c=l,c(s,"class","mc-loader__spinner"),c(i,"class","mc-loader mc-loader--l mc-loader--light"),c(t,"class","mc-overlay-loader"),d(t,"is-visible",e[0])},m(e,o){r(e,t,o),m(t,i),m(i,s),m(i,a),h&&h.m(i,null)},p(e,[r]){e[1]?h?h.p(e,r):(h=p(e),h.c(),h.m(i,null)):h&&(h.d(1),h=null),1&r&&d(t,"is-visible",e[0])},i:l,o:l,d(e){e&&f(t),h&&h.d()}}}function x(e,t,i){let{visible:r=!1}=t,{text:s}=t;return e.$$set=e=>{"visible"in e&&i(0,r=e.visible),"text"in e&&i(1,s=e.text)},[r,s]}class g extends e{constructor(e){super();const o=document.createElement("style");o.textContent=".mc-loader{color:#188803;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{-webkit-animation:rotate-loader 2s linear infinite;animation:rotate-loader 2s linear infinite;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;-webkit-animation:animate-dash-loader 2s ease-in-out infinite;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--light{color:#ffffff}.mc-loader--light .mc-loader__path{stroke:currentColor}@-webkit-keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}@keyframes animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.mc-overlay-loader{background-color:rgba(25, 25, 25, 0.7);inset:0;opacity:0;position:fixed;pointer-events:none;-webkit-transition:opacity 0.4s ease, visibility 0ms 0.4s;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;-webkit-transition:opacity 0.4s ease, visibility 0ms;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}",this.shadowRoot.appendChild(o),t(this,{target:this.shadowRoot,props:i(this.attributes),customElement:!0},x,k,a,{visible:0,text:1},null),e&&(e.target&&r(e.target,this,e.anchor),e.props&&(this.$set(e.props),s()))}static get observedAttributes(){return["visible","text"]}get visible(){return this.$$.ctx[0]}set visible(e){this.$$set({visible:e}),s()}get text(){return this.$$.ctx[1]}set text(e){this.$$set({text:e}),s()}}export{g as default};
+import{c as e,S as s,i as t,f as i,s as a,a as l,e as o,r,d as n,t as d,g as v,h as b,u as f,j as c,k as m,m as x,v as $}from"../../index-c0bfe08f.js";import p from"../loader/Loader.js";import"../../spread-ed04f539.js";function y(e){l(e,"svelte-ne5o65","@keyframes svelte-ne5o65-rotate-loader{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes svelte-ne5o65-animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.mc-overlay-loader.svelte-ne5o65{inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;align-items:center;display:flex;justify-content:center}.mc-overlay-loader.is-visible.svelte-ne5o65{opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}")}function g(e){let s,t,i,a;return i=new p({props:{size:"l",theme:"inverse",text:e[1]}}),{c(){s=o("div"),t=o("div"),r(i.$$.fragment),n(t,"role","dialog"),n(t,"tabindex","-1"),n(t,"aria-labelledby",e[2]),n(s,"class","mc-overlay-loader svelte-ne5o65"),d(s,"is-visible",e[0])},m(e,l){v(e,s,l),b(s,t),f(i,t,null),a=!0},p(e,[l]){const o={};2&l&&(o.text=e[1]),i.$set(o),(!a||4&l)&&n(t,"aria-labelledby",e[2]),(!a||1&l)&&d(s,"is-visible",e[0])},i(e){a||(c(i.$$.fragment,e),a=!0)},o(e){m(i.$$.fragment,e),a=!1},d(e){e&&x(s),$(i)}}}function h(e,s,t){let{isvisible:i=!1}=s,{text:a}=s,{dialoglabel:l}=s;return e.$$set=e=>{"isvisible"in e&&t(0,i=e.isvisible),"text"in e&&t(1,a=e.text),"dialoglabel"in e&&t(2,l=e.dialoglabel)},[i,a,l]}class u extends s{constructor(e){super(),t(this,e,h,g,a,{isvisible:0,text:1,dialoglabel:2},y)}get isvisible(){return this.$$.ctx[0]}set isvisible(e){this.$$set({isvisible:e}),i()}get text(){return this.$$.ctx[1]}set text(e){this.$$set({text:e}),i()}get dialoglabel(){return this.$$.ctx[2]}set dialoglabel(e){this.$$set({dialoglabel:e}),i()}}e(u,{isvisible:{type:"Boolean"},text:{},dialoglabel:{}},[],[],!0);export{u as default};
 //# sourceMappingURL=OverlayLoader.js.map

package/public/components/overlay/OverlayLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let visible = false;\n  export let text: string;\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={visible}>\n  <div class=\"mc-loader mc-loader--l mc-loader--light\">\n    <span class=\"mc-loader__spinner\">\n      <svg\n        class=\"mc-loader__icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 64 64\"\n      >\n        <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r=\"19\" />\n      </svg>\n    </span>\n\n    {#if text}\n      <span class=\"mc-loader__text\">\n        {text}\n      </span>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.loader';\n  @import '@mozaic-ds/styles/components/c.overlay';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block","div1","append","div0","visible","$$props","text"],"mappings":"+LAqBSA,EAAI,2CADPC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAI,gDAFJA,EAAI,IAAAK,EAAAL,8XAZoCA,EAAO,YAAxDC,EAkBKC,EAAAI,EAAAF,GAjBHG,EAgBKD,EAAAE,GAfHD,EAQMC,EAAAL,mCAEDH,EAAI,kFAZoCA,EAAO,uDAJ3C,IAAAS,QAAAA,GAAU,GAAKC,QACfC,GAAYD"}
+{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  export let isvisible = false;\n  export let text: string;\n  export let dialoglabel: string;\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <Loader size=\"l\" theme=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["ctx","insert","target","div1","anchor","append","div0","isvisible","$$props","text","dialoglabel"],"mappings":"wkCAUoDA,EAAW,oEADdA,EAAS,YAA1DC,EAIKC,EAAAC,EAAAC,GAHHC,EAEKF,EAAAG,uGAF6CN,EAAW,gCADdA,EAAS,4GAL7C,IAAAO,UAAAA,GAAY,GAAKC,QACjBC,GAAYD,eACZE,GAAmBF"}

package/public/components/overlayloader/OverlayLoader.svelte

@@ -1,32 +1,19 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  export let visible = false;
+  import Loader from '../loader/Loader.svelte';
+  export let isvisible = false;
   export let text: string;
+  export let dialoglabel: string;
 </script>
 
-<div class="mc-overlay-loader" class:is-visible={visible}>
-  <div class="mc-loader mc-loader--l mc-loader--light">
-    <span class="mc-loader__spinner">
-      <svg
-        class="mc-loader__icon"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 64 64"
-      >
-        <circle class="mc-loader__path" cx="50%" cy="50%" r="19" />
-      </svg>
-    </span>
-
-    {#if text}
-      <span class="mc-loader__text">
-        {text}
-      </span>
-    {/if}
+<div class="mc-overlay-loader" class:is-visible={isvisible}>
+  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
+    <Loader size="l" theme="inverse" {text} />
   </div>
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/all-settings';
-  @import '@mozaic-ds/styles/components/c.loader';
-  @import '@mozaic-ds/styles/components/c.overlay';
+  @use '@mozaic-ds/styles/components/loader';
+  @use '@mozaic-ds/styles/components/overlay';
 </style>

package/public/components/pagination/Pagination.svelte

@@ -1,11 +1,17 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: '',
+    props: {
+      total: { type: 'Number', attribute: 'total' },
+      value: { type: 'Number', attribute: 'value' },
+    },
+  }}
+/>
 
 <script lang="ts">
-  import {
-    onMount,
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   import { EventHandler } from '../../utilities/EventHandler';
   export let total = 1;
@@ -21,16 +27,6 @@
     createEventDispatcher(),
   );
 
-  let component: HTMLElement;
-  onMount(() => {
-    const select = component?.querySelector('.mc-select') as HTMLSelectElement;
-    const options = select.options;
-    const selectedOption = options.namedItem(value.toString());
-    if (selectedOption) {
-      selectedOption.selected = true;
-    }
-  });
-
   function dispatchPreviousPageEvent(): void {
     value--;
     eventHandler.dispatch('on-previous-page', value);
@@ -51,16 +47,15 @@
   role="navigation"
   aria-label="pagination"
   {...$$restProps}
-  bind:this={component}
 >
   {#if hrefprev}
     <a
       class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+      class:is-disabled={Number(value) === 1 || Number(total) === 1}
       href={hrefprev}
       aria-label="Previous page"
-      disabled={Number(value) === 1 || Number(total) === 1}
     >
-      <navigation-arrow-arrow--left-24px
+      <ui-chevron-left-24
         size="100%"
         class="mc-pagination__button-icon mc-button__icon"
       />
@@ -72,7 +67,7 @@
       disabled={Number(value) === 1 || Number(total) === 1}
       on:click|preventDefault={dispatchPreviousPageEvent}
     >
-      <navigation-arrow-arrow--left-24px
+      <ui-chevron-left-24
         size="100%"
         class="mc-pagination__button-icon mc-button__icon"
       />
@@ -88,10 +83,7 @@
       >
         {#each { length: total } as _, number}
           {@const optionValue = number + 1}
-          <option
-            name={String(optionValue)}
-            selected={optionValue == value}
-            value={optionValue}
+          <option value={optionValue}
             >{prefixlabel} {optionValue} {pagelabel} {total}</option
           >
         {/each}
@@ -101,11 +93,11 @@
   {#if hrefnext}
     <a
       class="mc-pagination__button mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l"
+      class:is-disabled={Number(value) === Number(total) || Number(total) === 1}
       href={hrefnext}
       aria-label="Next Page"
-      disabled={Number(value) === Number(total) || Number(total) === 1}
     >
-      <navigation-arrow-arrow--right-24px
+      <ui-chevron-right-24
         size="100%"
         class="mc-pagination__button-icon mc-button__icon"
       />
@@ -117,7 +109,7 @@
       disabled={Number(value) === Number(total) || Number(total) === 1}
       on:click|preventDefault={dispatchNextPageEvent}
     >
-      <navigation-arrow-arrow--right-24px
+      <ui-chevron-right-24
         size="100%"
         class="mc-pagination__button-icon mc-button__icon"
       />

package/public/components/passwordinput/PasswordInput.svelte

@@ -1,6 +1,7 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
+  // @ts-ignore Need to use internal Svelte function
   import { get_current_component } from 'svelte/internal';
   import { createEventForwarder } from '../../utilities/EventForward';
   export let id: string;