@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/fileuploader/FileUploader.svelte.d.ts

@@ -0,0 +1,125 @@
+import { type NormalizedFile } from '../fileuploaderitem/FileUploaderItem.svelte';
+type FilesValidationState = Record<string, {
+    size: boolean;
+    extension: boolean;
+    customValidation: boolean;
+}>;
+/**
+ * A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.
+ *
+ * @slot name - Use this slot to display a custom file name.
+ * @slot information - Use this slot to display a custom information content.
+ * @slot errorMessage - Use this slot to display a custom error message.
+ * @event files-update {CustomEvent<NormalizedFile[]>} - Emits when files list changes.
+ * @event validation {CustomEvent<FilesValidationState>} - Emits files validation when files list changes.
+ */
+interface Props {
+    /**
+     * Model binding for the selected files (`NormalizedFile`)
+     */
+    files: NormalizedFile[];
+    /**
+     * File types allowed by the uploader.
+     */
+    accept?: HTMLInputElement['accept'];
+    /**
+     * Enables selecting multiple files at once.
+     */
+    multiple?: boolean;
+    /**
+     * File extensions to validate.
+     */
+    allowedextensions?: string[];
+    /**
+     * Maximum file size allowed (in bytes).
+     */
+    maxsize?: number;
+    /**
+     * Custom validation rules applied to each file.
+     */
+    rules?: ((file: NormalizedFile) => boolean)[];
+    /**
+     * Layout format of the item.
+     */
+    format?: 'inline' | 'stacked';
+    /**
+     * Custom error message for the file.
+     */
+    errormessage?: string;
+    /**
+     * Label for the delete button.
+     */
+    deletebuttonlabel?: string;
+    /**
+     * Optional informational text displayed under the file name.
+     */
+    information?: string;
+    /**
+     * Enables drag & drop functionality.
+     */
+    hasdragdrop?: boolean;
+    /**
+     * Controls the display of the uploaded files list.
+     */
+    showfileslist?: boolean;
+    /**
+     * Disables the whole component.
+     */
+    disabled?: boolean;
+    /**
+     * Main drag & drop title.
+     */
+    title?: string;
+    /**
+     * Subtitle used in the drag & drop area.
+     */
+    subtitle?: string;
+    /**
+     * Label of the upload button.
+     */
+    uploadbuttonlabel?: string;
+    /**
+     * Callback to call when files validation is updated.
+     */
+    onvalidation?: (validationState: FilesValidationState) => void;
+    /**
+     * Callback to call when files are updates.
+     */
+    onfilesupdate?: (files: NormalizedFile[]) => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FileUploader: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    name: {
+        slot: string;
+        file: NormalizedFile;
+    };
+    information: {
+        slot: string;
+        file: NormalizedFile;
+    };
+    errorMessage: {
+        slot: string;
+        validationState: {
+            size: boolean;
+            extension: boolean;
+            customValidation: boolean;
+        };
+    };
+}, {}, "files">;
+type FileUploader = InstanceType<typeof FileUploader>;
+export default FileUploader;
+//# sourceMappingURL=FileUploader.svelte.d.ts.map

package/dist/components/fileuploader/FileUploader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/fileuploader/FileUploader.svelte.ts"],"names":[],"mappings":"AAGA,OAAyB,EACrB,KAAK,cAAc,EACpB,MAAM,6CAA6C,CAAC;AAIrD,KAAK,oBAAoB,GAAG,MAAM,CAChC,MAAM,EACN;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,OAAO,CAAC;IAAC,gBAAgB,EAAE,OAAO,CAAA;CAAE,CACjE,CAAC;AAEF;;;;;;;;GAQG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,OAAO,CAAC,EAAE,CAAC;IAC9C;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,eAAe,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACnD;AAqMH,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;AAUD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;kBAzSN,OAAO;uBAAa,OAAO;8BAAoB,OAAO;;;eAySqC,CAAC;AACtF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/components/fileuploader/README.md

@@ -0,0 +1,42 @@
+# `m-file-uploader`
+
+A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `files*` | Model binding for the selected files (`NormalizedFile`) | `NormalizedFile[]` | `$bindable()` |
+| `accept` | File types allowed by the uploader. | `HTMLInputElement['accept']` |   |
+| `multiple` | Enables selecting multiple files at once. | `boolean` |   |
+| `allowedextensions` | File extensions to validate. | `string[]` |   |
+| `maxsize` | Maximum file size allowed (in bytes). | `number` |   |
+| `rules` | Custom validation rules applied to each file. | `((file: NormalizedFile) => boolean)[]` |   |
+| `format` | Layout format of the item. | `'inline'` `'stacked'` | `inline` |
+| `errormessage` | Custom error message for the file. | `string` |   |
+| `deletebuttonlabel` | Label for the delete button. | `string` |   |
+| `information` | Optional informational text displayed under the file name. | `string` |   |
+| `hasdragdrop` | Enables drag & drop functionality. | `boolean` | `true` |
+| `showfileslist` | Controls the display of the uploaded files list. | `boolean` | `true` |
+| `disabled` | Disables the whole component. | `boolean` |   |
+| `title` | Main drag & drop title. | `string` | `Drag & drop` |
+| `subtitle` | Subtitle used in the drag & drop area. | `string` | `or` |
+| `uploadbuttonlabel` | Label of the upload button. | `string` | `Upload file(s)` |
+| `onvalidation` | Callback to call when files validation is updated. | `(validationState: FilesValidationState) => void` |   |
+| `onfilesupdate` | Callback to call when files are updates. | `(files: NormalizedFile[]) => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `name` | Use this slot to display a custom file name. |
+| `information` | Use this slot to display a custom information content. |
+| `errorMessage` | Use this slot to display a custom error message. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `files-update` | Emits when files list changes. | `CustomEvent<NormalizedFile[]>` |
+| `validation` | Emits files validation when files list changes. | `CustomEvent<FilesValidationState>` |
+

package/dist/components/fileuploaderitem/FileUploaderItem.js

@@ -0,0 +1,5 @@
+import{c as le,p as re,a as ie,b as n,q as p,s as b,t as f,f as i,g as ae,h,x as F,d as a,j as m,r as o,aI as _,e as g,l as oe,aC as H,n as S,o as q}from"../../custom-element.js";import{i as B}from"../../if.js";import{a as se,s as E}from"../../slot.js";import{c as de}from"../../svelte-component.js";import{B as J}from"../button/Button.js";import{D as ne}from"../divider/Divider.js";import{p as me,q as ce,C as fe,c as ue}from"../../Condition20.js";import"../../snippet.js";import"../../attributes.js";import"../loader/Loader.js";var ve=h('<span class="mc-file-uploader-item__details svelte-1sb9cm3"><!></span>'),pe=h('<!> <div class="mc-file-uploader-item__actions-container svelte-1sb9cm3"><!></div>',1),be=h('<div class="mc-file-uploader-item__delete-button-container svelte-1sb9cm3"><!></div>'),_e=h('<span class="mc-file-uploader-item__error-message svelte-1sb9cm3"><!></span>'),ge=h('<div><div><div><span class="mc-file-uploader-item__status-icon svelte-1sb9cm3"><!></span> <div class="mc-file-uploader-item__info-content svelte-1sb9cm3"><span class="mc-file-uploader-item__label svelte-1sb9cm3"><!></span> <!></div></div> <!></div> <!></div>');const he={hash:"svelte-1sb9cm3",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-file-uploader.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1sb9cm3 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1sb9cm3 {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1sb9cm3 .mc-file-uploader__button:where(.svelte-1sb9cm3) {width:100%;}.mc-file-uploader__input--disabled.svelte-1sb9cm3 .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1sb9cm3) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1sb9cm3 {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1sb9cm3 {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1sb9cm3 {width:25rem;}.mc-file-uploader--draggable.svelte-1sb9cm3 .mc-file-uploader__input:where(.svelte-1sb9cm3) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1sb9cm3 .mc-file-uploader__input--disabled:where(.svelte-1sb9cm3) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1sb9cm3 .mc-file-uploader__input--dragged:where(.svelte-1sb9cm3) {outline-width:0.25rem;}.mc-file-uploader-item.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:0.25rem;}.mc-file-uploader-item__container.svelte-1sb9cm3 {border:1px solid var(--file-uploader-color-file-item-border-default, #cccccc);border-radius:var(--border-radius-m, 0.5rem);padding:0.75rem;}.mc-file-uploader-item__meta-row.svelte-1sb9cm3 {display:flex;align-items:center;flex-grow:1;}.mc-file-uploader-item__meta-row--with-info.svelte-1sb9cm3 {align-items:start;}.mc-file-uploader-item__status-icon.svelte-1sb9cm3 {fill:var(--file-uploader-color-file-item-icon-valid, #3f9e10);}.mc-file-uploader-item__info-content.svelte-1sb9cm3 {display:flex;flex-direction:column;flex-grow:1;padding-left:0.5rem;padding-right:1rem;}.mc-file-uploader-item__label.svelte-1sb9cm3 {color:var(--file-uploader-color-file-item-text-file-name, #000000);font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);}.mc-file-uploader-item__details.svelte-1sb9cm3 {color:var(--file-uploader-color-file-item-text-information, #666666);font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);}.mc-file-uploader-item__error-message.svelte-1sb9cm3 {color:var(--field-color-validation-invalid, #c61112);font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);}.mc-file-uploader-item__container--inline.svelte-1sb9cm3 {display:flex;align-items:center;}.mc-file-uploader-item__container--stacked.svelte-1sb9cm3 {display:flex;flex-direction:column;gap:0.75rem;}.mc-file-uploader-item__delete-button-container.svelte-1sb9cm3 {padding-left:0.25rem;margin-left:0.25rem;border-left:1px solid var(--divider-color-primary, #cccccc);}.mc-file-uploader-item__actions-container.svelte-1sb9cm3 {padding:0 2rem;display:flex;align-items:center;gap:0.25rem;justify-content:center;}.mc-file-uploader-item__action.svelte-1sb9cm3 {padding:0 0.75rem;flex-grow:1;}.mc-file-uploader-item--error.svelte-1sb9cm3 .mc-file-uploader-item__container:where(.svelte-1sb9cm3) {border-width:var(--border-width-m, 0.125rem);border-color:var(--file-uploader-color-file-item-border-invalid, #ea302d);}.mc-file-uploader-item--error.svelte-1sb9cm3 .mc-file-uploader-item__status-icon:where(.svelte-1sb9cm3) {fill:var(--file-uploader-color-file-item-icon-invalid, #ea302d);}.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__container:where(.svelte-1sb9cm3) {gap:1rem;flex-direction:column;align-items:normal;}.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__status-icon:where(.svelte-1sb9cm3) {fill:var(--color-standalone-disabled, #b3b3b3);}.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__label:where(.svelte-1sb9cm3),
+.mc-file-uploader-item--loading.svelte-1sb9cm3 .mc-file-uploader-item__details:where(.svelte-1sb9cm3) {color:var(--color-standalone-disabled, #b3b3b3);}`};function xe(U,l){const W=se(l);re(l,!0),ie(U,he);let u=n(l,"file",7),x=n(l,"format",7,"inline"),w=n(l,"valid",7),y=n(l,"errormessage",7),z=n(l,"deletebuttonlabel",7,"Delete"),v=n(l,"information",7),k=n(l,"ondelete",7);const K=F(()=>x()==="stacked"),I=F(()=>w()?"default":"error"),L={default:ce,error:me},N=F(()=>L[p(I)]);var O={get file(){return u()},set file(e){u(e),m()},get format(){return x()},set format(e="inline"){x(e),m()},get valid(){return w()},set valid(e){w(e),m()},get errormessage(){return y()},set errormessage(e){y(e),m()},get deletebuttonlabel(){return z()},set deletebuttonlabel(e="Delete"){z(e),m()},get information(){return v()},set information(e){v(e),m()},get ondelete(){return k()},set ondelete(e){k(e),m()}},C=ge(),D=a(C),M=a(D),P=a(M),Q=a(P);de(Q,()=>p(N),(e,t)=>{t(e,{})}),o(P);var A=b(P,2),j=a(A),R=a(j);E(R,l,"name",{get file(){return u()}},e=>{var t=_();f(()=>g(t,u().name)),i(e,t)}),o(j);var T=b(j,2);{var V=e=>{var t=ve(),d=a(t);E(d,l,"information",{get file(){return u()}},r=>{var s=_();f(()=>g(s,v())),i(r,s)}),o(t),i(e,t)};B(T,e=>{(v()||W.information)&&e(V)})}o(A),o(M);var X=b(M,2);{var Y=e=>{var t=pe(),d=oe(t);ne(d,{});var r=b(d,2),s=a(r);J(s,{ghost:!0,size:"s",iconposition:"left","aria-label":"Delete file",get onclick(){return k()},children:(c,te)=>{H();var G=_();f(()=>g(G,z())),i(c,G)},$$slots:{default:!0,icon:(c,te)=>{fe(c,{slot:"icon"})}}}),o(r),i(e,t)},Z=e=>{var t=be(),d=a(t);J(d,{ghost:!0,size:"s",iconposition:"only","aria-label":"Delete file",get onclick(){return k()},children:(r,s)=>{H();var c=_();f(()=>g(c,z())),i(r,c)},$$slots:{default:!0,icon:(r,s)=>{ue(r,{slot:"icon"})}}}),o(t),i(e,t)};B(X,e=>{p(K)?e(Y):e(Z,!1)})}o(D);var $=b(D,2);{var ee=e=>{var t=_e(),d=a(t);E(d,l,"errorMessage",{},r=>{var s=_();f(()=>g(s,y())),i(r,s)}),o(t),i(e,t)};B($,e=>{!w()&&(y()||W.errorMessage)&&e(ee)})}return o(C),f(()=>{S(C,1,q({"mc-file-uploader-item":!0,[`mc-file-uploader-item--${p(I)}`]:p(I)!=="default"}),"svelte-1sb9cm3"),S(D,1,q({"mc-file-uploader-item__container":!0,[`mc-file-uploader-item__container--${x()}`]:!0}),"svelte-1sb9cm3"),S(M,1,q({"mc-file-uploader-item__meta-row":!0,"mc-file-uploader-item__meta-row--with-info":v()}),"svelte-1sb9cm3")}),i(U,C),ae(O)}customElements.define("m-file-uploader-item",le(xe,{file:{},format:{},valid:{},errormessage:{},deletebuttonlabel:{},information:{},ondelete:{}},["name","information","errorMessage"],[],!0));export{xe as F};
+//# sourceMappingURL=FileUploaderItem.js.map

package/dist/components/fileuploaderitem/FileUploaderItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderItem.js","sources":["../../../src/components/fileuploaderitem/FileUploaderItem.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-file-uploader-item' }} />\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  import Divider from '../divider/Divider.svelte';\n  import {\n    CheckCircle32,\n    Cross20,\n    CrossCircleFilled20,\n    WarningCircle32,\n  } from '@mozaic-ds/icons-svelte';\n\n  export type NormalizedFile = {\n    name: string;\n    size?: number;\n    type?: HTMLInputElement['accept'];\n  };\n\n  interface Props {\n    /**\n     * Represents the file to be displayed in the file uploader item.\n     */\n    file: NormalizedFile;\n    /**\n     * Layout format of the item.\n     */\n    format?: 'inline' | 'stacked';\n    /**\n     * Indicates if the file is valid according to the uploader's validation rules.\n     */\n    valid?: boolean;\n    /**\n     * Custom error message for the file.\n     */\n    errormessage?: string;\n    /**\n     * Label for the delete button.\n     */\n    deletebuttonlabel?: string;\n    /**\n     * Optional informational text displayed under the file name.\n     */\n    information?: string;\n    /**\n     * Callback to call when delete button is clicked.\n     */\n    ondelete: () => void;\n  }\n\n  let {\n    file,\n    format = 'inline',\n    valid,\n    errormessage,\n    deletebuttonlabel = 'Delete',\n    information,\n    ondelete,\n  }: Props = $props();\n\n  const isStacked = $derived(format === 'stacked');\n\n  const stateModifier = $derived(valid ? 'default' : 'error');\n\n  const stateIconMap = {\n    default: CheckCircle32,\n    error: WarningCircle32,\n  };\n\n  const StateIcon = $derived(stateIconMap[stateModifier]);\n</script>\n\n<div\n  class={{\n    'mc-file-uploader-item': true,\n    [`mc-file-uploader-item--${stateModifier}`]: stateModifier !== 'default',\n  }}\n>\n  <div\n    class={{\n      'mc-file-uploader-item__container': true,\n      [`mc-file-uploader-item__container--${format}`]: true,\n    }}\n  >\n    <div\n      class={{\n        'mc-file-uploader-item__meta-row': true,\n        'mc-file-uploader-item__meta-row--with-info': information,\n      }}\n    >\n      <span class=\"mc-file-uploader-item__status-icon\">\n        <StateIcon />\n      </span>\n\n      <div class=\"mc-file-uploader-item__info-content\">\n        <span class=\"mc-file-uploader-item__label\">\n          <slot name=\"name\" {file}>\n            {file.name}\n          </slot>\n        </span>\n\n        {#if information || $$slots.information}\n          <span class=\"mc-file-uploader-item__details\">\n            <slot name=\"information\" {file}>\n              {information}\n            </slot>\n          </span>\n        {/if}\n      </div>\n    </div>\n\n    {#if isStacked}\n      <Divider />\n      <div class=\"mc-file-uploader-item__actions-container\">\n        <Button ghost size=\"s\" iconposition=\"left\" aria-label=\"Delete file\" onclick={ondelete}>\n          {deletebuttonlabel}\n\n          <Cross20 slot=\"icon\" />\n        </Button>\n      </div>\n    {:else}\n      <div class=\"mc-file-uploader-item__delete-button-container\">\n        <Button ghost size=\"s\" iconposition=\"only\" aria-label=\"Delete file\" onclick={ondelete}>\n          {deletebuttonlabel}\n\n          <CrossCircleFilled20 slot=\"icon\" />\n        </Button>\n      </div>\n    {/if}\n  </div>\n\n  {#if !valid && (errormessage || $$slots.errorMessage)}\n    <span class=\"mc-file-uploader-item__error-message\">\n      <slot name=\"errorMessage\">\n        {errormessage}\n      </slot>\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/file-uploader';\n</style>\n"],"names":["file","$.prop","$$props","format","valid","errormessage","deletebuttonlabel","information","ondelete","isStacked","$.derived","stateModifier","stateIconMap","CheckCircle32","WarningCircle32","StateIcon","$.get","div","root","div_1","$.child","div_2","span","StateIcon_1","$$anchor","div_3","span_1","$.template_effect","$.set_text","text","span_2","root_2","$$slots","$$render","consequent","$.reset","node_4","$.sibling","Divider","node_5","div_4","Button","node_6","Cross20","div_5","root_7","node_7","CrossCircleFilled20","consequent_1","alternate","node_8","span_3","root_10","consequent_2","$.append"],"mappings":";;;2KAEA,qCAgDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,iBAAS,QAAQ,EACjBC,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EACZI,4BAAoB,QAAQ,EAC5BC,EAAWN,EAAAC,EAAA,cAAA,CAAA,EACXM,EAAQP,EAAAC,EAAA,WAAA,CAAA,QAGJO,EAASC,EAAA,IAAYP,EAAM,IAAK,SAAS,EAEzCQ,EAAaD,EAAA,IAAYN,EAAK,EAAG,UAAY,OAAO,EAEpDQ,GACJ,QAASC,GACT,MAAOC,EAAe,EAGlBC,EAASL,EAAA,IAAYE,EAAYI,EAACL,CAAa,CAAA,CAAA,4FAjB1C,SAAQ,mLAGG,SAAQ,4HAiB/BM,EAAAC,GAAA,EAMEC,EAAAC,EANFH,CAAA,EAYII,EAAAD,EANFD,CAAA,EAYIG,EAAIF,EANNC,CAAA,MAMEC,CAAI,wBACFC,EAASC,EAAA,EAAA,MADXF,CAAI,EAIJ,IAAAG,IAJAH,EAAI,CAAA,EAKFI,IADFD,CAAG,MACDC,CAAI,kCACgB1B,EAAI,kBACpB2B,EAAA,IAAAC,EAAAC,EAAA7B,EAAI,EAAC,IAAI,CAAA,aAFb0B,CAAI,UAAJA,EAAI,CAAA,iBAOFI,EAAIC,GAAA,MAAJD,CAAI,yCACuB9B,EAAI,4BAC3BO,EAAW,CAAA,CAAA,aAFfuB,CAAI,MAAJA,CAAI,YADFvB,EAAW,GAAIyB,EAAQ,cAAWC,EAAAC,CAAA,MAPxCT,CAAG,EAVLU,EAAAd,CAAA,EAAA,IAAAe,EAAAC,EAAAhB,EAAA,CAAA,gCA4BEiB,GAAOC,EAAA,EAAA,MACPC,EAAGH,EAAAE,EAAA,CAAA,MAAHC,CAAG,EACDC,EAAMC,EAAA,uFAAsElC,EAAQ,6CAClFF,EAAiB,CAAA,CAAA,4CAEjBqC,GAAOnB,EAAA,CAAA,KAAA,MAAA,CAAA,QAJXgB,CAAG,oBAQHI,EAAGC,GAAA,MAAHD,CAAG,EACDH,EAAMK,EAAA,uFAAsEtC,EAAQ,4CAClFF,EAAiB,CAAA,CAAA,2CAEjByC,GAAmBvB,EAAA,CAAA,KAAA,MAAA,CAAA,QAJvBoB,CAAG,MAAHA,CAAG,aAVDnC,CAAS,EAAAwB,EAAAe,CAAA,EAAAf,EAAAgB,EAAA,EAAA,IAjCfd,EAAAhB,CAAA,EAAA,IAAA+B,EAAAb,EAAAlB,EAAA,CAAA,kBAsDEgC,EAAIC,GAAA,MAAJD,CAAI,kDAEA9C,EAAY,CAAA,CAAA,aAFhB8C,CAAI,MAAJA,CAAI,WADD,CAAA/C,EAAK,IAAKC,EAAY,GAAI2B,EAAQ,eAAYC,EAAAoB,EAAA,IA3DrDlB,OAAAA,EAAAlB,CAAA,WAAAA,OAEG,wBAAyB,gCACEN,CAAa,CAAA,EAAA,EAAAK,EAAKL,CAAa,IAAK,gCAGhEQ,OAEG,mCAAoC,GACE,CAAA,qCAAAhB,EAAM,KAAK,yBAGlDkB,OAEG,kCAAmC,GACnC,6CAA8Cd,EAAW,wBAfhE+C,EAAA9B,EAAAP,CAAA,OAFO"}

package/dist/components/fileuploaderitem/FileUploaderItem.spec.js

@@ -0,0 +1,41 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import FileUploaderItem from './FileUploaderItem.svelte';
+const sampleFile = { name: 'test-file.txt', size: 1234 };
+describe('FileUploaderItem component', () => {
+    it('renders file name by default', () => {
+        const { getByText } = render(FileUploaderItem, {
+            props: { file: sampleFile, ondelete: () => { } },
+        });
+        expect(getByText('test-file.txt')).toBeTruthy();
+    });
+    it('shows error message when invalid and errormessage provided', () => {
+        const { getByText } = render(FileUploaderItem, {
+            props: { file: sampleFile, valid: false, errormessage: 'Upload failed', ondelete: () => { } },
+        });
+        expect(getByText('Upload failed')).toBeTruthy();
+    });
+    it('does not show error message when valid is true', () => {
+        const { queryByText } = render(FileUploaderItem, {
+            props: { file: sampleFile, valid: true, errormessage: 'Upload failed', ondelete: () => { } },
+        });
+        expect(queryByText('Upload failed')).toBeNull();
+    });
+    it('calls ondelete when delete button is clicked (inline format)', async () => {
+        const ondelete = vi.fn();
+        const { getByLabelText } = render(FileUploaderItem, {
+            props: { file: sampleFile, ondelete, deletebuttonlabel: 'Remove' },
+        });
+        const btn = getByLabelText('Delete file');
+        await fireEvent.click(btn);
+        expect(ondelete).toHaveBeenCalledTimes(1);
+    });
+    it('applies correct state modifier classes for valid and invalid states', async () => {
+        const { container, rerender } = render(FileUploaderItem, {
+            props: { file: sampleFile, valid: false, ondelete: () => { } },
+        });
+        expect(container.querySelector('.mc-file-uploader-item--error')).toBeTruthy();
+        await rerender({ file: sampleFile, valid: true, ondelete: () => { } });
+        expect(container.querySelector('.mc-file-uploader-item--default')).toBeFalsy();
+    });
+});

package/dist/components/fileuploaderitem/FileUploaderItem.svelte

@@ -0,0 +1,298 @@
+<svelte:options customElement={{ tag: 'm-file-uploader-item' }} />
+
+<script lang="ts">
+  import Button from '../button/Button.svelte';
+  import Divider from '../divider/Divider.svelte';
+  import {
+    CheckCircle32,
+    Cross20,
+    CrossCircleFilled20,
+    WarningCircle32,
+  } from '@mozaic-ds/icons-svelte';
+
+  export type NormalizedFile = {
+    name: string;
+    size?: number;
+    type?: HTMLInputElement['accept'];
+  };
+
+  interface Props {
+    /**
+     * Represents the file to be displayed in the file uploader item.
+     */
+    file: NormalizedFile;
+    /**
+     * Layout format of the item.
+     */
+    format?: 'inline' | 'stacked';
+    /**
+     * Indicates if the file is valid according to the uploader's validation rules.
+     */
+    valid?: boolean;
+    /**
+     * Custom error message for the file.
+     */
+    errormessage?: string;
+    /**
+     * Label for the delete button.
+     */
+    deletebuttonlabel?: string;
+    /**
+     * Optional informational text displayed under the file name.
+     */
+    information?: string;
+    /**
+     * Callback to call when delete button is clicked.
+     */
+    ondelete: () => void;
+  }
+
+  let {
+    file,
+    format = 'inline',
+    valid,
+    errormessage,
+    deletebuttonlabel = 'Delete',
+    information,
+    ondelete,
+  }: Props = $props();
+
+  const isStacked = $derived(format === 'stacked');
+
+  const stateModifier = $derived(valid ? 'default' : 'error');
+
+  const stateIconMap = {
+    default: CheckCircle32,
+    error: WarningCircle32,
+  };
+
+  const StateIcon = $derived(stateIconMap[stateModifier]);
+</script>
+
+<div
+  class={{
+    'mc-file-uploader-item': true,
+    [`mc-file-uploader-item--${stateModifier}`]: stateModifier !== 'default',
+  }}
+>
+  <div
+    class={{
+      'mc-file-uploader-item__container': true,
+      [`mc-file-uploader-item__container--${format}`]: true,
+    }}
+  >
+    <div
+      class={{
+        'mc-file-uploader-item__meta-row': true,
+        'mc-file-uploader-item__meta-row--with-info': information,
+      }}
+    >
+      <span class="mc-file-uploader-item__status-icon">
+        <StateIcon />
+      </span>
+
+      <div class="mc-file-uploader-item__info-content">
+        <span class="mc-file-uploader-item__label">
+          <slot name="name" {file}>
+            {file.name}
+          </slot>
+        </span>
+
+        {#if information || $$slots.information}
+          <span class="mc-file-uploader-item__details">
+            <slot name="information" {file}>
+              {information}
+            </slot>
+          </span>
+        {/if}
+      </div>
+    </div>
+
+    {#if isStacked}
+      <Divider />
+      <div class="mc-file-uploader-item__actions-container">
+        <Button ghost size="s" iconposition="left" aria-label="Delete file" onclick={ondelete}>
+          {deletebuttonlabel}
+
+          <Cross20 slot="icon" />
+        </Button>
+      </div>
+    {:else}
+      <div class="mc-file-uploader-item__delete-button-container">
+        <Button ghost size="s" iconposition="only" aria-label="Delete file" onclick={ondelete}>
+          {deletebuttonlabel}
+
+          <CrossCircleFilled20 slot="icon" />
+        </Button>
+      </div>
+    {/if}
+  </div>
+
+  {#if !valid && (errormessage || $$slots.errorMessage)}
+    <span class="mc-file-uploader-item__error-message">
+      <slot name="errorMessage">
+        {errormessage}
+      </slot>
+    </span>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-file-uploader {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 18rem;
+}
+.mc-file-uploader__files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.mc-file-uploader__hidden-input {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-file-uploader__input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+  border-radius: var(--border-radius-m, 0.5rem);
+  color: var(--file-uploader-color-drag-and-drop-text-default, #242938);
+}
+.mc-file-uploader__input .mc-file-uploader__button {
+  width: 100%;
+}
+.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-file-uploader__input-title {
+  height: 1.125rem;
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-file-uploader__input-subtitle {
+  height: 1.125rem;
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-file-uploader--draggable {
+  width: 25rem;
+}
+.mc-file-uploader--draggable .mc-file-uploader__input {
+  padding: 2rem;
+  outline: 0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);
+  display: flex;
+}
+.mc-file-uploader--draggable .mc-file-uploader__input--disabled {
+  outline-color: var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);
+  color: var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);
+  cursor: not-allowed;
+}
+.mc-file-uploader--draggable .mc-file-uploader__input--dragged {
+  outline-width: 0.25rem;
+}
+
+.mc-file-uploader-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.mc-file-uploader-item__container {
+  border: 1px solid var(--file-uploader-color-file-item-border-default, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  padding: 0.75rem;
+}
+.mc-file-uploader-item__meta-row {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.mc-file-uploader-item__meta-row--with-info {
+  align-items: start;
+}
+.mc-file-uploader-item__status-icon {
+  fill: var(--file-uploader-color-file-item-icon-valid, #3f9e10);
+}
+.mc-file-uploader-item__info-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+.mc-file-uploader-item__label {
+  color: var(--file-uploader-color-file-item-text-file-name, #000000);
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+}
+.mc-file-uploader-item__details {
+  color: var(--file-uploader-color-file-item-text-information, #666666);
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-file-uploader-item__error-message {
+  color: var(--field-color-validation-invalid, #c61112);
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-file-uploader-item__container--inline {
+  display: flex;
+  align-items: center;
+}
+.mc-file-uploader-item__container--stacked {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.mc-file-uploader-item__delete-button-container {
+  padding-left: 0.25rem;
+  margin-left: 0.25rem;
+  border-left: 1px solid var(--divider-color-primary, #cccccc);
+}
+.mc-file-uploader-item__actions-container {
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-content: center;
+}
+.mc-file-uploader-item__action {
+  padding: 0 0.75rem;
+  flex-grow: 1;
+}
+.mc-file-uploader-item--error .mc-file-uploader-item__container {
+  border-width: var(--border-width-m, 0.125rem);
+  border-color: var(--file-uploader-color-file-item-border-invalid, #ea302d);
+}
+.mc-file-uploader-item--error .mc-file-uploader-item__status-icon {
+  fill: var(--file-uploader-color-file-item-icon-invalid, #ea302d);
+}
+.mc-file-uploader-item--loading .mc-file-uploader-item__container {
+  gap: 1rem;
+  flex-direction: column;
+  align-items: normal;
+}
+.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon {
+  fill: var(--color-standalone-disabled, #b3b3b3);
+}
+.mc-file-uploader-item--loading .mc-file-uploader-item__label,
+.mc-file-uploader-item--loading .mc-file-uploader-item__details {
+  color: var(--color-standalone-disabled, #b3b3b3);
+}</style>

package/dist/components/fileuploaderitem/FileUploaderItem.svelte.d.ts

@@ -0,0 +1,62 @@
+export type NormalizedFile = {
+    name: string;
+    size?: number;
+    type?: HTMLInputElement['accept'];
+};
+interface Props {
+    /**
+     * Represents the file to be displayed in the file uploader item.
+     */
+    file: NormalizedFile;
+    /**
+     * Layout format of the item.
+     */
+    format?: 'inline' | 'stacked';
+    /**
+     * Indicates if the file is valid according to the uploader's validation rules.
+     */
+    valid?: boolean;
+    /**
+     * Custom error message for the file.
+     */
+    errormessage?: string;
+    /**
+     * Label for the delete button.
+     */
+    deletebuttonlabel?: string;
+    /**
+     * Optional informational text displayed under the file name.
+     */
+    information?: string;
+    /**
+     * Callback to call when delete button is clicked.
+     */
+    ondelete: () => void;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FileUploaderItem: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    name: {
+        file: NormalizedFile;
+    };
+    information: {
+        file: NormalizedFile;
+    };
+    errorMessage: {};
+}, {}, "">;
+type FileUploaderItem = InstanceType<typeof FileUploaderItem>;
+export default FileUploaderItem;
+//# sourceMappingURL=FileUploaderItem.svelte.d.ts.map

package/dist/components/fileuploaderitem/FileUploaderItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/fileuploaderitem/FileUploaderItem.svelte.ts"],"names":[],"mappings":"AAaE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;CACnC,CAAC;AAEF,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAkGH,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;AAUD,QAAA,MAAM,gBAAgB;;;;;;;;;;UAAqF,CAAC;AAC1F,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/components/fileuploaderitem/README.md

@@ -0,0 +1,24 @@
+# `m-file-uploader-item`
+
+Represents the file to be displayed in the file uploader item.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `file*` | Represents the file to be displayed in the file uploader item. | `NormalizedFile` |   |
+| `format` | Layout format of the item. | `'inline'` `'stacked'` | `inline` |
+| `valid` | Indicates if the file is valid according to the uploader's validation rules. | `boolean` |   |
+| `errormessage` | Custom error message for the file. | `string` |   |
+| `deletebuttonlabel` | Label for the delete button. | `string` | `Delete` |
+| `information` | Optional informational text displayed under the file name. | `string` |   |
+| `ondelete*` | Callback to call when delete button is clicked. | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `name` |  |
+| `information` |  |
+| `errorMessage` |  |
+

package/dist/components/flag/Flag.js

@@ -1,4 +1,4 @@
-import{c as p,p as m,a as u,b as n,f as b,r as h,t as _,h as x,i as k,j as c,d as f,e as d,g as w}from"../../custom-element.js";import{a as y}from"../../attributes.js";var $=b('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
+import{c as p,p as m,a as u,b as n,t as b,f as h,g as _,h as x,i as k,j as c,d as f,r as d,e as w}from"../../custom-element.js";import{a as y}from"../../attributes.js";var $=x('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--border-radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(o,e){m(e,!0),u(o,z);let t=n(e,"appearance",7,"standard"),r=n(e,"label",7),g=h(e,["$$slots","$$events","$$legacy","$$host","appearance","label"]);var i={get appearance(){return t()},set appearance(l="standard"){t(l),c()},get label(){return r()},set label(l){r(l),c()}},a=$();y(a,()=>({class:["mc-flag",`mc-flag--${t()}`],...g}),void 0,void 0,void 0,"svelte-1e4tn4t");var s=f(a),v=f(s,!0);return d(s),d(a),_(()=>w(v,r())),x(o,a),k(i)}customElements.define("m-flag",p(j,{appearance:{},label:{}},[],[],!0));
+ */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--border-radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(o,e){m(e,!0),u(o,z);let t=n(e,"appearance",7,"standard"),r=n(e,"label",7),g=k(e,["$$slots","$$events","$$legacy","$$host","appearance","label"]);var i={get appearance(){return t()},set appearance(l="standard"){t(l),c()},get label(){return r()},set label(l){r(l),c()}},a=$();y(a,()=>({class:["mc-flag",`mc-flag--${t()}`],...g}),void 0,void 0,void 0,"svelte-1e4tn4t");var s=f(a),v=f(s,!0);return d(s),d(a),b(()=>w(v,r())),h(o,a),_(i)}customElements.define("m-flag",p(j,{appearance:{},label:{}},[],[],!0));
 //# sourceMappingURL=Flag.js.map