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

package/dist/components/modal/Modal.svelte

@@ -95,9 +95,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-modal {
   box-sizing: border-box;
   inset: 0;
@@ -116,7 +113,7 @@
   }
 }
 .mc-modal__dialog {
-  background: #ffffff;
+  background: var(--modal-color-background, #ffffff);
   display: flex;
   flex-direction: column;
   opacity: 0;
@@ -125,14 +122,13 @@
   transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
   visibility: hidden;
   width: 100%;
-  border-radius: 1rem 1rem 0 0;
+  border-radius: var(--radius-l, 1rem) var(--radius-l, 1rem) 0 0;
   z-index: 3;
-  box-shadow: 0px 10px 20px -4px rgba(36, 41, 56, 0.2);
 }
 @media (width >= 680px) {
   .mc-modal__dialog {
     width: 38rem;
-    border-radius: 1rem;
+    border-radius: var(--radius-l, 1rem);
   }
 }
 .mc-modal.is-open .mc-modal__dialog {
@@ -160,9 +156,9 @@
   height: 2rem;
 }
 .mc-modal__title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #000000;
+  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;
@@ -173,8 +169,8 @@
   right: 0.75rem;
 }
 .mc-modal__body {
-  font-size: 1rem;
-  color: #404040;
+  font-size: var(--font-size-150, 1rem);
+  color: var(--modal-color-paragraph, #404040);
   padding: 0 1rem;
   margin-bottom: 1rem;
 }
@@ -185,7 +181,7 @@
 }
 .mc-modal__body p {
   margin: 0;
-  line-height: 1.3;
+  line-height: var(--line-height-s, 1.3);
 }
 .mc-modal__footer {
   align-items: stretch;
@@ -215,18 +211,37 @@
 }
 
 .mc-button {
-  color: #ffffff;
-  background-color: #464e63;
-  font-weight: 600;
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.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 {
+  font-weight: var(--font-weight-semi-bold, 600);
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
   display: inline-flex;
   justify-content: center;
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--button-radius, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -236,23 +251,8 @@
   gap: 0.25rem;
   cursor: pointer;
 }
-.mc-button:hover {
-  background-color: #343b4c;
-}
-.mc-button:active {
-  background-color: #242938;
-}
-.mc-button:disabled {
-  background-color: #d9d9d9;
-  border-color: transparent;
-  color: #737373;
-  cursor: not-allowed;
-}
-.mc-button .mc-button__label {
-  font-size: 1rem;
-}
 .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button__icon {
   flex-shrink: 0;
@@ -260,13 +260,13 @@
   height: 1.5rem;
 }
 .mc-button:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  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, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -276,7 +276,7 @@
   min-width: 2rem;
 }
 .mc-button--s .mc-button__label {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-button--s .mc-button__icon {
   width: 1.25rem;
@@ -292,7 +292,7 @@
   min-width: 3rem;
 }
 .mc-button--m .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button--m .mc-button__icon {
   width: 1.5rem;
@@ -308,7 +308,7 @@
   min-width: 4rem;
 }
 .mc-button--l .mc-button__label {
-  font-size: 1.125rem;
+  font-size: var(--font-size-200, 1.125rem);
 }
 .mc-button--l .mc-button__icon {
   width: 2rem;
@@ -322,90 +322,90 @@
   padding: 0.25rem;
 }
 .mc-button--outlined {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  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: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  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: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
 }
 .mc-button--accent:hover {
-  background-color: #006902;
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
 }
 .mc-button--accent:active {
-  background-color: #035010;
+  background-color: var(--button-color-filled-accent-active-background, #035010);
 }
 .mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
 }
 .mc-button--danger:hover {
-  background-color: #8c0003;
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
 }
 .mc-button--danger:active {
-  background-color: #530000;
+  background-color: var(--button-color-filled-danger-active-background, #530000);
 }
 .mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #242938;
-  background-color: #ffffff;
+  --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: #e6e6e6;
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
 }
 .mc-button--inverse:active {
-  background-color: #cccccc;
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
 }
 .mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -417,134 +417,134 @@
   visibility: hidden;
 }
 .mc-button--outlined.mc-button--standard {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  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: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined.mc-button--standard:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--accent {
-  color: #117f03;
-  border-color: #78be20;
-  background-color: #ffffff;
+  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: #ebf5de;
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
 }
 .mc-button--outlined.mc-button--accent:active {
-  background-color: #c5e39e;
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
 }
 .mc-button--outlined.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--danger {
-  color: #c61112;
-  border-color: #ef5f5c;
-  background-color: #ffffff;
+  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: #fdeaea;
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
 }
 .mc-button--outlined.mc-button--danger:active {
-  background-color: #f8bcbb;
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
 }
 .mc-button--outlined.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--inverse {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  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: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--outlined.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--outlined.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--standard {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  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: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost.mc-button--standard:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--accent {
-  color: #117f03;
-  background-color: rgba(255, 255, 255, 0.01);
+  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: rgba(17, 127, 3, 0.1);
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
 }
 .mc-button--ghost.mc-button--accent:active {
-  background-color: rgba(17, 127, 3, 0.2);
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
 }
 .mc-button--ghost.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--danger {
-  color: #c61112;
-  background-color: rgba(255, 255, 255, 0.01);
+  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: rgba(198, 17, 18, 0.1);
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
 }
 .mc-button--ghost.mc-button--danger:active {
-  background-color: rgba(198, 17, 18, 0.2);
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
 }
 .mc-button--ghost.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--inverse {
-  color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  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: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--ghost.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--ghost.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }</style>

package/dist/components/numberbadge/NumberBadge.js

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

package/dist/components/numberbadge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './NumberBadge.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":";;;;;0oBAAA,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,qEAICL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,iDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG,YAevD"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './NumberBadge.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":";;+iCAAA,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,4CAdc,GAAE,yDAAe,WAAU,6CAAS,IAAG,0EAkBpDL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,cAFjC"}

package/dist/components/numberbadge/NumberBadge.svelte

@@ -32,18 +32,15 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-number-badge {
-  color: #ffffff;
-  background-color: #464e63;
+  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;
+  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;
@@ -54,17 +51,17 @@
   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: #ffffff;
-  background-color: #117f03;
+  color: var(--number-badge-color-text-accent, #ffffff);
+  background-color: var(--number-badge-color-background-accent, #117f03);
 }
 .mc-number-badge--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--number-badge-color-text-danger, #ffffff);
+  background-color: var(--number-badge-color-background-danger, #c61112);
 }
 .mc-number-badge--inverse {
-  color: #464e63;
-  background-color: #ffffff;
+  color: var(--number-badge-color-text-inverse, #464e63);
+  background-color: var(--number-badge-color-background-inverse, #ffffff);
 }</style>

package/dist/components/overlay/Overlay.js

@@ -1,7 +1,4 @@
-import{c as y,p as m,a as f,b as n,f as u,d as v,t as p,e as g,h,i as _,j as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as w}from"../../attributes.js";var z=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const D={hash:"svelte-178bhy7",code:`/**
+import{c as p,p as y,a as u,b as v,f,d as n,t as g,e as _,h,i as x,j as d,r as b}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=f('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-178bhy7 {background-color: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-178bhy7 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function O(o,i){m(i,!0),f(o,D);let t=n(i,"isvisible",7,!1),a=n(i,"dialoglabel",7);var s=z();let r;var l=v(s),c=v(l);return x(c,i,"default",{}),b(l),b(s),p(e=>{r=g(s,1,"mc-overlay svelte-178bhy7",null,r,e),w(l,"aria-labelledby",a())},[()=>({"is-visible":t()})]),h(o,s),_({get isvisible(){return t()},set isvisible(e=!1){t(e),d()},get dialoglabel(){return a()},set dialoglabel(e){a(e),d()}})}customElements.define("m-overlay",y(O,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{O};
+ */.mc-overlay.svelte-smp867 {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-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,s){y(s,!0),u(o,j);let a=v(s,"isvisible",7,!1),t=v(s,"dialoglabel",7);var c={get isvisible(){return a()},set isvisible(e=!1){a(e),d()},get dialoglabel(){return t()},set dialoglabel(e){t(e),d()}},i=O();let r;var l=n(i),m=n(l);return k(m,s,"default",{}),b(l),b(i),g(e=>{r=_(i,1,"mc-overlay svelte-smp867",null,r,e),z(l,"aria-labelledby",t())},[()=>({"is-visible":a()})]),h(o,i),x(c)}customElements.define("m-overlay",p(w,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{w as 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":";;;;;oWAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK,uEACzB"}
+{"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":";;mYAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,qDAAlB,GAAK,mNAI2BF,GAAW,uBADrBD,EAAS,GAAA,cAFnD"}

package/dist/components/overlay/Overlay.svelte

@@ -19,11 +19,8 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-overlay {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
   inset: 0;
   opacity: 0;
   position: fixed;
@@ -39,20 +36,22 @@
 }
 
 .mc-overlay-loader {
-  background-color: rgba(0, 0, 0, 0.5);
+  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;
+}
+.mc-overlay-loader {
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }</style>

package/dist/components/overlayloader/OverlayLoader.js

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