@mozaic-ds/web-components 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/link/Link.svelte

@@ -0,0 +1,132 @@
+<svelte:options customElement="m-link" />
+
+<script lang="ts">
+  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
+  export let href: string;
+  export let target: string;
+  export let style: LinkStyle = undefined;
+  export let disabled = false;
+  export let size: LinkSize = 'm';
+  export let inline = false;
+  export let iconposition: LinkIconPosition | undefined = undefined;
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  function setClasses(
+    style: LinkStyle,
+    size: LinkSize,
+    inline: boolean,
+  ): string {
+    const classes = ['mc-link'];
+
+    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>
+
+<a
+  on:click
+  {href}
+  {target}
+  class="{setClasses(style, size, inline)} {disabled
+    ? 'is-disabled'
+    : ''} {userClass}"
+  {...attributes}
+>
+  {#if iconposition === 'left'}
+    <span class="mc-link__icon">
+      <slot name="icon" />
+    </span>
+  {/if}
+  <span class="mc-link__label">
+    <slot />
+  </span>
+  {#if iconposition === 'right'}
+    <span class="mc-link__icon">
+      <slot name="icon" />
+    </span>
+  {/if}
+</a>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-link {
+  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);
+}
+.mc-link__label {
+  font-size: 0.875rem;
+  line-height: 1.3;
+}
+.mc-link__icon {
+  display: block;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  fill: currentcolor;
+}
+.mc-link:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label {
+  text-decoration: underline;
+}
+.mc-link: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 {
+  min-height: 2rem;
+}
+.mc-link--m .mc-link__label {
+  font-size: 1rem;
+}
+.mc-link--secondary {
+  color: var(--link-color-text-secondary, #666666);
+}
+.mc-link--accent {
+  color: var(--link-color-text-accent, #117f03);
+}
+.mc-link--inverse {
+  --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 {
+  min-height: 2rem;
+  font-weight: 600;
+}
+.mc-link--stand-alone .mc-link__label {
+  border-bottom: 1px solid currentColor;
+}
+.mc-link--stand-alone:hover .mc-link__label {
+  border-color: transparent;
+}
+.mc-link--inline {
+  font-weight: inherit;
+  text-decoration: underline;
+}
+.mc-link--inline .mc-link__label {
+  font-size: inherit;
+  line-height: 1;
+}
+.mc-link--inline:hover {
+  text-decoration: none;
+}</style>

package/dist/link/Link.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
+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 Link: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    href: string;
+    target: string;
+    style?: LinkStyle;
+    disabled?: boolean | undefined;
+    size?: LinkSize | undefined;
+    inline?: boolean | undefined;
+    iconposition?: LinkIconPosition | undefined;
+}, {
+    icon: {};
+    default: {};
+}>, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}, {}, string>;
+type Link = InstanceType<typeof Link>;
+export default Link;
+//# sourceMappingURL=Link.svelte.d.ts.map

package/dist/link/Link.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA8D1E,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,IAAI;;UAf6I,MAAM;YAAU,MAAM;;;WAAwD,QAAQ;;;;;;;;;;;;;cAezH,CAAC;AACnG,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}

package/dist/link/link.types.d.ts

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

package/dist/link/link.types.d.ts.map

@@ -0,0 +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,GACjB,QAAQ,GACR,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC"}

package/dist/link/link.types.js

@@ -0,0 +1 @@
+export {};

package/dist/loader/Loader.js

@@ -0,0 +1,29 @@
+import{c as B,p as j,a as L,b as d,t as w,s as R,e as n,f as _,k as D,B as E,g as f,h as S,i as c,r as i,j as V}from"../custom-element.js";import{i as q}from"../if.js";import{s as v}from"../attributes.js";var A=w('<span class="mc-loader__text svelte-ud0phk"> </span>'),F=w('<div><span class="mc-loader__spinner svelte-ud0phk"><svg class="mc-loader__icon svelte-ud0phk" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-ud0phk" cx="50%" cy="50%"></circle></svg></span> <!></div>');const G={hash:"svelte-ud0phk",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-loader.svelte-ud0phk {color:var(--loader-color-standard, #464e63);align-items:center;display:inline-flex;flex-direction:column;}.mc-loader.svelte-ud0phk .mc-loader__spinner:where(.svelte-ud0phk) {height:2rem;width:2rem;}.mc-loader.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke-width:4;}.mc-loader.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke:currentColor;}.mc-loader__spinner.svelte-ud0phk:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-ud0phk {
+  animation: svelte-ud0phk-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.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 {font-size:1rem;color:currentcolor;}.mc-loader.svelte-ud0phk:not(.mc-loader--text-visible) .mc-loader__text:where(.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:where(.svelte-ud0phk) {height:1.5rem;width:1.5rem;}.mc-loader--s.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke-width:4;}.mc-loader--l.svelte-ud0phk .mc-loader__spinner:where(.svelte-ud0phk) {height:4rem;width:4rem;}.mc-loader--l.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke-width:8;}.mc-loader--accent.svelte-ud0phk {color:var(--loader-color-accent, #117f03);}.mc-loader--accent.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke:currentColor;}.mc-loader--inverse.svelte-ud0phk {color:var(--loader-color-inverse, #ffffff);}.mc-loader--inverse.svelte-ud0phk .mc-loader__path:where(.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 H(k,s){j(s,!0),L(k,G);let a=d(s,"size",7),h=d(s,"theme",7),o=d(s,"text",7),p=d(s,"style",7);function x(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}function g(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 y(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}var l=F(),m=n(l),u=n(m),b=n(u);i(u),i(m);var z=R(m,2);{var C=e=>{var t=A(),r=n(t,!0);i(t),_(()=>V(r,o())),f(e,t)};q(z,e=>{o()&&e(C)})}return i(l),_((e,t,r)=>{D(l,1,E(e),"svelte-ud0phk"),v(l,"style",p()),v(u,"viewBox",t),v(b,"r",r)},[()=>x(a(),h()),()=>g(a()),()=>y(a())]),f(k,l),S({get size(){return a()},set size(e){a(e),c()},get theme(){return h()},set theme(e){h(e),c()},get text(){return o()},set text(e){o(e),c()},get style(){return p()},set style(e){p(e),c()}})}customElements.define("m-loader",B(H,{size:{},theme:{},text:{},style:{}},[],[],!0));export{H as L};
+//# sourceMappingURL=Loader.js.map

package/dist/loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":["../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  interface Props {\n    size: LoaderSize;\n    theme: LoaderTheme;\n    text: string;\n    style: string;\n  }\n\n  let { size, theme, text, style }: Props = $props();\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)} {style}>\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":["size","$.prop","$$props","theme","text","style","setClasses","classes","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;uCAYQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAIH,EAAAC,EAAA,OAAA,CAAA,EAAEG,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAErB,SAAAI,EAAWN,EAAkBG,EAAoB,CAClD,MAAAI,GAAW,WAAW,EAExB,OAAAP,GACFO,EAAQ,KAAI,cAAeP,CAAI,EAAA,EAG7BG,GACFI,EAAQ,KAAI,cAAeJ,CAAK,EAAA,EAG3BI,EAAQ,KAAK,GAAG,CACzB,UAESC,EAAWR,EAAkB,KAChCS,SAEIT,EAAI,KACL,IACHS,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,UAESC,EAAgBV,EAAkB,KACrCW,SAEIX,EAAI,KACL,IACHW,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,qGAqBKP,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAQ,EAAAC,CAAA,2GAhBCP,EAAWN,IAAMG,GAAK,EAKnB,IAAAK,EAAWR,GAAI,EAMnB,IAAAU,EAAgBV,EAAI,CAAA"}

package/dist/loader/Loader.svelte

@@ -0,0 +1,182 @@
+<svelte:options customElement={{ tag: 'm-loader' }} />
+
+<script lang="ts">
+  import type { LoaderSize, LoaderTheme } from './loader.types';
+
+  interface Props {
+    size: LoaderSize;
+    theme: LoaderTheme;
+    text: string;
+    style: string;
+  }
+
+  let { size, theme, text, style }: Props = $props();
+
+  function setClasses(size: LoaderSize, theme: LoaderTheme) {
+    const classes = ['mc-loader'];
+
+    if (size) {
+      classes.push(`mc-loader--${size}`);
+    }
+
+    if (theme) {
+      classes.push(`mc-loader--${theme}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  function setViewBox(size: LoaderSize) {
+    let viewBox: string;
+
+    switch (size) {
+      case 's':
+        viewBox = '0 0 24 24';
+        break;
+      case 'l':
+        viewBox = '0 0 64 64';
+        break;
+      default:
+        viewBox = '0 0 32 32';
+    }
+
+    return viewBox;
+  }
+
+  function setCircleRadius(size: LoaderSize) {
+    let circleRadius: number;
+
+    switch (size) {
+      case 's':
+        circleRadius = 6;
+        break;
+      case 'l':
+        circleRadius = 19;
+        break;
+      default:
+        circleRadius = 9;
+    }
+
+    return circleRadius;
+  }
+</script>
+
+<div class={setClasses(size, theme)} {style}>
+  <span class="mc-loader__spinner">
+    <svg
+      class="mc-loader__icon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={setViewBox(size)}
+    >
+      <circle
+        class="mc-loader__path"
+        cx="50%"
+        cy="50%"
+        r={setCircleRadius(size)}
+      />
+    </svg>
+  </span>
+
+  {#if text}
+    <span class="mc-loader__text">
+      {text}
+    </span>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-loader {
+  color: var(--loader-color-standard, #464e63);
+  align-items: center;
+  display: inline-flex;
+  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 {
+  animation: rotate-loader 2s linear infinite;
+  transform-origin: center;
+}
+.mc-loader__path {
+  fill: none;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  animation: animate-dash-loader 2s ease-in-out infinite;
+}
+.mc-loader__text {
+  font-size: 1rem;
+  color: currentcolor;
+}
+.mc-loader:not(.mc-loader--text-visible) .mc-loader__text {
+  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 .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--accent {
+  color: var(--loader-color-accent, #117f03);
+}
+.mc-loader--accent .mc-loader__path {
+  stroke: currentColor;
+}
+.mc-loader--inverse {
+  color: var(--loader-color-inverse, #ffffff);
+}
+.mc-loader--inverse .mc-loader__path {
+  stroke: currentColor;
+}
+
+@keyframes rotate-loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@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;
+  }
+}</style>

package/dist/loader/Loader.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { LoaderSize, LoaderTheme } from './loader.types';
+interface Props {
+    size: LoaderSize;
+    theme: LoaderTheme;
+    text: string;
+    style: string;
+}
+declare const Loader: import("svelte").Component<Props, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;
+//# sourceMappingURL=Loader.svelte.d.ts.map

package/dist/loader/Loader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/loader/Loader.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG5D,UAAU,KAAK;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AA4EH,QAAA,MAAM,MAAM,2CAAsC,CAAC;AACnD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/loader/loader.types.d.ts

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

package/dist/loader/loader.types.d.ts.map

@@ -0,0 +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,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC"}

package/dist/loader/loader.types.js

@@ -0,0 +1 @@
+export {};

package/dist/overlay/Overlay.js

@@ -0,0 +1,24 @@
+import{c,p as f,a as m,b as l,t as h,e as d,f as u,g as y,h as g,i as p,r as v,k as w}from"../custom-element.js";import{a as z}from"../slot.js";import{s as x}from"../attributes.js";var _=h('<div><div role="dialog" tabindex="-1"><!></div></div>');const M={hash:"svelte-tbzuju",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Maps to store shadow properties for top shadows.
+ * @type Map
+ */
+/**
+ * Maps to store shadow properties for bottom shadows.
+ * @type Map
+ */
+/**
+ * Mixin to define the box-shadow properties for a given direction and size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ * @param {String} $size - The size of the shadow ('xs', 's', 'm', 'l').
+ */
+/**
+ * Mixin to generate shadow classes for the specified direction (top or bottom).
+ * This mixin iterates over the predefined sizes and creates a CSS class for each size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ */.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;}`};function S(n,e){f(e,!0),m(n,M);let t=l(e,"isvisible",7,!1),s=l(e,"dialoglabel",7);var i=_();let r;var a=d(i),b=d(a);return z(b,e,"default",{}),v(a),v(i),u(()=>{r=w(i,1,"mc-overlay svelte-tbzuju",null,r,{"is-visible":t()}),x(a,"aria-labelledby",s())}),y(n,i),g({get isvisible(){return t()},set isvisible(o=!1){t(o),p()},get dialoglabel(){return s()},set dialoglabel(o){s(o),p()}})}customElements.define("m-overlay",c(S,{isvisible:{},dialoglabel:{}},["default"],[],!0));
+//# sourceMappingURL=Overlay.js.map

package/dist/overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\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":["isvisible","dialoglabel","$.prop","$$props"],"mappings":";;;;;;;;;;;;;;;;;;;;;;gVAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,wIAGIH,EAAS,EAAA,wBACCC,GAAW,0DAJ3C,GAAK"}

package/dist/overlay/Overlay.svelte

@@ -0,0 +1,106 @@
+<svelte:options customElement="m-overlay" />
+
+<script lang="ts">
+  interface Props {
+    isvisible?: boolean;
+    dialoglabel: string;
+  }
+
+  let { isvisible = false, dialoglabel }: Props = $props();
+</script>
+
+<div class="mc-overlay" class:is-visible={isvisible}>
+  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
+    <!-- @slot Use this slot to insert a centered content inside the overlay -->
+    <slot />
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Maps to store shadow properties for top shadows.
+ * @type Map
+ */
+/**
+ * Maps to store shadow properties for bottom shadows.
+ * @type Map
+ */
+/**
+ * Mixin to define the box-shadow properties for a given direction and size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ * @param {String} $size - The size of the shadow ('xs', 's', 'm', 'l').
+ */
+/**
+ * Mixin to generate shadow classes for the specified direction (top or bottom).
+ * This mixin iterates over the predefined sizes and creates a CSS class for each size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ */
+.shadow--top-xs {
+  box-shadow: 0px -3px 5px -2px;
+}
+
+.shadow--top-s {
+  box-shadow: 0px -5px 10px -2px;
+}
+
+.shadow--top-m {
+  box-shadow: 0px -10px 20px -4px;
+}
+
+.shadow--top-l {
+  box-shadow: 0px -20px 40px -8px;
+}
+
+.shadow--bottom-xs {
+  box-shadow: 0px 3px 5px -2px;
+}
+
+.shadow--bottom-s {
+  box-shadow: 0px 5px 10px -2px;
+}
+
+.shadow--bottom-m {
+  box-shadow: 0px 10px 20px -4px;
+}
+
+.shadow--bottom-l {
+  box-shadow: 0px 20px 40px -8px;
+}
+
+.mc-overlay {
+  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 {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+
+.mc-overlay-loader {
+  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 {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}</style>

package/dist/overlay/Overlay.svelte.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    isvisible?: boolean;
+    dialoglabel: string;
+}
+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 Overlay: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Overlay = InstanceType<typeof Overlay>;
+export default Overlay;
+//# sourceMappingURL=Overlay.svelte.d.ts.map

package/dist/overlay/Overlay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAoBH,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,OAAO;;;;;;UAAmF,CAAC;AAC/E,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/overlay/OverlayLoader.js

@@ -0,0 +1,47 @@
+import{c as m,p as h,a as b,b as r,t as y,e as v,f as g,g as x,h as u,i as l,r as f,k as w}from"../custom-element.js";import{s as k}from"../attributes.js";import{L as z}from"../loader/Loader.js";import"../if.js";var _=y('<div><div role="dialog" tabindex="-1" class="svelte-ne5o65"><!></div></div>');const M={hash:"svelte-ne5o65",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@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;
+  }
+}
+/**
+ * Maps to store shadow properties for top shadows.
+ * @type Map
+ */
+/**
+ * Maps to store shadow properties for bottom shadows.
+ * @type Map
+ */
+/**
+ * Mixin to define the box-shadow properties for a given direction and size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ * @param {String} $size - The size of the shadow ('xs', 's', 'm', 'l').
+ */
+/**
+ * Mixin to generate shadow classes for the specified direction (top or bottom).
+ * This mixin iterates over the predefined sizes and creates a CSS class for each size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ */.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 S(d,t){h(t,!0),b(d,M);let a=r(t,"isvisible",7,!1),i=r(t,"text",7),o=r(t,"dialoglabel",7);var s=_();let p;var n=v(s),c=v(n);return z(c,{size:"l",theme:"inverse",get text(){return i()}}),f(n),f(s),g(()=>{p=w(s,1,"mc-overlay-loader svelte-ne5o65",null,p,{"is-visible":a()}),k(n,"aria-labelledby",o())}),x(d,s),u({get isvisible(){return a()},set isvisible(e=!1){a(e),l()},get text(){return i()},set text(e){i(e),l()},get dialoglabel(){return o()},set dialoglabel(e){o(e),l()}})}customElements.define("m-overlay-loader",m(S,{isvisible:{},text:{},dialoglabel:{}},[],[],!0));
+//# sourceMappingURL=OverlayLoader.js.map

package/dist/overlay/OverlayLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLoader.js","sources":["../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay-loader\" />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  interface Props {\n    isvisible?: boolean;\n    text: string;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, text, dialoglabel }: Props = $props();\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":["isvisible","text","$.prop","$$props","dialoglabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oYAUQ,IAAAA,oBAAY,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,kLAGKH,EAAS,EAAA,wBACNI,GAAW,0DAJ3C,GAAK"}