@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/collection/components/mds-input-switch/mds-input-switch.js

@@ -6,12 +6,13 @@ import { KeyboardManager } from "../../common/keyboard-manager";
 import { inputSwitchIconVariant } from "./meta/variants";
 import { hasSlotted } from "../../common/slot";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Put text string or elements here
+ * @slot - Put text string or elements here
  */
 export class MdsInputSwitch {
     constructor() {
@@ -88,6 +89,9 @@ export class MdsInputSwitch {
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -118,6 +122,19 @@ export class MdsInputSwitch {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentDidLoad() {
         var _a, _b;
         this.language = this.t.lang(this.host);
@@ -130,7 +147,7 @@ export class MdsInputSwitch {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (h(Host, { key: 'd3c6da7fba310943e3a1f24df69d2a1e04b6eefa', onClick: this.handleDirty }, h("input", { key: 'adb7c6c931241829749874984c1c898fece35089', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: (event) => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: '5e10e085510602e2ae9e43aee81d574f1268d4c7', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: '50818ea7f5ed302dee65bd4dc0b4d6eb49f25c56', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: '91ecda691ca9c3292abb9c3ca9b0c7ebcfb61876' })))));
+        return (h(Host, { key: '963b8366404d13af6237a061c10d7b7f3512ff47', onClick: this.handleDirty, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("input", { key: '1d13fb479902008db6d8f8bce420aea5eabb8232', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: this.handleInputOnChange, type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: 'e95925e2b9c53b9fb5e2dba6523d24b573eb4849', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: 'cc1fd90f2ac22285cb764b4cce34e80180d95431', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: '2bfaae2683bf4b30daf69d07febbf7848605e1de' })))));
     }
     static get is() { return "mds-input-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -419,6 +436,8 @@ export class MdsInputSwitch {
     }
     static get states() {
         return {
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "dirty": {},
             "hasText": {},
             "language": {}
@@ -464,7 +483,7 @@ export class MdsInputSwitch {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-input-tip/mds-input-tip.css

@@ -49,6 +49,8 @@ mds-input-tip-item {
 }
 
 :host {
+  --mds-input-tip-transition-duration: var(--duration-300, 300ms);
+  --private-input-tip-transition-duration: var(--mds-input-tip-transition-duration);
   --mds-input-tip-active-translate: translate(0, 0);
   --mds-input-tip-background: rgb(var(--tone-neutral-03, 233 233 233));
   --mds-input-tip-horizontal-offset-focused: 0px;
@@ -63,7 +65,7 @@ mds-input-tip-item {
   position: absolute;
   right: var(--mds-input-tip-horizontal-offset, --spacing(400));
   transform: var(--mds-input-tip-active-translate, translate(0, 0));
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-tip-transition-duration);
   transition-property: transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
@@ -104,14 +106,21 @@ mds-input-tip-item {
   border-bottom-right-radius: 0;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-input-tip-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-tip-transition-duration: 0s;
   }
 }
 

package/dist/collection/components/mds-input-tip/mds-input-tip.js

@@ -1,4 +1,8 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
+/**
+ * @slot - Add `mds-input-tip-item` elements or `components` to this slot.
+ */
 export class MdsInputTip {
     constructor() {
         /**
@@ -10,8 +14,17 @@ export class MdsInputTip {
          */
         this.position = 'top';
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '77a6d9fcf9ef9b82c9baeb906bbf0aa0b194cf2d' }, h("slot", { key: 'c330a5f7bee0a98be75bcd934c36f414cb5b82d3' })));
+        return (h(Host, { key: 'db2fa18fdcb6501bd9d29fbe0d5d0441b89fe16b', "pref-animation": this.prefAnimation }, h("slot", { key: 'ffcb33a9f61008c5f826513049232eedf3cf520c' })));
     }
     static get is() { return "mds-input-tip"; }
     static get encapsulation() { return "shadow"; }
@@ -76,4 +89,9 @@ export class MdsInputTip {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
 }

package/dist/collection/components/mds-input-tip-item/mds-input-tip-item.css

@@ -35,6 +35,10 @@ mds-text {
 }
 
 :host {
+  --mds-input-tip-item-transition-duration: var(--duration-300, 300ms);
+  --private-input-tip-item-transition-duration: var(--mds-input-tip-item-transition-duration);
+  --mds-input-tip-item-content-transition-duration: var(--duration-200, 200ms);
+  --private-input-tip-item-content-transition-duration: var(--mds-input-tip-item-content-transition-duration);
   --mds-input-tip-item-background: var(--mds-input-tip-background, rgb(var(--tone-neutral-03, 233 233 233)));
   --mds-input-tip-item-color: rgb(var(--tone-neutral, 0 0 0));
   --mds-input-tip-item-icon-color: rgb(var(--tone-neutral, 0 0 0));
@@ -52,7 +56,7 @@ mds-text {
   position: static;
   text-align: center;
   transform: translate(0, 0);
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-input-tip-item-transition-duration);
   transition-property:
     background-color, border-radius, color, padding-left, padding-right, transform;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
@@ -70,7 +74,7 @@ mds-text {
   height: --spacing(300);
   opacity: 0;
   overflow: hidden;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-input-tip-item-content-transition-duration);
   transition-property: grid-template-columns, opacity;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
 }
@@ -145,23 +149,32 @@ mds-text {
   --mds-input-tip-item-background: rgb(var(--status-error-05, 250 165 160));
 }
 
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .content {
-  transition-duration: 0s;
-}
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+:host([pref-animation='reduce']) {
+  --private-input-tip-item-transition-duration: 0s;
+  --private-input-tip-item-content-transition-duration: 0s;
+}
 
-    .content {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-input-tip-item-transition-duration: 0s;
+    --private-input-tip-item-content-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   &:host([variant='count-empty']) {
     --mds-input-tip-item-color: rgb(var(--status-info-10, 0 61 103));
     --mds-input-tip-item-background: rgb(var(--status-info-05, 112 198 234));
@@ -184,8 +197,8 @@ mds-text {
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     &:host([variant='count-empty']) {
       --mds-input-tip-item-color: rgb(var(--status-info-10, 0 61 103));
       --mds-input-tip-item-background: rgb(var(--status-info-05, 112 198 234));

package/dist/collection/components/mds-input-tip-item/mds-input-tip-item.js

@@ -1,10 +1,14 @@
 import { Host, h } from "@stencil/core";
 import miBaselineDone from "@icon/mi/baseline/done.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export class MdsInputTipItem {
     constructor() {
         this.t = new Locale({
@@ -18,9 +22,25 @@ export class MdsInputTipItem {
          */
         this.variant = 'required';
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentWillRender() {
         this.t.lang(this.element);
     }
@@ -30,11 +50,11 @@ export class MdsInputTipItem {
         }
     }
     render() {
-        return (h(Host, { key: '4dd4ed72924effe9b5f5534cb816a798cd269347' }, h("div", { key: 'dc47324bc331499a5b3679504d43787b12a0ff44', class: "content" }, this.variant === 'text' && (h("mds-text", { key: 'd4506303f3f0773320a63a50813d58ad1839e1b7', typography: "option", truncate: "word" }, h("span", { key: '88bf426fe2564c68266cb2f8aa4819fd8a3a5bbf', class: "text" }, h("slot", { key: 'f47524696669a972816b1106aba5ffe4accefd18' })))), this.variant === 'readonly' && (h("mds-text", { key: '80e885f005dc41752ddfc3ea079fc7a46560f039', typography: "option", truncate: "word" }, h("span", { key: 'a1c64be41eb0bf165994a8fa624de9cfa2bf44d9', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (h("mds-text", { key: '87d01577d975e3ec93fe4c3c3c0f2376aaebef4b', typography: "option", truncate: "word" }, h("span", { key: '23ea4da977190d0e52c300eadd69e568a8155f43', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (h("mds-text", { key: '53336d1221ec500b35adeef9464b44cd3c6d1e6d', typography: "option", truncate: "word" }, h("span", { key: '87b047b6ce08337d7605d1f11ffc9d37a1aadd8c', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (h("span", { key: 'ef1961067756a22613e6acbd42955fb525c6fb8f', class: "icon", innerHTML: miBaselineDone })), (this.variant === 'count-almost' ||
+        return (h(Host, { key: '078e75be53bad8d08bb5e6afefd743c73be8da39', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast }, h("div", { key: '49692a7d3678d9d28e8ea18b78f37daa0e4d611f', class: "content" }, this.variant === 'text' && (h("mds-text", { key: 'a1664a33f7e3c088a582f0b1df7e649c91e3a290', typography: "option", truncate: "word" }, h("span", { key: '46e8a779522842314c26dddae23e26dc2240d8d3', class: "text" }, h("slot", { key: 'e66eb599d52bc074b94fc82a9b9fe9cea295ee5b' })))), this.variant === 'readonly' && (h("mds-text", { key: '09e5d988e0ab597e8fd7e82705bb7ebd12b33838', typography: "option", truncate: "word" }, h("span", { key: '04e8068c07dbc1f91c5093953e61f591f170fc52', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (h("mds-text", { key: '1928c7efc9c79e66445f86c97f1915d1d8129ef4', typography: "option", truncate: "word" }, h("span", { key: '9851a981f3d17d76889ab8ac1bedc37200f69bfb', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (h("mds-text", { key: '81b34311357f835292345591ae6814b577686893', typography: "option", truncate: "word" }, h("span", { key: 'fa77c15632a89bfaf6d23a987e6711e129def577', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (h("span", { key: '95b68a306c47da4f289de09cf7ecbfb335d136fa', class: "icon", innerHTML: miBaselineDone })), (this.variant === 'count-almost' ||
             this.variant === 'count-almost-full' ||
             this.variant === 'count-empty' ||
             this.variant === 'count-full' ||
-            this.variant === 'count-incomplete') && (h("mds-text", { key: 'c924f8f9d8e3fca6b76c4aaf4f99bc3f88fe3c8e', typography: "option", truncate: "word" }, h("span", { key: 'abd99ef5f15a90739700498aca759962eb417b8a', class: "text" }, h("slot", { key: '5e509982d7bee8599f224e9e0b54232c8d998f11' })))))));
+            this.variant === 'count-incomplete') && (h("mds-text", { key: 'c8c6069998f8e9d44e04006b41ece2c268f4cd16', typography: "option", truncate: "word" }, h("span", { key: 'e783cb1faed6ffa6d81a28b101b3f4f2e5391927', class: "text" }, h("slot", { key: '3bd4f171221a3bd0b8e302b5bbdd1a82e4b7343e' })))))));
     }
     static get is() { return "mds-input-tip-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,6 +120,8 @@ export class MdsInputTipItem {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
             "language": {}
         };
     }
@@ -118,7 +140,7 @@ export class MdsInputTipItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-input-upload/mds-input-upload.css

@@ -164,10 +164,6 @@ mds-text {
 .file-list {
   @apply grid-cols-fit-sm;
 
-  gap: --spacing(400);
-}
-
-:host-context(:not(.safari)) .file-list {
   --cols: var(--mds-input-upload-min-cols, 3);
   --perc-w: calc(100% / var(--cols));
   --gap: --spacing(400);
@@ -175,10 +171,11 @@ mds-text {
   --max-w: calc(var(--perc-w) - var(--gap-w));
   --template-cols: repeat(auto-fit, minmax(--spacing(4000), var(--max-w)));
 
+  gap: --spacing(400);
   grid-template-columns: var(--template-cols);
 }
 
-:host-context(:not(.safari)) .file-list--more-items {
+.file-list--more-items {
   --template-cols: repeat(auto-fit, minmax(--spacing(4000), 1fr));
 }
 

package/dist/collection/components/mds-input-upload/mds-input-upload.js

@@ -104,13 +104,26 @@ export class MdsInputUpload {
             }
         };
         this.onChangeTab = (event) => {
-            if (event.value) {
+            if (event.value !== undefined && event.value !== '') {
                 this.sortFiles(this.files, event.value);
                 this.userSort = event.value;
                 localStorage.setItem(LOCALSTORAGE_KEY_USER_SORT, this.userSort);
             }
         };
+        this.handleAddFileClick = () => {
+            var _a;
+            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleTabChange = (event) => {
+            this.onChangeTab(event.detail);
+        };
+        this.handleFileDelete = (filekey) => () => {
+            this.onCancel(filekey);
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -186,7 +199,7 @@ export class MdsInputUpload {
                     this.files.splice(index, 1);
                 }
                 const { errorMessage, type } = this.checkError(file);
-                if (!errorMessage) {
+                if (errorMessage === '') {
                     this.files.push({ key: file.name, file, id: this.idFile, status: Status.SUCCESS });
                     this.fileUploaded += 1;
                 }
@@ -318,24 +331,24 @@ export class MdsInputUpload {
         return b.id - a.id;
     }
     isSortTabShown() {
-        return !!this.sort && this.files.length > 1;
+        return this.sort !== undefined && this.files.length > 1;
     }
     render() {
-        return (h(Host, { key: '8acc767809ab560336a05c771a9be56786dba0fc' }, h("div", { key: '579ce81130e5221f65bcd16622a3b5cd4ab36c02', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, h("div", { key: '87b958f8cd93068a013e34c9c55054f4ba3e0fd6', class: "main-action" }, h("div", { key: 'f89f7f610f832c708451215cbbe6863d8f3c205b', class: "main-action-icon" }, h("mds-icon", { key: '9096736e38a72306e33caa150171b238d5281b0f', class: "icon", name: miOutlineFileUpload })), h("mds-text", { key: 'a94c7f791639d012513b5eb15f0e37af9d2e7ed4', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '7c3938d1b17a34ddb219657e93650af7cab0e14b', class: "main-actions" }, h("mds-button", { key: 'd9ef340bbbee87753cd5284957ea6d11916961a5', variant: "primary", onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, ' ', this.files
+        return (h(Host, { key: '11be648cd871e039af8ada9d00ad6f9735a47855' }, h("div", { key: '65173559d95fd8215da2c745a9a8baa1793eb92d', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, h("div", { key: '75f516f8cf412f757c7e061ac6a480a8761606cd', class: "main-action" }, h("div", { key: '437cbc1439b93da2cfdb14c85ea2007990e42813', class: "main-action-icon" }, h("mds-icon", { key: '1983618a2e3d6490e40e7bf72f0d8fe718575b8e', class: "icon", name: miOutlineFileUpload })), h("mds-text", { key: '027f195062b1d17b22f886e3b54fb6c715e47461', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '9a08ddd0dceac85a3dd1a3cfc462d537b7572c66', class: "main-actions" }, h("mds-button", { key: '965b7302c6181857737427a7edeefa66b3955c7e', variant: "primary", onClick: this.handleAddFileClick }, ' ', this.files != null
             ? this.t.get('addFile', { maxFiles: this.maxFiles })
-            : this.t.get('selectFile')), this.files.length > 0 && (h("mds-button", { key: 'd8e5742e11a99c48fc0975e47736aeb3a49881c7', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), h("div", { key: 'd86e64427e9fb730e09bd62c0a13f1bae31360da', class: "main-infos" }, h("mds-progress", { key: '3171ab97856aedc616b67d19f1f61c3fccbc5b8f', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles
+            : this.t.get('selectFile')), this.files.length > 0 && (h("mds-button", { key: '7b651410ba2b458f40e38eceaf40d10d154b4076', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), h("div", { key: '91c08525d3580765bd2e189b67c2fb679b52668a', class: "main-infos" }, h("mds-progress", { key: 'ec133efac412e827bbd038a8708532a36ff352f4', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles !== 0 && !Number.isNaN(this.maxFiles)
             ? this.t.get('currentFilesWithMax', {
                 currentFiles: this.files.length,
                 maxFiles: this.maxFiles,
             })
-            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), h("input", { key: 'ecf52279acacd7f91597fb9570a1aa461a8160a8', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '93b8a087aee115c3b20165c637d84dea615b6392', class: "additional-infos" }, h("div", { key: 'f3626969cf54297056afcff77b01ea8db5ff3098', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: '6583e913b2f572fcd32d6662c1ccf027d686f199', variant: "info", typography: "caption" }, this.extensions
+            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), h("input", { key: 'd1017a9d0fd39f8feeb1bb00bf02c3245dbb22a0', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '937698a3868e9c134974b470c3f75809d3745eee', class: "additional-infos" }, h("div", { key: 'cbcc4354649ae03eaa76c43ab405c64a3879ebe2', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: '525535d43f1adbac5f8994125eb5285b83690434', variant: "info", typography: "caption" }, this.extensions !== ''
             ? `${this.t.get('canUpload')} ${this.extensions}`
-            : this.t.get('canUploadAll')), h("mds-text", { key: '895b9d4aa94690a33349f4caa05cc99f6d2a8ba4', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (h("mds-tab", { key: '5ee21532df14af9b45013cefe110ebb48b3d8c3d', class: "action-sort", onMdsTabChange: (event) => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: '6e9bf3f514614c4cf059c096f13ad7bd3badd86d', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), h("mds-tab-item", { key: '6812ff01fcc063c52964f9ade74dc8e04f6425da', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), h("div", { key: '8631378dedce354b03f2ed8e97c1d817183b0e8e', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
+            : this.t.get('canUploadAll')), h("mds-text", { key: 'bf2dd644753d7f3c2d3f8cdc2d1c2e71bebf5e47', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (h("mds-tab", { key: 'be5ffb6ef43f5c98d2d2fe0f6c8cfe380c93e873', class: "action-sort", onMdsTabChange: this.handleTabChange }, h("mds-tab-item", { key: 'c6e1288e74430bc64cc7c1d5766a9aaa96eb30f9', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), h("mds-tab-item", { key: 'cbf7a5855ee345eb6388eb010e30f01242ceb903', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), h("div", { key: '5a0f138b9ceb769c384ac0cdc644630542092fac', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
             switch (file.status) {
                 case Status.ERROR:
-                    return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
+                    return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: this.handleFileDelete(file.key), message: file.errorMessage }));
                 case Status.SUCCESS:
-                    return (h("mds-file-preview", { deletable: true, filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), src: URL.createObjectURL(file.file) }));
+                    return (h("mds-file-preview", { deletable: true, filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: this.handleFileDelete(file.key), src: URL.createObjectURL(file.file) }));
             }
         }))));
     }
@@ -515,7 +528,7 @@ export class MdsInputUpload {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             },

package/dist/collection/components/mds-keyboard/mds-keyboard.css

@@ -249,7 +249,13 @@ mds-tooltip {
   fill: var(--mds-keyboard-fill-fail, rgb(var(--status-error-06, 239 108 105)));
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-keyboard-color: rgb(var(--tone-porcelain-01, 255 255 255));
   --mds-keyboard-background: rgb(var(--tone-porcelain-07, 117 137 164));
   --mds-keyboard-illumination-dark-opacity: 0.5;
@@ -262,8 +268,8 @@ mds-tooltip {
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-keyboard-color: rgb(var(--tone-porcelain-01, 255 255 255));
     --mds-keyboard-background: rgb(var(--tone-porcelain-07, 117 137 164));
     --mds-keyboard-illumination-dark-opacity: 0.5;

package/dist/collection/components/mds-keyboard/mds-keyboard.js

@@ -3,11 +3,15 @@ import miBaselineKeyboard from "@icon/mi/baseline/keyboard.svg";
 import miBaselineDone from "@icon/mi/baseline/done.svg";
 import miBaselineClose from "@icon/mi/baseline/close.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 import keyboardKeys from "../../meta/keyboard/keys";
+/**
+ * @slot - Add `mds-keyboard-key` elements or `components` to this slot.
+ */
 export class MdsKeyboard {
     constructor() {
         this.errors = new Set();
@@ -32,9 +36,6 @@ export class MdsKeyboard {
             this.shortcutsEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.shortcuts');
             this.buttonTrigger = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.combination-checker');
             this.buttonTrigger.removeAttribute('title');
-            this.shortcutsEl.addEventListener('blur', this.stopKeyboardShortcutTest.bind(this));
-            this.shortcutsEl.addEventListener('keydown', this.addKeyboardShortcut.bind(this));
-            this.shortcutsEl.addEventListener('keyup', this.checkKeyboardShortcut.bind(this));
         };
         this.separateKeys = () => {
             this.filteredNodes.forEach((node, index) => {
@@ -48,7 +49,7 @@ export class MdsKeyboard {
         };
         this.updateElements = () => {
             this.filteredNodes.forEach((node) => {
-                if (node.name) {
+                if (node.name !== undefined) {
                     this.keyEls.push(node);
                     this.keyCombination.add(this.keyCodes(node.name.toLowerCase()).toString());
                 }
@@ -97,7 +98,7 @@ export class MdsKeyboard {
             return isValid;
         };
         this.addKeyboardShortcut = (event) => {
-            if (!document) {
+            if (typeof document === 'undefined') {
                 return;
             }
             event.stopPropagation();
@@ -119,14 +120,19 @@ export class MdsKeyboard {
             this.buttonTrigger.removeAttribute('tabindex');
             this.shortcutsEl.setAttribute('tabindex', '0');
             this.shortcutsEl.focus();
+            // Attach for this run; stopKeyboardShortcutTest detaches. The handlers are
+            // stable arrow refs, so re-adding is idempotent and removal matches.
+            this.shortcutsEl.addEventListener('blur', this.stopKeyboardShortcutTest);
+            this.shortcutsEl.addEventListener('keydown', this.addKeyboardShortcut);
+            this.shortcutsEl.addEventListener('keyup', this.checkKeyboardShortcut);
         };
         this.stopKeyboardShortcutTest = () => {
             this.buttonTrigger.await = false;
             this.buttonTrigger.setAttribute('tabindex', '0');
             this.shortcutsEl.removeAttribute('tabindex');
-            this.shortcutsEl.removeEventListener('blur', this.stopKeyboardShortcutTest.bind(this));
-            this.shortcutsEl.removeEventListener('keydown', this.addKeyboardShortcut.bind(this));
-            this.shortcutsEl.removeEventListener('keyup', this.checkKeyboardShortcut.bind(this));
+            this.shortcutsEl.removeEventListener('blur', this.stopKeyboardShortcutTest);
+            this.shortcutsEl.removeEventListener('keydown', this.addKeyboardShortcut);
+            this.shortcutsEl.removeEventListener('keyup', this.checkKeyboardShortcut);
         };
         this.getButtonIcon = () => {
             if (this.test === 'pass') {
@@ -138,9 +144,31 @@ export class MdsKeyboard {
             return miBaselineKeyboard;
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        // Tear down the keyboard test only if it was initialized; otherwise
+        // buttonTrigger/shortcutsEl are undefined and this would throw. (This used
+        // to live in a misspelled `discottectedCallback`, so it never ran.)
+        if (this.testInit) {
+            this.stopKeyboardShortcutTest();
+        }
+    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -158,11 +186,8 @@ export class MdsKeyboard {
             this.initKeyboardTest();
         }
     }
-    discottectedCallback() {
-        this.stopKeyboardShortcutTest();
-    }
     render() {
-        return (h(Host, { key: 'ea9c57b89ba7f46adea2f7d8b3e08788387e01d8' }, h("div", { key: 'adfe0051525e8cb26c34cc17e04135485145beaa', class: "shortcuts" }, h("slot", { key: 'def60aa7b5ca01d48e55f117f806e187f6ff9a81' })), this.try && (h("mds-button", { key: '369821c091dcad208a622210e050c17e6e862ddb', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest.bind(this) })), this.try && (h("mds-tooltip", { key: '25b0a9a678d6cbe71a7829fc6ba7cbebab0ece89', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (h("div", { key: 'cb821065194776b5f00c3eaba7d5cb1a806bfa48', class: "errors" }, [...this.errors].map((error) => (h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
+        return (h(Host, { key: '04b53f45038a5462ecd3a5389bd5f39ef461d43b', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '0105a25f75d267bb2497307b0a0983cdde8ce8ad', class: "shortcuts" }, h("slot", { key: '25e462272a3dd4bc5fcb6915957614ed8921ad09' })), this.try && (h("mds-button", { key: '376a9691e6ae3dada84a653e00d6aeaccdbe65ec', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest })), this.try && (h("mds-tooltip", { key: '0e8201759ef326e1ab52b26ec6b71efd73400637', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (h("div", { key: 'ec7f97f898c005f8a0e0ee92ee0ae3aab21b0cd2', class: "errors" }, [...this.errors].map((error) => (h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
     }
     static get is() { return "mds-keyboard"; }
     static get encapsulation() { return "shadow"; }
@@ -227,6 +252,8 @@ export class MdsKeyboard {
     }
     static get states() {
         return {
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "testPassed": {}
         };
@@ -246,7 +273,7 @@ export class MdsKeyboard {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-keyboard-key/mds-keyboard-key.js

@@ -17,7 +17,7 @@ export class MdsKeyboardKey {
         });
         this.keyboardKeys = keyboardKeysData;
         this.getTitle = () => {
-            if (this.name) {
+            if (this.name !== undefined) {
                 return this.t.get(this.keyboardKeys[this.name.toLowerCase()].description, {
                     character: this.keyboardKeys[this.name.toLowerCase()].alias,
                     keyboardPosition: this.keyboardKeys[this.name.toLowerCase()].keyboardPosition,
@@ -26,6 +26,9 @@ export class MdsKeyboardKey {
             return undefined;
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -34,7 +37,7 @@ export class MdsKeyboardKey {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '90c476d6fb6883fd81c874fa7fdac6b909314caf', title: this.getTitle() }, h("div", { key: 'ef49ed137c5537e259ae6c27484d8e752fe5d0b9', class: "physical-key" }, this.name && icons.has(this.name) ? (h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : miBaselineBrokenImage, class: "shortcut-icon" })) : (h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (h("mds-text", { key: '926c22376dbb6157f51fe938647681f3aa2881ed', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r')))));
+        return (h(Host, { key: 'cb83531c55004919cc5c55d48053369d7d90c659', title: this.getTitle() }, h("div", { key: 'e096caf23accb54d1364d9c78bc6896d02fac267', class: "physical-key" }, this.name && icons.has(this.name) ? (h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : miBaselineBrokenImage, class: "shortcut-icon" })) : (h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (h("mds-text", { key: 'cf5210c595b02e51e32722d9ef7ed53d21a44045', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r')))));
     }
     static get is() { return "mds-keyboard-key"; }
     static get encapsulation() { return "shadow"; }
@@ -117,7 +120,7 @@ export class MdsKeyboardKey {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }