@mozaic-ds/web-components 1.2.0 → 1.3.0

package/dist/components/kpiitem/KpiItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"KpiItem.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBottomRight24/ArrowBottomRight24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowTopRight24/ArrowTopRight24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../src/components/kpiitem/KpiItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-bottom-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 0 1 1.414 0L18 16.586V9a1 1 0 1 1 2 0v10a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h7.586L4.293 5.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options customElement={{ tag: 'arrow-top-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7.414L5.707 19.707a1 1 0 0 1-1.414-1.414L16.586 6H9a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'less-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'm-kpi-item' }} />\n\n<script lang=\"ts\">\n  import type { Component } from 'svelte';\n  import ArrowBottomRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowBottomRight24/ArrowBottomRight24.svelte';\n  import ArrowTopRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowTopRight24/ArrowTopRight24.svelte';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  /**\n   * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.\n   */\n  interface Props {\n    /**\n     * The current value of the kpi item.\n     */\n    value: string;\n    /**\n     * Defines the evolution of the kpi.\n     */\n    trend?: 'increasing' | 'decreasing' | 'stable';\n    /**\n     * Label of the kpi item.\n     */\n    label?: string;\n    /**\n     * Allows to define the kpi item status.\n     */\n    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';\n    /**\n     * The evolution information defining the kpi.\n     */\n    information?: string;\n    /**\n     * Allows to define the kpi item size.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { value, trend, label, status = 'info', information, size = 's' }: Props = $props();\n\n  const isMedium = $derived(size === 'm');\n  const isLarge = $derived(size === 'l');\n\n  const iconMap: Record<NonNullable<Props['trend']>, Component> = {\n    increasing: ArrowTopRight24,\n    decreasing: ArrowBottomRight24,\n    stable: Less24,\n  };\n\n  const IconComponent = $derived(trend ? iconMap[trend] : undefined);\n\n  const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);\n</script>\n\n<div class={rootClasses}>\n  {#if isMedium && label}\n    <span class=\"mc-kpi__label\">\n      {label}\n    </span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if isLarge && label}\n        <span class=\"mc-kpi__label\">\n          {label}\n        </span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if trend || information}\n      <div class=\"mc-kpi__aside\">\n        {#if isLarge && information}\n          <span class=\"mc-kpi__detail\">\n            {information}\n          </span>\n        {/if}\n\n        {#if trend}\n          <IconComponent className=\"mc-kpi__icon\" color=\"black\" />\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/kpi-item';\n</style>\n"],"names":["id","style","className","fill","size","value","$.prop","$$props","trend","label","status","information","isMedium","$.derived","isLarge","iconMap","ArrowTopRight24","ArrowBottomRight24","Less24","IconComponent","rootClasses","$.get","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"ynBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,oZCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+UCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;gyJCPA,sBAqCQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,iBAAS,MAAM,EAAEC,EAAWL,EAAAC,EAAA,cAAA,CAAA,EAAEH,eAAO,GAAG,QAE7DQ,EAAQC,EAAA,IAAYT,EAAI,IAAK,GAAG,EAChCU,EAAOD,EAAA,IAAYT,EAAI,IAAK,GAAG,EAE/BW,EAAuD,CAC3D,WAAYC,EACZ,WAAYC,EACZ,OAAQC,GAGJC,QAAyBX,EAAK,EAAGO,EAAQP,EAAK,GAAI,MAAS,EAE3DY,EAAWP,EAAA,IAAA,kBAA8BT,EAAI,CAAA,YAAYM,EAAM,CAAA,EAAA,4LAbjC,OAAM,wGAAsB,IAAG,yEAmB9DD,EAAK,CAAA,CAAA,kBAFLY,EAAAT,CAAQ,GAAIH,EAAK,GAAAa,EAAAC,CAAA,8EASbd,EAAK,CAAA,CAAA,kBAFLY,EAAAP,CAAO,GAAIL,EAAK,GAAAa,EAAAE,CAAA,+HAWdb,EAAW,CAAA,CAAA,kBAFXU,EAAAP,CAAO,GAAIH,EAAW,GAAAW,EAAAG,EAAA,4IAMtBjB,EAAK,GAAAc,EAAAI,EAAA,0BARTlB,EAAK,GAAIG,MAAWW,EAAAK,CAAA,sCAfjBP,CAAW,CAAA,EAAA,gBAAA,MAaYf,GAAK,eAfxC","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"KpiItem.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBottomRight24/ArrowBottomRight24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowTopRight24/ArrowTopRight24.svelte","../../../src/components/kpiitem/KpiItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-bottom-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 0 1 1.414 0L18 16.586V9a1 1 0 1 1 2 0v10a1 1 0 0 1-1 1H9a1 1 0 1 1 0-2h7.586L4.293 5.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options customElement={{ tag: 'arrow-top-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M8 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7.414L5.707 19.707a1 1 0 0 1-1.414-1.414L16.586 6H9a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: 'm-kpi-item' }} />\n\n<script lang=\"ts\">\n  import type { Component } from 'svelte';\n  import ArrowBottomRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowBottomRight24/ArrowBottomRight24.svelte';\n  import ArrowTopRight24 from '@mozaic-ds/icons-svelte/svelte/ArrowTopRight24/ArrowTopRight24.svelte';\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  /**\n   * A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.\n   */\n  interface Props {\n    /**\n     * The current value of the kpi item.\n     */\n    value: string;\n    /**\n     * Defines the evolution of the kpi.\n     */\n    trend?: 'increasing' | 'decreasing' | 'stable';\n    /**\n     * Label of the kpi item.\n     */\n    label?: string;\n    /**\n     * Allows to define the kpi item status.\n     */\n    status?: 'info' | 'warning' | 'error' | 'success' | 'neutral';\n    /**\n     * The evolution information defining the kpi.\n     */\n    information?: string;\n    /**\n     * Allows to define the kpi item size.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { value, trend, label, status = 'info', information, size = 's', ...attrs }: Props = $props();\n\n  const isMedium = $derived(size === 'm');\n  const isLarge = $derived(size === 'l');\n\n  const iconMap: Record<NonNullable<Props['trend']>, Component> = {\n    increasing: ArrowTopRight24,\n    decreasing: ArrowBottomRight24,\n    stable: Less24,\n  };\n\n  const IconComponent = $derived(trend ? iconMap[trend] : undefined);\n\n  const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);\n</script>\n\n<div class={rootClasses} {...attrs}>\n  {#if isMedium && label}\n    <span class=\"mc-kpi__label\">\n      {label}\n    </span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if isLarge && label}\n        <span class=\"mc-kpi__label\">\n          {label}\n        </span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if trend || information}\n      <div class=\"mc-kpi__aside\">\n        {#if isLarge && information}\n          <span class=\"mc-kpi__detail\">\n            {information}\n          </span>\n        {/if}\n\n        {#if trend}\n          <IconComponent className=\"mc-kpi__icon\" color=\"black\" />\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/kpi-item';\n</style>\n"],"names":["id","style","className","fill","size","value","$.prop","$$props","trend","label","status","information","attrs","$.rest_props","isMedium","$.derived","isLarge","iconMap","ArrowTopRight24","ArrowBottomRight24","Less24","IconComponent","rootClasses","$.attribute_effect","div","$.get","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":"8qBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,oZCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;gyJCPA,sBAqCQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,iBAAS,MAAM,EAAEC,EAAWL,EAAAC,EAAA,cAAA,CAAA,EAAEH,eAAO,GAAG,EAAKQ,EAAKC,GAAAN,EAAA,wGAEvEO,EAAQC,EAAA,IAAYX,EAAI,IAAK,GAAG,EAChCY,EAAOD,EAAA,IAAYX,EAAI,IAAK,GAAG,EAE/Ba,EAAuD,CAC3D,WAAYC,EACZ,WAAYC,EACZ,OAAQC,IAGJC,QAAyBb,EAAK,EAAGS,EAAQT,EAAK,GAAI,MAAS,EAE3Dc,EAAWP,EAAA,IAAA,kBAA8BX,EAAI,CAAA,YAAYM,EAAM,CAAA,EAAA,4LAbjC,OAAM,wGAAsB,IAAG,mBAgBzDa,GAAAC,EAAA,KAAA,CAAA,MAAAC,EAAAH,CAAW,KAAMV,CAAK,GAAA,OAAA,OAAA,OAAA,gBAAA,4DAG3BH,EAAK,CAAA,CAAA,kBAFLgB,EAAAX,CAAQ,GAAIL,EAAK,GAAAiB,EAAAC,CAAA,8EASblB,EAAK,CAAA,CAAA,kBAFLgB,EAAAT,CAAO,GAAIP,EAAK,GAAAiB,EAAAE,CAAA,+HAWdjB,EAAW,CAAA,CAAA,kBAFXc,EAAAT,CAAO,GAAIL,EAAW,GAAAe,EAAAG,EAAA,4IAMtBrB,EAAK,GAAAkB,EAAAI,EAAA,0BARTtB,EAAK,GAAIG,MAAWe,EAAAK,CAAA,+BAFM1B,EAAK,CAAA,CAAA,aAfxC","x_google_ignoreList":[0,1]}

package/dist/components/kpiitem/KpiItem.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './KpiItem.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/kpiitem/KpiItem.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KpiItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kpiitem/KpiItem.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,2BAA2B,EAAE,KAMzC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAKpC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC"}
+{"version":3,"file":"KpiItem.stories.d.ts","sourceRoot":"","sources":["../../../src/components/kpiitem/KpiItem.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,2BAA2B,EAAE,KAMzC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAKpC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC"}

package/dist/components/kpiitem/KpiItem.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './KpiItem.svelte';
 const meta = {
     title: 'Status/Kpi Item',
     component: 'm-kpi-item',

package/dist/components/kpiitem/KpiItem.svelte

@@ -35,7 +35,7 @@
     size?: 's' | 'm' | 'l';
   }
 
-  let { value, trend, label, status = 'info', information, size = 's' }: Props = $props();
+  let { value, trend, label, status = 'info', information, size = 's', ...attrs }: Props = $props();
 
   const isMedium = $derived(size === 'm');
   const isLarge = $derived(size === 'l');
@@ -51,7 +51,7 @@
   const rootClasses = $derived(`mc-kpi mc-kpi--${size} mc-kpi--${status}`);
 </script>
 
-<div class={rootClasses}>
+<div class={rootClasses} {...attrs}>
   {#if isMedium && label}
     <span class="mc-kpi__label">
       {label}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js

@@ -1,4 +1,4 @@
-import{c as d,p as f,a as v,b as l,f as c,t as b,i as m,j as g,k as u,d as p,r as h,e as z,g as _}from"../../custom-element.js";import{a as k,s as j}from"../../attributes.js";var w=c('<div><div class="mc-linear-progressbar-buffer__indicator svelte-kfj12z" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>');const x={hash:"svelte-kfj12z",code:`/**
+import{c as n,p as f,a as c,b as o,f as b,r as m,d as g,t as p,h,i as z,j as l,e as _,l as k,m as j}from"../../custom-element.js";import{a as w}from"../../attributes.js";var $=b("<div><div></div></div>");const x={hash:"svelte-kfj12z",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-buffer.svelte-kfj12z {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-kfj12z {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-kfj12z {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-kfj12z {height:0.5rem;}`};function y(i,s){f(s,!0),v(i,x);let e=l(s,"value",7,0),a=l(s,"size",7,"m");var n={get value(){return e()},set value(t=0){e(t),u()},get size(){return a()},set size(t="m"){a(t),u()}},r=w(),o=p(r);return h(r),b(()=>{z(r,1,_(["mc-linear-progressbar-buffer",`mc-linear-progressbar-buffer--${a()}`]),"svelte-kfj12z"),k(o,`--progress-value: ${e()};`),j(o,"aria-valuenow",e())}),m(i,r),g(n)}customElements.define("m-linear-progressbar-buffer",d(y,{value:{},size:{}},[],[],!0));
+ */.mc-linear-progressbar-buffer.svelte-kfj12z {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-kfj12z {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-kfj12z {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-kfj12z {height:0.5rem;}`};function y(i,e){f(e,!0),c(i,x);let r=o(e,"value",7,0),a=o(e,"size",7,"m"),d=m(e,["$$slots","$$events","$$legacy","$$host","value","size"]);var u={get value(){return r()},set value(t=0){r(t),l()},get size(){return a()},set size(t="m"){a(t),l()}},s=$(),v=g(s);return w(v,()=>({class:"mc-linear-progressbar-buffer__indicator",role:"progressbar",style:`--progress-value: ${r()};`,"aria-valuenow":r(),"aria-valuemin":"0","aria-valuemax":"100",...d}),void 0,void 0,void 0,"svelte-kfj12z"),_(s),p(()=>k(s,1,j(["mc-linear-progressbar-buffer",`mc-linear-progressbar-buffer--${a()}`]),"svelte-kfj12z")),h(i,s),z(u)}customElements.define("m-linear-progressbar-buffer",n(y,{value:{},size:{}},[],[],!0));
 //# sourceMappingURL=LinearProgressbarBuffer.js.map

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.js","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-buffer' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.\n   */\n  interface Props {\n    /**\n     * Allows to define the progress bar size.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, size = 'm' }: Props = $props();\n</script>\n\n<div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>\n  <div\n    class=\"mc-linear-progressbar-buffer__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  ></div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n</style>\n"],"names":["value","size"],"mappings":";;soBAAA,gBAiBQ,IAAAA,gBAAQ,CAAC,EAAEC,eAAO,GAAG,6CAAb,EAAC,6CAAS,IAAG,qDAGhB,gEAAiEA,GAAI,+CAIlDD,EAAK,CAAA,GAAA,sBAClBA,GAAK,eAPxB"}
+{"version":3,"file":"LinearProgressbarBuffer.js","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-buffer' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.\n   */\n  interface Props {\n    /**\n     * Allows to define the progress bar size.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>\n  <div\n    class=\"mc-linear-progressbar-buffer__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    {...attrs}\n  ></div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n</style>\n"],"names":["value","size","attrs","$.rest_props","$$props"],"mappings":";;soBAAA,gBAiBQ,IAAAA,gBAAQ,CAAC,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,QAAA,MAAA,CAAA,6CAAvB,EAAC,6CAAS,IAAG,wIAOGJ,EAAK,CAAA,oBAClBA,EAAK,+CAGhBE,8DARK,gEAAiED,GAAI,kCAFlF"}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './LinearProgressbarBuffer.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}
+{"version":3,"file":"LinearProgressbarBuffer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,kCAAkC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAsBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './LinearProgressbarBuffer.svelte';
 const meta = {
     title: 'Indicators/Linear Progress Bar (Buffer)',
     component: 'm-linear-progressbar-buffer',

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte

@@ -15,7 +15,7 @@
     value?: number;
   }
 
-  let { value = 0, size = 'm' }: Props = $props();
+  let { value = 0, size = 'm', ...attrs }: Props = $props();
 </script>
 
 <div class={['mc-linear-progressbar-buffer', `mc-linear-progressbar-buffer--${size}`]}>
@@ -26,6 +26,7 @@
     aria-valuenow={value}
     aria-valuemin="0"
     aria-valuemax="100"
+    {...attrs}
   ></div>
 </div>
 

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js

@@ -1,4 +1,4 @@
-import{c as p,p as g,a as b,b as m,f as u,t as f,i as h,j as _,k,d as a,F as x,r as t,h as w}from"../../custom-element.js";import{a as y,s as z}from"../../attributes.js";var j=u('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div class="mc-linear-progressbar-percentage__indicator svelte-kh7ttv" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
+import{c as g,p as b,a as m,b as u,f,r as h,d as r,t as _,h as x,i as k,j as w,U as y,e as a,g as $}from"../../custom-element.js";import{a as z}from"../../attributes.js";var j=f('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(o,i){g(i,!0),b(o,L);let e=m(i,"value",7,0);var v={get value(){return e()},set value(d=0){e(d),k()}},s=j(),r=a(s),l=a(r),n=a(l),c=a(n);return x(),t(n),t(l),t(r),t(s),f(()=>{y(r,`--progress-value: ${e()};`),z(r,"aria-valuenow",e()),w(c,`${e()??""} `)}),h(o,s),_(v)}customElements.define("m-linear-progressbar-percentage",p(P,{value:{}},[],[],!0));
+ */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(i,t){b(t,!0),m(i,L);let e=u(t,"value",7,0),v=h(t,["$$slots","$$events","$$legacy","$$host","value"]);var c={get value(){return e()},set value(p=0){e(p),w()}},s=j(),o=r(s);z(o,()=>({class:"mc-linear-progressbar-percentage__indicator",role:"progressbar",style:`--progress-value: ${e()};`,"aria-valuenow":e(),"aria-valuemin":"0","aria-valuemax":"100",...v}),void 0,void 0,void 0,"svelte-kh7ttv");var l=r(o),n=r(l),d=r(n);return y(),a(n),a(l),a(o),a(s),_(()=>$(d,`${e()??""} `)),x(i,s),k(c)}customElements.define("m-linear-progressbar-percentage",g(P,{value:{}},[],[],!0));
 //# sourceMappingURL=LinearProgressbarPercentage.js.map

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0 }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value"],"mappings":";;i4CAAA,gBAaQ,IAAAA,gBAAQ,CAAC,6CAAD,EAAC,6GAOeA,EAAK,CAAA,GAAA,sBAClBA,GAAK,SAMfA,EAAK,GAAA,EAAA,GAAA,eAbd"}
+{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0, ...attrs }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    {...attrs}\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value","attrs","$.rest_props","$$props"],"mappings":";;i4CAAA,gBAaQ,IAAAA,gBAAQ,CAAC,EAAKC,EAAKC,EAAAC,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,OAAA,CAAA,6CAAX,EAAC,qIAOeH,EAAK,CAAA,oBAClBA,EAAK,+CAGhBC,+GAICD,KAAK,EAAA,GAAA,CAAA,aAdd"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './LinearProgressbarPercentage.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC"}
+{"version":3,"file":"LinearProgressbarPercentage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,sCAAsC,CAAC;AAE9C,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './LinearProgressbarPercentage.svelte';
 const meta = {
     title: 'Indicators/Linear Progress Bar (Percentage)',
     component: 'm-linear-progressbar-percentage',

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte

@@ -11,7 +11,7 @@
     value?: number;
   }
 
-  let { value = 0 }: Props = $props();
+  let { value = 0, ...attrs }: Props = $props();
 </script>
 
 <div class="mc-linear-progressbar-percentage">
@@ -22,6 +22,7 @@
     aria-valuenow={value}
     aria-valuemin="0"
     aria-valuemax="100"
+    {...attrs}
   >
     <div class="mc-linear-progressbar-percentage__label">
       <p class="mc-linear-progressbar-percentage__value">

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{c as L,p as S,a as q,b as i,f as _,d as c,s as b,t as A,i as h,j as B,k as l,r as s,e as F,g as G}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as x}from"../../slot.js";import{s as y}from"../../attributes.js";var H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),J=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const K={hash:"svelte-5kacnx",code:`/**
+import{c as L,p as S,a as q,b as i,f as _,r as A,d as c,s as b,h as u,i as B,j as a,e as s}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as x}from"../../slot.js";import{a as F}from"../../attributes.js";var G=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const J={hash:"svelte-5kacnx",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function M(p,n){S(n,!0),q(p,K);let m=i(n,"href",7),k=i(n,"target",7),r=i(n,"inline",7),f=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),o=i(n,"iconposition",7,"left");var z={get href(){return m()},set href(e){m(e),l()},get target(){return k()},set target(e){k(e),l()},get inline(){return r()},set inline(e){r(e),l()},get appearance(){return f()},set appearance(e="standard"){f(e),l()},get size(){return v()},set size(e="s"){v(e),l()},get iconposition(){return o()},set iconposition(e="left"){o(e),l()}},a=J(),g=c(a);{var j=e=>{var t=H(),u=c(t);x(u,n,"icon",{}),s(t),h(e,t)};w(g,e=>{o()==="left"&&e(j)})}var d=b(g,2),C=c(d);x(C,n,"default",{}),s(d);var D=b(d,2);{var E=e=>{var t=I(),u=c(t);x(u,n,"icon",{}),s(t),h(e,t)};w(D,e=>{o()==="right"&&e(E)})}return s(a),A(()=>{F(a,1,G(["mc-link",`mc-link--${f()}`,`mc-link--${v()}`,r()&&"mc-link--inline",!r()&&"mc-link--stand-alone"]),"svelte-5kacnx"),y(a,"href",m()),y(a,"target",k())}),h(p,a),B(z)}customElements.define("m-link",L(M,{href:{},target:{},inline:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function K(p,n){S(n,!0),q(p,J);let m=i(n,"href",7),f=i(n,"target",7),l=i(n,"inline",7),k=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),o=i(n,"iconposition",7,"left"),y=A(n,["$$slots","$$events","$$legacy","$$host","href","target","inline","appearance","size","iconposition"]);var z={get href(){return m()},set href(e){m(e),a()},get target(){return f()},set target(e){f(e),a()},get inline(){return l()},set inline(e){l(e),a()},get appearance(){return k()},set appearance(e="standard"){k(e),a()},get size(){return v()},set size(e="s"){v(e),a()},get iconposition(){return o()},set iconposition(e="left"){o(e),a()}},r=I();F(r,()=>({class:["mc-link",`mc-link--${k()}`,`mc-link--${v()}`,l()&&"mc-link--inline",!l()&&"mc-link--stand-alone"],href:m(),target:f(),...y}),void 0,void 0,void 0,"svelte-5kacnx");var g=c(r);{var j=e=>{var t=G(),h=c(t);x(h,n,"icon",{}),s(t),u(e,t)};w(g,e=>{o()==="left"&&e(j)})}var d=b(g,2),C=c(d);x(C,n,"default",{}),s(d);var D=b(d,2);{var E=e=>{var t=H(),h=c(t);x(h,n,"icon",{}),s(t),u(e,t)};w(D,e=>{o()==="right"&&e(E)})}return s(r),u(p,r),B(z)}customElements.define("m-link",L(K,{href:{},target:{},inline:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-link' }} />\n\n<script lang=\"ts\">\n  /**\n   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.\n   *\n   * @slot default - Use this slot to insert the textual content of the Link.\n   * @slot icon - Use this slot to insert an icon for the Link.\n   */\n  interface Props {\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconposition?: 'left' | 'right';\n    /**\n     * Allows to define the link appearance.\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size.\n     */\n    size?: 's' | 'm';\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     * Specify wether the link is inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n  }: Props = $props();\n</script>\n\n<a\n  class={[\n    'mc-link',\n    `mc-link--${appearance}`,\n    `mc-link--${size}`,\n    inline && 'mc-link--inline',\n    !inline && 'mc-link--stand-alone',\n  ]}\n  {href}\n  {target}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n\n  .mc-link__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["href","$.prop","$$props","target","inline","appearance","size","iconposition","$$render","consequent","consequent_1"],"mappings":";;+zDAAA,oBAqCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,sMAFR,WAAU,6CAChB,IAAG,6DACK,OAAM,2FAelBA,EAAY,IAAK,QAAMC,EAAAC,CAAA,gIAQvBF,EAAY,IAAK,SAAOC,EAAAE,CAAA,gCAjB3B,sBACYL,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,yFARf"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-link' }} />\n\n<script lang=\"ts\">\n  /**\n   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.\n   *\n   * @slot default - Use this slot to insert the textual content of the Link.\n   * @slot icon - Use this slot to insert an icon for the Link.\n   */\n  interface Props {\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconposition?: 'left' | 'right';\n    /**\n     * Allows to define the link appearance.\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size.\n     */\n    size?: 's' | 'm';\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     * Specify wether the link is inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n    ...attrs\n  }: Props = $props();\n</script>\n\n<a\n  class={[\n    'mc-link',\n    `mc-link--${appearance}`,\n    `mc-link--${size}`,\n    inline && 'mc-link--inline',\n    !inline && 'mc-link--stand-alone',\n  ]}\n  {href}\n  {target}\n  {...attrs}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n\n  .mc-link__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["href","$.prop","$$props","target","inline","appearance","size","iconposition","attrs","$.rest_props","$$render","consequent","consequent_1"],"mappings":";;+zDAAA,oBAqCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,EAClBC,EAAAC,EAAAP,EAAA,4SAHU,WAAU,6CAChB,IAAG,6DACK,OAAM,mCAOrB,sBACYG,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,+CAITI,uHAECD,EAAY,IAAK,QAAMG,EAAAC,CAAA,gIAQvBJ,EAAY,IAAK,SAAOG,EAAAE,CAAA,2BAtB/B"}

package/dist/components/link/Link.stories.d.ts

@@ -1,4 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Link.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/link/Link.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,eAAe,CAAC;AACvB,OAAO,qEAAqE,CAAC;AAC7E,OAAO,mEAAmE,CAAC;AAE3E,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/link/Link.stories.js

@@ -1,6 +1,9 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Link.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';
 const meta = {
     title: 'Navigation/Link',
     component: 'm-link',

package/dist/components/link/Link.svelte

@@ -41,6 +41,7 @@
     appearance = 'standard',
     size = 's',
     iconposition = 'left',
+    ...attrs
   }: Props = $props();
 </script>
 
@@ -54,6 +55,7 @@
   ]}
   {href}
   {target}
+  {...attrs}
 >
   {#if iconposition === 'left'}
     <span class="mc-link__icon">

package/dist/components/link/Link.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,IAAI;;;;;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA2CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,IAAI;;;;;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}

package/dist/components/loader/Loader.js

@@ -1,4 +1,4 @@
-import{c as z,p as C,a as B,b as d,f as _,s as L,d as l,t as g,e as R,g as D,i as h,j as E,k as m,r as o,h as S}from"../../custom-element.js";import{i as V}from"../../if.js";import{s as p}from"../../attributes.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
+import{c as C,p as $,a as B,b as d,f as _,r as L,s as R,d as o,t as g,h,i as D,j as m,e as l,g as E}from"../../custom-element.js";import{i as S}from"../../if.js";import{a as V,s as p}from"../../attributes.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-loader.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:2rem;width:2rem;}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:4;}.mc-loader.svelte-g7kvnj {color:var(--loader-color-standard, #464e63);}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}.mc-loader.svelte-g7kvnj {align-items:center;display:inline-flex;flex-direction:column;}.mc-loader__spinner.svelte-g7kvnj:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-g7kvnj {
   animation: svelte-g7kvnj-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-g7kvnj {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;
@@ -25,5 +25,5 @@ import{c as z,p as C,a as B,b as d,f as _,s as L,d as l,t as g,e as R,g as D,i a
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};function G(k,s){C(s,!0),B(k,F);let t=d(s,"size",7,"m"),c=d(s,"appearance",7,"standard"),r=d(s,"text",7);const f=()=>{let e;switch(t()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},j=()=>{let e;switch(t()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var w={get size(){return t()},set size(e="m"){t(e),m()},get appearance(){return c()},set appearance(e="standard"){c(e),m()},get text(){return r()},set text(e){r(e),m()}},n=A(),v=l(n),i=l(v),x=l(i);o(i),o(v);var u=L(v,2);{var b=e=>{var a=q(),y=l(a,!0);o(a),g(()=>S(y,r())),h(e,a)};V(u,e=>{r()&&e(b)})}return o(n),g((e,a)=>{R(n,1,D(["mc-loader",`mc-loader--${t()}`,`mc-loader--${c()}`,r()&&"mc-loader--text-visible"]),"svelte-g7kvnj"),p(i,"viewBox",e),p(x,"r",a)},[f,j]),h(k,n),E(w)}customElements.define("m-loader",z(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
+}`};function G(k,t){$(t,!0),B(k,F);let r=d(t,"size",7,"m"),v=d(t,"appearance",7,"standard"),a=d(t,"text",7),f=L(t,["$$slots","$$events","$$legacy","$$host","size","appearance","text"]);const j=()=>{let e;switch(r()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},w=()=>{let e;switch(r()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var x={get size(){return r()},set size(e="m"){r(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return a()},set text(e){a(e),m()}},n=A();V(n,()=>({class:["mc-loader",`mc-loader--${r()}`,`mc-loader--${v()}`,a()&&"mc-loader--text-visible"],...f}),void 0,void 0,void 0,"svelte-g7kvnj");var c=o(n),i=o(c),u=o(i);l(i),l(c);var b=R(c,2);{var y=e=>{var s=q(),z=o(s,!0);l(s),g(()=>E(z,a())),h(e,s)};S(b,e=>{a()&&e(y)})}return l(n),g((e,s)=>{p(i,"viewBox",e),p(u,"r",s)},[j,w]),h(k,n),D(x)}customElements.define("m-loader",C(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
 //# sourceMappingURL=Loader.js.map

package/dist/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\n   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.\n   */\n  interface Props {\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 'xs' | 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }\n\n  let { size = 'm', appearance = 'standard', text }: Props = $props();\n\n  const setViewBox = () => {\n    let viewBox: string;\n\n    switch (size) {\n      case 'xs':\n        viewBox = '0 0 20 20';\n        break;\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  };\n\n  const setCircleRadius = () => {\n    let circleRadius: number;\n\n    switch (size) {\n      case 'xs':\n        circleRadius = 6;\n        break;\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  };\n</script>\n\n<div\n  class={[\n    'mc-loader',\n    `mc-loader--${size}`,\n    `mc-loader--${appearance}`,\n    text && 'mc-loader--text-visible',\n  ]}\n>\n  <span class=\"mc-loader__spinner\">\n    <svg class=\"mc-loader__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox={setViewBox()}>\n      <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r={setCircleRadius()} />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","appearance","text","$.prop","$$props","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,gBAuBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAEzC,MAAAC,EAAU,IAAS,KACnBC,SAEIN,EAAI,EAAA,KACL,KACHM,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,yJA2DpCN,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAO,EAAAC,CAAA,mCAZP,0BACcV,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,0EAIiE,CAAAG,EAClBE,CAAe,cAZ1E"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  /**\n   * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.\n   */\n  interface Props {\n    /**\n     * Specifies the visual appearance of the loader.\n     */\n    appearance?: 'standard' | 'accent' | 'inverse';\n\n    /**\n     * Defines the size of the loader.\n     */\n    size?: 'xs' | 's' | 'm' | 'l';\n\n    /**\n     * Text to display alongside the loader when using the loader inside an `Overlay`.\n     */\n    text?: string;\n  }\n\n  let { size = 'm', appearance = 'standard', text, ...attrs }: Props = $props();\n\n  const setViewBox = () => {\n    let viewBox: string;\n\n    switch (size) {\n      case 'xs':\n        viewBox = '0 0 20 20';\n        break;\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  };\n\n  const setCircleRadius = () => {\n    let circleRadius: number;\n\n    switch (size) {\n      case 'xs':\n        circleRadius = 6;\n        break;\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  };\n</script>\n\n<div\n  class={[\n    'mc-loader',\n    `mc-loader--${size}`,\n    `mc-loader--${appearance}`,\n    text && 'mc-loader--text-visible',\n  ]}\n  {...attrs}\n>\n  <span class=\"mc-loader__spinner\">\n    <svg class=\"mc-loader__icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox={setViewBox()}>\n      <circle class=\"mc-loader__path\" cx=\"50%\" cy=\"50%\" r={setCircleRadius()} />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","appearance","text","$.prop","$$props","attrs","$.rest_props","setViewBox","viewBox","setCircleRadius","circleRadius","$$render","consequent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAA,gBAuBQ,IAAAA,eAAO,GAAG,EAAEC,qBAAa,UAAU,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,uEAEnD,MAAAG,EAAU,IAAS,KACnBC,SAEIR,EAAI,EAAA,KACL,KACHQ,EAAU,sBAEP,IACHA,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,EAEMC,EAAe,IAAS,KACxBC,SAEIV,EAAI,EAAA,KACL,KACHU,EAAe,YAEZ,IACHA,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,2CAxCa,IAAG,yDAAe,WAAU,gFA6CvC,0BACcV,EAAI,CAAA,iBACJC,EAAU,CAAA,GACxBC,KAAQ,8BAENG,wIAUCH,EAAI,CAAA,CAAA,kBAFJA,EAAI,GAAAS,EAAAC,CAAA,uDALkE,CAAAL,EAClBE,CAAe,cAb1E"}

package/dist/components/loader/Loader.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Loader.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/loader/Loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}
+{"version":3,"file":"Loader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loader/Loader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,iBAAiB,CAAC;AAEzB,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/loader/Loader.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './Loader.svelte';
 const meta = {
     title: 'Indicators/Loader',
     component: 'm-loader',

package/dist/components/loader/Loader.svelte

@@ -21,7 +21,7 @@
     text?: string;
   }
 
-  let { size = 'm', appearance = 'standard', text }: Props = $props();
+  let { size = 'm', appearance = 'standard', text, ...attrs }: Props = $props();
 
   const setViewBox = () => {
     let viewBox: string;
@@ -71,6 +71,7 @@
     `mc-loader--${appearance}`,
     text && 'mc-loader--text-visible',
   ]}
+  {...attrs}
 >
   <span class="mc-loader__spinner">
     <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox={setViewBox()}>

package/dist/components/loadingoverlay/LoadingOverlay.js

@@ -1,4 +1,4 @@
-import{c as p,p as b,a as g,b as o,f as u,d as n,t as y,i as f,j as x,k as v,r as d,e as z,g as _}from"../../custom-element.js";import{s as h}from"../../attributes.js";import{L as k}from"../loader/Loader.js";import"../../if.js";var L=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-111c1z1",code:`/**
+import{c as b,p as y,a as f,b as r,f as g,r as u,d as n,t as x,h as z,i as _,j as v,e as d,l as h,m as $}from"../../custom-element.js";import{a as L}from"../../attributes.js";import{L as j}from"../loader/Loader.js";import"../../if.js";var k=g("<div><div><!></div></div>");const w={hash:"svelte-111c1z1",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function w(l,t){b(t,!0),g(l,j);let s=o(t,"isvisible",7),e=o(t,"text",7);var c={get isvisible(){return s()},set isvisible(r){s(r),v()},get text(){return e()},set text(r){e(r),v()}},i=L(),a=n(i),m=n(a);return k(m,{size:"l",appearance:"inverse",get text(){return e()}}),d(a),d(i),y(()=>{z(i,1,_(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1"),h(a,"aria-label",e())}),f(l,i),x(c)}customElements.define("m-loading-overlay",p(w,{isvisible:{},text:{}},[],[],!0));
+ */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function D(o,e){y(e,!0),f(o,w);let s=r(e,"isvisible",7),t=r(e,"text",7),c=u(e,["$$slots","$$events","$$legacy","$$host","isvisible","text"]);var m={get isvisible(){return s()},set isvisible(l){s(l),v()},get text(){return t()},set text(l){t(l),v()}},i=k(),a=n(i);L(a,()=>({role:"dialog",tabindex:"-1","aria-label":t(),...c}),void 0,void 0,void 0,"svelte-111c1z1");var p=n(a);return j(p,{size:"l",appearance:"inverse",get text(){return t()}}),d(a),d(i),x(()=>h(i,1,$(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1")),z(o,i),_(m)}customElements.define("m-loading-overlay",b(D,{isvisible:{},text:{}},[],[],!0));
 //# sourceMappingURL=LoadingOverlay.js.map

package/dist/components/loadingoverlay/LoadingOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loading-overlay' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the loading overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Text of the loading overlay.\n     */\n    text?: string;\n  }\n\n  let { isvisible, text }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text}>\n    <Loader size=\"l\" appearance=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loading-overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","text"],"mappings":";;8eAAA,oBAkBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,+NAGV,oBAAqBF,KAAa,YAAY,CAAA,EAAA,gBAAA,mBACZG,GAAI,eAHnD"}
+{"version":3,"file":"LoadingOverlay.js","sources":["../../../src/components/loadingoverlay/LoadingOverlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loading-overlay' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the loading overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Text of the loading overlay.\n     */\n    text?: string;\n  }\n\n  let { isvisible, text, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-loading-loader', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-label={text} {...attrs}>\n    <Loader size=\"l\" appearance=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loading-overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","text","attrs","$.rest_props"],"mappings":";;8eAAA,oBAkBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,2OAIcC,EAAI,KAAMC,kJAD5C,oBAAqBJ,EAAS,GAAI,YAAY,CAAA,EAAA,gBAAA,CAAA,aAF3D"}

package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './LoadingOverlay.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/loadingoverlay/LoadingOverlay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}
+{"version":3,"file":"LoadingOverlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/loadingoverlay/LoadingOverlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/components/loadingoverlay/LoadingOverlay.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './LoadingOverlay.svelte';
 const meta = {
     title: 'Overlay/Loading Overlay',
     component: 'm-loading-overlay',

package/dist/components/loadingoverlay/LoadingOverlay.svelte

@@ -16,11 +16,11 @@
     text?: string;
   }
 
-  let { isvisible, text }: Props = $props();
+  let { isvisible, text, ...attrs }: Props = $props();
 </script>
 
 <div class={['mc-loading-loader', isvisible && 'is-visible']}>
-  <div role="dialog" tabindex="-1" aria-label={text}>
+  <div role="dialog" tabindex="-1" aria-label={text} {...attrs}>
     <Loader size="l" appearance="inverse" {text} />
   </div>
 </div>

package/dist/components/modal/Modal.js

@@ -1,4 +1,4 @@
-import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j as P,k as c,r as o,h as O,e as Q,g as R}from"../../custom-element.js";import{i as T}from"../../if.js";import{s as m}from"../../slot.js";import{s as U}from"../../attributes.js";import{b as V}from"../../this.js";import{C as W}from"../../Cross24.js";import{O as X}from"../overlay/Overlay.js";import"../../legacy.js";var Z=w('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=w('<p class="svelte-1tduk3b"> </p>'),ee=w('<section tabindex="-1" aria-labelledby="modalTitle"><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const te={hash:"svelte-1tduk3b",code:`/**
+import{w as K,c as L,p as N,a as P,b,f as y,r as Q,d as e,s as n,t as E,h as x,i as R,j as u,e as r,g as O}from"../../custom-element.js";import{i as T}from"../../if.js";import{s}from"../../slot.js";import{a as U}from"../../attributes.js";import{b as V}from"../../this.js";import{C as W}from"../../Cross24.js";import{O as X}from"../overlay/Overlay.js";import"../../legacy.js";var Z=y('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=y('<p class="svelte-1tduk3b"> </p>'),oo=y('<section><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const to={hash:"svelte-1tduk3b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
@@ -12,5 +12,5 @@ import{v as J,c as K,p as L,a as N,b as s,f as w,d as t,s as l,t as E,i as y,j a
 @media (width >= 680px) {.mc-modal__footer.svelte-1tduk3b {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
 }.mc-modal__link.svelte-1tduk3b {order:1;}
 @media (width >= 680px) {.mc-modal__link.svelte-1tduk3b {margin-right:auto;order:0;}
-}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b: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-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {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.svelte-1tduk3b: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-1tduk3b: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--ghost.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b: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-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function oe(z,r){L(r,!0),N(z,te);let d=s(r,"open",7),b=s(r,"title",7),n=s(r,"description",7),u=s(r,"closable",7,!0),v;function Y(){d(!1);const e=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});v.dispatchEvent(e)}var D={get open(){return d()},set open(e){d(e),c()},get title(){return b()},set title(e){b(e),c()},get description(){return n()},set description(e){n(e),c()},get closable(){return u()},set closable(e=!0){u(e),c()}},i=ee(),f=t(i),g=t(f),p=t(g),M=t(p);m(M,r,"icon",{}),o(p);var k=l(p,2),S=t(k,!0);o(k);var q=l(k,2);{var A=e=>{var a=Z();a.__click=Y;var x=t(a);W(x,{class:"mc-modal__close","aria-hidden":"true"}),o(a),y(e,a)};T(q,e=>{u()&&e(A)})}o(g);var _=l(g,2),C=t(_);{var B=e=>{var a=$(),x=t(a,!0);o(a),E(()=>O(x,n())),y(e,a)};T(C,e=>{n()&&e(B)})}var F=l(C,2);m(F,r,"default",{}),o(_);var j=l(_,2),h=t(j),G=t(h);m(G,r,"link",{}),o(h);var H=l(h,2);m(H,r,"footer",{}),o(j),o(f);var I=l(f,2);return X(I,{get isvisible(){return d()},dialoglabel:"modal"}),o(i),V(i,e=>v=e,()=>v),E(()=>{Q(i,1,R(["mc-modal",d()&&"is-open"]),"svelte-1tduk3b"),U(i,"aria-hidden",!d()),O(S,b())}),y(z,i),P(D)}J(["click"]);customElements.define("m-modal",K(oe,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
+}.mc-modal-open.svelte-1tduk3b {overflow:hidden;}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b: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-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {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-1tduk3b {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1tduk3b {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1tduk3b: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-1tduk3b: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-1tduk3b {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1tduk3b {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1tduk3b {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1tduk3b {padding:0.25rem;}.mc-button--outlined.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b: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-1tduk3b {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1tduk3b: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-1tduk3b {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1tduk3b: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-1tduk3b {--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-1tduk3b:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1tduk3b: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-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function eo(z,t){N(t,!0),P(z,to);let d=b(t,"open",7),i=b(t,"title",7),l=b(t,"description",7),v=b(t,"closable",7,!0),Y=Q(t,["$$slots","$$events","$$legacy","$$host","open","title","description","closable"]),m;function D(){d(!1);const o=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});m.dispatchEvent(o)}var M={get open(){return d()},set open(o){d(o),u()},get title(){return i()},set title(o){i(o),u()},get description(){return l()},set description(o){l(o),u()},get closable(){return v()},set closable(o=!0){v(o),u()}},c=oo();U(c,()=>({class:["mc-modal",d()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!d(),...Y}),void 0,void 0,void 0,"svelte-1tduk3b");var g=e(c),k=e(g),f=e(k),S=e(f);s(S,t,"icon",{}),r(f);var h=n(f,2),q=e(h,!0);r(h);var A=n(h,2);{var B=o=>{var a=Z();a.__click=D;var w=e(a);W(w,{class:"mc-modal__close","aria-hidden":"true"}),r(a),x(o,a)};T(A,o=>{v()&&o(B)})}r(k);var p=n(k,2),C=e(p);{var F=o=>{var a=$(),w=e(a,!0);r(a),E(()=>O(w,l())),x(o,a)};T(C,o=>{l()&&o(F)})}var G=n(C,2);s(G,t,"default",{}),r(p);var j=n(p,2),_=e(j),H=e(_);s(H,t,"link",{}),r(_);var I=n(_,2);s(I,t,"footer",{}),r(j),r(g);var J=n(g,2);return X(J,{get isvisible(){return d()},dialoglabel:"modal"}),r(c),V(c,o=>m=o,()=>m),E(()=>O(q,i())),x(z,c),R(M)}K(["click"]);customElements.define("m-modal",L(eo,{open:{},title:{},description:{},closable:{}},["icon","default","link","footer"],[],!0));
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;i0EAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAC3CC,EAEK,SAAAC,GAAU,CACjBP,EAAO,EAAK,EAEN,MAAAQ,EAAK,IAAO,YAAY,eAC5B,OAAQR,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBM,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,6IAiC9BD,sFALRF,EAAQ,GAAAI,EAAAC,CAAA,2EAcPN,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAK,EAAAE,CAAA,qLAcCX,EAAI,8BAnCdY,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAJV,WAAYN,KAAQ,SAAS,CAAA,EAAA,gBAAA,qBAGvBA,EAAI,CAAA,MAQ+BG,GAAK,eAdxD"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-modal' }} />\n\n<script lang=\"ts\">\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 class=\"mc-modal__close\" aria-hidden=\"true\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","attrs","$.rest_props","element","onClose","event","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":";;;;;;;;;;;;;;2yWAAA,qBAiCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAAKC,EAAKC,EAAAL,EAAA,oFACrDM,EAEK,SAAAC,GAAU,CACjBT,EAAO,EAAK,EAEN,MAAAU,EAAK,IAAO,YAAY,eAC5B,OAAQV,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBQ,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,oCAgBvC,WAAYV,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdM,yKAaaG,sFALRJ,EAAQ,GAAAM,EAAAC,CAAA,2EAcPR,EAAW,CAAA,CAAA,kBADZA,EAAW,GAAAO,EAAAE,CAAA,qLAcCb,EAAI,8BApCdc,EAAAC,EAAAC,GAAAR,QAAAA,CAAO,YAQ+BL,EAAK,CAAA,CAAA,aAfxD"}

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

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '@mozaic-ds/icons-svelte/custom-elements/InfoCircle32/InfoCircle32.js';
-import '@mozaic-ds/icons-svelte/custom-elements/ExternalLink24/ExternalLink24.js';
+import '@mozaic-ds/icons-svelte/svelte/InfoCircle32/InfoCircle32.svelte';
+import '@mozaic-ds/icons-svelte/svelte/ExternalLink24/ExternalLink24.svelte';
+import './Modal.svelte';
+import '../button/Button.svelte';
+import '../link/Link.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sEAAsE,CAAC;AAC9E,OAAO,0EAA0E,CAAC;AAElF,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,iEAAiE,CAAC;AACzE,OAAO,qEAAqE,CAAC;AAC7E,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IAgDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAQlB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;CAahB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAOlB,CAAC"}