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

package/dist/{components/radiogroup → radiogroup}/RadioGroup.js

@@ -1,4 +1,4 @@
-import{d as J,c as K,p as L,a as M,b as l,z as N,A as G,t as x,f as w,g as y,h as O,i as a,e as c,s as R,r as d,j as S,k as V,m as r,C as q}from"../../custom-element.js";import{i as P}from"../../if.js";import{e as Q}from"../../each.js";import{r as T,s as v}from"../../attributes.js";import{a as U}from"../../input.js";var W=x('<legend class="mc-field__legend svelte-jgbztm"> </legend>'),X=(g,i,u)=>i(r(u).value),Y=x('<div class="mc-radio mc-field__item svelte-jgbztm"><input type="radio"> <label class="mc-radio__label svelte-jgbztm"> </label></div>'),Z=x('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-jgbztm"><!> <div></div></fieldset></div>');const $={hash:"svelte-jgbztm",code:`/**
+import{d as J,c as K,p as L,a as M,b as l,z as N,A as G,t as x,f as w,g as y,h as O,i as a,e as c,s as R,r as d,j as S,k as V,m as r,C as q}from"../custom-element.js";import{i as P}from"../if.js";import{e as Q}from"../each.js";import{r as T,s as v}from"../attributes.js";import{a as U}from"../input.js";var W=x('<legend class="mc-field__legend svelte-jgbztm"> </legend>'),X=(g,i,u)=>i(r(u).value),Y=x('<div class="mc-radio mc-field__item svelte-jgbztm"><input type="radio"> <label class="mc-radio__label svelte-jgbztm"> </label></div>'),Z=x('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-jgbztm"><!> <div></div></fieldset></div>');const $={hash:"svelte-jgbztm",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-radio.svelte-jgbztm {align-items:center;display:flex;gap:0.5rem;}.mc-radio__label.svelte-jgbztm {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-jgbztm {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-jgbztm::before {border-radius:100%;content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-jgbztm:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-jgbztm: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-radio__input.svelte-jgbztm:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-jgbztm:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-jgbztm:checked, .mc-radio__input.svelte-jgbztm:disabled {border-color:transparent;}.mc-radio__input.svelte-jgbztm:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-jgbztm:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-jgbztm:disabled + .mc-radio__label:where(.svelte-jgbztm) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-jgbztm:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-jgbztm:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-jgbztm:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 

package/dist/radiogroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  interface Props {\n    id: string;\n    selectedvalue: string;\n    options: Array<RadioGroupOption>;\n    legend: string;\n    inline: boolean;\n    isinvalid?: boolean;\n  }\n\n  let {\n    id,\n    selectedvalue,\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n  }: Props = $props();\n\n  let selectedValue: string | undefined = $state(selectedvalue);\n\n  function onChange(value: string) {\n    selectedValue = value;\n    // dispatch('change', selectedValue);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\">\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div class=\"mc-field__content {inline ? 'mc-field__content--inline' : ''}\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item\">\n          <input\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            class:is-invalid={isinvalid}\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            onchange={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["onChange","$.get","opt","id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","selectedValue","value","$.set","$$render","consequent","$.each","div_1","$.set_attribute","input","input_value","label","$.set_text","text_1","$$value"],"mappings":"+XA2D4BA,EAAQC,EAACC,CAAG,EAAC,KAAK;;;;;;0FApC1CC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,oBAAY,EAAK,EAGfC,MAA2CL,EAAa,CAAA,CAAA,WAEnDN,EAASY,EAAe,CAC/BC,EAAAF,IAAgBC,CAAK,CAAA,CAEvB,uEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMM,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAV,EAAWL,GAAKA,EAAI,MAATA,IAAG,2JAKGQ,EAAS,EAAA,EACvBQ,EAAAC,EAAA,KAAAlB,EAAAC,CAAG,EAAC,EAAE,EACJgB,EAAAC,EAAA,OAAAlB,EAAAC,CAAG,EAAC,IAAI,EAEPkB,KAAAA,EAAAnB,EAAAC,CAAG,EAAC,SAAJiB,EAAA,OAAAA,EAAA,QAAAlB,EAAAC,CAAG,EAAC,QAAJ,KAAA,GAAAD,EAAAC,CAAG,EAAC,OACDiB,EAAA,SAAAlB,EAAAC,CAAG,EAAC,SAGJgB,EAAAG,EAAA,MAAApB,EAAAC,CAAG,EAAC,EAAE,EAA2BoB,EAAAC,EAAAtB,EAAAC,CAAG,EAAC,KAAK,kBAJ7CD,EAAAC,CAAG,EAAC,QADCS,CAAa,QAAbA,EAAaa,CAAA,4EATFf,IAAS,4BAA8B,KAAE,EAAA,GAAA,eAAA,uTAnB5D,GAAK"}

package/dist/radiogroup/RadioGroup.svelte

@@ -0,0 +1,219 @@
+<svelte:options
+  customElement={{
+    tag: 'm-radio-group',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  import type { RadioGroupOption } from './radioGroup.types';
+
+  interface Props {
+    id: string;
+    selectedvalue: string;
+    options: Array<RadioGroupOption>;
+    legend: string;
+    inline: boolean;
+    isinvalid?: boolean;
+  }
+
+  let {
+    id,
+    selectedvalue,
+    options,
+    legend,
+    inline,
+    isinvalid = false,
+  }: Props = $props();
+
+  let selectedValue: string | undefined = $state(selectedvalue);
+
+  function onChange(value: string) {
+    selectedValue = value;
+    // dispatch('change', selectedValue);
+  }
+</script>
+
+<div {id} class="radio-group-container">
+  <fieldset class="mc-field mc-field--group">
+    {#if legend && legend.length}
+      <legend class="mc-field__legend">
+        {legend}
+      </legend>
+    {/if}
+
+    <div class="mc-field__content {inline ? 'mc-field__content--inline' : ''}">
+      {#each options as opt (opt.id)}
+        <div class="mc-radio mc-field__item">
+          <input
+            type="radio"
+            class="mc-radio__input"
+            class:is-invalid={isinvalid}
+            id={opt.id}
+            name={opt.name}
+            bind:group={selectedValue}
+            value={opt.value}
+            disabled={opt.disabled}
+            onchange={() => onChange(opt.value)}
+          />
+          <label for={opt.id} class="mc-radio__label">{opt.label}</label>
+        </div>
+      {/each}
+    </div>
+  </fieldset>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-radio {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+.mc-radio__label {
+  font-size: 1rem;
+  line-height: 1.3;
+  color: var(--forms-color-text-default, #000000);
+  cursor: pointer;
+}
+.mc-radio__input {
+  appearance: none;
+  margin: 0;
+  cursor: pointer;
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 0.125rem solid var(--forms-color-border-default, #666666);
+  border-radius: 100%;
+  transition: all ease 200ms;
+  height: 1.25rem;
+  width: 1.25rem;
+  position: relative;
+}
+.mc-radio__input::before {
+  border-radius: 100%;
+  content: "";
+  display: block;
+  height: 0.5rem;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+}
+.mc-radio__input:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-radio__input: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-radio__input:checked {
+  background-color: var(--forms-color-background-checked, #117f03);
+}
+.mc-radio__input:checked::before {
+  background-color: var(--forms-color-background-default, #ffffff);
+}
+.mc-radio__input:checked, .mc-radio__input:disabled {
+  border-color: transparent;
+}
+.mc-radio__input:disabled {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+}
+.mc-radio__input:disabled:checked::before {
+  background-color: var(--forms-color-icon-disabled, #737373);
+}
+.mc-radio__input:disabled + .mc-radio__label {
+  color: var(--forms-color-text-disabled, #737373);
+  cursor: not-allowed;
+}
+.mc-radio__input:not(:disabled):checked:hover {
+  background-color: var(--forms-color-background-checked-hover, #006902);
+}
+.mc-radio__input.is-invalid:not(:checked) {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+}
+.mc-radio__input.is-invalid:not(:checked):hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+}
+
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-left: 0;
+  padding-right: 0;
+}
+.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
+  margin-top: 0.5rem;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__container--inline, .mc-field__element--inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+  margin-right: 1rem;
+}
+.mc-field__item {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.mc-field__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+.mc-field__validation-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field--group {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+
+/* stylelint-enable string-no-newline */</style>

package/dist/radiogroup/RadioGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { RadioGroupOption } from './radioGroup.types';
+interface Props {
+    id: string;
+    selectedvalue: string;
+    options: Array<RadioGroupOption>;
+    legend: string;
+    inline: boolean;
+    isinvalid?: boolean;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/radiogroup/RadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzD,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAqDH,QAAA,MAAM,UAAU,2CAAsC,CAAC;AACvD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/radiogroup/radioGroup.types.d.ts

@@ -0,0 +1,9 @@
+export interface RadioGroupOption {
+    id: string | undefined;
+    name?: string | undefined;
+    label?: string;
+    value: string;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+}
+//# sourceMappingURL=radioGroup.types.d.ts.map

package/dist/radiogroup/radioGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioGroup.types.d.ts","sourceRoot":"","sources":["../../src/components/radiogroup/radioGroup.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B"}

package/dist/radiogroup/radioGroup.types.js

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

package/dist/{components/select → select}/Select.js

@@ -1,4 +1,4 @@
-import{x as M,l as E,y as j,c as O,p as D,a as F,b as u,z as I,A as G,t as w,f as g,k as H,B as J,m,g as p,h as K,i as v,e as _,s as N,r as x,C as P,j as C}from"../../custom-element.js";import{i as Q}from"../../if.js";import{e as R,i as T}from"../../each.js";import{s as U}from"../../attributes.js";function S(e,o,t){if(e.multiple)return X(e,o);for(var l of e.options){var a=b(l);if(j(a,o)){l.selected=!0;return}}(!t||o!==void 0)&&(e.selectedIndex=-1)}function V(e,o){E(()=>{var t=new MutationObserver(()=>{var l=e.__value;S(e,l)});return t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),()=>{t.disconnect()}})}function W(e,o,t=o){var l=!0;M(e,"change",a=>{var n=a?"[selected]":":checked",d;if(e.multiple)d=[].map.call(e.querySelectorAll(n),b);else{var f=e.querySelector(n)??e.querySelector("option:not([disabled])");d=f&&b(f)}t(d)}),E(()=>{var a=o();if(S(e,a,l),l&&a===void 0){var n=e.querySelector(":checked");n!==null&&(a=b(n),t(a))}e.__value=a,l=!1}),V(e)}function X(e,o){for(var t of e.options)t.selected=~o.indexOf(b(t))}function b(e){return"__value"in e?e.__value:e.value}var Y=w("<option disabled selected> </option>"),Z=w("<option> </option>"),$=w("<select><!><!></select>");const ee={hash:"svelte-i0s2u",code:`/**
+import{x as M,l as E,y as j,c as O,p as D,a as F,b as u,z as I,A as G,t as w,f as g,k as H,B as J,m,g as p,h as K,i as v,e as _,s as N,r as x,C as P,j as C}from"../custom-element.js";import{i as Q}from"../if.js";import{e as R,i as T}from"../each.js";import{s as U}from"../attributes.js";function S(e,o,t){if(e.multiple)return X(e,o);for(var l of e.options){var a=b(l);if(j(a,o)){l.selected=!0;return}}(!t||o!==void 0)&&(e.selectedIndex=-1)}function V(e,o){E(()=>{var t=new MutationObserver(()=>{var l=e.__value;S(e,l)});return t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),()=>{t.disconnect()}})}function W(e,o,t=o){var l=!0;M(e,"change",a=>{var n=a?"[selected]":":checked",d;if(e.multiple)d=[].map.call(e.querySelectorAll(n),b);else{var f=e.querySelector(n)??e.querySelector("option:not([disabled])");d=f&&b(f)}t(d)}),E(()=>{var a=o();if(S(e,a,l),l&&a===void 0){var n=e.querySelector(":checked");n!==null&&(a=b(n),t(a))}e.__value=a,l=!1}),V(e)}function X(e,o){for(var t of e.options)t.selected=~o.indexOf(b(t))}function b(e){return"__value"in e?e.__value:e.value}var Y=w("<option disabled selected> </option>"),Z=w("<option> </option>"),$=w("<select><!><!></select>");const ee={hash:"svelte-i0s2u",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-select.svelte-i0s2u {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height: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:1px solid var(--forms-color-border-default, #666666);border-radius: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-i0s2u:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-i0s2u: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-i0s2u: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);}.mc-select--readonly.svelte-i0s2u {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-i0s2u {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-select.is-invalid.svelte-i0s2u:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}.mc-select--s.svelte-i0s2u {font-size:0.875rem;line-height:1.3;height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}

package/dist/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../node_modules/svelte/src/internal/client/dom/elements/bindings/select.js","../../src/components/select/Select.svelte"],"sourcesContent":["import { effect } from '../../../reactivity/effects.js';\nimport { listen_to_event_and_reset_event } from './shared.js';\nimport { untrack } from '../../../runtime.js';\nimport { is } from '../../../proxy.js';\n\n/**\n * Selects the correct option(s) (depending on whether this is a multiple select)\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n * @param {boolean} [mounting]\n */\nexport function select_option(select, value, mounting) {\n\tif (select.multiple) {\n\t\treturn select_options(select, value);\n\t}\n\n\tfor (var option of select.options) {\n\t\tvar option_value = get_option_value(option);\n\t\tif (is(option_value, value)) {\n\t\t\toption.selected = true;\n\t\t\treturn;\n\t\t}\n\t}\n\n\tif (!mounting || value !== undefined) {\n\t\tselect.selectedIndex = -1; // no option should be selected\n\t}\n}\n\n/**\n * Selects the correct option(s) if `value` is given,\n * and then sets up a mutation observer to sync the\n * current selection to the dom when it changes. Such\n * changes could for example occur when options are\n * inside an `#each` block.\n * @template V\n * @param {HTMLSelectElement} select\n * @param {() => V} [get_value]\n */\nexport function init_select(select, get_value) {\n\tlet mounting = true;\n\teffect(() => {\n\t\tif (get_value) {\n\t\t\tselect_option(select, untrack(get_value), mounting);\n\t\t}\n\t\tmounting = false;\n\n\t\tvar observer = new MutationObserver(() => {\n\t\t\t// @ts-ignore\n\t\t\tvar value = select.__value;\n\t\t\tselect_option(select, value);\n\t\t\t// Deliberately don't update the potential binding value,\n\t\t\t// the model should be preserved unless explicitly changed\n\t\t});\n\n\t\tobserver.observe(select, {\n\t\t\t// Listen to option element changes\n\t\t\tchildList: true,\n\t\t\tsubtree: true, // because of <optgroup>\n\t\t\t// Listen to option element value attribute changes\n\t\t\t// (doesn't get notified of select value changes,\n\t\t\t// because that property is not reflected as an attribute)\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['value']\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t});\n}\n\n/**\n * @param {HTMLSelectElement} select\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_select_value(select, get, set = get) {\n\tvar mounting = true;\n\n\tlisten_to_event_and_reset_event(select, 'change', (is_reset) => {\n\t\tvar query = is_reset ? '[selected]' : ':checked';\n\t\t/** @type {unknown} */\n\t\tvar value;\n\n\t\tif (select.multiple) {\n\t\t\tvalue = [].map.call(select.querySelectorAll(query), get_option_value);\n\t\t} else {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option =\n\t\t\t\tselect.querySelector(query) ??\n\t\t\t\t// will fall back to first non-disabled option if no option is selected\n\t\t\t\tselect.querySelector('option:not([disabled])');\n\t\t\tvalue = selected_option && get_option_value(selected_option);\n\t\t}\n\n\t\tset(value);\n\t});\n\n\t// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated\n\teffect(() => {\n\t\tvar value = get();\n\t\tselect_option(select, value, mounting);\n\n\t\t// Mounting and value undefined -> take selection from dom\n\t\tif (mounting && value === undefined) {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option = select.querySelector(':checked');\n\t\t\tif (selected_option !== null) {\n\t\t\t\tvalue = get_option_value(selected_option);\n\t\t\t\tset(value);\n\t\t\t}\n\t\t}\n\n\t\t// @ts-ignore\n\t\tselect.__value = value;\n\t\tmounting = false;\n\t});\n\n\t// don't pass get_value, we already initialize it in the effect above\n\tinit_select(select);\n}\n\n/**\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n */\nfunction select_options(select, value) {\n\tfor (var option of select.options) {\n\t\t// @ts-ignore\n\t\toption.selected = ~value.indexOf(get_option_value(option));\n\t}\n}\n\n/** @param {HTMLOptionElement} option */\nfunction get_option_value(option) {\n\t// __value only exists if the <option> has a value attribute\n\tif ('__value' in option) {\n\t\treturn option.__value;\n\t} else {\n\t\treturn option.value;\n\t}\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    options: Array<SelectOption>;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isinvalid = false,\n    disabled = false,\n    options,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y_no_onchange -->\n<select\n  {id}\n  class={setClasses(isinvalid, size)}\n  {disabled}\n  bind:value={valueSelected}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["select_option","select","value","mounting","select_options","option","option_value","get_option_value","is","init_select","get_value","effect","observer","bind_select_value","get","set","listen_to_event_and_reset_event","is_reset","query","selected_option","id","$.prop","$$props","valueselected","placeholder","size","isinvalid","disabled","options","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","option_1_value","$.set_text","text_1","$.bind_select_value","$$value"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/select/Select.svelte

@@ -0,0 +1,134 @@
+<svelte:options
+  customElement={{
+    tag: 'm-select',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import type { SelectOption, SelectSize } from './select.types';
+
+  interface Props {
+    id: string;
+    name: string;
+    valueselected?: string;
+    placeholder: string;
+    size?: SelectSize;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    options: Array<SelectOption>;
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    valueselected = '',
+    placeholder,
+    size = 'm',
+    isinvalid = false,
+    disabled = false,
+    options,
+  }: Props = $props();
+  let valueSelected = $state(valueselected);
+
+  function setClasses(isinvalid: boolean, size: SelectSize): string {
+    const classes = ['mc-select'];
+
+    if (isinvalid) {
+      classes.push('is-invalid');
+    }
+    if (size) {
+      classes.push(`mc-select--${size}`);
+    }
+
+    return classes.join(' ');
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_onchange -->
+<select
+  {id}
+  class={setClasses(isinvalid, size)}
+  {disabled}
+  bind:value={valueSelected}
+>
+  {#if placeholder}
+    <option value="" disabled selected>
+      -- {placeholder} --
+    </option>
+  {/if}
+
+  {#each options as opt}
+    <option disabled={opt.disabled} value={opt.value}>
+      {opt.text}
+    </option>
+  {/each}
+</select>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-select {
+  appearance: none;
+  font-family: inherit;
+  transition: box-shadow 200ms ease;
+  font-size: 1rem;
+  line-height: 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: 1px solid var(--forms-color-border-default, #666666);
+  border-radius: 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:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-select: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: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);
+}
+.mc-select--readonly {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-select.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
+}
+.mc-select.is-invalid:hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);
+}
+.mc-select--s {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  height: 2rem;
+  padding: 0 2rem 0 0.5rem;
+  background-position: right 0.5rem center;
+}
+
+/* stylelint-enable string-no-newline */</style>

package/dist/select/Select.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SelectOption, SelectSize } from './select.types';
+interface Props {
+    id: string;
+    name: string;
+    valueselected?: string;
+    placeholder: string;
+    size?: SelectSize;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    options: Array<SelectOption>;
+    [key: string]: any;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/select/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG7D,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA2DH,QAAA,MAAM,MAAM,2CAAsC,CAAC;AACnD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/select/select.types.d.ts

@@ -0,0 +1,9 @@
+export interface SelectOption {
+    id: string | undefined;
+    text: string;
+    value: string;
+    attributes: string | undefined;
+    disabled: boolean | undefined;
+}
+export type SelectSize = 's' | 'm';
+//# sourceMappingURL=select.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../src/components/select/select.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B;AACD,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/select/select.types.js

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

package/dist/{components/statusbadge → statusbadge}/StatusBadge.js

@@ -1,4 +1,4 @@
-import{c as u,p as m,a as g,b as i,t as b,e as c,f as v,g as f,h as p,i as k,s as h,r as d,k as x}from"../../custom-element.js";import{a as w}from"../../slot.js";import{S as _}from"./StatusDot.js";var y=b('<div><!> <span class="mc-status-badge__label svelte-1x1mo7s"><!></span></div>');const S={hash:"svelte-1x1mo7s",code:`/**
+import{c as u,p as m,a as g,b as i,t as b,e as c,f as v,g as f,h as p,i as k,s as h,r as d,k as x}from"../custom-element.js";import{a as w}from"../slot.js";import{S as _}from"./StatusDot.js";var y=b('<div><!> <span class="mc-status-badge__label svelte-1x1mo7s"><!></span></div>');const S={hash:"svelte-1x1mo7s",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-status-badge.svelte-1x1mo7s {background-color:var(--status-badge-color-background-information, #e1f3f9);border-radius:0.25rem;font-weight:400;font-size:0.875rem;display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1x1mo7s {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1x1mo7s::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1x1mo7s {background-color:var(--status-badge-color-background-success, #ebf5de);}.mc-status-badge--danger.svelte-1x1mo7s {background-color:var(--status-badge-color-background-danger, #fdeaea);}.mc-status-badge--warning.svelte-1x1mo7s {background-color:var(--status-badge-color-background-warning, #fdf1e8);}.mc-status-badge--neutral.svelte-1x1mo7s {background-color:var(--status-badge-color-background-neutral, #e6e6e6);}.mc-status-dot.svelte-1x1mo7s {background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-1x1mo7s {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1x1mo7s {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1x1mo7s {background-color:var(--status-dot-color-background-success, #117f03);}.mc-status-dot--danger.svelte-1x1mo7s {background-color:var(--status-dot-color-background-danger, #c61112);}.mc-status-dot--warning.svelte-1x1mo7s {background-color:var(--status-dot-color-background-warning, #b64f00);}.mc-status-dot--neutral.svelte-1x1mo7s {background-color:var(--status-dot-color-background-neutral, #666666);}`};function z(a,e){m(e,!0),g(a,S);let t=i(e,"style",7);var s=y(),o=c(s);_(o,{get style(){return t()},size:"m"});var r=h(o,2),l=c(r);return w(l,e,"default",{}),d(r),d(s),v(()=>x(s,1,`mc-status-badge ${(t()?`mc-status-badge--${t()}`:"")??""}`,"svelte-1x1mo7s")),f(a,s),p({get style(){return t()},set style(n){t(n),k()}})}customElements.define("m-status-badge",u(z,{style:{}},["default"],[],!0));
 //# sourceMappingURL=StatusBadge.js.map

package/dist/statusbadge/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sources":["../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle } from './badge.types';\n  import StatusDot from './StatusDot.svelte';\n\n  interface Props {\n    style: BadgeStyle;\n  }\n\n  let { style }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {style ? `mc-status-badge--${style}` : ''}\">\n  <StatusDot {style} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props"],"mappings":";;mrDAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,oJAGgBF,EAAK,EAAA,oBAAuBA,EAAK,CAAA,GAAK,KAAE,EAAA,GAAA,gBAAA,CAAA"}

package/dist/statusbadge/StatusBadge.svelte

@@ -0,0 +1,81 @@
+<svelte:options customElement={{ tag: 'm-status-badge' }} />
+
+<script lang="ts">
+  import type { BadgeStyle } from './badge.types';
+  import StatusDot from './StatusDot.svelte';
+
+  interface Props {
+    style: BadgeStyle;
+  }
+
+  let { style }: Props = $props();
+</script>
+
+<div class="mc-status-badge {style ? `mc-status-badge--${style}` : ''}">
+  <StatusDot {style} size="m" />
+  <span class="mc-status-badge__label"><slot /></span>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-status-badge {
+  background-color: var(--status-badge-color-background-information, #e1f3f9);
+  border-radius: 0.25rem;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  text-transform: lowercase;
+  white-space: nowrap;
+  min-height: 1.5rem;
+}
+.mc-status-badge__label {
+  color: var(--status-badge-color-label, #000000);
+}
+.mc-status-badge__label::first-letter {
+  text-transform: uppercase;
+}
+.mc-status-badge--success {
+  background-color: var(--status-badge-color-background-success, #ebf5de);
+}
+.mc-status-badge--danger {
+  background-color: var(--status-badge-color-background-danger, #fdeaea);
+}
+.mc-status-badge--warning {
+  background-color: var(--status-badge-color-background-warning, #fdf1e8);
+}
+.mc-status-badge--neutral {
+  background-color: var(--status-badge-color-background-neutral, #e6e6e6);
+}
+
+.mc-status-dot {
+  background-color: var(--status-dot-color-background-information, #0074aa);
+  height: 0.5rem;
+  width: 0.5rem;
+  border-radius: 100%;
+  display: inline-block;
+}
+.mc-status-dot--s {
+  height: 0.25rem;
+  width: 0.25rem;
+}
+.mc-status-dot--l {
+  height: 1rem;
+  width: 1rem;
+}
+.mc-status-dot--success {
+  background-color: var(--status-dot-color-background-success, #117f03);
+}
+.mc-status-dot--danger {
+  background-color: var(--status-dot-color-background-danger, #c61112);
+}
+.mc-status-dot--warning {
+  background-color: var(--status-dot-color-background-warning, #b64f00);
+}
+.mc-status-dot--neutral {
+  background-color: var(--status-dot-color-background-neutral, #666666);
+}</style>

package/dist/statusbadge/StatusBadge.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { BadgeStyle } from './badge.types';
+interface Props {
+    style: BadgeStyle;
+}
+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 StatusBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type StatusBadge = InstanceType<typeof StatusBadge>;
+export default StatusBadge;
+//# sourceMappingURL=StatusBadge.svelte.d.ts.map

package/dist/statusbadge/StatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAI9C,UAAU,KAAK;IACb,KAAK,EAAE,UAAU,CAAC;CACnB;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,WAAW;;;;;;UAAmF,CAAC;AACnF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/{components/statusbadge → statusbadge}/StatusDot.js

@@ -1,4 +1,4 @@
-import{c as u,p as l,a as n,b as c,t as m,f as i,g as b,h as g,i as d,k as v}from"../../custom-element.js";var w=m("<div></div>");const h={hash:"svelte-bwqsm9",code:`/**
+import{c as u,p as l,a as n,b as c,t as m,f as i,g as b,h as g,i as d,k as v}from"../custom-element.js";var w=m("<div></div>");const h={hash:"svelte-bwqsm9",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-status-dot.svelte-bwqsm9 {background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-bwqsm9 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-bwqsm9 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-bwqsm9 {background-color:var(--status-dot-color-background-success, #117f03);}.mc-status-dot--danger.svelte-bwqsm9 {background-color:var(--status-dot-color-background-danger, #c61112);}.mc-status-dot--warning.svelte-bwqsm9 {background-color:var(--status-dot-color-background-warning, #b64f00);}.mc-status-dot--neutral.svelte-bwqsm9 {background-color:var(--status-dot-color-background-neutral, #666666);}`};function f(o,e){l(e,!0),n(o,h);let t=c(e,"style",7),s=c(e,"size",7);var r=w();return i(()=>v(r,1,`mc-status-dot ${(s()?`mc-status-dot--${s()}`:"")??""}  ${(t()?`mc-status-dot--${t()}`:"")??""}`,"svelte-bwqsm9")),b(o,r),g({get style(){return t()},set style(a){t(a),d()},get size(){return s()},set size(a){s(a),d()}})}customElements.define("m-status-dot",u(f,{style:{},size:{}},[],[],!1));export{f as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/statusbadge/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","sources":["../../src/components/statusbadge/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './badge.types';\n\n  interface Props {\n    style: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { style, size }: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style\n    ? `mc-status-dot--${style}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props","size"],"mappings":";;8vBAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,iDAIKC,EAAI,EAAA,kBAAqBA,EAAI,CAAK,GAAA,aAAMH,EACxC,EAAA,kBAAAA,MAClB,KAAE,EAAA,GAAA,eAAA,CAAA"}