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

package/dist/components/numberbadge/NumberBadge.svelte

@@ -0,0 +1,67 @@
+<svelte:options customElement={{ tag: 'm-number-badge' }} />
+
+<script lang="ts">
+  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
+  interface Props {
+    label: string;
+    appearance: BadgeStyle;
+    size: BadgeSize;
+  }
+
+  let { label = '', appearance = 'standard', size = 's' }: Props = $props();
+
+  function setClasses(style: BadgeStyle) {
+    const classes = ['mc-number-badge'];
+
+    if (appearance) {
+      classes.push(`mc-number-badge--${appearance}`);
+    }
+
+    if (size) {
+      classes.push(`mc-number-badge--${size}`);
+    }
+
+    return classes.join(' ');
+  }
+</script>
+
+<div class={setClasses(appearance)}>
+  {label}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-number-badge {
+  color: var(--number-badge-color-text-standard, #ffffff);
+  background-color: var(--number-badge-color-background-standard, #464e63);
+  height: 1rem;
+  min-width: 1rem;
+  padding-inline: 0.125rem;
+  font-size: var(--font-size-25, 0.625rem);
+  border-radius: var(--radius-l, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  line-height: 1;
+}
+.mc-number-badge--m {
+  height: 1.5rem;
+  min-width: 1.5rem;
+  padding-inline: 0.25rem;
+  font-size: var(--font-size-50, 0.75rem);
+}
+.mc-number-badge--accent {
+  color: var(--number-badge-color-text-accent, #ffffff);
+  background-color: var(--number-badge-color-background-accent, #117f03);
+}
+.mc-number-badge--danger {
+  color: var(--number-badge-color-text-danger, #ffffff);
+  background-color: var(--number-badge-color-background-danger, #c61112);
+}
+.mc-number-badge--inverse {
+  color: var(--number-badge-color-text-inverse, #464e63);
+  background-color: var(--number-badge-color-background-inverse, #ffffff);
+}</style>

package/dist/components/numberbadge/NumberBadge.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
+interface Props {
+    label: string;
+    appearance: BadgeStyle;
+    size: BadgeSize;
+}
+declare const NumberBadge: import("svelte").Component<Props, {}, "">;
+type NumberBadge = ReturnType<typeof NumberBadge>;
+export default NumberBadge;
+//# sourceMappingURL=NumberBadge.svelte.d.ts.map

package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/D,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;CACjB;AAgCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/numberbadge/NumberBadge.types.d.ts

@@ -0,0 +1,3 @@
+export type BadgeStyle = 'error' | 'accent' | 'inverse' | 'standard';
+export type BadgeSize = 's' | 'm';
+//# sourceMappingURL=NumberBadge.types.d.ts.map

package/dist/components/numberbadge/NumberBadge.types.d.ts.map

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

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,4 @@
-import{c as y,a as m,b as u,d as v,f,g as n,t as p,i as g,j as _,l as h,m as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as q}from"../../attributes.js";var k=f('<div><div role="dialog" tabindex="-1"><!></div></div>');const z={hash:"svelte-1q5sy97",code:`/**
+import{c as y,p as m,a as u,b as v,f,d as n,t as p,e as g,h as _,i as h,j as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as q}from"../../attributes.js";var k=f('<div><div role="dialog" tabindex="-1"><!></div></div>');const z={hash:"svelte-1q5sy97",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-overlay.svelte-1q5sy97 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-1q5sy97 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function O(o,s){m(s,!0),u(o,z);let a=v(s,"isvisible",7,!1),l=v(s,"dialoglabel",7);var i=k();let r;var t=n(i),c=n(t);return x(c,s,"default",{}),b(t),b(i),p(e=>{r=g(i,1,"mc-overlay svelte-1q5sy97",null,r,e),q(t,"aria-labelledby",l())},[()=>({"is-visible":a()})]),_(o,i),h({get isvisible(){return a()},set isvisible(e=!1){a(e),d()},get dialoglabel(){return l()},set dialoglabel(e){l(e),d()}})}customElements.define("m-overlay",y(O,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{O};
 //# sourceMappingURL=Overlay.js.map

package/dist/components/overlay/Overlay.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * The `MOverlay` component is the **Svelte / WebComponent** implementation of the **Overlay** component of Mozaic Design System.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+//# sourceMappingURL=Overlay.stories.d.ts.map

package/dist/components/overlay/Overlay.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;GAEG;wBAWE,IAAI;AATT,wBASU;AA2BV,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/components/overlay/Overlay.svelte

@@ -1,15 +1,55 @@
-<svelte:options tag={null} />
+<svelte:options customElement="m-overlay" />
 
 <script lang="ts">
-  export let visible = false;
+  interface Props {
+    isvisible?: boolean;
+    dialoglabel: string;
+  }
+
+  let { isvisible = false, dialoglabel }: Props = $props();
 </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}>
+  <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';
-</style>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-overlay {
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+}
+.mc-overlay.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+
+.mc-overlay-loader {
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+  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/components/overlay/Overlay.svelte.d.ts.map

@@ -1 +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"}
+{"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;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/overlayloader/OverlayLoader.js

@@ -0,0 +1,27 @@
+import{c as y,p as b,a as g,b as o,f as p,d as f,t as u,e as h,h as x,i as k,j as n,r as c}from"../../custom-element.js";import{s as _}from"../../attributes.js";import{L as z}from"../loader/Loader.js";import"../../if.js";var L=p('<div><div role="dialog" tabindex="-1" class="svelte-1aiffgv"><!></div></div>');const j={hash:"svelte-1aiffgv",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@keyframes svelte-1aiffgv-rotate-loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes svelte-1aiffgv-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-1aiffgv {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);align-items:center;display:flex;justify-content:center;}.mc-overlay-loader.is-visible.svelte-1aiffgv {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(d,t){b(t,!0),g(d,j);let s=o(t,"isvisible",7,!1),i=o(t,"text",7),r=o(t,"dialoglabel",7);var a=L();let v;var l=f(a),m=f(l);return z(m,{size:"l",theme:"inverse",get text(){return i()}}),c(l),c(a),u(e=>{v=h(a,1,"mc-overlay-loader svelte-1aiffgv",null,v,e),_(l,"aria-labelledby",r())},[()=>({"is-visible":s()})]),x(d,a),k({get isvisible(){return s()},set isvisible(e=!1){s(e),n()},get text(){return i()},set text(e){i(e),n()},get dialoglabel(){return r()},set dialoglabel(e){r(e),n()}})}customElements.define("m-overlay-loader",y(w,{isvisible:{},text:{},dialoglabel:{}},[],[],!0));
+//# sourceMappingURL=OverlayLoader.js.map

package/dist/components/overlayloader/OverlayLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlayloader/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":";;;;;;;;;;;;;;;;;;;;;;;;;wcAAA,gBAUQ,IAAAA,oBAAY,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,6LAIQC,GAAW,uBADdJ,EAAS,GAAA,yDAHtC,GAAK,oHACzB"}

package/dist/components/overlayloader/OverlayLoader.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * The `MOverlayLoader` component is the **Svelte / WebComponent** implementation of the **Overlay Loader** component of Mozaic Design System.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+//# sourceMappingURL=OverlayLoader.stories.d.ts.map

package/dist/components/overlayloader/OverlayLoader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLoader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlayloader/OverlayLoader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;GAEG;wBAcE,IAAI;AAZT,wBAYU;AA+BV,eAAO,MAAM,OAAO,KAAoB,CAAC"}

package/dist/components/overlayloader/OverlayLoader.svelte

@@ -1,32 +1,156 @@
-<svelte:options tag={null} />
+<svelte:options customElement="m-overlay-loader" />
 
 <script lang="ts">
-  export let visible = false;
-  export let text: string;
-</script>
+  import Loader from '../loader/Loader.svelte';
+  interface Props {
+    isvisible?: boolean;
+    text: string;
+    dialoglabel: string;
+  }
 
-<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>
+  let { isvisible = false, text, dialoglabel }: Props = $props();
+</script>
 
-    {#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';
-</style>
+<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: var(--font-size-150, 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--xs .mc-loader__spinner {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-loader--xs .mc-loader__path {
+  stroke-width: 2;
+}
+.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;
+  }
+}
+.mc-overlay {
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+}
+.mc-overlay.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+
+.mc-overlay-loader {
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+  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/components/overlayloader/OverlayLoader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlayloader/OverlayLoader.svelte.ts"],"names":[],"mappings":"AAKE,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAoBH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{c as I,a as O,d as i,A as U,t as _,j as h,l as S,m as o,i as V,B as W,u as oe,b as ne,C as y,e as de,f as z,s as J,g as N,r as w,h as l,y as k,k as K,$ as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ce,i as ue}from"../../each.js";import{s as x,c as X,e as ge,d as ve}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../button/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var fe=U('<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="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),g=i(t,"fill",12,void 0),v=i(t,"size",12,"1.5rem");var n=fe();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",g())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return g()},set fill(a){g(a),o()},get size(){return v()},set size(a){v(a),o()}})}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var me=U('<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="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),g=i(t,"fill",12,void 0),v=i(t,"size",12,"1.5rem");var n=me();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",g())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return g()},set fill(a){g(a),o()},get size(){return v()},set size(a){v(a),o()}})}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(m,t){const c=Number(m.target.value);t(c)}var be=z("<option> </option>"),he=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-1xgspvt"></select></div>'),xe=z('<span class="mc-pagination__label svelte-1xgspvt" aria-current="page"> </span>'),we=z('<nav class="mc-pagination svelte-1xgspvt" aria-label="pagination"><!> <!> <!></nav>');const _e={hash:"svelte-1xgspvt",code:`/**
+import{c as I,p as O,b as i,A as U,t as _,h,i as S,j as o,e as V,B as W,n as oe,a as ne,C as y,l as de,f as z,s as J,d as N,r as w,m as l,v as k,g as K,_ as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ce,i as ue}from"../../each.js";import{s as x,c as X,f as ve,d as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var fe=U('<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="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),v=i(t,"fill",12,void 0),g=i(t,"size",12,"1.5rem");var n=fe();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",v())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return v()},set fill(a){v(a),o()},get size(){return g()},set size(a){g(a),o()}})}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var me=U('<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="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),v=i(t,"fill",12,void 0),g=i(t,"size",12,"1.5rem");var n=me();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",v())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return v()},set fill(a){v(a),o()},get size(){return g()},set size(a){g(a),o()}})}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(m,t){const c=Number(m.target.value);t(c)}var be=z("<option> </option>"),he=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-1xgspvt"></select></div>'),xe=z('<span class="mc-pagination__label svelte-1xgspvt" aria-current="page"> </span>'),we=z('<nav class="mc-pagination svelte-1xgspvt" aria-label="pagination"><!> <!> <!></nav>');const _e={hash:"svelte-1xgspvt",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pagination.svelte-1xgspvt {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-1xgspvt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 
 /* stylelint-disable string-no-newline */.mc-select.svelte-1xgspvt {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-1xgspvt:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-1xgspvt: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-select.svelte-1xgspvt:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
 
-/* stylelint-enable string-no-newline */`};function ye(m,t){O(t,!0),ne(m,_e);let c=i(t,"id",7),u=i(t,"value",15,1),d=i(t,"total",7,10),g=i(t,"compact",7,!1),v=i(t,"selectLabel",7,"Page selector"),n=i(t,"pagelabel",7,"of"),a=i(t,"prefixlabel",7,"Page"),f=y(de(Number(u())));const P=y(()=>l(f)<=1),L=y(()=>l(f)>=d()),Y=y(()=>Array.from({length:d()},(e,s)=>s+1));function D(){l(P)()||B(f,Number(l(f))-1)}function F(){l(L)()||B(f,Number(l(f))+1)}var C=we(),R=N(C);{var Z=e=>{{let s=k(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,children:(r,p)=>{j(r,{})},$$slots:{default:!0}})}},$=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(R,e=>{g()?e($,!1):e(Z)})}var q=J(R,2);{var ee=e=>{var s=he(),r=N(s);r.__change=[pe,u],ce(r,21,()=>l(Y)(),ue,(p,E)=>{var b=be(),re=N(b);w(b);var G={};_((ie,H)=>{ge(b,ie),K(re,`${a()??""}
+/* stylelint-enable string-no-newline */`};function ye(m,t){O(t,!0),ne(m,_e);let c=i(t,"id",7),u=i(t,"value",15,1),d=i(t,"total",7,10),v=i(t,"compact",7,!1),g=i(t,"selectLabel",7,"Page selector"),n=i(t,"pagelabel",7,"of"),a=i(t,"prefixlabel",7,"Page"),f=y(de(Number(u())));const P=y(()=>l(f)<=1),L=y(()=>l(f)>=d()),Y=y(()=>Array.from({length:d()},(e,s)=>s+1));function D(){l(P)()||B(f,Number(l(f))-1)}function F(){l(L)()||B(f,Number(l(f))+1)}var C=we(),R=N(C);{var Z=e=>{{let s=k(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,children:(r,p)=>{j(r,{})},$$slots:{default:!0}})}},$=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(R,e=>{v()?e($,!1):e(Z)})}var q=J(R,2);{var ee=e=>{var s=he(),r=N(s);r.__change=[pe,u],ce(r,21,()=>l(Y)(),ue,(p,E)=>{var b=be(),re=N(b);w(b);var G={};_((ie,H)=>{ve(b,ie),K(re,`${a()??""}
             ${l(E)??""}
             ${n()??""}
-            ${d()??""}`),G!==(G=H)&&(b.value=(b.__value=H)??"")},[()=>Number(l(E))==Number(l(f)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",c()),x(r,"aria-label",v()),r.disabled=d()<=1}),ve(r,()=>l(f),p=>B(f,p)),h(e,s)},te=e=>{var s=xe(),r=N(s);w(s),_(()=>K(r,`${a()??""}
+            ${d()??""}`),G!==(G=H)&&(b.value=(b.__value=H)??"")},[()=>Number(l(E))==Number(l(f)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",c()),x(r,"aria-label",g()),r.disabled=d()<=1}),ge(r,()=>l(f),p=>B(f,p)),h(e,s)},te=e=>{var s=xe(),r=N(s);w(s),_(()=>K(r,`${a()??""}
       ${u()??""}
       ${n()??""}
-      ${d()??""}`)),h(e,s)};M(q,e=>{g()?e(te,!1):e(ee)})}var ae=J(q,2);{var le=e=>{{let s=k(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,children:(r,p)=>{A(r,{})},$$slots:{default:!0}})}},se=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(ae,e=>{g()?e(se,!1):e(le)})}return w(C),h(m,C),S({get id(){return c()},set id(e){c(e),o()},get value(){return u()},set value(e=1){u(e),o()},get total(){return d()},set total(e=10){d(e),o()},get compact(){return g()},set compact(e=!1){g(e),o()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()},get prefixlabel(){return a()},set prefixlabel(e="Page"){a(e),o()}})}oe(["change"]);customElements.define("m-pagination",I(ye,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
+      ${d()??""}`)),h(e,s)};M(q,e=>{v()?e(te,!1):e(ee)})}var ae=J(q,2);{var le=e=>{{let s=k(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,children:(r,p)=>{A(r,{})},$$slots:{default:!0}})}},se=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(ae,e=>{v()?e(se,!1):e(le)})}return w(C),h(m,C),S({get id(){return c()},set id(e){c(e),o()},get value(){return u()},set value(e=1){u(e),o()},get total(){return d()},set total(e=10){d(e),o()},get compact(){return v()},set compact(e=!1){v(e),o()},get selectLabel(){return g()},set selectLabel(e="Page selector"){g(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()},get prefixlabel(){return a()},set prefixlabel(e="Page"){a(e),o()}})}oe(["change"]);customElements.define("m-pagination",I(ye,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
 //# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', 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.5rem\";\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 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', 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.5rem\";\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 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../button/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"mxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,gHC8CWE,GAAeC,EAAcC,EAAA,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAqBL,EAAA,IAAA,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,6CAacU,CAAW,EAAA,CAAA,oFACZM,0EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAOQ,EAAAa,CAAI,CAAK,GAAA,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,uGAvFO,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,YA2BxB","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', 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.5rem\";\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 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', 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.5rem\";\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 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"kxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,gHC8CWE,GAAeC,EAAcC,EAAA,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAqBL,EAAA,IAAA,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,6CAacU,CAAW,EAAA,CAAA,oFACZM,0EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAOQ,EAAAa,CAAI,CAAK,GAAA,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,uGAvFO,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,YA2BxB","x_google_ignoreList":[0,1]}

package/dist/components/pagination/Pagination.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages.
+ * It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently.
+ * Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Compact: any;
+export declare const LongList: any;
+//# sourceMappingURL=Pagination.stories.d.ts.map

package/dist/components/pagination/Pagination.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBA0CE,IAAI;AAxCT,wBAwCU;AAmBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAiBzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}