@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/components/mds-dropdown2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as setAttributeIfEmpty, h as hashValue } from './aria.js';
+import { s as setAttributeIfEmpty } from './aria.js';
 import { K as KeyboardManager } from './keyboard-manager.js';
 import { c as cssDurationToMilliseconds } from './unit.js';
 import { a as autoPlacement, o as offset, f as flip, s as shift, b as arrow, c as computePosition, d as autoUpdate } from './floating-ui.dom.esm.js';
@@ -169,6 +169,8 @@ const MdsDropdown = /*@__PURE__*/ proxyCustomElement(class MdsDropdown extends H
             });
         };
         this.updateCSSCustomProps = () => {
+            if (typeof window === 'undefined')
+                return;
             const elementStyles = window.getComputedStyle(this.host);
             this.cssBackdropDuration = elementStyles.getPropertyValue('--mds-dropdown-backdrop-duration');
             this.cssBackdropZIndex = elementStyles.getPropertyValue('--mds-dropdown-backdrop-z-index');
@@ -289,20 +291,20 @@ const MdsDropdown = /*@__PURE__*/ proxyCustomElement(class MdsDropdown extends H
         this.zIndexChanged(this.zIndex);
     }
     setAriaAttributes() {
-        const hostId = setAttributeIfEmpty(this.host, 'id', hashValue(this.target));
         setAttributeIfEmpty(this.caller, 'aria-haspopup', 'true');
-        setAttributeIfEmpty(this.caller, 'aria-controls', hostId);
+        setAttributeIfEmpty(this.caller, 'aria-controls', this.target);
         setAttributeIfEmpty(this.host, 'role', 'menu');
         setAttributeIfEmpty(this.host, 'aria-labelledby', this.target);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b, _c, _d;
         this.updateCSSCustomProps();
         document.addEventListener('click', this.handleCloseDropdown);
         this.arrowEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
-        const caller = document.querySelector(this.target);
+        // search caller in document or rootNode of host (if target is in shadowDOM)
+        const caller = (_d = (_c = (_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(this.target)) !== null && _d !== void 0 ? _d : this.host.getRootNode().querySelector(this.target);
         if (!caller) {
-            return;
+            throw Error(`Target not found: ${this.target}`);
         }
         this.caller = caller;
         this.setAriaAttributes();
@@ -321,7 +323,7 @@ const MdsDropdown = /*@__PURE__*/ proxyCustomElement(class MdsDropdown extends H
         this.cleanupAutoUpdate = () => { return; };
     }
     render() {
-        return (h(Host, { key: 'b1382fc00ca8b6d85b2e964d186c5ea23690e711' }, h("div", { key: '8d6e5e0765eb816873b290c0eabbbc5c13ff7f7b', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: 'f61ea6eabe97b1a680ad458f6a40d1b80aa99ebc' })));
+        return (h(Host, { key: 'aee79e7c76205417090673bbbe9d875065764eb3' }, h("div", { key: '9b310fb9655866a581df3ecd043e24da86fabd6c', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: '206e6aff41805e57c06fbccab2aa9ca595c312ae' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/mds-entity.js

@@ -42,10 +42,10 @@ const MdsEntity$1 = /*@__PURE__*/ proxyCustomElement(class MdsEntity extends HTM
         this.actions = this.hostElement.querySelector('[slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: '01450fc640fd689dd077e452f1440bd2ca42b3fa' }, h("div", { key: '2da1bfb8261436830c03c2e0ef2fc3f64601c86d', class: "spinner" }, h("mds-spinner", { key: '7edcea6a4cd7acb38c55b0cdbb30c4380a499014', running: true })), this.checkAvatar() &&
-            h("mds-avatar", { key: '30ffe987e664e045ea6c1209fdd364577cfb1968', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant }), h("div", { key: '0b514397256ab2f7007b1777b1f75f4ab04af6bd', class: "infos" }, h("slot", { key: '734f2c4afc519b8d256ee7039d9961581f291016' }), this.details &&
-            h("div", { key: '88e8b8f03c66e0dbf911faf08b9e89bc44b5d324', class: "details" }, h("slot", { key: '68f396fd9453b47f6062f2b8c4dea7cd564b959b', name: "detail" }))), this.actions &&
-            h("div", { key: 'cc227d492271e5d1f1c5c4817ebfc68a1a28862f', class: "actions" }, h("slot", { key: '0c2fc6b7bf1909a95b8094fd20c0c6a0ef89eff2', name: "action" }))));
+        return (h(Host, { key: '9391672c7ecfde903e03798d210760e52370c90b' }, h("div", { key: 'fab671cb638c283a8ea3648aee9c9188512e8fa0', class: "spinner" }, h("mds-spinner", { key: 'baed37a926e1f606b41fb85b24be7728f671ab54', running: true })), this.checkAvatar() &&
+            h("mds-avatar", { key: '380ed5fdef281b9e9338e4beeecffa4ef9bae7b5', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant }), h("div", { key: 'd876fe0ce1f53eec1cc1062e5c38b82d67b3bd89', class: "infos" }, h("slot", { key: '949113bb0e3dbf092e6604358544630440a43740' }), this.details &&
+            h("div", { key: '7635a1805fa615b2907e3b89fffa250db9b71dce', class: "details" }, h("slot", { key: 'a6b8ff76384000ebc4b1684b3b888d7dd60cafd3', name: "deuploadtail" }))), this.actions &&
+            h("div", { key: '11c50375bc0e9ea56989d7549e95b99a6db191c7', class: "actions" }, h("slot", { key: '653e308b14d27197b9c945269190030984ac2ebd', name: "action" }))));
     }
     get hostElement() { return this; }
     static get style() { return MdsEntityStyle0; }

package/dist/components/mds-file-preview2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { m as miBaselineCancel } from './cancel.js';
 import { c as clsx } from './clsx.js';
-import { g as getExtensionInfos, a as getSuffix, b as getFormatsVariant } from './file.js';
+import { f as fileDescriptionLocaleEl, a as fileDescriptionLocaleEn, b as fileDescriptionLocaleEs, c as fileDescriptionLocaleIt, g as getExtensionInfos, d as getSuffix, e as getFormatsVariant } from './locale.it.js';
+import { L as Locale } from './locale.js';
 import { d as defineCustomElement$6 } from './mds-badge2.js';
 import { d as defineCustomElement$5 } from './mds-button2.js';
 import { d as defineCustomElement$4 } from './mds-icon2.js';
@@ -201,7 +202,27 @@ const STRINGS = {
 	} : result.join(spacer);
 }
 
-const mdsFilePreviewCss = "@tailwind utilities;\n\n:host {\n\n  --mds-file-preview-background-color: rgb(var(--tone-neutral));\n  --mds-file-preview-border-radius: 0.5rem;\n  --mds-file-preview-color: rgb(var(--tone-neutral-03));\n  --mds-file-preview-icon-background: inherit;\n  --mds-file-preview-icon-color: var(--mds-file-preview-color);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-file-preview-background-color);\n  border-radius: var(--mds-file-preview-border-radius);\n  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-file-preview-color);\n  -ms-flex-pack: stretch;\n  justify-content: stretch;\n  position: relative;\n}\n\n.card{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n\n  border-radius: var(--mds-file-preview-border-radius);\n  display: grid;\n  width: 100%;\n}\n\n.preview{\n\n  aspect-ratio: 1/1;\n\n  background-color: var(--mds-file-preview-icon-bacground);\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color:  var(--mds-file-preview-color);\n  fill:  var(--mds-file-preview-icon-color);\n  width: 100%;\n}\n\n.preview--image {\n  -webkit-filter: brightness(0.975);\n  filter: brightness(0.975);\n  padding: 0 !important;\n}\n\n.preview--icon,\n.preview--status {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview--status{\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n}\n\n.icon{\n\n  height: 3rem;\n\n  width: 3rem;\n}\n\n.message {\n  text-align: center;\n}\n\n.action-delete {\n  background-color: var(--mds-file-preview-background-color);\n  fill: var(--mds-file-preview-color);\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.infos{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.suffix {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.infos--has-file-size {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.file-name {\n\n  --mds-text-line-clamp: 2;\n}\n\n:host([format=\"archive\"]),\n:host([format=\"executable\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-amaranth-10));\n}\n\n:host([format=\"attachment\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-icon-bacground: rgb(var(--tone-neutral-10));\n}\n\n:host([format=\"audio\"]),\n:host([format=\"video\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n  --mds-file-preview-color: rgb(var(--label-violet-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-violet-10));\n}\n\n:host([format=\"code\"]),\n:host([format=\"data\"]),\n:host([format=\"markup\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-yellow-10));\n}\n\n:host([format=\"document\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n  --mds-file-preview-color: rgb(var(--label-orange-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-orange-10));\n}\n\n:host([format=\"email\"]),\n:host([format=\"text\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n  --mds-file-preview-color: rgb(var(--label-blue-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-blue-10));\n}\n\n:host([format=\"image\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n  --mds-file-preview-color: rgb(var(--label-green-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-green-10));\n}\n\n:host([format=\"slide\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-orchid-10));\n}\n\n:host([format=\"spreadsheet\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n  --mds-file-preview-color: rgb(var(--label-lime-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-lime-10));\n}\n\n:host([format=\"vector\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-aqua-10));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"info\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-info-09));\n  --mds-file-preview-icon-color: rgb(var(--status-info-04));\n}\n\n:host( [variant=\"success\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-success-09));\n  --mds-file-preview-icon-color: rgb(var(--status-success-04));\n}\n\n:host( [variant=\"warning\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-warning-09));\n  --mds-file-preview-icon-color: rgb(var(--status-warning-04));\n}\n\n:host( [variant=\"error\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--status-error-09));\n  --mds-file-preview-icon-color: rgb(var(--status-error-04));\n}\n\n\n:host( [variant=\"amaranth\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-amaranth-09));\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n}\n\n:host( [variant=\"aqua\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-aqua-09));\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n}\n\n\n:host( [variant=\"blue\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-blue-09));\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n}\n\n:host( [variant=\"green\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-green-09));\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n}\n\n:host( [variant=\"lime\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-lime-09));\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n}\n\n:host( [variant=\"orange\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-orange-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n}\n\n:host( [variant=\"orchid\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-orchid-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n}\n\n:host( [variant=\"primary\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--brand-maggioli-09));\n  --mds-file-preview-icon-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( [variant=\"sky\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-sky-09));\n  --mds-file-preview-icon-color: rgb(var(--label-sky-04));\n}\n\n:host( [variant=\"violet\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-violet-09));\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n}\n\n:host( [variant=\"yellow\"][message] ) {\n\n  --mds-file-preview-icon-background-color: rgb(var(--label-yellow-09));\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host( [variant=\"info\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-info-10));\n    --mds-file-preview-icon-color: rgb(var(--status-info-02));\n  }\n\n  :host( [variant=\"success\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-success-10));\n    --mds-file-preview-icon-color: rgb(var(--status-success-02));\n  }\n\n  :host( [variant=\"warning\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-warning-10));\n    --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n  }\n\n  :host( [variant=\"error\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--status-error-10));\n    --mds-file-preview-icon-color: rgb(var(--status-error-02));\n  }\n\n\n  :host( [variant=\"amaranth\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-amaranth-10));\n    --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n  }\n\n  :host( [variant=\"aqua\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-aqua-10));\n    --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n  }\n\n\n  :host( [variant=\"blue\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-blue-10));\n    --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n  }\n\n  :host( [variant=\"green\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-green-10));\n    --mds-file-preview-icon-color: rgb(var(--label-green-02));\n  }\n\n  :host( [variant=\"lime\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-lime-10));\n    --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n  }\n\n  :host( [variant=\"orange\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-orange-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n  }\n\n  :host( [variant=\"orchid\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-orchid-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n  }\n\n  :host( [variant=\"primary\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--brand-maggioli-10));\n    --mds-file-preview-icon-color: rgb(var(--brand-maggioli-02));\n  }\n\n  :host( [variant=\"sky\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-sky-10));\n    --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n  }\n\n  :host( [variant=\"violet\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-violet-10));\n    --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n  }\n\n  :host( [variant=\"yellow\"][message] ) {\n\n    --mds-file-preview-icon-background-color: rgb(var(--label-yellow-10));\n    --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"info\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-info-10));\n      --mds-file-preview-icon-color: rgb(var(--status-info-02));\n    }\n\n    :host( [variant=\"success\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-success-10));\n      --mds-file-preview-icon-color: rgb(var(--status-success-02));\n    }\n\n    :host( [variant=\"warning\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-warning-10));\n      --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n    }\n\n    :host( [variant=\"error\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--status-error-10));\n      --mds-file-preview-icon-color: rgb(var(--status-error-02));\n    }\n\n\n    :host( [variant=\"amaranth\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-amaranth-10));\n      --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n    }\n\n    :host( [variant=\"aqua\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-aqua-10));\n      --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n    }\n\n\n    :host( [variant=\"blue\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-blue-10));\n      --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n    }\n\n    :host( [variant=\"green\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-green-10));\n      --mds-file-preview-icon-color: rgb(var(--label-green-02));\n    }\n\n    :host( [variant=\"lime\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-lime-10));\n      --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n    }\n\n    :host( [variant=\"orange\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-orange-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n    }\n\n    :host( [variant=\"orchid\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-orchid-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n    }\n\n    :host( [variant=\"primary\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--brand-maggioli-10));\n      --mds-file-preview-icon-color: rgb(var(--brand-maggioli-02));\n    }\n\n    :host( [variant=\"sky\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-sky-10));\n      --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n    }\n\n    :host( [variant=\"violet\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-violet-10));\n      --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n    }\n\n    :host( [variant=\"yellow\"][message] ) {\n\n      --mds-file-preview-icon-background-color: rgb(var(--label-yellow-10));\n      --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .preview {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .preview {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n";
+const remove$3 = "Αφαιρέστε το αρχείο από την ουρά μεταφόρτωσης";
+const localeEl = {
+	remove: remove$3
+};
+
+const remove$2 = "Remove file from upload queue";
+const localeEn = {
+	remove: remove$2
+};
+
+const remove$1 = "Eliminar archivo de la cola de carga";
+const localeEs = {
+	remove: remove$1
+};
+
+const remove = "Rimuovi file dalla coda di upload";
+const localeIt = {
+	remove: remove
+};
+
+const mdsFilePreviewCss = "@tailwind utilities;\n\n:host {\n\n  --mds-file-preview-background-color: rgb(var(--tone-neutral));\n  --mds-file-preview-border-radius: 0.5rem;\n  --mds-file-preview-color: rgb(var(--tone-neutral-03));\n  --mds-file-preview-icon-background: inherit;\n  --mds-file-preview-icon-color: var(--mds-file-preview-color);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-file-preview-background-color);\n  border-radius: var(--mds-file-preview-border-radius);\n  -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-file-preview-color);\n  -ms-flex-pack: stretch;\n  justify-content: stretch;\n  position: relative;\n}\n\n.card{\n\n  grid-template-columns: repeat(auto-fit, minmax(1px, 100%));\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n\n  border-radius: var(--mds-file-preview-border-radius);\n  display: grid;\n  width: 100%;\n}\n\n.preview{\n\n  aspect-ratio: 1/1;\n\n  background-color: var(--mds-file-preview-icon-background);\n  border-radius: 0.25rem;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color:  var(--mds-file-preview-color);\n  fill:  var(--mds-file-preview-icon-color);\n  width: 100%;\n}\n\n.preview--image {\n  -webkit-filter: brightness(0.975);\n  filter: brightness(0.975);\n  padding: 0 !important;\n}\n\n.preview--icon,\n.preview--status {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview--status{\n\n  gap: 0.5rem;\n\n  padding: 1rem;\n}\n\n.icon{\n\n  height: 3rem;\n\n  width: 3rem;\n}\n\n.message {\n  text-align: center;\n}\n\n.action-delete {\n  background-color: var(--mds-file-preview-background-color);\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 10;\n}\n\n.infos{\n\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.suffix {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.infos--has-file-size {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.file-name {\n\n  --mds-text-line-clamp: 2;\n}\n\n:host([format=\"archive\"]),\n:host([format=\"executable\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n}\n\n:host([format=\"attachment\"]) {\n\n  --mds-file-preview-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-icon-background: rgb(var(--tone-neutral-10));\n  --mds-file-preview-icon-color: rgb(var(--tone-neutral-04));\n}\n\n:host([format=\"audio\"]),\n:host([format=\"video\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-violet-04));\n  --mds-file-preview-icon-background: rgb(var(--label-violet-10));\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n}\n\n:host([format=\"code\"]),\n:host([format=\"data\"]),\n:host([format=\"markup\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-icon-background: rgb(var(--label-yellow-10));\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n}\n\n:host([format=\"document\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-orange-04));\n  --mds-file-preview-icon-background: rgb(var(--label-orange-10));\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n}\n\n:host([format=\"email\"]),\n:host([format=\"text\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-blue-04));\n  --mds-file-preview-icon-background: rgb(var(--label-blue-10));\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n}\n\n:host([format=\"image\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-green-04));\n  --mds-file-preview-icon-background: rgb(var(--label-green-10));\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n}\n\n:host([format=\"slide\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-icon-background: rgb(var(--label-orchid-10));\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n}\n\n:host([format=\"spreadsheet\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-lime-04));\n  --mds-file-preview-icon-background: rgb(var(--label-lime-10));\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n}\n\n:host([format=\"vector\"]) {\n\n  --mds-file-preview-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-icon-background: rgb(var(--label-aqua-10));\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n}\n\n@tailwind utilities;\n\n:host( [variant=\"primary\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--variant-primary-09));\n  --mds-file-preview-icon-color: rgb(var(--variant-primary-04));\n}\n\n:host( [variant=\"info\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-info-09));\n  --mds-file-preview-icon-color: rgb(var(--status-info-04));\n  --mds-file-preview-color: rgb(var(--status-info-03));\n}\n\n:host( [variant=\"success\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-success-09));\n  --mds-file-preview-icon-color: rgb(var(--status-success-04));\n  --mds-file-preview-color: rgb(var(--status-success-03));\n}\n\n:host( [variant=\"warning\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-warning-09));\n  --mds-file-preview-icon-color: rgb(var(--status-warning-04));\n  --mds-file-preview-color: rgb(var(--status-warning-03));\n}\n\n:host( [variant=\"error\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--status-error-09));\n  --mds-file-preview-icon-color: rgb(var(--status-error-04));\n  --mds-file-preview-color: rgb(var(--status-error-03));\n}\n\n\n:host( [variant=\"amaranth\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-amaranth-09));\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-color: rgb(var(--label-amaranth-03));\n}\n\n:host( [variant=\"aqua\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-aqua-09));\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-color: rgb(var(--label-aqua-03));\n}\n\n\n:host( [variant=\"blue\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-blue-09));\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n  --mds-file-preview-color: rgb(var(--label-blue-03));\n}\n\n:host( [variant=\"green\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-green-09));\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n  --mds-file-preview-color: rgb(var(--label-green-03));\n}\n\n:host( [variant=\"lime\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-lime-09));\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n  --mds-file-preview-color: rgb(var(--label-lime-03));\n}\n\n:host( [variant=\"orange\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-orange-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n  --mds-file-preview-color: rgb(var(--label-orange-03));\n}\n\n:host( [variant=\"orchid\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-orchid-09));\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-color: rgb(var(--label-orchid-03));\n}\n\n:host( [variant=\"sky\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-sky-09));\n  --mds-file-preview-icon-color: rgb(var(--label-sky-04));\n  --mds-file-preview-color: rgb(var(--label-sky-03));\n}\n\n:host( [variant=\"violet\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-violet-09));\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n  --mds-file-preview-color: rgb(var(--label-violet-03));\n}\n\n:host( [variant=\"yellow\"][message] ) {\n\n  --mds-file-preview-icon-background: rgb(var(--label-yellow-09));\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-color: rgb(var(--label-yellow-03));\n}\n\n@container style(--magma-pref-contrast: more) {\n\n  :host( [variant=\"primary\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--variant-primary-10));\n    --mds-file-preview-icon-color: rgb(var(--variant-primary-02));\n    --mds-file-preview-color: rgb(var(--variant-primary-01));\n  }\n\n  :host( [variant=\"info\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-info-10));\n    --mds-file-preview-icon-color: rgb(var(--status-info-02));\n    --mds-file-preview-color: rgb(var(--status-info-01));\n  }\n\n  :host( [variant=\"success\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-success-10));\n    --mds-file-preview-icon-color: rgb(var(--status-success-02));\n    --mds-file-preview-color: rgb(var(--status-success-01));\n  }\n\n  :host( [variant=\"warning\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-warning-10));\n    --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n    --mds-file-preview-color: rgb(var(--status-warning-01));\n  }\n\n  :host( [variant=\"error\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--status-error-10));\n    --mds-file-preview-icon-color: rgb(var(--status-error-02));\n    --mds-file-preview-color: rgb(var(--status-error-01));\n  }\n\n\n  :host( [variant=\"amaranth\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));\n    --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n    --mds-file-preview-color: rgb(var(--label-amaranth-01));\n  }\n\n  :host( [variant=\"aqua\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-aqua-10));\n    --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n    --mds-file-preview-color: rgb(var(--label-aqua-01));\n  }\n\n\n  :host( [variant=\"blue\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-blue-10));\n    --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n    --mds-file-preview-color: rgb(var(--label-blue-01));\n  }\n\n  :host( [variant=\"green\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-green-10));\n    --mds-file-preview-icon-color: rgb(var(--label-green-02));\n    --mds-file-preview-color: rgb(var(--label-green-01));\n  }\n\n  :host( [variant=\"lime\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-lime-10));\n    --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n    --mds-file-preview-color: rgb(var(--label-lime-01));\n  }\n\n  :host( [variant=\"orange\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-orange-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n    --mds-file-preview-color: rgb(var(--label-orange-01));\n  }\n\n  :host( [variant=\"orchid\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-orchid-10));\n    --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n    --mds-file-preview-color: rgb(var(--label-orchid-01));\n  }\n\n  :host( [variant=\"sky\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-sky-10));\n    --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n    --mds-file-preview-color: rgb(var(--label-sky-01));\n  }\n\n  :host( [variant=\"violet\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-violet-10));\n    --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n    --mds-file-preview-color: rgb(var(--label-violet-01));\n  }\n\n  :host( [variant=\"yellow\"][message] ) {\n\n    --mds-file-preview-icon-background: rgb(var(--label-yellow-10));\n    --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n    --mds-file-preview-color: rgb(var(--label-yellow-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host( [variant=\"primary\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--variant-primary-10));\n      --mds-file-preview-icon-color: rgb(var(--variant-primary-02));\n      --mds-file-preview-color: rgb(var(--variant-primary-01));\n    }\n\n    :host( [variant=\"info\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-info-10));\n      --mds-file-preview-icon-color: rgb(var(--status-info-02));\n      --mds-file-preview-color: rgb(var(--status-info-01));\n    }\n\n    :host( [variant=\"success\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-success-10));\n      --mds-file-preview-icon-color: rgb(var(--status-success-02));\n      --mds-file-preview-color: rgb(var(--status-success-01));\n    }\n\n    :host( [variant=\"warning\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-warning-10));\n      --mds-file-preview-icon-color: rgb(var(--status-warning-02));\n      --mds-file-preview-color: rgb(var(--status-warning-01));\n    }\n\n    :host( [variant=\"error\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--status-error-10));\n      --mds-file-preview-icon-color: rgb(var(--status-error-02));\n      --mds-file-preview-color: rgb(var(--status-error-01));\n    }\n\n\n    :host( [variant=\"amaranth\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-amaranth-10));\n      --mds-file-preview-icon-color: rgb(var(--label-amaranth-02));\n      --mds-file-preview-color: rgb(var(--label-amaranth-01));\n    }\n\n    :host( [variant=\"aqua\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-aqua-10));\n      --mds-file-preview-icon-color: rgb(var(--label-aqua-02));\n      --mds-file-preview-color: rgb(var(--label-aqua-01));\n    }\n\n\n    :host( [variant=\"blue\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-blue-10));\n      --mds-file-preview-icon-color: rgb(var(--label-blue-02));\n      --mds-file-preview-color: rgb(var(--label-blue-01));\n    }\n\n    :host( [variant=\"green\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-green-10));\n      --mds-file-preview-icon-color: rgb(var(--label-green-02));\n      --mds-file-preview-color: rgb(var(--label-green-01));\n    }\n\n    :host( [variant=\"lime\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-lime-10));\n      --mds-file-preview-icon-color: rgb(var(--label-lime-02));\n      --mds-file-preview-color: rgb(var(--label-lime-01));\n    }\n\n    :host( [variant=\"orange\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-orange-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orange-02));\n      --mds-file-preview-color: rgb(var(--label-orange-01));\n    }\n\n    :host( [variant=\"orchid\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-orchid-10));\n      --mds-file-preview-icon-color: rgb(var(--label-orchid-02));\n      --mds-file-preview-color: rgb(var(--label-orchid-01));\n    }\n\n    :host( [variant=\"sky\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-sky-10));\n      --mds-file-preview-icon-color: rgb(var(--label-sky-02));\n      --mds-file-preview-color: rgb(var(--label-sky-01));\n    }\n\n    :host( [variant=\"violet\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-violet-10));\n      --mds-file-preview-icon-color: rgb(var(--label-violet-02));\n      --mds-file-preview-color: rgb(var(--label-violet-01));\n    }\n\n    :host( [variant=\"yellow\"][message] ) {\n\n      --mds-file-preview-icon-background: rgb(var(--label-yellow-10));\n      --mds-file-preview-icon-color: rgb(var(--label-yellow-02));\n      --mds-file-preview-color: rgb(var(--label-yellow-01));\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .preview {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .preview {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-file-preview-color: rgb(var(--tone-neutral-01));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n";
 const MdsFilePreviewStyle0 = mdsFilePreviewCss;
 
 const MdsFilePreview = /*@__PURE__*/ proxyCustomElement(class MdsFilePreview extends HTMLElement {
@@ -211,13 +232,20 @@ const MdsFilePreview = /*@__PURE__*/ proxyCustomElement(class MdsFilePreview ext
         this.__attachShadow();
         this.downloadedEvent = createEvent(this, "mdsFileDownload", 7);
         this.deletedEvent = createEvent(this, "mdsFileDelete", 7);
-        this.getDefaultDescription = () => getExtensionInfos(this.filename, this.suffix).description;
+        this.t = new Locale({
+            el: Object.assign(Object.assign({}, localeEl), fileDescriptionLocaleEl),
+            en: Object.assign(Object.assign({}, localeEn), fileDescriptionLocaleEn),
+            es: Object.assign(Object.assign({}, localeEs), fileDescriptionLocaleEs),
+            it: Object.assign(Object.assign({}, localeIt), fileDescriptionLocaleIt),
+        });
+        this.getDefaultKeyDescription = () => getExtensionInfos(this.filename, this.suffix).description;
         this.onClickDeletedEvent = () => {
             this.deletedEvent.emit({ target: this.host, filename: this.filename, extension: getSuffix(this.filename, this.suffix) });
         };
         this.onClickDownloadEvent = () => {
             this.downloadedEvent.emit({ target: this.host, filename: this.filename, extension: getSuffix(this.filename, this.suffix) });
         };
+        this.language = undefined;
         this.deletable = undefined;
         this.downloadable = undefined;
         this.description = undefined;
@@ -231,7 +259,11 @@ const MdsFilePreview = /*@__PURE__*/ proxyCustomElement(class MdsFilePreview ext
         this.variant = undefined;
         this.format = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
+        this.t.lang(this.host);
         this.format = getExtensionInfos(this.filename, this.suffix).format;
     }
     componentDidLoad() {
@@ -253,11 +285,11 @@ const MdsFilePreview = /*@__PURE__*/ proxyCustomElement(class MdsFilePreview ext
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '3e22f95a410b9587d25c1360c3a83ba4fbb49265' }, this.deletable && h("mds-button", { key: '69ae6f4de44d37eb587c7c88cb854cd198f058b4', class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent }), h("div", { key: '172674682f4e217dc3f385b420df9449b0ef686d', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview
+        return (h(Host, { key: 'a7dda123874919af0842b36f88f84de14e9dc85a' }, this.deletable && h("mds-button", { key: '7e36d34ac76dd06d03ea07ff5d1be37bbec7a19d', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent }), h("div", { key: '5f43336b09414404595fd96b0f885fea892401fd', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview
             ? h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })
             : h("div", { class: clsx('preview', !this.message ? 'preview--icon' : 'preview--status') }, this.icon
                 ? h("mds-icon", { class: "icon", name: this.icon })
-                : h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon }), this.message && h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)), h("mds-text", { key: '1186dbc3b2e1efa2e3c89e2dd58709f3c0bd3d73', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '3b31040cdfa14434df1dcbf39b09ba38ee36579e', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && h("mds-text", { key: '46b176c04ee6a7fe9d305caf18ec6fecdd75d5f7', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' })), this.filesize && this.filesize !== Number(this.filesize).toString() && h("mds-text", { key: '0b7c0caa88e1ddd877c8fb3b3c912eae7952ace9', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize), getSuffix(this.filename, this.suffix) && h("mds-badge", { key: '8408bc6bf58b09c086140616adc2badd81a2142f', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.getDefaultDescription() }, getSuffix(this.filename, this.suffix)), !this.filesize && h("mds-text", { key: 'bf57ea88022bc53569b2453f2be6394ec086713e', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.getDefaultDescription() }, (_c = this.description) !== null && _c !== void 0 ? _c : this.getDefaultDescription())))));
+                : h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon }), this.message && h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)), h("mds-text", { key: 'fb4b233d9d7b2c53404865013102c349b1b97400', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '00b1ba509692b5de8dc88ce8d480b96a0c7c8344', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && h("mds-text", { key: '2f2db2eb690b1c47de551a05618c495382bedf1b', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' })), this.filesize && this.filesize !== Number(this.filesize).toString() && h("mds-text", { key: '4fe83b584365b422f7fa31c91ddfb5168a7a213b', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize), getSuffix(this.filename, this.suffix) && h("mds-badge", { key: 'e40bb98da46ed616f9c67223ecbed54d76a38454', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix)), !this.filesize && h("mds-text", { key: '299abc283bed28e4410249d5140b1fbeec9b2eb5', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription()))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -277,7 +309,9 @@ const MdsFilePreview = /*@__PURE__*/ proxyCustomElement(class MdsFilePreview ext
         "suffix": [513],
         "icon": [513],
         "variant": [513],
-        "format": [1537]
+        "format": [1537],
+        "language": [32],
+        "updateLang": [64]
     }, undefined, {
         "filename": ["handleFilename"],
         "downloadable": ["handleDownloadable"]

package/dist/components/mds-file.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as commonjsRequire, c as commonjsGlobal } from './_commonjsHelpers.js';
-import { g as getExtensionInfos, a as getSuffix, b as getFormatsVariant, c as getName } from './file.js';
+import { a as commonjsRequire, c as commonjsGlobal, L as Locale } from './locale.js';
+import { f as fileDescriptionLocaleEl, a as fileDescriptionLocaleEn, b as fileDescriptionLocaleEs, c as fileDescriptionLocaleIt, g as getExtensionInfos, d as getSuffix, e as getFormatsVariant, h as getName } from './locale.it.js';
 import { d as defineCustomElement$4 } from './mds-badge2.js';
 import { d as defineCustomElement$3 } from './mds-icon2.js';
 import { d as defineCustomElement$2 } from './mds-text2.js';
@@ -7180,6 +7180,26 @@ var blowfish = {exports: {}};
 
 const miBaselineFileDownloadDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 18h14v2H5v-2zm4.6-2.7L5 10.7l2-1.9l2.6 2.6L17 4l2 2l-9.4 9.3z"/></svg>`;
 
+const alreadyDownloaded$3 = "Έχετε ήδη κατεβάσει αυτό το αρχείο";
+const localeEl = {
+	alreadyDownloaded: alreadyDownloaded$3
+};
+
+const alreadyDownloaded$2 = "You have already downloaded this file";
+const localeEn = {
+	alreadyDownloaded: alreadyDownloaded$2
+};
+
+const alreadyDownloaded$1 = "Ya has descargado este archivo";
+const localeEs = {
+	alreadyDownloaded: alreadyDownloaded$1
+};
+
+const alreadyDownloaded = "Hai già scaricato questo file";
+const localeIt = {
+	alreadyDownloaded: alreadyDownloaded
+};
+
 const mdsFileCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n:host {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  border-radius: 0.375rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: rgb(var(--tone-neutral));\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  color: rgb(var(--tone-neutral-04));\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  overflow: hidden;\n  -webkit-transition-property: outline, outline-offset, -webkit-box-shadow;\n  transition-property: outline, outline-offset, -webkit-box-shadow;\n  transition-property: box-shadow, outline, outline-offset;\n  transition-property: box-shadow, outline, outline-offset, -webkit-box-shadow;\n  width: 100%;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host( :hover ) {\n  -webkit-box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n}\n\n.preview {\n  width: 3.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-file-preview-icon-bacground);\n  color: var(--mds-file-preview-color);\n  display: -ms-flexbox;\n  display: flex;\n  fill: var(--mds-file-preview-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: relative;\n  -webkit-transition-property: color, background-color, fill;\n  transition-property: color, background-color, fill;\n}\n\n.image-preview {\n  bottom: 0.75rem;\n  left: 0.75rem;\n  right: 0.75rem;\n  top: 0.75rem;\n\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: contain;\n  position: absolute;\n}\n\n.info {\n  min-width: 0rem;\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n}\n\n.filename {\n  min-width: 0rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.name {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.extension {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n}\n\n.detail {\n  min-width: 0rem;\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.suffix {\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.description {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  color: rgb(var(--tone-neutral-05));\n}\n\n.indicator {\n  padding-right: 1rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.downloaded {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.downloaded svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.downloaded {\n\n  fill: rgb(var(--status-success-06));\n}\n\n:host([format=\"archive\"]),\n:host([format=\"executable\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-color: rgb(var(--label-amaranth-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-amaranth-10));\n}\n\n:host([format=\"attachment\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-color: rgb(var(--tone-neutral-04));\n  --mds-file-preview-icon-bacground: rgb(var(--tone-neutral-10));\n}\n\n:host([format=\"audio\"]),\n:host([format=\"video\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-violet-04));\n  --mds-file-preview-color: rgb(var(--label-violet-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-violet-10));\n}\n\n:host([format=\"code\"]),\n:host([format=\"data\"]),\n:host([format=\"markup\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-color: rgb(var(--label-yellow-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-yellow-10));\n}\n\n:host([format=\"document\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-orange-04));\n  --mds-file-preview-color: rgb(var(--label-orange-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-orange-10));\n}\n\n:host([format=\"email\"]),\n:host([format=\"text\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-blue-04));\n  --mds-file-preview-color: rgb(var(--label-blue-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-blue-10));\n}\n\n:host([format=\"image\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-green-04));\n  --mds-file-preview-color: rgb(var(--label-green-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-green-10));\n}\n\n:host([format=\"slide\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-color: rgb(var(--label-orchid-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-orchid-10));\n}\n\n:host([format=\"spreadsheet\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-lime-04));\n  --mds-file-preview-color: rgb(var(--label-lime-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-lime-10));\n}\n\n:host([format=\"vector\"]) {\n\n  --mds-file-preview-icon-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-color: rgb(var(--label-aqua-04));\n  --mds-file-preview-icon-bacground: rgb(var(--label-aqua-10));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .preview {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .preview {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n\n  :host(:hover) {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n\n    :host(:hover) {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    background-color: rgb(var(--tone-neutral));\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    color: rgb(var(--tone-neutral-01));\n  }\n\n  :host(:hover) {\n    -webkit-box-shadow: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);\n    box-shadow: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      background-color: rgb(var(--tone-neutral));\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      color: rgb(var(--tone-neutral-01));\n    }\n\n    :host(:hover) {\n      -webkit-box-shadow: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);\n      box-shadow: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);\n    }\n  }\n}\n\n\n";
 const MdsFileStyle0 = mdsFileCss;
 
@@ -7189,6 +7209,12 @@ const MdsFile$1 = /*@__PURE__*/ proxyCustomElement(class MdsFile extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.downloadedEvent = createEvent(this, "mdsFileDownload", 7);
+        this.t = new Locale({
+            el: Object.assign(Object.assign({}, localeEl), fileDescriptionLocaleEl),
+            en: Object.assign(Object.assign({}, localeEn), fileDescriptionLocaleEn),
+            es: Object.assign(Object.assign({}, localeEs), fileDescriptionLocaleEs),
+            it: Object.assign(Object.assign({}, localeIt), fileDescriptionLocaleIt),
+        });
         this.handleOnClick = () => {
             var _a;
             const { format, description } = getExtensionInfos(this.filename, this.suffix);
@@ -7201,17 +7227,21 @@ const MdsFile$1 = /*@__PURE__*/ proxyCustomElement(class MdsFile extends HTMLEle
             this.wasDownloaded = localStorage.getItem(filename) === 'downloaded';
         };
         this.getDefaultDescription = () => getExtensionInfos(this.filename, this.suffix).description;
+        this.language = undefined;
         this.wasDownloaded = false;
         this.suffix = undefined;
         this.description = undefined;
-        this.downloadedLabel = 'Hai già scaricato questo file';
         this.filename = undefined;
         this.preview = undefined;
         this.showDownloadedIcon = true;
         this.format = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     componentWillLoad() {
         this.checkWasDownloaded();
+        this.t.lang(this.host);
         this.format = getExtensionInfos(this.filename, this.suffix).format;
     }
     componentDidUpdate() {
@@ -7222,10 +7252,10 @@ const MdsFile$1 = /*@__PURE__*/ proxyCustomElement(class MdsFile extends HTMLEle
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '7c22b0d19959dae1be9e3dec6fd77b0c0b0e520a', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '47fee84031dd385d9304645f0009389ab6e46eb3', class: "preview" }, this.preview !== undefined
+        return (h(Host, { key: 'fea56400bff2657114cfd7b9785b72762a143663', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '38d5f835886aef86afcea6b2fd779d459de97a9d', class: "preview" }, this.preview !== undefined
             ? h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })
-            : h("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: 'f8ddcbe438e0e32d8de390a6fbe981acab7b620d', class: "info" }, h("div", { key: '26f2abc8f8bbd4efc685dc992034fcc837cdf74a', class: "filename", title: this.filename }, h("mds-text", { key: '4061d3a614ab93fcc4e2a4456c398e94548f3ded', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && h("mds-text", { key: 'a7b04cb0ba0fed672f49b1b69290035f91e0336a', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), h("div", { key: '427a23302fafc57e45bd48225dd7d4f40535d7ab', class: "detail" }, getSuffix(this.filename, this.suffix) && h("mds-badge", { key: '052cadf6b4606299c0a6fbf62661f392359e5bd5', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), h("mds-text", { key: '69e1d6b269b9d4e45a61eaa7cb881028679211ad', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.getDefaultDescription() }, (_b = this.description) !== null && _b !== void 0 ? _b : this.getDefaultDescription()))), this.wasDownloaded && this.showDownloadedIcon &&
-            h("div", { key: '1f42d06c98288135cffca505852361710c015dab', class: "indicator" }, h("i", { key: '953081017f62f781758ba314d4f314ca06da5ad9', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.downloadedLabel }))));
+            : h("mds-icon", { name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: 'dc913aee8aeeeb51e261bcac7519361d762b45c2', class: "info" }, h("div", { key: '23cce7c93bfe95e2e29fd16e352c8592e79b4a88', class: "filename", title: this.filename }, h("mds-text", { key: 'b7552213276990fe8d4e71faf3b41787da41e9fd', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && h("mds-text", { key: '82ff59e493ae2f35b87c093549c4d7f34ebf6c55', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix))), h("div", { key: '56b038b3f17d140a841ef998633b5519df873c91', class: "detail" }, getSuffix(this.filename, this.suffix) && h("mds-badge", { key: '3d96163232a0b5d77555e903d3e237b978ec7f43', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix)), h("mds-text", { key: 'cd52271f23a549b089de4bcc6bac4ee7ee61198e', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon &&
+            h("div", { key: 'f0ab2874f31232ebfdae120a9fc9c2bb018f8819', class: "indicator" }, h("i", { key: '39d48760d3134793d0bca763d27f272cee30f2f8', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -7235,12 +7265,13 @@ const MdsFile$1 = /*@__PURE__*/ proxyCustomElement(class MdsFile extends HTMLEle
 }, [1, "mds-file", {
         "suffix": [513],
         "description": [1],
-        "downloadedLabel": [1, "downloaded-label"],
         "filename": [1],
         "preview": [1],
         "showDownloadedIcon": [4, "show-downloaded-icon"],
         "format": [1537],
-        "wasDownloaded": [32]
+        "language": [32],
+        "wasDownloaded": [32],
+        "updateLang": [64]
     }, undefined, {
         "filename": ["handleFilename"]
     }]);

package/dist/components/mds-filter-item2.js

@@ -31,7 +31,7 @@ const MdsFilterItem = /*@__PURE__*/ proxyCustomElement(class MdsFilterItem exten
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd0e961fc8d9d43f2cdb815b5a86c7ce90c467727', tabindex: "0", role: "button", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && h("mds-icon", { key: '36d226a87a366b3bd0ffc6153f131bdddf0befa7', "aria-hidden": "true", name: this.icon }), this.label && h("mds-text", { key: 'b72ef63fa7cece74b3efdac212108714f786d519', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)));
+        return (h(Host, { key: 'e9cc0e7bcb05b01294f9ae954f00f330a48520e6', tabindex: "0", role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && h("mds-icon", { key: '27c86b0b6b923d94c9cb5abad53bb040d91a0f4f', "aria-hidden": "true", name: this.icon }), this.label && h("mds-text", { key: '6981635e56ac780070b6c9e12f7e90612845867e', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)));
     }
     get element() { return this; }
     static get style() { return MdsFilterItemStyle0; }

package/dist/components/mds-filter.js

@@ -103,7 +103,7 @@ const MdsFilter$1 = /*@__PURE__*/ proxyCustomElement(class MdsFilter extends HTM
         this.changedEvent.emit({ children: items, value: this.itemsValues() });
     }
     render() {
-        return (h(Host, { key: '61c5754cdcd567e371ec9a75f2b36fd3363aa6f0', "aria-label": this.label }, this.label && h("mds-text", { key: 'cb4ff8cd7d6097c4423e868ef3f26fce99422b09', class: "label", typography: "label" }, this.label), h("div", { key: '87ac4b2b871819d332c9c0d31273ab308e88ac8d', class: clsx('items', this.active && 'active') }, h("slot", { key: '557196c9f319bb440ee21f92a7687298f415b00d' }), this.reset && h("div", { key: '37f77b71d97601600fc9838f032b38287b16bc0c', class: clsx('reset', this.active && 'reset-opened') }, h("mds-filter-item", { key: '4baf098d356900355ef769dd5ee4a040ae83de16', selected: this.active, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: "mi/baseline/close", onClick: this.resetItems })))));
+        return (h(Host, { key: '7215fb2de82e3f33a94ab1c101fc732a9a05cf27', "aria-label": this.label, role: "menubar" }, this.label && h("mds-text", { key: '4a95f76c175f7b9db14ea616a1556a17abe32ba1', class: "label", typography: "label" }, this.label), h("div", { key: '91a7cbd971f9bba667665a2119ab76fc2905d06d', class: clsx('items', this.active && 'active') }, h("slot", { key: 'f927719daa34281b0220d45e88dfbeea2a23560a' }), this.reset && h("div", { key: '8ec10d0b9d88a9808beb5cabc511d932820817a4', class: clsx('reset', this.active && 'reset-opened') }, h("mds-filter-item", { key: '22ea88c487a3f339fe9f1501a7bd30e484633671', selected: this.active, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: "mi/baseline/close", onClick: this.resetItems })))));
     }
     get element() { return this; }
     static get style() { return MdsFilterStyle0; }

package/dist/components/mds-header.js

@@ -84,6 +84,8 @@ const MdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class MdsHeader extends HTM
             this.appearance = (_b = this.sanitizedAppearance[0]) !== null && _b !== void 0 ? _b : this.appearance;
         };
         this.handleScroll = () => {
+            if (typeof window === 'undefined')
+                return;
             if (this.autoHide) {
                 this.handleVisibility();
             }
@@ -145,8 +147,8 @@ const MdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class MdsHeader extends HTM
         }
     }
     render() {
-        return (h(Host, { key: 'ebc52d4727506d8c50fa145d1858db54a6b4938e' }, h("slot", { key: 'b374010090e6f61bd1f580da30b75b0275f29455' }), this.hasMenu &&
-            h("div", { key: 'fd05fd451551513b603f0ef0b3885b27505a4a4e', class: "menu", part: "menu" }, h("mds-modal", { key: 'cb2539a1835537f69d5da1fd3ceb02824ceae246', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: '14a900ad5150c6a6673bb164ee7dd0386ca2d90f', name: "menu" })))));
+        return (h(Host, { key: '9595147f138d9d0e5abd37fe62687b6fcb9ae0fa' }, h("slot", { key: 'c14dbedd7b3e3a9b58ec7b32aaa3b65c35ce0308' }), this.hasMenu &&
+            h("div", { key: 'e9428c80b5cccadebcd7a82b66eb6fb35c80b039', class: "menu", part: "menu" }, h("mds-modal", { key: '93ce4d76d087adff4982b0a74874c4ca2a25d432', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: 'ee8647c583f3203314da681e5b8aec4d15332157', name: "menu" })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/mds-help.js

@@ -1,18 +1,19 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as hashRandomValue } from './aria.js';
+import { h as hashRandomValue } from './aria.js';
 import { d as defineCustomElement$4 } from './mds-icon2.js';
 import { d as defineCustomElement$3 } from './mds-text2.js';
 import { d as defineCustomElement$2 } from './mds-tooltip2.js';
 
 const miOutlineHelp = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"/></svg>`;
 
-const mdsHelpCss = "@tailwind components; @tailwind utilities; mds-help{--mds-help-tooltip-width:fit-content;--mds-help-tooltip-max-width:280px;--mds-help-tooltip-delay:0.25s;margin-left:0.25rem;cursor:help;display:-ms-inline-flexbox;display:inline-flex;fill:currentcolor;-ms-flex-pack:start;justify-content:flex-start;overflow:visible;position:relative}i{display:-ms-flexbox;display:flex}i svg{aspect-ratio:1/1;height:100%;width:100%}mds-help mds-tooltip{--mds-tooltip-delay:var(--mds-help-tooltip-delay);max-width:var(--mds-help-tooltip-max-width);min-width:var(--mds-help-tooltip-width)}mds-help mds-tooltip::part(text){max-width:var(--mds-help-tooltip-max-width);min-width:var(--mds-help-tooltip-width);width:var(--mds-help-tooltip-width)}:host mds-tooltip::part(text){max-width:var(--mds-help-tooltip-max-width);min-width:var(--mds-help-tooltip-width);width:var(--mds-help-tooltip-width)}mds-icon,i{height:1rem;width:1rem;fill:inherit}";
+const mdsHelpCss = "@tailwind components; @tailwind utilities; :host{--mds-help-tooltip-width:fit-content;--mds-help-tooltip-max-width:280px;--mds-help-tooltip-delay:0.25s;margin-left:0.25rem;color:rgb(var(--tone-neutral-03));cursor:help;display:-ms-inline-flexbox;display:inline-flex;fill:currentcolor;-ms-flex-pack:start;justify-content:flex-start;overflow:visible;position:relative}i{display:-ms-flexbox;display:flex}i svg{aspect-ratio:1/1;height:100%;width:100%}mds-tooltip{--mds-tooltip-delay:var(--mds-help-tooltip-delay);max-width:var(--mds-help-tooltip-max-width);min-width:var(--mds-help-tooltip-width)}mds-tooltip::part(text){max-width:var(--mds-help-tooltip-max-width);min-width:var(--mds-help-tooltip-width);width:var(--mds-help-tooltip-width)}mds-icon,i{height:1rem;width:1rem;fill:inherit}";
 const MdsHelpStyle0 = mdsHelpCss;
 
 const MdsHelp$1 = /*@__PURE__*/ proxyCustomElement(class MdsHelp extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.icon = undefined;
         this.autoPlacement = true;
         this.placement = 'top';
@@ -22,10 +23,10 @@ const MdsHelp$1 = /*@__PURE__*/ proxyCustomElement(class MdsHelp extends HTMLEle
     }
     render() {
         var _a;
-        return (h(Host, { key: '0b88f9a190b8890be7988542e53c0d5d09291874' }, h("mds-icon", { key: '423942cd443976464d8af6522ddc65d4771a5e0d', id: this.id, name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp }), h("mds-tooltip", { key: '270033eacb7e7274fa12c57993c81e493ec0d5e6', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "fixed", target: '#' + this.id }, h("slot", { key: '19e960a42a0960dbb49d024e7febf755f03cab89' }))));
+        return (h(Host, { key: '93b3a04a7919b2e5c0297e54a94ef40955a918d2' }, h("mds-icon", { key: '4fc245e92c28392f5090b2d3025f1061e876e1cf', id: this.id, name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp }), h("mds-tooltip", { key: 'bfad74ee1597eafc0d2ab21b37e16fcddf3d9cc8', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "fixed", target: '#' + this.id }, h("slot", { key: 'd7cd7b45875df092dd2889fd6f77c086ae09a838' }))));
     }
     static get style() { return MdsHelpStyle0; }
-}, [4, "mds-help", {
+}, [1, "mds-help", {
         "icon": [1],
         "autoPlacement": [516, "auto-placement"],
         "placement": [513]

package/dist/components/mds-icon2.js

@@ -130,12 +130,12 @@ class MdsIconSet {
 
 class IconsSetController {
     constructor() {
-        this._iconsSets = new Map();
         this._svgPathKey = 'mdsIconSvgPath';
+        this._iconsSets = new Map();
         this._svgPathUpdate = 'mdsIconSvgPathUpdate';
         this.cacheExp = 60 * 60 * 1000 * 24;
-        this.memoryCache = {};
         this.listeners = [];
+        this.memoryCache = {};
         // Try to retrieve svg from cache
         this.isCacheAvailable = async (url) => {
             try {
@@ -191,9 +191,32 @@ class IconsSetController {
             return { set: null };
         return { set: this._iconsSets.get(iconName.split('/')[0]) };
     }
+    /**
+     * recognize svg path pattern and set host and svgPath variable
+     *
+     * input path: https://www.abc.com/svg/path
+     * svgPath =  https://www.abc.com/svg/path
+     *
+     * input path: localhost:9000/svg/path
+     * svgPath = localhost:9000/svg/path
+     *
+     * input path: /svg/path
+     * svgPath = {window.location.host}/svg/path
+     *
+     * input path: svg/path
+     * throw error
+     *
+     */
     setSvgPath(svgPath) {
-        this._svgPath = svgPath;
-        window.dispatchEvent(new Event(this._svgPathUpdate));
+        const reg = /^(((https?:\/\/)?[.\w]+(:\d+)?)|\/)([\w/-]+)*/;
+        const match = reg.exec(svgPath);
+        if (!match) {
+            throw Error(`Svg path not recognize ${svgPath}, ensure is a absolute path starting with '/' or a url`);
+        }
+        if (typeof window !== 'undefined') {
+            this._svgPath = match[1] ? match[0] : window.location.origin.concat(match[0]);
+            window.dispatchEvent(new Event(this._svgPathUpdate));
+        }
     }
     getSvgPath() {
         return this._svgPath;
@@ -202,13 +225,23 @@ class IconsSetController {
         this.listeners.push(callback);
     }
     setUpListener() {
-        window.addEventListener(this._svgPathUpdate, () => {
-            for (const listener of this.listeners)
-                listener();
-        });
+        if (typeof window !== 'undefined') {
+            window.addEventListener(this._svgPathUpdate, () => {
+                for (const listener of this.listeners)
+                    listener();
+            });
+        }
     }
-    async fetchSvg(src) {
+    async fetchSvg(name) {
+        var _a;
         try {
+            if (!this._svgPath && typeof window === 'undefined') {
+                throw Error('Cant find svgPath, ensure you set it');
+            }
+            if (!this._svgPath) {
+                this.setSvgPath((_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '');
+            }
+            const src = this._svgPath && !name.startsWith('http') ? this._svgPath.concat(name, '.svg') : name;
             const lsCache = await this.isCacheAvailable(src);
             if (this.memoryCache[src] || lsCache) {
                 return this.memoryCache[src] || lsCache;
@@ -275,12 +308,10 @@ const MdsIcon = /*@__PURE__*/ proxyCustomElement(class MdsIcon extends HTMLEleme
             this.svgHTML = this.name;
             return Promise.resolve();
         }
-        const svgPath = IconsSetService.getSvgPath() || window.sessionStorage.getItem(IconsSetService._svgPathKey);
-        this._iconHref = svgPath && !this.name.startsWith('http') ? window.location.origin.concat(svgPath.concat(this.name).concat('.svg')) : this.name;
-        this.svgHTML = await IconsSetService.fetchSvg(this._iconHref);
+        this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (h(Host, { key: 'cd5223c17789fa8499b014ab11d28f29d11a6d5e' }, this.svgHTML && h("i", { key: 'b176ca6f11eb463e4a449da470a80b1a2ca42505', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (h(Host, { key: '0776044452ef994b9671eaad6d0f1299bd3f7add' }, this.svgHTML && h("i", { key: '0091505aeb5563e9a1327d174d19ac0e4fe1ffd6', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     get hostElement() { return this; }
     static get watchers() { return {