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

package/dist/esm/mds-entity.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
 
 const mdsEntityCss = "@tailwind utilities;\n\n/**\n * @prop --mds-entity-background: The background-color of the entity\n * @prop --mds-entity-color: The color of the entity name\n * @prop --mds-entity-detail-color: The color of the text details\n * @prop --mds-entity-icon-background: The background-color of the icon\n * @prop --mds-entity-icon-color: The color of the icon\n * @prop --mds-entity-shadow: The box-shadow od the component\n */\n\n:host {\n\n  --mds-entity-background: rgb(var(--tone-neutral));\n  --mds-entity-color: rgb(var(--tone-neutral-02));\n  --mds-entity-detail-color: rgb(var(--tone-neutral-03));\n  --mds-entity-icon-background: rgb(var(--label-blue-09));\n  --mds-entity-icon-radius: 0.25rem;\n  --mds-entity-icon-color: rgb(var(--label-blue-04));\n  --mds-entity-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n\n  -ms-flex-align: stretch;\n\n  align-items: stretch;\n  background-color: var(--mds-entity-background);\n  -webkit-box-shadow: var(--mds-entity-shadow);\n  box-shadow: var(--mds-entity-shadow);\n  color: var(--mds-entity-color);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.spinner,\n.preview,\n.delete{\n\n  width: 2.75rem;\n\n  border-radius: 0.25rem;\n\n  -ms-flex-negative: 0;\n\n  flex-shrink: 0;\n}\n\n.spinner,\n.preview{\n\n  aspect-ratio: 1/1;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-entity-icon-background);\n  border-radius: var(--mds-entity-icon-radius);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  fill: var(--mds-entity-icon-color);\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.preview {\n\n  --mds-avatar-radius: var(--mds-entity-icon-radius);\n}\n\n.spinner {\n  background-color: transparent;\n  display: none;\n  fill: var(--mds-entity-icon-color);\n}\n\n:host([await]:not([await=\"false\"])) .spinner {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\nmds-spinner{\n\n  height: 2.25rem;\n\n  width: 2.25rem;\n}\n\n.infos{\n\n  min-width: 0rem;\n\n  gap: 0rem;\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  -ms-flex-pack: center;\n  justify-content: center;\n  white-space: nowrap;\n}\n\n.details{\n\n  gap: 0.25rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: var(--mds-entity-detail-color);\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.actions{\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::slotted( [slot=\"action\"] ){\n\n  aspect-ratio: 1/1;\n\n  width: 2.75rem;\n\n  height: auto;\n}\n\n::slotted( * ){\n\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n\n  white-space: nowrap;\n}\n\n.title{\n\n  min-width: 0rem;\n\n  overflow: hidden;\n\n  text-overflow: ellipsis;\n\n  white-space: nowrap;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-entity-background: rgb(var(--tone-neutral));\n    --mds-entity-color: rgb(var(--tone-neutral-01));\n    --mds-entity-detail-color: rgb(var(--tone-neutral-02));\n    --mds-entity-icon-background: rgb(var(--label-blue-08));\n    --mds-entity-icon-color: rgb(var(--label-blue-03));\n    --mds-entity-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-entity-background: rgb(var(--tone-neutral));\n      --mds-entity-color: rgb(var(--tone-neutral-01));\n      --mds-entity-detail-color: rgb(var(--tone-neutral-02));\n      --mds-entity-icon-background: rgb(var(--label-blue-08));\n      --mds-entity-icon-color: rgb(var(--label-blue-03));\n      --mds-entity-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-entity-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\n      --mds-entity-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n";
 const MdsEntityStyle0 = mdsEntityCss;
@@ -34,10 +34,10 @@ const MdsEntity = class {
         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 getElement(this); }
 };

package/dist/esm/mds-file-preview.entry.js

@@ -1,9 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { m as miBaselineCancel } from './cancel-8698c6fc.js';
 import { c as clsx } from './clsx-297c1ffe.js';
-import { g as getExtensionInfos, a as getSuffix, c as getFormatsVariant } from './file-4e952d4d.js';
-import './file-extensions-e7320b03.js';
+import { f as fileDescriptionLocaleEl, a as fileDescriptionLocaleEn, b as fileDescriptionLocaleEs, c as fileDescriptionLocaleIt, g as getExtensionInfos, d as getSuffix, h as getFormatsVariant } from './locale.it-94429e24.js';
+import { L as Locale } from './locale-149207d6.js';
+import './file-extensions-97006435.js';
 import './panorama-7a041ab0.js';
+import './_commonjsHelpers-bdec4bbd.js';
 
 /**
  * filesize
@@ -197,7 +199,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@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 = class {
@@ -205,13 +227,20 @@ const MdsFilePreview = class {
         registerInstance(this, hostRef);
         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;
@@ -225,7 +254,11 @@ const MdsFilePreview = class {
         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() {
@@ -247,11 +280,11 @@ const MdsFilePreview = class {
     }
     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 getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-file.entry.js

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
-import { c as commonjsRequire, a as commonjsGlobal } from './_commonjsHelpers-e557d4a5.js';
-import { g as getExtensionInfos, a as getSuffix, b as getName, c as getFormatsVariant } from './file-4e952d4d.js';
-import './file-extensions-e7320b03.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
+import { a as commonjsRequire, c as commonjsGlobal } from './_commonjsHelpers-bdec4bbd.js';
+import { f as fileDescriptionLocaleEl, a as fileDescriptionLocaleEn, b as fileDescriptionLocaleEs, c as fileDescriptionLocaleIt, g as getExtensionInfos, d as getSuffix, e as getName, h as getFormatsVariant } from './locale.it-94429e24.js';
+import { L as Locale } from './locale-149207d6.js';
+import './file-extensions-97006435.js';
 import './panorama-7a041ab0.js';
 
 var cryptoJs = {exports: {}};
@@ -7179,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;
 
@@ -7186,6 +7207,12 @@ const MdsFile = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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);
@@ -7198,17 +7225,21 @@ const MdsFile = class {
             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() {
@@ -7219,10 +7250,10 @@ const MdsFile = class {
     }
     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 getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-filter-item.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
-import { K as KeyboardManager } from './keyboard-manager-f3d273fc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
+import { K as KeyboardManager } from './keyboard-manager-9f287ab7.js';
 
 const mdsFilterItemCss = "@-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/* x */\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  gap: 0.25rem;\n  border-radius: 9999px;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\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: center;\n\n  align-items: center;\n  color: rgb(var(--tone-neutral-03));\n  cursor: pointer;\n  display: -ms-flexbox;\n  display: flex;\n  fill: rgb(var(--tone-neutral-03));\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color, outline, outline-offset;\n  transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n  white-space: nowrap;\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( [icon]:not([label]) ) {\n  height: 2.25rem;\n  width: 2.25rem;\n  padding: 0rem;\n}\n\n:host( [selected]:not([selected=\"false\"]) ),\n:host( :hover ) {\n  background-color: rgb(var(--tone-neutral));\n}\n\n:host( [selected]:not([selected=\"false\"]) ) {\n  color: rgb(var(--tone-neutral-01));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\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      -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    background-color: rgb(var(--tone-neutral-10));\n  }\n\n  :host( [selected]:not([selected=\"false\"]) ) {\n    background-color: rgb(var(--tone-neutral-08));\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 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      background-color: rgb(var(--tone-neutral-10));\n    }\n\n    :host( [selected]:not([selected=\"false\"]) ) {\n      background-color: rgb(var(--tone-neutral-08));\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 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( [selected]:not([selected=\"false\"]) ),\n  :host( :hover ) {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    box-shadow: 0 0 0 2px 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( [selected]:not([selected=\"false\"]) ),\n    :host( :hover ) {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n  }\n}\n\n\n";
 const MdsFilterItemStyle0 = mdsFilterItemCss;
@@ -27,7 +27,7 @@ const MdsFilterItem = class {
     }
     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 getElement(this); }
 };

package/dist/esm/mds-filter.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 
 const mdsFilterCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-filter-items-background-active: Sets the background-color of the items row area when a filter is active\n * @prop --mds-filter-items-background: Sets the background-color of the items row area\n * @prop --mds-filter-items-gap: Sets the gap between items\n * @prop --mds-filter-items-padding: Sets the padding of the items row area\n * @prop --mds-filter-items-radius: Sets the border-radius of the items row area\n * @prop --mds-filter-label-padding: Sets the padding of the label\n */\n\n:host {\n\n  --mds-filter-items-background-active: rgb(var(--tone-neutral-08));\n  --mds-filter-items-background: rgb(var(--tone-neutral-09));\n  --mds-filter-items-gap: 0.5rem;\n  --mds-filter-items-padding: 0.5rem;\n  --mds-filter-items-radius: 9999px;\n  --mds-filter-label-padding: 0 1.5rem;\n  gap: 0.25rem;\n\n  display: grid;\n  grid-auto-rows: -webkit-min-content;\n  grid-auto-rows: min-content;\n}\n\n.reset {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n.reset-button{\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  scale: 0;\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n.reset-button-opened {\n  scale: 1;\n}\n\n.items {\n    -webkit-overflow-scrolling: touch;\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n    -webkit-transition-duration: 300ms;\n    transition-duration: 300ms;\n    -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n    transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  background-color: var(--mds-filter-items-background);\n  border-radius: var(--mds-filter-items-radius);\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--mds-filter-items-gap);\n  overflow: auto;\n  padding: var(--mds-filter-items-padding);\n  scroll-behavior: smooth;\n  -webkit-scroll-snap-type: x mandatory;\n  -ms-scroll-snap-type: x mandatory;\n  scroll-snap-type: x mandatory;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  }\n\n.items::-webkit-scrollbar {\n  display: none;\n}\n\n.label {\n  padding: var(--mds-filter-label-padding);\n}\n\n.active {\n  background-color: var(--mds-filter-items-background-active);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .reset-button,\n  .items {\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    .reset-button,\n    .items {\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  .items {\n\n    --mds-filter-items-background-active: rgb(var(--tone-neutral-10));\n    --mds-filter-items-background: rgb(var(--tone-neutral-09));\n\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\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    .items {\n\n      --mds-filter-items-background-active: rgb(var(--tone-neutral-10));\n      --mds-filter-items-background: rgb(var(--tone-neutral-09));\n\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n\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-filter-items-background-active: rgb(var(--tone-neutral-09));\n    --mds-filter-items-background: rgb(var(--tone-neutral-10));\n  }\n\n  .items {\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-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-filter-items-background-active: rgb(var(--tone-neutral-09));\n      --mds-filter-items-background: rgb(var(--tone-neutral-10));\n    }\n\n    .items {\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\n";
@@ -98,7 +98,7 @@ const MdsFilter = class {
         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 getElement(this); }
 };

package/dist/esm/mds-header-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 
 const miRoundMenu = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>`;
 

package/dist/esm/mds-header.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 
 const mdsHeaderCss = "@tailwind utilities;\n\n/**\n * @prop --mds-header-color: Sets the text color of the header and the mobile toggler icon\n * @prop --mds-header-hidden-bar-translate-inline: Sets translateY value for the appearance inline `mds-header-bar` element\n * @prop --mds-header-hidden-bar-translate-stripe: Sets translateY value for the appearance stripe `mds-header-bar` element\n * @prop --mds-header-icon-color: Sets the color of the icon toggler\n * @prop --mds-header-z-index: Sets the z-index of the modal\n */\n\n:host {\n\n  --mds-header-color: rgb(var(--tone-neutral-02));\n  --mds-header-hidden-bar-translate-inline: translateY(-150%);\n  --mds-header-hidden-bar-translate-stripe: translateY(-110%);\n  --mds-header-icon-color: var(--mds-header-color, rgb(var(--tone-neutral-02)));\n  --mds-header-modal-icon-color: rgb(var(--tone-neutral));\n  --mds-header-z-index: var(--magma-header-z-index, 1000);\n\n  color: var(--mds-header-color);\n  fill: var(--mds-header-icon-color);\n  position: relative;\n  z-index: var(--mds-header-z-index);\n}\n\n.menu {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.modal {\n\n  --mds-modal-close-icon-color: var(--mds-header-modal-icon-color);\n\n  z-index: var(--mds-header-z-index);\n}\n\n:host([appearance=\"inline\"]) ::slotted(mds-header-bar){\n\n  margin-top: 1.5rem;\n\n  margin-bottom: 1.5rem;\n\n  max-width: 1280px;\n\n  border-radius: 0.5rem;\n\n  width: calc(100% - 3rem);\n}\n\n@media (max-width: 1023px){\n\n  :host([menu=\"desktop\"]) .menu{\n\n    display: none;\n  }\n}\n\n@media (min-width: 1024px){\n\n  :host([menu=\"mobile\"]) .menu{\n\n    display: none;\n  }\n}\n\n:host([menu=\"none\"]) .menu {\n  display: none;\n}\n\n:host([visibility=\"hidden\"][appearance=\"stripe\"]) ::slotted(mds-header-bar) {\n  -webkit-transform: var(--mds-header-hidden-bar-translate-stripe);\n  transform: var(--mds-header-hidden-bar-translate-stripe);\n}\n\n:host([visibility=\"hidden\"][appearance=\"inline\"]) ::slotted(mds-header-bar) {\n  -webkit-transform: var(--mds-header-hidden-bar-translate-inline);\n  transform: var(--mds-header-hidden-bar-translate-inline);\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-header-modal-icon-color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n";
 const MdsHeaderStyle0 = mdsHeaderCss;
@@ -77,6 +77,8 @@ const MdsHeader = class {
             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();
             }
@@ -138,8 +140,8 @@ const MdsHeader = class {
         }
     }
     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 getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-help.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
-import { h as hashRandomValue } from './aria-0e390d9c.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
+import { h as hashRandomValue } from './aria-ed9d415d.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 = class {
@@ -18,7 +18,7 @@ const MdsHelp = class {
     }
     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' }))));
     }
 };
 MdsHelp.style = MdsHelpStyle0;

package/dist/esm/mds-horizontal-scroll.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { m as miBaselineArrowBack } from './arrow-back-62755bde.js';
 import { m as miBaselineArrowForward } from './arrow-forward-5e83e053.js';
 import { c as clsx } from './clsx-297c1ffe.js';

package/dist/esm/mds-hr.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-f08bac5f.js';
+import { r as registerInstance, h, H as Host } from './index-44fd80a1.js';
 
 const mdsHrCss = "\n@tailwind utilities;\n\n:host{\n\n  height: 0.25rem;\n\n  width: 100%;\n\n  border-radius: 0.25rem;\n\n  background-color: rgb(var(--tone-neutral-08));\n  border: 0;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    background-color: rgb(var(--tone-neutral-07));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      background-color: rgb(var(--tone-neutral-07));\n    }\n  }\n}\n\n";
 const MdsHrStyle0 = mdsHrCss;

package/dist/esm/mds-img.entry.js

@@ -1,13 +1,23 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
-import { s as setAttributeIfEmpty } from './aria-0e390d9c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
+import { s as setAttributeIfEmpty } from './aria-ed9d415d.js';
 import { m as miBaselinePanorama } from './panorama-7a041ab0.js';
-import { L as Locale } from './locale-a730711f.js';
-import './_commonjsHelpers-e557d4a5.js';
+import { L as Locale } from './locale-149207d6.js';
+import './_commonjsHelpers-bdec4bbd.js';
 
 const miBaselineBrokenImage = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 5v6.59l-3-3.01l-4 4.01l-4-4l-4 4l-3-3.01V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42l3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l3 2.99l4-4l4 4l4-3.99z"/></svg>`;
 
-const clickToLoad$1 = "Load image";
+const clickToLoad$3 = "Φόρτωση εικόνας";
+const localeEl = {
+	clickToLoad: clickToLoad$3
+};
+
+const clickToLoad$2 = "Load image";
 const localeEn = {
+	clickToLoad: clickToLoad$2
+};
+
+const clickToLoad$1 = "Cargar imagen";
+const localeEs = {
 	clickToLoad: clickToLoad$1
 };
 
@@ -16,7 +26,7 @@ const localeIt = {
 	clickToLoad: clickToLoad
 };
 
-const mdsImgCss = "@tailwind components; @tailwind utilities; :host{--mds-img-background:rgb(var(--brand-maggioli-03));--mds-img-color:rgb(var(--brand-maggioli-09));--mds-img-icon-color:rgb(var(--brand-maggioli-07));--mds-img-error-background:rgb(var(--status-error-09));--mds-img-error-color:rgb(var(--status-error-04));--mds-img-error-icon-color:rgb(var(--status-error-06));display:-ms-flexbox;display:flex;-o-object-fit:cover;object-fit:cover;overflow:hidden;position:relative}img{width:100%;-o-object-fit:inherit;object-fit:inherit}.alt-text-container{gap:1.5rem;padding:1.5rem;-ms-flex-align:center;align-items:center;background-color:var(--mds-img-background);color:var(--mds-img-color);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;text-align:center}.alt-text-container--absolute{cursor:pointer;inset:0;position:absolute}.alt-text-container--error{--mds-img-background:var(--mds-img-error-background);--mds-img-color:var(--mds-img-error-color);--mds-img-icon-color:var(--mds-img-error-icon-color);cursor:not-allowed}.alt-text-container--default-aspect-ratio{cursor:pointer;width:100%}.click-to-load{pointer-events:none}.icon{width:2.25rem;fill:var(--mds-img-icon-color)}";
+const mdsImgCss = "@tailwind components; @tailwind utilities; :host{--mds-img-background:rgb(var(--variant-primary-03));--mds-img-color:rgb(var(--variant-primary-09));--mds-img-icon-color:rgb(var(--variant-primary-07));--mds-img-error-background:rgb(var(--status-error-09));--mds-img-error-color:rgb(var(--status-error-04));--mds-img-error-icon-color:rgb(var(--status-error-06));display:-ms-flexbox;display:flex;-o-object-fit:cover;object-fit:cover;overflow:hidden;position:relative}img{width:100%;-o-object-fit:inherit;object-fit:inherit}.alt-text-container{gap:1.5rem;padding:1.5rem;-ms-flex-align:center;align-items:center;background-color:var(--mds-img-background);color:var(--mds-img-color);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;text-align:center}.alt-text-container--absolute{cursor:pointer;inset:0;position:absolute}.alt-text-container--error{--mds-img-background:var(--mds-img-error-background);--mds-img-color:var(--mds-img-error-color);--mds-img-icon-color:var(--mds-img-error-icon-color);cursor:not-allowed}.alt-text-container--default-aspect-ratio{cursor:pointer;width:100%}.click-to-load{pointer-events:none}.icon{width:2.25rem;fill:var(--mds-img-icon-color)}";
 const MdsImgStyle0 = mdsImgCss;
 
 const MdsImg = class {
@@ -26,7 +36,9 @@ const MdsImg = class {
         this.loadSuccessEvent = createEvent(this, "mdsImgLoadSuccess", 7);
         this.consumptionMode = 'high';
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.onSuccess = (ev) => {
@@ -66,6 +78,7 @@ const MdsImg = class {
         };
         this.imageConsumptionLoaded = false;
         this.imageError = false;
+        this.language = undefined;
         this.alt = '';
         this.crossorigin = 'use-credentials';
         this.height = undefined;
@@ -77,6 +90,9 @@ const MdsImg = class {
         this.srcsetConsumption = undefined;
         this.width = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     srcsetConsumptionHandler(newValue) {
         this.srcsetConsumptionData = this.formatConsumptionData(newValue);
     }
@@ -105,7 +121,7 @@ const MdsImg = class {
         if (this.srcsetConsumptionData) {
             if (this.consumptionMode === 'low') {
                 return (h(Host, { "aria-label": this.alt, role: "img", onClick: () => { this.imageConsumptionLoaded = true; } }, h("div", { class: "contrast-area-50" }), !this.imageConsumptionLoaded
-                    ? h("div", { class: "alt-text-container alt-text-container--default-aspect-ratio" }, h("mds-icon", { class: "icon", name: miBaselinePanorama }), h("mds-text", { class: "alt-text", "aria-hidden": "true", typography: "h6" }, h("i", null, this.alt)), h("mds-button", { class: "click-to-load", "aria-hidden": "true", variant: "light", tone: "ghost" }, this.t.get('clickToLoad')))
+                    ? h("div", { "aria-hidden": "true", class: "alt-text-container alt-text-container--default-aspect-ratio" }, h("mds-icon", { class: "icon", name: miBaselinePanorama }), h("mds-text", { class: "alt-text", typography: "h6" }, h("i", null, this.alt)), h("mds-button", { "aria-hidden": "true", role: "none", class: "click-to-load", tabIndex: -1, variant: "light", tone: "ghost" }, this.t.get('clickToLoad')))
                     : h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_a = this.srcsetConsumptionData[this.consumptionMode]) !== null && _a !== void 0 ? _a : this.src, srcset: this.srcset, width: this.width })));
             }
             return (h(Host, { "aria-label": this.alt, role: "img" }, h("div", { class: "contrast-area-50" }), h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_b = this.srcsetConsumptionData[this.consumptionMode]) !== null && _b !== void 0 ? _b : this.src, srcset: this.srcset, width: this.width })));

package/dist/esm/mds-input-field.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 
 const NullValidator = () => null;
@@ -264,9 +264,9 @@ const MdsInputField = class {
         return this.inputValidation.isValid(this.value);
     }
     render() {
-        return (h(Host, { key: 'db5b1e0a4e149d9f32644f0d319c91ede6154508' }, this.label && h("mds-text", { key: '35e32691561662a7b7218c435adb709cac4b6169', class: "label", typography: "label" }, this.label), h("div", { key: '69e644c0d945b87ecae0f529fa322523292c72f9', class: clsx('message-window', this.variant && this.message && 'message-window--opened') }, h("mds-input", { key: 'c8f9c545b595311edfea7571bb896a7e80401af8', autocomplete: this.autocomplete, autofocus: this.autofocus, await: this.await, class: clsx('input', this.isValidInput ? 'input-valid' : 'input-invalid'), controlsLayout: this.controlsLayout, controlsIcon: this.controlsIcon, disabled: this.disabled, icon: this.icon, id: "field", max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly,
+        return (h(Host, { key: '4ac545ba6d87644a4104ae62f46f6eb15b3f93e7' }, this.label && h("mds-text", { key: 'df7dba982c349670445324c8f3213b4dccfb5087', class: "label", typography: "label" }, this.label), h("div", { key: '4a21301b0f233c53a61ba9e6fb4f1858c99a4af5', class: clsx('message-window', this.variant && this.message && 'message-window--opened') }, h("mds-input", { key: '9b3274442d3798c8d818e87bb02cc9b7853e6b5f', autocomplete: this.autocomplete, autofocus: this.autofocus, await: this.await, class: clsx('input', this.isValidInput ? 'input-valid' : 'input-invalid'), controlsLayout: this.controlsLayout, controlsIcon: this.controlsIcon, disabled: this.disabled, icon: this.icon, id: "field", max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, placeholder: this.placeholder, readonly: this.readonly,
             // ref={ input => (this.mdsInput = input)}
-            required: this.required, typography: this.typography, variant: this.variant, tip: this.tip, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.message && h("mds-text", { key: '37b8805d9b7abe1c644a66e49abc391ab97141e9', class: "message", typography: "caption" }, this.message))));
+            required: this.required, typography: this.typography, variant: this.variant, tip: this.tip, step: this.step, tabIndex: this.tabindex, type: this.type, value: this.value }), this.message && h("mds-text", { key: '021dcc9f0d404847f6b81831ab1393704907545d', class: "message", typography: "caption" }, this.message))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }