@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/components/modal/Modal.svelte

@@ -0,0 +1,546 @@
+<svelte:options customElement={{ tag: 'm-modal' }} />
+
+<script lang="ts">
+  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';
+  import MOverlay from '../overlay/Overlay.svelte';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+    icon?: any;
+    footer?: any;
+    link?: any;
+    [key: string]: any;
+  }
+
+  let {
+    open = false,
+    title = '',
+    description = '',
+    closable = true,
+    icon = undefined,
+    footer = undefined,
+    link = undefined,
+  }: Props = $props();
+
+  function onClose() {
+    open = false;
+    // Manually emit event from the custom element
+    const event = new CustomEvent('update:open', {
+      detail: open,
+      bubbles: true,
+      composed: true,
+    });
+    // @ts-ignore: `this` is the custom element instance
+    this.dispatchEvent(event);
+  }
+  //   afterUpdate(() => {
+  //     dispatch('update:open', open);
+  //   });
+</script>
+
+<section
+  class="mc-modal"
+  class:is-open={open}
+  tabindex="-1"
+  aria-labelledby="modalTitle"
+  aria-hidden={!open}
+>
+  <div class="mc-modal__dialog" role="document">
+    <header class="mc-modal__header">
+      {#if icon}
+        <span class="mc-modal__icon">
+          <slot name="icon" />
+        </span>
+      {/if}
+      <h2 class="mc-modal__title" id="modalTitle">{title}</h2>
+      {#if closable}
+        <button
+          type="button"
+          class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost"
+          aria-label="Close"
+          onclick={onClose}
+        >
+          <span class="mc-modal__icon">
+            <Cross24 aria-hidden="true" />
+          </span>
+        </button>
+      {/if}
+    </header>
+
+    <main class="mc-modal__body">
+      {#if description}
+        <p>{description}</p>
+      {/if}
+      <slot />
+    </main>
+
+    {#if footer}
+      <footer class="mc-modal__footer">
+        {#if link}
+          <span class="mc-modal__link">
+            <slot name="link" />
+          </span>
+        {/if}
+        <slot name="footer" />
+      </footer>
+    {/if}
+  </div>
+
+  <MOverlay isvisible={open} dialoglabel="modal" />
+</section>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-modal {
+  box-sizing: border-box;
+  inset: 0;
+  outline: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: var(--modal-z-index, 3);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  overflow: hidden auto;
+}
+@media (width >= 680px) {
+  .mc-modal {
+    align-items: center;
+  }
+}
+.mc-modal__dialog {
+  background: var(--modal-color-background, #ffffff);
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  position: relative;
+  transform: translateY(-25%);
+  transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
+  visibility: hidden;
+  width: 100%;
+  border-radius: var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;
+  z-index: 3;
+}
+@media (width >= 680px) {
+  .mc-modal__dialog {
+    width: 38rem;
+    border-radius: var(--radius-l, 1rem);
+  }
+}
+.mc-modal.is-open .mc-modal__dialog {
+  opacity: 1;
+  pointer-events: all;
+  transform: translateY(0);
+  transition: visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;
+  visibility: visible;
+}
+.mc-modal__header {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  min-height: 3rem;
+  padding: 1rem;
+  position: relative;
+}
+@media (width >= 680px) {
+  .mc-modal__header {
+    padding: 1.5rem 1.5rem 1rem 1.5rem;
+  }
+}
+.mc-modal__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-modal__title {
+  font-size: var(--font-title-m, 1.5rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--modal-color-title, #000000);
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  padding-right: 3rem;
+}
+.mc-modal__close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+}
+.mc-modal__body {
+  font-size: var(--font-size-150, 1rem);
+  color: var(--modal-color-paragraph, #404040);
+  padding: 0 1rem;
+  margin-bottom: 1rem;
+}
+@media (width >= 680px) {
+  .mc-modal__body {
+    padding: 0 1.5rem;
+  }
+}
+.mc-modal__body p {
+  margin: 0;
+  line-height: var(--line-height-s, 1.3);
+}
+.mc-modal__footer {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding: 0.5rem 1rem 1rem 1rem;
+}
+@media (width >= 680px) {
+  .mc-modal__footer {
+    flex-direction: row;
+    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
+  }
+}
+.mc-modal__link {
+  order: 1;
+}
+@media (width >= 680px) {
+  .mc-modal__link {
+    margin-right: auto;
+    order: 0;
+  }
+}
+.mc-modal-open {
+  overflow: hidden;
+}
+
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-radius, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  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-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}</style>

package/dist/components/modal/Modal.svelte.d.ts

@@ -0,0 +1,44 @@
+interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+    icon?: any;
+    footer?: any;
+    link?: any;
+    [key: string]: any;
+}
+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 Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    icon: {};
+    default: {};
+    link: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+    link: {};
+    footer: {};
+}, {}, "">;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;
+//# sourceMappingURL=Modal.svelte.d.ts.map

package/dist/components/modal/Modal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8EH,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,KAAK;;;;;;;;;;;;UAAmF,CAAC;AAC7E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/number-badge/NumberBadge.js

@@ -1,4 +1,4 @@
-import{c as g,a as i,b as u,d as o,f,t as v,R as p,m as h,k as z,g as y,h as x,i as k,j as d,r as _}from"../../custom-element.js";var w=f("<div> </div>");const j={hash:"svelte-1m62yzg",code:`/**
+import{c as m,a as u,b as f,d,f as g,t as v,B as p,i as h,k,j as x,l as z,m as c,g as _,r as y}from"../../custom-element.js";var w=g("<div> </div>");const j={hash:"svelte-dov0ok",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-1m62yzg {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:0.625rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;}.mc-number-badge--m.svelte-1m62yzg {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:0.75rem;}.mc-number-badge--accent.svelte-1m62yzg {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-1m62yzg {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-1m62yzg {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function B(m,a){i(a,!0),u(m,j);let s=o(a,"label",7,""),r=o(a,"appearance",7,"standard"),n=o(a,"size",7,"s");function l(e){const c=["mc-number-badge"];return r()&&c.push(`mc-number-badge--${r()}`),n()&&c.push(`mc-number-badge--${n()}`),c.join(" ")}var t=w(),b=y(t,!0);return _(t),v(e=>{h(t,1,e,"svelte-1m62yzg"),z(b,s())},[()=>p(l(r()))]),x(m,t),k({get label(){return s()},set label(e=""){s(e),d()},get appearance(){return r()},set appearance(e="standard"){r(e),d()},get size(){return n()},set size(e="s"){n(e),d()}})}customElements.define("m-number-badge",g(B,{label:{},appearance:{},size:{}},[],[],!0));
+ */.mc-number-badge.svelte-dov0ok {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.svelte-dov0ok {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-dov0ok {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-dov0ok {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-dov0ok {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function B(l,a){u(a,!0),f(l,j);let o=d(a,"label",7,""),r=d(a,"appearance",7,"standard"),t=d(a,"size",7,"s");function i(e){const s=["mc-number-badge"];return r()&&s.push(`mc-number-badge--${r()}`),t()&&s.push(`mc-number-badge--${t()}`),s.join(" ")}var n=w(),b=_(n,!0);return y(n),v(e=>{h(n,1,e,"svelte-dov0ok"),k(b,o())},[()=>p(i(r()))]),x(l,n),z({get label(){return o()},set label(e=""){o(e),c()},get appearance(){return r()},set appearance(e="standard"){r(e),c()},get size(){return t()},set size(e="s"){t(e),c()}})}customElements.define("m-number-badge",m(B,{label:{},appearance:{},size:{}},[],[],!0));export{B as N};
 //# sourceMappingURL=NumberBadge.js.map

package/dist/components/number-badge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/number-badge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './number-badge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;k+BAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,qEAICL,GAAK,IADI,IAAAM,EAAAH,EAAWF,GAAU,CAAA,kDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/number-badge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './number-badge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;ojCAAA,gBAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,oEAICL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,iDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG,YAevD"}

package/dist/components/number-badge/NumberBadge.svelte

@@ -38,19 +38,20 @@
   height: 1rem;
   min-width: 1rem;
   padding-inline: 0.125rem;
-  font-size: 0.625rem;
-  border-radius: 1rem;
-  font-weight: 600;
+  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: 0.75rem;
+  font-size: var(--font-size-50, 0.75rem);
 }
 .mc-number-badge--accent {
   color: var(--number-badge-color-text-accent, #ffffff);

package/dist/components/overlay/Overlay.js

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

@@ -1 +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":";;uZAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK"}
+{"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":";;qYAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK,uEACzB"}