@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/starrating/StarRating.js.map

@@ -1 +1 @@
-{"version":3,"file":"StarRating.js","sources":["../../../src/components/starrating/StarRating.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-star-rating',\n    props: {\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { Star24, StarFilled24, StarHalf24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The current rating value of the component.\n     */\n    rating: number;\n    /**\n     * Determines whether the rating is interactive or read-only.\n     * When true, all user interactions (click, hover, keyboard) are disabled.\n     * Automatically set to true when `compact`, `href`, or `information` are provided.\n     */\n    readonly?: boolean;\n    /**\n     * Defines the visual size of the star icons and the accompanying text.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * Enables a compact display mode that shows only one star instead of five.\n     * Typically used for summaries or quick visual cues.\n     * When enabled, the component automatically becomes read-only.\n     */\n    compact?: boolean;\n    /**\n     * Specifies the color scheme of the stars.\n     */\n    appearance?: 'standard' | 'accent';\n    /**\n     * Optional text displayed next to the star rating.\n     * If provided, the component automatically becomes read-only.\n     */\n    text?: string;\n    /**\n     * URL for the link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  }\n\n  let {\n    rating = $bindable(),\n    readonly,\n    size = 'm',\n    compact,\n    appearance = 'standard',\n    text,\n    href,\n    target,\n  }: Props = $props();\n\n  let hoverValue: number | null = $state(null);\n  const rootTag = $derived(href ? 'a' : 'div');\n\n  const isReadonly = $derived([readonly, compact, href, text].some(Boolean));\n\n  const classObject = $derived({\n    'mc-star-rating': true,\n    'mc-star-rating--link': href,\n    'mc-star-rating--slider': !isReadonly,\n    [`mc-star-rating--${size}`]: size,\n    [`mc-star-rating--${appearance}`]: appearance,\n  });\n\n  const displayValue = $derived(hoverValue ?? rating);\n  const maxValue = $derived(compact ? 1 : 5);\n\n  function getStarComponent(index: number) {\n    if (compact || displayValue >= index + 1) {\n      return StarFilled24;\n    } else if (isReadonly && displayValue >= index + 0.5) {\n      return StarHalf24;\n    } else {\n      return Star24;\n    }\n  }\n\n  function onHover(index: number) {\n    hoverValue = index + 1;\n  }\n\n  function clearHover() {\n    hoverValue = null;\n  }\n\n  function onClick(index: number) {\n    rating = index + 1;\n  }\n\n  function onKeydown(e: KeyboardEvent) {\n    const key = e.key;\n    let newValue = Math.floor(rating);\n\n    if (key === 'ArrowRight') {\n      newValue = Math.min(maxValue, newValue + 1);\n    } else if (key === 'ArrowLeft') {\n      newValue = Math.max(1, newValue - 1);\n    } else return;\n\n    rating = newValue;\n\n    e.preventDefault();\n  }\n\n  const wrapperAttrs = $derived(\n    isReadonly\n      ? {\n          tabindex: -1,\n        }\n      : {\n          onkeydown: onKeydown,\n          onmouseleave: clearHover,\n          onblur: clearHover,\n          tabindex: 0,\n          'aria-valuemin': 0,\n          'aria-valuemax': maxValue,\n          'aria-valuenow': rating,\n          'aria-readonly': false,\n        },\n  );\n</script>\n\n<svelte:element this={rootTag} {href} {target} class={classObject}>\n  <div\n    class=\"mc-star-rating__wrapper\"\n    role={isReadonly ? 'img' : 'slider'}\n    aria-label={`Note ${displayValue} sur ${maxValue}`}\n    {...wrapperAttrs}\n  >\n    {#each Array.from({ length: maxValue }).keys() as index (index)}\n      {@const Star = getStarComponent(index)}\n\n      <span\n        class=\"mc-star-rating__icon\"\n        {...!isReadonly\n          ? {\n              onmousemove: () => onHover(index),\n              onclick: () => onClick(index),\n            }\n          : {}}\n      >\n        <Star />\n      </span>\n    {/each}\n  </div>\n\n  {#if text || href}\n    <span class=\"mc-star-rating__info\">\n      {text || href}\n    </span>\n  {/if}\n</svelte:element>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/star-rating';\n\n  .mc-star-rating__icon {\n    :global(svg) {\n      height: 100%;\n      width: 100%;\n    }\n  }\n</style>\n"],"names":["rating","$.prop","$$props","readonly","size","compact","appearance","text","href","target","hoverValue","$.state","rootTag","$.derived","isReadonly","classObject","displayValue","$.get","maxValue","getStarComponent","index","StarFilled24","StarHalf24","Star24","onHover","clearHover","$.set","onClick","onKeydown","key","newValue","wrapperAttrs","$$element","$$anchor","div","$.first_child","fragment_1","$.each","Star","span","root_2","node_1","$.child","Star_1","$.reset","$.append","node_2","$.sibling","span_1","root_3","$.template_effect","$.set_text","text_1","$$render","consequent","customElementForwardEvents"],"mappings":";;ylDAWA,qBAgDIA,EAAMC,EAAAC,EAAA,SAAA,EAAA,EACNC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,eAAO,GAAG,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,qBAAa,UAAU,EACvBC,EAAIN,EAAAC,EAAA,OAAA,CAAA,EACJM,EAAIP,EAAAC,EAAA,OAAA,CAAA,EACJO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EAGJQ,EAA4BC,GAAO,IAAI,EACrC,MAAAC,EAAOC,EAAA,IAAYL,EAAI,EAAG,IAAM,KAAK,EAErCM,EAAUD,EAAA,IAAA,CAAaV,EAAQ,EAAEE,EAAO,EAAEG,EAAI,EAAED,EAAI,CAAA,EAAE,KAAK,OAAO,CAAA,EAElEQ,EAAWF,EAAA,KAAA,CACf,iBAAkB,GAClB,uBAAwBL,EAAI,EAC5B,4BAA2BM,CAAU,EACjB,CAAA,mBAAAV,OAASA,EAAI,EACb,CAAA,mBAAAE,EAAU,KAAKA,EAAU,KAGzCU,EAAYH,EAAA,IAAAI,EAAYP,CAAU,GAAIV,GAAM,EAC5CkB,EAAQL,EAAA,IAAYR,EAAO,EAAG,EAAI,CAAC,WAEhCc,EAAiBC,EAAe,CACnC,OAAAf,EAAO,KAAIW,CAAY,GAAII,EAAQ,EAC9BC,GACRJ,EAAUH,CAAU,GAAAG,EAAID,CAAY,GAAII,EAAQ,GACxCE,GAEAC,EAEX,UAESC,EAAQJ,EAAe,GAC9BV,EAAaU,EAAQ,CAAC,CACxB,CAES,SAAAK,GAAa,CACpBC,EAAAhB,EAAa,IAAI,CACnB,UAESiB,EAAQP,EAAe,CAC9BpB,EAASoB,EAAQ,CAAC,CACpB,UAESQ,EAAU,EAAkB,OAC7BC,EAAM,EAAE,IACV,IAAAC,EAAW,KAAK,MAAM9B,EAAM,CAAA,KAE5B6B,IAAQ,aACVC,EAAW,KAAK,MAAIZ,CAAQ,EAAEY,EAAW,CAAC,UACjCD,IAAQ,YACjBC,EAAW,KAAK,IAAI,EAAGA,EAAW,CAAC,MACpC,QAED9B,EAAS8B,CAAQ,EAEjB,EAAE,eAAc,CAClB,CAEM,MAAAC,EAAYlB,EAAA,IAAAI,EAChBH,CAAA,EAEM,CAAA,WAAY,GAGZ,UAAWc,EACX,aAAcH,EACd,OAAQA,EACR,SAAU,EACV,gBAAiB,EACjB,kBAAiBP,CAAQ,EACzB,gBAAiBlB,EAAM,EACvB,gBAAiB,oJA1EhB,IAAG,4GAEG,WAAU,sLA6ELY,CAAO,EAAA,GAAA,CAAAoB,EAAAC,IAAA,gBAAGzB,EAAI,EAAA,OAAGC,EAAM,EAAA,MAAAQ,EAASF,CAAW,IAAA,OAAA,OAAA,OAAA,gBAAA,aAC9DmB,EAAAC,EAAAC,CAAA,IAAAF,+CAEOpB,CAAU,EAAG,MAAQ,SACP,aAAA,QAAAG,EAAAD,CAAY,WAAQE,CAAQ,CAAA,QAC5Ca,CAAY,2CAJjBM,GAAAH,EAAA,GAAA,IAMQ,MAAM,KAAI,CAAG,OAAMjB,EAAEC,CAAQ,CAAA,CAAA,EAAI,OAAUE,GAAOA,KAAPA,IAAK,OAC7CkB,EAAIzB,EAAA,IAAGM,EAAiBC,CAAK,CAAA,EAEpC,IAAAmB,EAAAC,GAAA,IAAAD,qCAEM,GAAAtB,EAAAH,CAAA,MAEC,YAAW,IAAQU,EAAQJ,CAAK,EAChC,QAAO,IAAQO,EAAQP,CAAK,4CALnC,IAAAqB,EAAAC,EAAAH,CAAA,wBASEI,EAAIV,EAAA,EAAA,IATNW,EAAAL,CAAA,EAAAM,EAAAZ,EAAAM,CAAA,IATJK,EAAAV,CAAA,EAAA,IAAAY,EAAAC,GAAAb,EAAA,CAAA,iBAwBEc,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,EACFE,GAAA,IAAAC,GAAAC,EAAA7C,EAAI,GAAIC,EAAI,CAAA,CAAA,MADdwC,CAAI,aADFzC,EAAI,GAAIC,MAAI6C,EAAAC,CAAA,wBA1BX,mOAnIIC"}
+{"version":3,"file":"StarRating.js","sources":["../../../src/components/starrating/StarRating.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-star-rating',\n    props: {\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { Star24, StarFilled24, StarHalf24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The current rating value of the component.\n     */\n    rating: number;\n    /**\n     * Determines whether the rating is interactive or read-only.\n     * When true, all user interactions (click, hover, keyboard) are disabled.\n     * Automatically set to true when `compact`, `href`, or `information` are provided.\n     */\n    readonly?: boolean;\n    /**\n     * Defines the visual size of the star icons and the accompanying text.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * Enables a compact display mode that shows only one star instead of five.\n     * Typically used for summaries or quick visual cues.\n     * When enabled, the component automatically becomes read-only.\n     */\n    compact?: boolean;\n    /**\n     * Specifies the color scheme of the stars.\n     */\n    appearance?: 'standard' | 'accent';\n    /**\n     * Optional text displayed next to the star rating.\n     * If provided, the component automatically becomes read-only.\n     */\n    text?: string;\n    /**\n     * URL for the link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  }\n\n  let {\n    rating = $bindable(),\n    readonly,\n    size = 'm',\n    compact,\n    appearance = 'standard',\n    text,\n    href,\n    target,\n  }: Props = $props();\n\n  let hoverValue: number | null = $state(null);\n  const rootTag = $derived(href ? 'a' : 'div');\n\n  const isReadonly = $derived([readonly, compact, href, text].some(Boolean));\n\n  const classObject = $derived({\n    'mc-star-rating': true,\n    'mc-star-rating--link': href,\n    'mc-star-rating--slider': !isReadonly,\n    [`mc-star-rating--${size}`]: size,\n    [`mc-star-rating--${appearance}`]: appearance,\n  });\n\n  const displayValue = $derived(hoverValue ?? rating);\n  const maxValue = $derived(compact ? 1 : 5);\n\n  function getStarComponent(index: number) {\n    if (compact || displayValue >= index + 1) {\n      return StarFilled24;\n    } else if (isReadonly && displayValue >= index + 0.5) {\n      return StarHalf24;\n    } else {\n      return Star24;\n    }\n  }\n\n  function onHover(index: number) {\n    hoverValue = index + 1;\n  }\n\n  function clearHover() {\n    hoverValue = null;\n  }\n\n  function onClick(index: number) {\n    rating = index + 1;\n  }\n\n  function onKeydown(e: KeyboardEvent) {\n    const key = e.key;\n    let newValue = Math.floor(rating);\n\n    if (key === 'ArrowRight') {\n      newValue = Math.min(maxValue, newValue + 1);\n    } else if (key === 'ArrowLeft') {\n      newValue = Math.max(1, newValue - 1);\n    } else return;\n\n    rating = newValue;\n\n    e.preventDefault();\n  }\n\n  const wrapperAttrs = $derived(\n    isReadonly\n      ? {\n          tabindex: -1,\n        }\n      : {\n          onkeydown: onKeydown,\n          onmouseleave: clearHover,\n          onblur: clearHover,\n          tabindex: 0,\n          'aria-valuemin': 0,\n          'aria-valuemax': maxValue,\n          'aria-valuenow': rating,\n          'aria-readonly': false,\n        },\n  );\n</script>\n\n<svelte:element this={rootTag} {href} {target} class={classObject}>\n  <div\n    class=\"mc-star-rating__wrapper\"\n    role={isReadonly ? 'img' : 'slider'}\n    aria-label={`Note ${displayValue} sur ${maxValue}`}\n    {...wrapperAttrs}\n  >\n    {#each Array.from({ length: maxValue }).keys() as index (index)}\n      {@const Star = getStarComponent(index)}\n\n      <span\n        class=\"mc-star-rating__icon\"\n        {...!isReadonly\n          ? {\n              onmousemove: () => onHover(index),\n              onclick: () => onClick(index),\n            }\n          : {}}\n      >\n        <Star />\n      </span>\n    {/each}\n  </div>\n\n  {#if text || href}\n    <span class=\"mc-star-rating__info\">\n      {text || href}\n    </span>\n  {/if}\n</svelte:element>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/star-rating';\n\n  .mc-star-rating__icon {\n    :global(svg) {\n      height: 100%;\n      width: 100%;\n    }\n  }\n</style>\n"],"names":["rating","$.prop","$$props","readonly","size","compact","appearance","text","href","target","hoverValue","$.state","rootTag","$.derived","isReadonly","classObject","displayValue","$.get","maxValue","getStarComponent","index","StarFilled24","StarHalf24","Star24","onHover","clearHover","$.set","onClick","onKeydown","key","newValue","wrapperAttrs","$$element","$$anchor","div","$.first_child","fragment_1","$.each","Star","span","root_2","node_1","$.child","Star_1","$.reset","$.append","node_2","$.sibling","span_1","root_3","$.template_effect","$.set_text","text_1","$$render","consequent","customElementForwardEvents"],"mappings":";;ylDAWA,qBAgDIA,EAAMC,EAAAC,EAAA,SAAA,EAAA,EACNC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,eAAO,GAAG,EACVC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,qBAAa,UAAU,EACvBC,EAAIN,EAAAC,EAAA,OAAA,CAAA,EACJM,EAAIP,EAAAC,EAAA,OAAA,CAAA,EACJO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EAGJQ,EAA4BC,GAAO,IAAI,EACrC,MAAAC,EAAOC,EAAA,IAAYL,EAAI,EAAG,IAAM,KAAK,EAErCM,EAAUD,EAAA,IAAA,CAAaV,EAAQ,EAAEE,EAAO,EAAEG,EAAI,EAAED,EAAI,CAAA,EAAE,KAAK,OAAO,CAAA,EAElEQ,EAAWF,EAAA,KAAA,CACf,iBAAkB,GAClB,uBAAwBL,EAAI,EAC5B,4BAA2BM,CAAU,EACjB,CAAA,mBAAAV,OAASA,EAAI,EACb,CAAA,mBAAAE,EAAU,KAAKA,EAAU,KAGzCU,EAAYH,EAAA,IAAAI,EAAYP,CAAU,GAAIV,GAAM,EAC5CkB,EAAQL,EAAA,IAAYR,EAAO,EAAG,EAAI,CAAC,WAEhCc,EAAiBC,EAAe,CACnC,OAAAf,EAAO,KAAIW,CAAY,GAAII,EAAQ,EAC9BC,GACRJ,EAAUH,CAAU,GAAAG,EAAID,CAAY,GAAII,EAAQ,GACxCE,GAEAC,EAEX,UAESC,EAAQJ,EAAe,GAC9BV,EAAaU,EAAQ,CAAC,CACxB,CAES,SAAAK,GAAa,CACpBC,EAAAhB,EAAa,IAAI,CACnB,UAESiB,EAAQP,EAAe,CAC9BpB,EAASoB,EAAQ,CAAC,CACpB,UAESQ,EAAU,EAAkB,OAC7BC,EAAM,EAAE,IACV,IAAAC,EAAW,KAAK,MAAM9B,EAAM,CAAA,KAE5B6B,IAAQ,aACVC,EAAW,KAAK,MAAIZ,CAAQ,EAAEY,EAAW,CAAC,UACjCD,IAAQ,YACjBC,EAAW,KAAK,IAAI,EAAGA,EAAW,CAAC,MACpC,QAED9B,EAAS8B,CAAQ,EAEjB,EAAE,eAAc,CAClB,CAEM,MAAAC,EAAYlB,EAAA,IAAAI,EAChBH,CAAA,EAEM,CAAA,WAAY,GAGZ,UAAWc,EACX,aAAcH,EACd,OAAQA,EACR,SAAU,EACV,gBAAiB,EACjB,kBAAiBP,CAAQ,EACzB,gBAAiBlB,EAAM,EACvB,gBAAiB,oJA1EhB,IAAG,4GAEG,WAAU,sLA6ELY,CAAO,EAAA,GAAA,CAAAoB,EAAAC,IAAA,gBAAGzB,EAAI,EAAA,OAAGC,EAAM,EAAA,MAAAQ,EAASF,CAAW,IAAA,OAAA,OAAA,OAAA,gBAAA,aAC9DmB,EAAAC,EAAAC,CAAA,IAAAF,+CAEOpB,CAAU,EAAG,MAAQ,SACP,aAAA,QAAAG,EAAAD,CAAY,WAAQE,CAAQ,CAAA,QAC5Ca,CAAY,2CAJjBM,GAAAH,EAAA,GAAA,IAMQ,MAAM,KAAI,CAAG,OAAMjB,EAAEC,CAAQ,CAAA,CAAA,EAAI,OAAUE,GAAOA,KAAPA,IAAK,OAC7CkB,EAAIzB,EAAA,IAAGM,EAAiBC,CAAK,CAAA,EAEpC,IAAAmB,EAAAC,GAAA,IAAAD,qCAEM,GAAAtB,EAAAH,CAAA,MAEC,YAAW,IAAQU,EAAQJ,CAAK,EAChC,QAAO,IAAQO,EAAQP,CAAK,4CALnC,IAAAqB,EAAAC,EAAAH,CAAA,wBASEI,EAAIV,EAAA,EAAA,IATNW,EAAAL,CAAA,EAAAM,EAAAZ,EAAAM,CAAA,IATJK,EAAAV,CAAA,EAAA,IAAAY,EAAAC,EAAAb,EAAA,CAAA,iBAwBEc,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,EACFE,GAAA,IAAAC,GAAAC,EAAA7C,EAAI,GAAIC,EAAI,CAAA,CAAA,MADdwC,CAAI,aADFzC,EAAI,GAAIC,MAAI6C,EAAAC,CAAA,yBA1BX,8OAnIIC"}

package/dist/components/starrating/StarRating.stories.d.ts

@@ -4,11 +4,11 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
-export declare const AsInput: Story;
+export declare const Input: Story;
 export declare const SizeM: Story;
 export declare const SizeL: Story;
-export declare const StandardAppearance: Story;
-export declare const WithText: Story;
-export declare const WithLink: Story;
-export declare const CompactModeWithText: Story;
+export declare const Standard: Story;
+export declare const Text: Story;
+export declare const Link: Story;
+export declare const Compact: Story;
 //# sourceMappingURL=StarRating.stories.d.ts.map

package/dist/components/starrating/StarRating.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StarRating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/starrating/StarRating.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAMjC,CAAC"}
+{"version":3,"file":"StarRating.stories.d.ts","sourceRoot":"","sources":["../../../src/components/starrating/StarRating.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/dist/components/starrating/StarRating.stories.js

@@ -40,7 +40,7 @@ const meta = {
 };
 export default meta;
 export const Default = {};
-export const AsInput = {
+export const Input = {
     args: {
         readonly: false,
         rating: 0,
@@ -56,25 +56,25 @@ export const SizeL = {
         size: 'l',
     },
 };
-export const StandardAppearance = {
+export const Standard = {
     args: {
         appearance: 'standard',
     },
 };
-export const WithText = {
+export const Text = {
     args: {
         appearance: 'accent',
         text: 'Additional text',
     },
 };
-export const WithLink = {
+export const Link = {
     args: {
         appearance: 'accent',
         text: 'Additional text',
         href: '#',
     },
 };
-export const CompactModeWithText = {
+export const Compact = {
     args: {
         compact: true,
         appearance: 'accent',

package/dist/components/statusbadge/StatusBadge.js

@@ -1,4 +1,4 @@
-import{c as v,p as m,a as h,b as l,s as p,t as y,f as k,g as w,h as _,i as x,d as u,j as b,r as n,e as $}from"../../custom-element.js";import{a as S}from"../../attributes.js";import{S as z}from"../statusdot/StatusDot.js";var D=_('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
+import{c as m,e as v,a as h,p as l,k as p,t as y,b as k,d as w,f as _,n as x,j as u,i as b,r as n,m as S}from"../../custom-element.js";import{a as $}from"../../attributes.js";import{S as z}from"../statusdot/StatusDot.js";var D=_('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-info, #e1f3f9);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;border-radius:var(--border-radius-s, 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-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function B(o,e){m(e,!0),h(o,j);let t=l(e,"status",7,"info"),a=l(e,"label",7),i=x(e,["$$slots","$$events","$$legacy","$$host","status","label"]);var g={get status(){return t()},set status(s="info"){t(s),b()},get label(){return a()},set label(s){a(s),b()}},r=D();S(r,()=>({class:["mc-status-badge",`mc-status-badge--${t()}`],...i}),void 0,void 0,void 0,"svelte-1oceydf");var d=u(r);z(d,{get status(){return t()},size:"m"});var c=p(d,2),f=u(c,!0);return n(c),n(r),y(()=>$(f,a())),k(o,r),w(g)}customElements.define("m-status-badge",v(B,{status:{},label:{}},[],[],!0));
+ */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-info, #e1f3f9);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;border-radius:var(--border-radius-s, 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-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function B(o,e){v(e,!0),h(o,j);let t=l(e,"status",7,"info"),a=l(e,"label",7),i=x(e,["$$slots","$$events","$$legacy","$$host","status","label"]);var g={get status(){return t()},set status(s="info"){t(s),b()},get label(){return a()},set label(s){a(s),b()}},r=D();$(r,()=>({class:["mc-status-badge",`mc-status-badge--${t()}`],...i}),void 0,void 0,void 0,"svelte-1oceydf");var d=u(r);z(d,{get status(){return t()},size:"m"});var c=p(d,2),f=u(c,!0);return n(c),n(r),y(()=>S(f,a())),k(o,r),w(g)}customElements.define("m-status-badge",m(B,{status:{},label:{}},[],[],{mode:"open"}));export{B as S};
 //# sourceMappingURL=StatusBadge.js.map

package/dist/components/statusdot/StatusDot.js

@@ -1,4 +1,4 @@
-import{c as l,p as n,a as m,b as c,f as v,g,h as p,i as b,j as u}from"../../custom-element.js";import{a as h}from"../../attributes.js";var f=p("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
+import{c as i,e as l,a as m,p as c,b as v,d as p,f as g,n as b,i as u}from"../../custom-element.js";import{a as f}from"../../attributes.js";var h=g("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){n(t,!0),m(o,k);let s=c(t,"size",7,"m"),a=c(t,"status",7,"info"),d=b(t,["$$slots","$$events","$$legacy","$$host","size","status"]);var i={get size(){return s()},set size(e="m"){s(e),u()},get status(){return a()},set status(e="info"){a(e),u()}},r=f();return h(r,()=>({class:["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${a()}`],...d}),void 0,void 0,void 0,"svelte-14acsp3"),v(o,r),g(i)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
+ */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){l(t,!0),m(o,k);let s=c(t,"size",7,"m"),e=c(t,"status",7,"info"),d=b(t,["$$slots","$$events","$$legacy","$$host","size","status"]);var n={get size(){return s()},set size(a="m"){s(a),u()},get status(){return e()},set status(a="info"){e(a),u()}},r=h();return f(r,()=>({class:["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${e()}`],...d}),void 0,void 0,void 0,"svelte-14acsp3"),v(o,r),p(n)}customElements.define("m-status-dot",i(w,{size:{},status:{}},[],[],{mode:"open"}));export{w as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/components/statusmessage/StatusMessage.js

@@ -1,4 +1,4 @@
-import{c as S,p as $,a as k,b as g,s as L,t as M,f as v,g as D,h as d,i as E,d as n,j as f,n as I,r,e as W,v as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{c as B}from"../../svelte-component.js";import{a as G}from"../../attributes.js";import{g as p,h as H,i as J,d as K}from"../../Condition20.js";import{L as N}from"../loader/Loader.js";import"../../branches.js";var O=d('<span class="mc-status-message__icon svelte-o2wjin"><!></span>'),P=d('<div><!> <p class="mc-status-message__description svelte-o2wjin"> </p></div>');const Q={hash:"svelte-o2wjin",code:`/**
+import{c as z,e as S,a as $,p as g,k as L,t as M,b as v,d as D,f as d,n as E,j as n,i as f,l as I,r,m as W,w as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{c as B}from"../../svelte-component.js";import{a as G}from"../../attributes.js";import{h as p,i as H,j as J,e as K}from"../../Condition20.js";import{L as N}from"../loader/Loader.js";import"../../branches.js";var O=d('<span class="mc-status-message__icon svelte-o2wjin"><!></span>'),P=d('<div><!> <p class="mc-status-message__description svelte-o2wjin"> </p></div>');const Q={hash:"svelte-o2wjin",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-message.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-info, #0b96cc);}.mc-status-message.svelte-o2wjin {display:inline-flex;gap:0.25rem;align-items:center;}.mc-status-message__icon.svelte-o2wjin {width:1.5rem;height:1.5rem;}.mc-status-message__description.svelte-o2wjin {margin:0;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--status-message-color-text, #404040);}.mc-status-message--success.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-success, #3f9e10);}.mc-status-message--error.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-error, #ea302d);}.mc-status-message--warning.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-warning, #ea7315);}.mc-status-message--neutral.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-neutral, #808080);}`};function R(l,a){$(a,!0),k(l,Q);let i=g(a,"label",7),e=g(a,"status",7,"info"),_=E(a,["$$slots","$$events","$$legacy","$$host","label","status"]);const c=[{status:"info",component:p},{status:"success",component:H},{status:"warning",component:J},{status:"error",component:K},{status:"neutral",component:p}];function w(s){return c.find(t=>t.status===s)||c[0]}const h=q(()=>w(e()));var j={get label(){return i()},set label(s){i(s),f()},get status(){return e()},set status(s="info"){e(s),f()}},o=P();G(o,()=>({class:["mc-status-message",`mc-status-message--${e()}`],..._}),void 0,void 0,void 0,"svelte-o2wjin");var m=n(o);{var b=s=>{var t=O(),y=n(t);B(y,()=>I(h).component,(F,z)=>{z(F,{})}),r(t),v(s,t)},C=s=>{N(s,{size:"s"})};A(m,s=>{e()!=="inprogress"?s(b):s(C,!1)})}var u=L(m,2),x=n(u,!0);return r(u),r(o),M(()=>W(x,i())),v(l,o),D(j)}customElements.define("m-status-message",S(R,{label:{},status:{}},[],[],!0));
+ */.mc-status-message.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-info, #0b96cc);}.mc-status-message.svelte-o2wjin {display:inline-flex;gap:0.25rem;align-items:center;}.mc-status-message__icon.svelte-o2wjin {width:1.5rem;height:1.5rem;}.mc-status-message__description.svelte-o2wjin {margin:0;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--status-message-color-text, #404040);}.mc-status-message--success.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-success, #3f9e10);}.mc-status-message--error.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-error, #ea302d);}.mc-status-message--warning.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-warning, #ea7315);}.mc-status-message--neutral.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-neutral, #808080);}`};function R(l,a){S(a,!0),$(l,Q);let i=g(a,"label",7),e=g(a,"status",7,"info"),w=E(a,["$$slots","$$events","$$legacy","$$host","label","status"]);const c=[{status:"info",component:p},{status:"success",component:H},{status:"warning",component:J},{status:"error",component:K},{status:"neutral",component:p}];function _(s){return c.find(t=>t.status===s)||c[0]}const h=q(()=>_(e()));var j={get label(){return i()},set label(s){i(s),f()},get status(){return e()},set status(s="info"){e(s),f()}},o=P();G(o,()=>({class:["mc-status-message",`mc-status-message--${e()}`],...w}),void 0,void 0,void 0,"svelte-o2wjin");var m=n(o);{var b=s=>{var t=O(),y=n(t);B(y,()=>I(h).component,(F,k)=>{k(F,{})}),r(t),v(s,t)},C=s=>{N(s,{size:"s"})};A(m,s=>{e()!=="inprogress"?s(b):s(C,!1)})}var u=L(m,2),x=n(u,!0);return r(u),r(o),M(()=>W(x,i())),v(l,o),D(j)}customElements.define("m-status-message",z(R,{label:{},status:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=StatusMessage.js.map

package/dist/components/statusnotification/StatusNotification.js

@@ -1,4 +1,4 @@
-import{o as q,c as A,p as G,a as H,b as s,n as J,s as l,t as K,f as p,g as L,h as w,i as O,v as P,d as e,j as b,r as n,e as _}from"../../custom-element.js";import{i as Q}from"../../if.js";import{s as R}from"../../slot.js";import{c as T}from"../../svelte-component.js";import{a as U}from"../../attributes.js";import{b as V}from"../../this.js";import{I as X,a as Y,W as Z,b as $,C as oo}from"../../Condition20.js";import"../../branches.js";var to=w('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),ro=w('<section><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const eo={hash:"svelte-18b6syz",code:`/**
+import{o as q,c as A,e as G,a as H,p as s,l as J,k as l,t as K,b as p,d as L,f as w,n as O,w as P,j as e,i as b,r as n,u as Q,m as _}from"../../custom-element.js";import{i as R}from"../../if.js";import{s as T}from"../../slot.js";import{c as U}from"../../svelte-component.js";import{a as V}from"../../attributes.js";import{b as X}from"../../this.js";import{I as Y,a as Z,W as $,b as oo,C as to}from"../../Condition20.js";import"../../branches.js";var ro=w('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),eo=w('<section><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const no={hash:"svelte-18b6syz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 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__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz: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.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz: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.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz: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.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz: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.svelte-18b6syz {--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.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz: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.svelte-18b6syz {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-18b6syz {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function no(h,r){G(r,!0),H(h,eo);let d=s(r,"title",7),i=s(r,"description",7),c=s(r,"status",7,"info"),u=s(r,"closable",7),x=O(r,["$$slots","$$events","$$legacy","$$host","title","description","status","closable"]),v;const y=[{status:"info",component:X},{status:"success",component:Y},{status:"warning",component:Z},{status:"error",component:$}];function C(o){return y.find(t=>t.status===o)||y[0]}const F=P(()=>C(c())),E=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var N={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=ro();U(a,()=>({class:["mc-status-notification",`mc-status-notification--${c()}`],role:"status",...x}),void 0,void 0,void 0,"svelte-18b6syz");var f=e(a),S=e(f);T(S,()=>J(F).component,(o,t)=>{t(o,{className:"mc-status-notification__icon"})}),n(f);var g=l(f,2),m=e(g),j=e(m,!0);n(m);var k=l(m,2),I=e(k,!0);n(k);var z=l(k,2),W=e(z);R(W,r,"footer",{},null),n(z),n(g);var B=l(g,2);{var D=o=>{var t=to();t.__click=E;var M=e(t);oo(M,{className:"mc-status-notification-closable__icon"}),n(t),p(o,t)};Q(B,o=>{u()&&o(D)})}return n(a),V(a,o=>v=o,()=>v),K(()=>{_(j,d()),_(I,i())}),p(h,a),L(N)}q(["click"]);customElements.define("m-status-notification",A(no,{closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{},status:{}},["footer"],[],!0));
+ */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;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__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz: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.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, 0.25rem);}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, 0.25rem);}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz: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.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz: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.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz: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.svelte-18b6syz {--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.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz: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.svelte-18b6syz {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-18b6syz {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz: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.svelte-18b6syz {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.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function ao(h,r){G(r,!0),H(h,no);let d=s(r,"title",7),i=s(r,"description",7),c=s(r,"status",7,"info"),u=s(r,"closable",7),x=O(r,["$$slots","$$events","$$legacy","$$host","title","description","status","closable"]),v;const y=[{status:"info",component:Y},{status:"success",component:Z},{status:"warning",component:$},{status:"error",component:oo}];function C(o){return y.find(t=>t.status===o)||y[0]}const F=P(()=>C(c())),E=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var N={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=eo();V(a,()=>({class:["mc-status-notification",`mc-status-notification--${c()}`],role:"status",...x}),void 0,void 0,void 0,"svelte-18b6syz");var f=e(a),S=e(f);U(S,()=>J(F).component,(o,t)=>{t(o,{className:"mc-status-notification__icon"})}),n(f);var g=l(f,2),m=e(g),j=e(m,!0);n(m);var k=l(m,2),I=e(k,!0);n(k);var z=l(k,2),W=e(z);T(W,r,"footer",{},null),n(z),n(g);var B=l(g,2);{var D=o=>{var t=ro(),M=e(t);to(M,{className:"mc-status-notification-closable__icon"}),n(t),Q("click",t,E),p(o,t)};R(B,o=>{u()&&o(D)})}return n(a),X(a,o=>v=o,()=>v),K(()=>{_(j,d()),_(I,i())}),p(h,a),L(N)}q(["click"]);customElements.define("m-status-notification",A(ao,{closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{},status:{}},["footer"],[],{mode:"open"}));
 //# sourceMappingURL=StatusNotification.js.map

package/dist/components/statusnotification/StatusNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-status-notification',\n    props: {\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import {\n    Cross20,\n    InfoCircleFilled32,\n    WarningCircleFilled32,\n    CrossCircleFilled32,\n    CheckCircleFilled32,\n  } from '@mozaic-ds/icons-svelte';\n  /**\n   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n   *\n   * @slot footer - Use this slot to insert a button or a link in the footer\n   * @event close {CustomEvent<void>} - Emits when closing the notification.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Title of the status notification.\n     */\n    title: string;\n    /**\n     * Description of the status notification.\n     */\n    description: string;\n    /**\n     * Allows to define the status notification type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { title, description, status = 'info', closable, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n\n  const onClose = () => {\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<section\n  class={['mc-status-notification', `mc-status-notification--${status}`]}\n  role=\"status\"\n  bind:this={element}\n  {...attrs}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component className=\"mc-status-notification__icon\" />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    <h2 class=\"mc-status-notification__title\">{title}</h2>\n    <p class=\"mc-status-notification__message\">\n      {description}\n    </p>\n\n    <div class=\"mc-status-notification__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 className=\"mc-status-notification-closable__icon\" />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n\n  .mc-status-notification__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","attrs","$.rest_props","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.derived","onClose","event","section","root","span","$.child","selected_component","$$anchor","div","h2","p","div_1","button","root_1","node_3","Cross20","$.reset","$.append","$$render","consequent","$$value"],"mappings":";;0mcASA,qBAkCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAKI,EAAKC,EAAAL,EAAA,sFACzDM,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,YAG1CC,EAAYV,EAAgB,CAC5B,OAAAK,EAAQ,KAAMM,GAASA,EAAK,SAAWX,CAAM,GAAKK,EAAQ,CAAC,CACpE,OAEMO,EAAQC,EAAA,IAAYH,EAAYV,EAAM,CAAA,CAAA,EAEtCc,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBX,EAAQ,cAAcW,CAAK,CAC7B,yJAtBmC,OAAM,iEAyB1CC,EAAAC,GAAA,IAAAD,eACS,oDAAqDhB,GAAM,qBAG/DE,2CAEH,IAAAgB,EAAIC,EANNH,CAAA,MAMEE,CAAI,iCACFE,EAAkBC,EAAA,CAAA,UAAA,8BAAA,CAAA,MADpBH,CAAI,EAIJ,IAAAI,IAJAJ,EAAI,CAAA,EAKFK,IADFD,CAAG,MACDC,EAAE,EAAA,IAAFA,CAAE,EACF,IAAAC,IADAD,EAAE,CAAA,MACFC,EAAC,EAAA,IAADA,CAAC,EAID,IAAAC,IAJAD,EAAC,CAAA,MAIDC,CAAG,4BAAHA,CAAG,IANLH,CAAG,UAAHA,EAAG,CAAA,aAYD,IAAAI,EAAAC,GAAA,EAAAD,EAGC,QAASZ,EAHV,IAAAc,EAAAT,EAAAO,CAAA,EAKEG,GAAOD,EAAA,CAAA,UAAA,uCAAA,CAAA,EALTE,EAAAJ,CAAA,EAAAK,EAAAV,EAAAK,CAAA,WADEzB,EAAQ,GAAA+B,EAAAC,CAAA,IArBdH,OAAAA,EAAAd,CAAA,IAAAA,EAAAkB,GAGY9B,QAAAA,CAAO,aAQ2BR,GAAK,MAE7CG,GAAW,IAbjBgC,EAAAV,EAAAL,CAAA,MAFO"}
+{"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-status-notification',\n    props: {\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import {\n    Cross20,\n    InfoCircleFilled32,\n    WarningCircleFilled32,\n    CrossCircleFilled32,\n    CheckCircleFilled32,\n  } from '@mozaic-ds/icons-svelte';\n  /**\n   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n   *\n   * @slot footer - Use this slot to insert a button or a link in the footer\n   * @event close {CustomEvent<void>} - Emits when closing the notification.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Title of the status notification.\n     */\n    title: string;\n    /**\n     * Description of the status notification.\n     */\n    description: string;\n    /**\n     * Allows to define the status notification type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { title, description, status = 'info', closable, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n\n  const onClose = () => {\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<section\n  class={['mc-status-notification', `mc-status-notification--${status}`]}\n  role=\"status\"\n  bind:this={element}\n  {...attrs}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component className=\"mc-status-notification__icon\" />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    <h2 class=\"mc-status-notification__title\">{title}</h2>\n    <p class=\"mc-status-notification__message\">\n      {description}\n    </p>\n\n    <div class=\"mc-status-notification__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 className=\"mc-status-notification-closable__icon\" />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n\n  .mc-status-notification__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","attrs","$.rest_props","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.derived","onClose","event","section","root","span","$.child","selected_component","$$anchor","div","h2","p","div_1","button","root_1","node_3","Cross20","$.reset","$.delegated","$.append","$$render","consequent","$$value"],"mappings":";;ywcASA,qBAkCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAKI,EAAKC,EAAAL,EAAA,sFACzDM,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYV,EAAgB,CAC5B,OAAAK,EAAQ,KAAMM,GAASA,EAAK,SAAWX,CAAM,GAAKK,EAAQ,CAAC,CACpE,OAEMO,EAAQC,EAAA,IAAYH,EAAYV,EAAM,CAAA,CAAA,EAEtCc,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBX,EAAQ,cAAcW,CAAK,CAC7B,yJAtBmC,OAAM,iEAyB1CC,EAAAC,GAAA,IAAAD,eACS,oDAAqDhB,GAAM,qBAG/DE,2CAEH,IAAAgB,EAAIC,EANNH,CAAA,MAMEE,CAAI,iCACFE,EAAkBC,EAAA,CAAA,UAAA,8BAAA,CAAA,MADpBH,CAAI,EAIJ,IAAAI,IAJAJ,EAAI,CAAA,EAKFK,IADFD,CAAG,MACDC,EAAE,EAAA,IAAFA,CAAE,EACF,IAAAC,IADAD,EAAE,CAAA,MACFC,EAAC,EAAA,IAADA,CAAC,EAID,IAAAC,IAJAD,EAAC,CAAA,MAIDC,CAAG,4BAAHA,CAAG,IANLH,CAAG,UAAHA,EAAG,CAAA,aAYD,IAAAI,EAAAC,GAAA,EAAAC,EAAAT,EAAAO,CAAA,EAKEG,GAAOD,EAAA,CAAA,UAAA,uCAAA,CAAA,EALTE,EAAAJ,CAAA,EAAAK,EAAA,QAAAL,EAGUZ,CAAO,EAHjBkB,EAAAX,EAAAK,CAAA,WADEzB,EAAQ,GAAAgC,EAAAC,CAAA,IArBdJ,OAAAA,EAAAd,CAAA,IAAAA,EAAAmB,GAGY/B,QAAAA,CAAO,aAQ2BR,GAAK,MAE7CG,GAAW,IAbjBiC,EAAAX,EAAAL,CAAA,MAFO"}

package/dist/components/statusnotification/StatusNotification.stories.d.ts

@@ -11,9 +11,9 @@ export declare const Success: Story;
 export declare const Warning: Story;
 export declare const Error: Story;
 export declare const Closable: Story;
-export declare const WithButton: Story;
-export declare const WithButtons: Story;
-export declare const WithLink: {
+export declare const Button: Story;
+export declare const Buttons: Story;
+export declare const Link: {
     args: {
         footer: string;
     };

package/dist/components/statusnotification/StatusNotification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mEAAmE,CAAC;AAE3E,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}
+{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mEAAmE,CAAC;AAE3E,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAUhB,CAAC"}

package/dist/components/statusnotification/StatusNotification.stories.js

@@ -46,12 +46,12 @@ export const Error = {
 export const Closable = {
     args: { closable: true },
 };
-export const WithButton = {
+export const Button = {
     args: {
         footer: `<m-button outlined slot="footer">Button Label</m-button>`,
     },
 };
-export const WithButtons = {
+export const Buttons = {
     args: {
         footer: `
       <m-button slot="footer">Button Label</m-button>
@@ -59,7 +59,7 @@ export const WithButtons = {
     `,
     },
 };
-export const WithLink = {
+export const Link = {
     args: {
         footer: `
       <m-link href="#" iconPosition="right" slot="footer">

package/dist/components/statusnotification/StatusNotification.svelte

@@ -122,6 +122,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -132,7 +133,6 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -165,6 +165,7 @@
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
   min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
 }
 .mc-button--s .mc-button__label {
   font-size: var(--font-size-100, 0.875rem);
@@ -181,6 +182,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button--m .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -197,6 +199,7 @@
   padding: 0 calc(1.25rem - 0.125rem);
   min-height: 4rem;
   min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
 }
 .mc-button--l .mc-button__label {
   font-size: var(--font-size-200, 1.125rem);

package/dist/components/stepperbottombar/StepperBottomBar.js

@@ -1,6 +1,6 @@
-import{c as M,p as O,a as Q,b as i,s as E,t as y,f as b,g as R,h as m,d as a,z as S,j as c,r as s,e as z}from"../../custom-element.js";import{i as V}from"../../if.js";import{b as T}from"../../this.js";import{B as C}from"../button/Button.js";import{D as U}from"../divider/Divider.js";import"../../branches.js";import"../../slot.js";import"../../attributes.js";import"../loader/Loader.js";var W=m('<span class="mc-button__label svelte-nje7f7"> </span>'),X=m('<span class="mc-stepper-bottom-bar__button--text"><!></span>'),Y=m('<span class="mc-button__label svelte-nje7f7"> </span>'),Z=m('<span class="mc-stepper-bottom-bar__button"><!></span>'),$=m('<span class="mc-button__label svelte-nje7f7"> </span>'),ee=m('<div class="mc-stepper-bottom-bar svelte-nje7f7"><!> <div class="mc-stepper-bottom-bar__left svelte-nje7f7"><!></div> <div class="mc-stepper-bottom-bar__right svelte-nje7f7"><!> <span class="mc-stepper-bottom-bar__button"><!></span></div></div>');const te={hash:"svelte-nje7f7",code:`/**
+import{c as M,e as O,a as Q,p as i,k as E,t as y,b,d as R,f as m,j as a,A as S,i as c,r as s,m as z}from"../../custom-element.js";import{i as V}from"../../if.js";import{b as T}from"../../this.js";import{B as k}from"../button/Button.js";import{D as U}from"../divider/Divider.js";import"../../branches.js";import"../../slot.js";import"../../attributes.js";import"../loader/Loader.js";var W=m('<span class="mc-button__label svelte-nje7f7"> </span>'),X=m('<span class="mc-stepper-bottom-bar__button--text"><!></span>'),Y=m('<span class="mc-button__label svelte-nje7f7"> </span>'),Z=m('<span class="mc-stepper-bottom-bar__button"><!></span>'),$=m('<span class="mc-button__label svelte-nje7f7"> </span>'),ee=m('<div class="mc-stepper-bottom-bar svelte-nje7f7"><!> <div class="mc-stepper-bottom-bar__left svelte-nje7f7"><!></div> <div class="mc-stepper-bottom-bar__right svelte-nje7f7"><!> <span class="mc-stepper-bottom-bar__button"><!></span></div></div>');const te={hash:"svelte-nje7f7",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-stepper-bottom-bar.svelte-nje7f7 {position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3);}
+ */.mc-stepper-bottom-bar.svelte-nje7f7 {position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;height:4rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3);}
 @media screen and (min-width: 679px) {
 }
 @media screen and (min-width: 679px) {
@@ -8,5 +8,5 @@ import{c as M,p as O,a as Q,b as i,s as E,t as y,f as b,g as R,h as m,d as a,z a
 @media screen and (min-width: 679px) {.mc-stepper-bottom-bar__left.svelte-nje7f7 {padding-left:0.5rem;}
 }.mc-stepper-bottom-bar__right.svelte-nje7f7 {margin-left:auto;padding:0.25rem 0.5rem 0.25rem 0;display:flex;gap:0.5rem;}
 @media screen and (min-width: 679px) {.mc-stepper-bottom-bar__right.svelte-nje7f7 {padding:0.5rem 1rem 0.5rem 0;}
-}.mc-button__label.svelte-nje7f7 {font-size:var(--font-size-150, 1rem);}.mc-divider {width:100%;}`};function ae(k,r){O(r,!0),Q(k,te);let t=i(r,"step",15,0),v=i(r,"steps",15,0),f=i(r,"cancel",7,!0),_=i(r,"cancellabel",7,"Cancel"),h=i(r,"previouslabel",7,"Previous"),g=i(r,"nextlabel",7,"Next"),x=i(r,"validatelabel",7,"Validate"),p;function q(){const e=new CustomEvent("cancel",{bubbles:!0,composed:!0});p.dispatchEvent(e)}function A(){if(t()>0){S(t,-1);const e=new CustomEvent("change",{detail:t(),bubbles:!0,composed:!0});p.dispatchEvent(e)}}function F(){if(t()<v()){S(t);const e=new CustomEvent("change",{detail:t(),bubbles:!0,composed:!0});p.dispatchEvent(e)}else{const e=new CustomEvent("validate",{bubbles:!0,composed:!0});p.dispatchEvent(e)}}var G={get step(){return t()},set step(e=0){t(e),c()},get steps(){return v()},set steps(e=0){v(e),c()},get cancel(){return f()},set cancel(e=!0){f(e),c()},get cancellabel(){return _()},set cancellabel(e="Cancel"){_(e),c()},get previouslabel(){return h()},set previouslabel(e="Previous"){h(e),c()},get nextlabel(){return g()},set nextlabel(e="Next"){g(e),c()},get validatelabel(){return x()},set validatelabel(e="Validate"){x(e),c()}},u=ee(),P=a(u);U(P,{});var j=E(P,2),H=a(j);{var I=e=>{var n=X(),l=a(n);C(l,{ghost:!0,size:"s",onclick:q,children:(d,L)=>{var o=W(),w=a(o,!0);s(o),y(()=>z(w,_())),b(d,o)},$$slots:{default:!0}}),s(n),b(e,n)};V(H,e=>{f()&&e(I)})}s(j);var B=E(j,2),N=a(B);{var J=e=>{var n=Z(),l=a(n);C(l,{outlined:!0,size:"s",onclick:A,children:(d,L)=>{var o=Y(),w=a(o,!0);s(o),y(()=>z(w,h())),b(d,o)},$$slots:{default:!0}}),s(n),b(e,n)};V(N,e=>{t()>0&&e(J)})}var D=E(N,2),K=a(D);return C(K,{appearance:"accent",size:"s",onclick:F,children:(e,n)=>{var l=$(),d=a(l,!0);s(l),y(()=>z(d,t()<v()?g():x())),b(e,l)},$$slots:{default:!0}}),s(D),s(B),s(u),T(u,e=>p=e,()=>p),b(k,u),R(G)}customElements.define("m-stepper-bottom-bar",M(ae,{step:{attribute:"step",reflect:!0,type:"Number"},steps:{attribute:"steps",reflect:!0,type:"Number"},cancel:{attribute:"cancel",reflect:!0,type:"Boolean"},cancellabel:{},previouslabel:{},nextlabel:{},validatelabel:{}},[],[],!0));
+}.mc-button__label.svelte-nje7f7 {font-size:var(--font-size-150, 1rem);}.mc-divider {width:100%;}`};function ae(C,n){O(n,!0),Q(C,te);let t=i(n,"step",15,0),v=i(n,"steps",15,0),f=i(n,"cancel",7,!0),_=i(n,"cancellabel",7,"Cancel"),h=i(n,"previouslabel",7,"Previous"),g=i(n,"nextlabel",7,"Next"),x=i(n,"validatelabel",7,"Validate"),p;function A(){const e=new CustomEvent("cancel",{bubbles:!0,composed:!0});p.dispatchEvent(e)}function q(){if(t()>0){S(t,-1);const e=new CustomEvent("change",{detail:t(),bubbles:!0,composed:!0});p.dispatchEvent(e)}}function F(){if(t()<v()){S(t);const e=new CustomEvent("change",{detail:t(),bubbles:!0,composed:!0});p.dispatchEvent(e)}else{const e=new CustomEvent("validate",{bubbles:!0,composed:!0});p.dispatchEvent(e)}}var G={get step(){return t()},set step(e=0){t(e),c()},get steps(){return v()},set steps(e=0){v(e),c()},get cancel(){return f()},set cancel(e=!0){f(e),c()},get cancellabel(){return _()},set cancellabel(e="Cancel"){_(e),c()},get previouslabel(){return h()},set previouslabel(e="Previous"){h(e),c()},get nextlabel(){return g()},set nextlabel(e="Next"){g(e),c()},get validatelabel(){return x()},set validatelabel(e="Validate"){x(e),c()}},u=ee(),P=a(u);U(P,{});var j=E(P,2),H=a(j);{var I=e=>{var r=X(),l=a(r);k(l,{ghost:!0,size:"s",onclick:A,children:(d,L)=>{var o=W(),w=a(o,!0);s(o),y(()=>z(w,_())),b(d,o)},$$slots:{default:!0}}),s(r),b(e,r)};V(H,e=>{f()&&e(I)})}s(j);var B=E(j,2),N=a(B);{var J=e=>{var r=Z(),l=a(r);k(l,{outlined:!0,size:"s",onclick:q,children:(d,L)=>{var o=Y(),w=a(o,!0);s(o),y(()=>z(w,h())),b(d,o)},$$slots:{default:!0}}),s(r),b(e,r)};V(N,e=>{t()>0&&e(J)})}var D=E(N,2),K=a(D);return k(K,{appearance:"accent",size:"s",onclick:F,children:(e,r)=>{var l=$(),d=a(l,!0);s(l),y(()=>z(d,t()<v()?g():x())),b(e,l)},$$slots:{default:!0}}),s(D),s(B),s(u),T(u,e=>p=e,()=>p),b(C,u),R(G)}customElements.define("m-stepper-bottom-bar",M(ae,{step:{attribute:"step",reflect:!0,type:"Number"},steps:{attribute:"steps",reflect:!0,type:"Number"},cancel:{attribute:"cancel",reflect:!0,type:"Boolean"},cancellabel:{},previouslabel:{},nextlabel:{},validatelabel:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=StepperBottomBar.js.map

package/dist/components/stepperbottombar/StepperBottomBar.svelte

@@ -141,6 +141,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
+  height: 4rem;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -209,6 +210,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -219,7 +221,6 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -252,6 +253,7 @@
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
   min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
 }
 .mc-button--s .mc-button__label {
   font-size: var(--font-size-100, 0.875rem);
@@ -268,6 +270,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button--m .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -284,6 +287,7 @@
   padding: 0 calc(1.25rem - 0.125rem);
   min-height: 4rem;
   min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
 }
 .mc-button--l .mc-button__label {
   font-size: var(--font-size-200, 1.125rem);

package/dist/components/stepperbottombar/StepperBottomBar.svelte.d.ts

@@ -35,7 +35,7 @@ interface Props {
      */
     validatelabel?: string;
 }
-declare const StepperBottomBar: import("svelte").Component<Props, {}, "step" | "steps">;
+declare const StepperBottomBar: import("svelte").Component<Props, {}, "steps" | "step">;
 type StepperBottomBar = ReturnType<typeof StepperBottomBar>;
 export default StepperBottomBar;
 //# sourceMappingURL=StepperBottomBar.svelte.d.ts.map

package/dist/components/steppercompact/StepperCompact.js

@@ -1,4 +1,4 @@
-import{c as E,p as M,a as q,b as p,n as l,s as b,t as f,f as x,g as A,h as w,v as m,d as s,j as n,r as a,e as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../branches.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
+import{c as E,e as M,a as q,p,l,k as b,t as f,b as x,d as A,f as w,w as m,j as s,i as n,r as a,m as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../branches.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const z=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),k=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(k)()),t=m(()=>l(z)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),P=s(d,!0);a(d);var S=b(d,2);{var V=e=>{var t=G(),D=s(t,!0);a(t),f(()=>y(D,i())),x(e,t)};B(S,e=>{i()&&e(V)})}return a(u),a(_),f(()=>y(P,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
+ */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const k=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),z=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(z)()),t=m(()=>l(k)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),P=s(d,!0);a(d);var S=b(d,2);{var V=e=>{var t=G(),D=s(t,!0);a(t),f(()=>y(D,i())),x(e,t)};B(S,e=>{i()&&e(V)})}return a(u),a(_),f(()=>y(P,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=StepperCompact.js.map

package/dist/components/stepperinline/StepperInline.js

@@ -1,6 +1,6 @@
-import{c as H,p as J,a as K,b as $,k as L,f as a,g as N,h as l,i as O,d as i,j as C,r as s,n as t,s as j,t as M,l as g,m as x,e as P,v as y}from"../../custom-element.js";import{i as D}from"../../if.js";import{e as Q,i as T}from"../../each.js";import{a as U}from"../../attributes.js";import{e as V,f as W}from"../../Condition20.js";import"../../branches.js";var X=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--check svelte-s80odb" aria-hidden="true"><!></span>'),Y=l("<span></span>"),Z=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron svelte-s80odb" aria-hidden="true"><!></span>'),ee=l('<li><!> <div class="mc-stepper-inline__content svelte-s80odb"><span> </span></div> <!></li>'),re=l('<nav><ol class="mc-stepper-inline__container svelte-s80odb"></ol></nav>');const te={hash:"svelte-s80odb",code:`/**
+import{c as H,e as J,a as K,p as $,g as L,b as a,d as N,f as l,n as O,j as i,i as C,r as s,l as t,k as j,t as M,s as g,h as x,m as P,w as y}from"../../custom-element.js";import{i as D}from"../../if.js";import{e as Q,i as T}from"../../each.js";import{a as U}from"../../attributes.js";import{f as V,g as W}from"../../Condition20.js";import"../../branches.js";var X=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--check svelte-s80odb" aria-hidden="true"><!></span>'),Y=l("<span></span>"),Z=l('<span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron svelte-s80odb" aria-hidden="true"><!></span>'),ee=l('<li><!> <div class="mc-stepper-inline__content svelte-s80odb"><span> </span></div> <!></li>'),re=l('<nav><ol class="mc-stepper-inline__container svelte-s80odb"></ol></nav>');const te={hash:"svelte-s80odb",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-stepper-inline__container.svelte-s80odb {display:flex;align-items:center;gap:1rem;list-style:none;padding:0;margin:0;}.mc-stepper-inline__label.svelte-s80odb {font-size:var(--font-size-100, 0.875rem);transition:color 200ms ease;}.mc-stepper-inline__label.is-current.svelte-s80odb {font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000);}.mc-stepper-inline__item.svelte-s80odb {display:inline-flex;align-items:center;gap:0.5rem;color:var(--stepper-color-step-label-default, #666666);}.mc-stepper-inline__item.is-completed.svelte-s80odb: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;border-radius:var(--border-radius-s, 0.25rem);}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover {cursor:pointer;}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover .mc-stepper-inline__label:where(.svelte-s80odb) {text-decoration:underline;}.mc-stepper-inline__icon.svelte-s80odb {fill:var(--stepper-color-information, #666666);display:flex;flex-shrink:0;}.mc-stepper-inline__icon--check.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;background-color:transparent;border:0.125rem solid var(--stepper-color-information, #666666);border-radius:1rem;}.mc-stepper-inline__icon--chevron.svelte-s80odb {width:1.25rem;height:1.25rem;}.mc-stepper-inline__circle.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:0.125rem solid var(--stepper-color-information, #666666);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);flex-shrink:0;transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;}.mc-stepper-inline__circle.is-current.svelte-s80odb {background-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);border-color:transparent;
+ */.mc-stepper-inline__container.svelte-s80odb {display:flex;align-items:center;gap:1rem;list-style:none;padding:0;margin:0;}.mc-stepper-inline__label.svelte-s80odb {font-size:var(--font-size-100, 0.875rem);transition:color 200ms ease;}.mc-stepper-inline__label.is-current.svelte-s80odb {font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000);}.mc-stepper-inline__item.svelte-s80odb {display:inline-flex;align-items:center;gap:0.5rem;color:var(--stepper-color-step-label-default, #666666);}.mc-stepper-inline__item.is-completed.svelte-s80odb: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;border-radius:var(--border-radius-s, 0.25rem);}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover {cursor:pointer;}.mc-stepper-inline__item.is-completed.svelte-s80odb:hover .mc-stepper-inline__label:where(.svelte-s80odb) {text-decoration:underline;}.mc-stepper-inline__icon.svelte-s80odb {fill:var(--stepper-color-information, #666666);display:flex;flex-shrink:0;}.mc-stepper-inline__icon--check.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;background-color:var(--stepper-color-step-item-default-background, #ffffff);border:0.125rem solid var(--stepper-color-information, #666666);border-radius:1rem;}.mc-stepper-inline__icon--chevron.svelte-s80odb {width:1.25rem;height:1.25rem;}.mc-stepper-inline__circle.svelte-s80odb {box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:0.125rem solid var(--stepper-color-information, #666666);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);flex-shrink:0;transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease;}.mc-stepper-inline__circle.is-current.svelte-s80odb {background-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);border-color:transparent;
   animation: svelte-s80odb-pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}.mc-stepper-inline__content.svelte-s80odb {display:flex;flex-direction:column;margin-right:0.5rem;}.mc-stepper-inline__additional.svelte-s80odb {font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);}.mc-stepper-inline__separator.svelte-s80odb {color:var(--stepper-color-information, #666666);margin-left:1rem;}
 
 @keyframes svelte-s80odb-pop-in {
@@ -12,5 +12,5 @@ import{c as H,p as J,a as K,b as $,k as L,f as a,g as N,h as l,i as O,d as i,j a
     transform: scale(1);
     opacity: 1;
   }
-}.mc-stepper-inline__icon {align-items:center;}`};function se(k,p){J(p,!0),K(k,te);let f=$(p,"step",15,1),o=$(p,"steps",31,()=>L([])),E=O(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>()=>Math.min(Math.max(f()??1,1),o().length??1)),I=y(()=>()=>o().map((n,m)=>({completed:m+1<t(w)(),current:m+1===t(w)()})));var R={get step(){return f()},set step(n=1){f(n),C()},get steps(){return o()},set steps(n=[]){o(n),C()}},c=re();U(c,()=>({class:"mc-stepper-inline","aria-label":"Stepper",...E}),void 0,void 0,void 0,"svelte-s80odb");var z=i(c);return Q(z,21,o,T,(n,m,_,oe)=>{const d=y(()=>t(I)()[_]);var v=ee(),S=i(v);{var q=r=>{var e=X(),h=i(e);V(h,{}),s(e),a(r,e)},A=r=>{var e=Y();e.textContent=_+1,M(()=>g(e,1,x(["mc-stepper-inline__circle",t(d).current?"is-current":""]),"svelte-s80odb")),a(r,e)};D(S,r=>{t(d).completed?r(q):r(A,!1)})}var b=j(S,2),u=i(b),B=i(u,!0);s(u),s(b);var F=j(b,2);{var G=r=>{var e=Z(),h=i(e);W(h,{}),s(e),a(r,e)};D(F,r=>{_<o().length-1&&r(G)})}s(v),M(()=>{g(v,1,x(["mc-stepper-inline__item",t(d).completed?"is-completed":""]),"svelte-s80odb"),g(u,1,x(["mc-stepper-inline__label",t(d).current?"is-current":""]),"svelte-s80odb"),P(B,t(m).label)}),a(n,v)}),s(z),s(c),a(k,c),N(R)}customElements.define("m-stepper-inline",H(se,{step:{},steps:{}},[],[],!0));
+}.mc-stepper-inline__icon {align-items:center;}`};function se(k,p){J(p,!0),K(k,te);let f=$(p,"step",15,1),o=$(p,"steps",31,()=>L([])),E=O(p,["$$slots","$$events","$$legacy","$$host","step","steps"]);const w=y(()=>()=>Math.min(Math.max(f()??1,1),o().length??1)),I=y(()=>()=>o().map((n,m)=>({completed:m+1<t(w)(),current:m+1===t(w)()})));var R={get step(){return f()},set step(n=1){f(n),C()},get steps(){return o()},set steps(n=[]){o(n),C()}},c=re();U(c,()=>({class:"mc-stepper-inline","aria-label":"Stepper",...E}),void 0,void 0,void 0,"svelte-s80odb");var z=i(c);return Q(z,21,o,T,(n,m,_,oe)=>{const d=y(()=>t(I)()[_]);var v=ee(),S=i(v);{var q=r=>{var e=X(),h=i(e);V(h,{}),s(e),a(r,e)},A=r=>{var e=Y();e.textContent=_+1,M(()=>g(e,1,x(["mc-stepper-inline__circle",t(d).current?"is-current":""]),"svelte-s80odb")),a(r,e)};D(S,r=>{t(d).completed?r(q):r(A,!1)})}var b=j(S,2),u=i(b),B=i(u,!0);s(u),s(b);var F=j(b,2);{var G=r=>{var e=Z(),h=i(e);W(h,{}),s(e),a(r,e)};D(F,r=>{_<o().length-1&&r(G)})}s(v),M(()=>{g(v,1,x(["mc-stepper-inline__item",t(d).completed?"is-completed":""]),"svelte-s80odb"),g(u,1,x(["mc-stepper-inline__label",t(d).current?"is-current":""]),"svelte-s80odb"),P(B,t(m).label)}),a(n,v)}),s(z),s(c),a(k,c),N(R)}customElements.define("m-stepper-inline",H(se,{step:{},steps:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=StepperInline.js.map

package/dist/components/stepperinline/StepperInline.svelte

@@ -117,7 +117,7 @@
   box-sizing: border-box;
   width: 1.5rem;
   height: 1.5rem;
-  background-color: transparent;
+  background-color: var(--stepper-color-step-item-default-background, #ffffff);
   border: 0.125rem solid var(--stepper-color-information, #666666);
   border-radius: 1rem;
 }

package/dist/components/stepperinline/StepperInline.svelte.d.ts

@@ -21,7 +21,7 @@ interface Props {
         additionalinfo?: string;
     }>;
 }
-declare const StepperInline: import("svelte").Component<Props, {}, "step" | "steps">;
+declare const StepperInline: import("svelte").Component<Props, {}, "steps" | "step">;
 type StepperInline = ReturnType<typeof StepperInline>;
 export default StepperInline;
 //# sourceMappingURL=StepperInline.svelte.d.ts.map

package/dist/components/tab/Tab.js

@@ -1,4 +1,4 @@
-import{c as D,p as E,a as S,b as i,f as g,g as T,h,d as r,j as d,r as o,s as k,i as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{s as b}from"../../slot.js";import{a as x}from"../../attributes.js";import"../../branches.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
+import{c as D,e as E,a as S,p as d,b as g,d as T,f as h,j as o,i,r,k,n as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{s as b}from"../../slot.js";import{a as x}from"../../attributes.js";import"../../branches.js";var C=h('<button><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></button>'),F=h('<a><span class="mc-tabs__icon svelte-g14hff"><!></span> <span class="mc-tabs__label svelte-g14hff"><!></span></a>'),G=h('<li class="mc-tabs__item" role="presentation"><!></li>');const H={hash:"svelte-g14hff",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff: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-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function I(p,t){E(t,!0),S(p,H);let f=i(t,"tag",7,"button"),l=i(t,"selected",7,!1),v=i(t,"href",7),c=i(t,"disabled",7),y=q(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return f()},set tag(e="button"){f(e),d()},get selected(){return l()},set selected(e=!1){l(e),d()},get href(){return v()},set href(e){v(e),d()},get disabled(){return c()},set disabled(e){c(e),d()}},m=G(),j=r(m);{var z=e=>{var a=C();x(a,()=>({type:"button",role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=r(a),u=r(s);b(u,t,"icon",{},null),o(s);var n=k(s,2),_=r(n);b(_,t,"default",{},null),o(n),o(a),g(e,a)},B=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=r(a),u=r(s);b(u,t,"icon",{},null),o(s);var n=k(s,2),_=r(n);b(_,t,"default",{},null),o(n),o(a),g(e,a)};A(j,e=>{f()==="button"?e(z):e(B,!1)})}return o(m),g(p,m),T(w)}customElements.define("m-tab",D(I,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{}},["icon","default"],[],!0));
+ */.mc-tabs.svelte-g14hff {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-g14hff {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs__tab.svelte-g14hff {font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, 0.25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:0.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none;}.mc-tabs__tab.svelte-g14hff:hover {background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-tabs__tab.svelte-g14hff: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-tabs__tab--selected.svelte-g14hff {color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de);}.mc-tabs__tab--selected.svelte-g14hff:hover {background-color:var(--tabs-color-background-selected-hover, #c5e39e);}.mc-tabs__tab--disabled.svelte-g14hff {color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-tabs__tab--disabled.svelte-g14hff:hover {background:none;}.mc-tabs__label.svelte-g14hff {pointer-events:none;}.mc-tabs__icon.svelte-g14hff {fill:currentcolor;height:1.5rem;width:1.5rem;}.mc-tabs__icon.svelte-g14hff:empty {display:none;}`};function I(p,t){E(t,!0),S(p,H);let f=d(t,"tag",7,"button"),l=d(t,"selected",7,!1),v=d(t,"href",7),c=d(t,"disabled",7),y=q(t,["$$slots","$$events","$$legacy","$$host","tag","selected","href","disabled"]);var w={get tag(){return f()},set tag(e="button"){f(e),i()},get selected(){return l()},set selected(e=!1){l(e),i()},get href(){return v()},set href(e){v(e),i()},get disabled(){return c()},set disabled(e){c(e),i()}},m=G(),j=o(m);{var z=e=>{var a=C();x(a,()=>({type:"button",role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=o(a),u=o(s);b(u,t,"icon",{},null),r(s);var n=k(s,2),_=o(n);b(_,t,"default",{},null),r(n),r(a),g(e,a)},B=e=>{var a=F();x(a,()=>({href:v(),role:"tab","aria-selected":l(),class:["mc-tabs__tab",l()&&"mc-tabs__tab--selected",c()&&"mc-tabs__tab--disabled"],...y}),void 0,void 0,void 0,"svelte-g14hff");var s=o(a),u=o(s);b(u,t,"icon",{},null),r(s);var n=k(s,2),_=o(n);b(_,t,"default",{},null),r(n),r(a),g(e,a)};A(j,e=>{f()==="button"?e(z):e(B,!1)})}return r(m),g(p,m),T(w)}customElements.define("m-tab",D(I,{selected:{attribute:"selected",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},tag:{},href:{}},["icon","default"],[],{mode:"open"}));
 //# sourceMappingURL=Tab.js.map

package/dist/components/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import{c as h,p as y,a as q,b as c,s as k,t as w,f as o,g as x,h as p,d as v,j as d,r as m,l as j,m as z}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as D}from"../../slot.js";import{s as E}from"../../attributes.js";import"../../branches.js";var S=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),T=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const A={hash:"svelte-qelc5p",code:`/**
+import{c as h,e as y,a as q,p as c,k,t as w,b as o,d as x,f as p,j as v,i as d,r as m,s as j,h as z}from"../../custom-element.js";import{i as B}from"../../if.js";import{s as D}from"../../slot.js";import{s as E}from"../../attributes.js";import"../../branches.js";var S=p('<div class="mc-divider-horizontal svelte-qelc5p"></div>'),T=p('<nav><ul class="mc-tabs__list svelte-qelc5p" role="tablist"><!></ul> <!></nav>');const A={hash:"svelte-qelc5p",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tabs.svelte-qelc5p {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-qelc5p {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs--centered.svelte-qelc5p .mc-tabs__list:where(.svelte-qelc5p) {justify-content:center;}.mc-divider-horizontal.svelte-qelc5p {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function C(n,t){y(t,!0),q(n,A);let a=c(t,"description",7),i=c(t,"divider",7,!0),l=c(t,"centered",7);var u={get description(){return a()},set description(e){a(e),d()},get divider(){return i()},set divider(e=!0){i(e),d()},get centered(){return l()},set centered(e){l(e),d()}},r=T(),s=v(r),b=v(s);D(b,t,"tab",{},null),m(s);var f=k(s,2);{var g=e=>{var _=S();o(e,_)};B(f,e=>{i()&&e(g)})}return m(r),w(()=>{j(r,1,z(["mc-tabs",l()&&"mc-tabs--centered"]),"svelte-qelc5p"),E(s,"aria-label",a())}),o(n,r),x(u)}customElements.define("m-tabs",h(C,{divider:{attribute:"divider",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},description:{}},["tab"],[],!0));
+ */.mc-tabs.svelte-qelc5p {background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem;}.mc-tabs__list.svelte-qelc5p {list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:0.5rem;padding:var(--tabs-list-padding, 0.5rem 0.25rem);}.mc-tabs--centered.svelte-qelc5p .mc-tabs__list:where(.svelte-qelc5p) {justify-content:center;}.mc-divider-horizontal.svelte-qelc5p {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}`};function C(n,t){y(t,!0),q(n,A);let a=c(t,"description",7),i=c(t,"divider",7,!0),l=c(t,"centered",7);var u={get description(){return a()},set description(e){a(e),d()},get divider(){return i()},set divider(e=!0){i(e),d()},get centered(){return l()},set centered(e){l(e),d()}},r=T(),s=v(r),b=v(s);D(b,t,"tab",{},null),m(s);var f=k(s,2);{var _=e=>{var g=S();o(e,g)};B(f,e=>{i()&&e(_)})}return m(r),w(()=>{j(r,1,z(["mc-tabs",l()&&"mc-tabs--centered"]),"svelte-qelc5p"),E(s,"aria-label",a())}),o(n,r),x(u)}customElements.define("m-tabs",h(C,{divider:{attribute:"divider",reflect:!0,type:"Boolean"},centered:{attribute:"centered",reflect:!0,type:"Boolean"},description:{}},["tab"],[],{mode:"open"}));
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.stories.js

@@ -7,7 +7,7 @@ import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte'
 const meta = {
     title: 'Navigation/Tabs',
     component: 'm-tabs',
-    subcomponents: { 'Tab': 'm-tab' },
+    subcomponents: { Tab: 'm-tab' },
     args: {
         tab: `
       <m-tab slot="tab" selected="true">label</m-tab>