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

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

@@ -1,13 +1,14 @@
 @tailwind components;
 @tailwind utilities;
 
-mds-help {
+: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: inline-flex;
   fill: currentcolor;
@@ -30,7 +31,7 @@ i svg{
   width: 100%;
 }
 
-mds-help mds-tooltip {
+mds-tooltip {
 
   --mds-tooltip-delay: var(--mds-help-tooltip-delay);
 
@@ -39,13 +40,7 @@ mds-help mds-tooltip {
 
 }
 
-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) {
+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);

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

@@ -15,9 +15,10 @@ export class MdsHelp {
     }
     render() {
         var _a;
-        return (h(Host, { key: '0b88f9a190b8890be7988542e53c0d5d09291874' }, h("mds-icon", { key: '423942cd443976464d8af6522ddc65d4771a5e0d', id: this.id, name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp }), h("mds-tooltip", { key: '270033eacb7e7274fa12c57993c81e493ec0d5e6', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "fixed", target: '#' + this.id }, h("slot", { key: '19e960a42a0960dbb49d024e7febf755f03cab89' }))));
+        return (h(Host, { key: '93b3a04a7919b2e5c0297e54a94ef40955a918d2' }, h("mds-icon", { key: '4fc245e92c28392f5090b2d3025f1061e876e1cf', id: this.id, name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp }), h("mds-tooltip", { key: 'bfad74ee1597eafc0d2ab21b37e16fcddf3d9cc8', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "fixed", target: '#' + this.id }, h("slot", { key: 'd7cd7b45875df092dd2889fd6f77c086ae09a838' }))));
     }
     static get is() { return "mds-help"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["mds-help.css"]

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

@@ -39,12 +39,10 @@ export class MdsIcon {
             this.svgHTML = this.name;
             return Promise.resolve();
         }
-        const svgPath = IconsSetService.getSvgPath() || window.sessionStorage.getItem(IconsSetService._svgPathKey);
-        this._iconHref = svgPath && !this.name.startsWith('http') ? window.location.origin.concat(svgPath.concat(this.name).concat('.svg')) : this.name;
-        this.svgHTML = await IconsSetService.fetchSvg(this._iconHref);
+        this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (h(Host, { key: 'cd5223c17789fa8499b014ab11d28f29d11a6d5e' }, this.svgHTML && h("i", { key: 'b176ca6f11eb463e4a449da470a80b1a2ca42505', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (h(Host, { key: '0776044452ef994b9671eaad6d0f1299bd3f7add' }, this.svgHTML && h("i", { key: '0091505aeb5563e9a1327d174d19ac0e4fe1ffd6', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     static get is() { return "mds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-icon/services/icons-set.service.js

@@ -2,12 +2,12 @@ import { get, set, del } from "idb-keyval";
 import { MdsIconSet } from "../meta/icon-set";
 class IconsSetController {
     constructor() {
-        this._iconsSets = new Map();
         this._svgPathKey = 'mdsIconSvgPath';
+        this._iconsSets = new Map();
         this._svgPathUpdate = 'mdsIconSvgPathUpdate';
         this.cacheExp = 60 * 60 * 1000 * 24;
-        this.memoryCache = {};
         this.listeners = [];
+        this.memoryCache = {};
         // Try to retrieve svg from cache
         this.isCacheAvailable = async (url) => {
             try {
@@ -63,9 +63,32 @@ class IconsSetController {
             return { set: null };
         return { set: this._iconsSets.get(iconName.split('/')[0]) };
     }
+    /**
+     * recognize svg path pattern and set host and svgPath variable
+     *
+     * input path: https://www.abc.com/svg/path
+     * svgPath =  https://www.abc.com/svg/path
+     *
+     * input path: localhost:9000/svg/path
+     * svgPath = localhost:9000/svg/path
+     *
+     * input path: /svg/path
+     * svgPath = {window.location.host}/svg/path
+     *
+     * input path: svg/path
+     * throw error
+     *
+     */
     setSvgPath(svgPath) {
-        this._svgPath = svgPath;
-        window.dispatchEvent(new Event(this._svgPathUpdate));
+        const reg = /^(((https?:\/\/)?[.\w]+(:\d+)?)|\/)([\w/-]+)*/;
+        const match = reg.exec(svgPath);
+        if (!match) {
+            throw Error(`Svg path not recognize ${svgPath}, ensure is a absolute path starting with '/' or a url`);
+        }
+        if (typeof window !== 'undefined') {
+            this._svgPath = match[1] ? match[0] : window.location.origin.concat(match[0]);
+            window.dispatchEvent(new Event(this._svgPathUpdate));
+        }
     }
     getSvgPath() {
         return this._svgPath;
@@ -74,13 +97,23 @@ class IconsSetController {
         this.listeners.push(callback);
     }
     setUpListener() {
-        window.addEventListener(this._svgPathUpdate, () => {
-            for (const listener of this.listeners)
-                listener();
-        });
+        if (typeof window !== 'undefined') {
+            window.addEventListener(this._svgPathUpdate, () => {
+                for (const listener of this.listeners)
+                    listener();
+            });
+        }
     }
-    async fetchSvg(src) {
+    async fetchSvg(name) {
+        var _a;
         try {
+            if (!this._svgPath && typeof window === 'undefined') {
+                throw Error('Cant find svgPath, ensure you set it');
+            }
+            if (!this._svgPath) {
+                this.setSvgPath((_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '');
+            }
+            const src = this._svgPath && !name.startsWith('http') ? this._svgPath.concat(name, '.svg') : name;
             const lsCache = await this.isCacheAvailable(src);
             if (this.memoryCache[src] || lsCache) {
                 return this.memoryCache[src] || lsCache;

package/dist/collection/components/mds-icon/test/mds-icon.stories.js

@@ -1,5 +1,7 @@
 import { h } from "@stencil/core";
 import { iconsDictionary, mggIconsDictionary, svgIconsDictionary } from "../../../dictionary/icon";
+import { useState } from "react";
+import svgIconPackage from "../../../../../svg-icons/package.json";
 const urlIcon = `${location.origin}/svg/mi/baseline/email.svg`;
 const base64IconEncoded = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im0yMzMtODAgNjUtMjgxTDgwLTU1MGwyODgtMjUgMTEyLTI2NSAxMTIgMjY1IDI4OCAyNS0yMTggMTg5IDY1IDI4MS0yNDctMTQ5TDIzMy04MFoiLz48L3N2Zz4=';
 const svgIconDecoded = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>';
@@ -45,3 +47,16 @@ StorageTest.args = {
     name: 'mdi/alien',
     class: 'fill-label-green-05',
 };
+const ListIconsTemplate = () => {
+    const [filteredIcons, setFilteredIcons] = useState(mggIconsDictionary);
+    return h("div", { class: "flex flex-col gap-y-400" }, h("div", { class: "flex flex-col gap-y-600" }, h("mds-text", null, "La seguente \u00E8 una lista delle icone presenti nel pacchetto ", h("strong", null, "@maggioli-design-system/svg-icons ", svgIconPackage.version), ", facente riferimento alle icone di Maggioli"), h("mds-text", null, "Oltre a questo set, ", h("strong", null, "@maggioli-design-system/icons"), " fa uso anche delle librerie di ", h("a", { href: "https://fonts.google.com/icons" }, "Material Icons"), " e ", h("a", { href: "https://pictogrammers.com/library/mdi/" }, "Material Design Icons"), ", la cui lista pu\u00F2 essere consultata sui relativi siti.")), h("div", { class: "flex flex-col gap-y-600" }, h("mds-input", { name: "filter", placeholder: 'Cerca icona ...', onInput: event => {
+            var _a;
+            const _filter = (_a = event.target.value) !== null && _a !== void 0 ? _a : '';
+            if (!_filter) {
+                setFilteredIcons([...mggIconsDictionary]);
+                return;
+            }
+            setFilteredIcons(mggIconsDictionary.filter(item => item.includes(_filter)));
+        } }), h("div", { class: "grid grid-cols-5 gap-400" }, filteredIcons.map(icon => h("div", { key: icon, class: "flex flex-col justify-center items-center" }, h("mds-icon", { class: "w-1200 fill-brand-maggioli-05", name: icon }), h("mds-text", null, icon))))));
+};
+export const ListIcons = ListIconsTemplate.bind({});

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

@@ -3,9 +3,9 @@
 
 :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-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));

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

@@ -3,13 +3,17 @@ import { setAttributeIfEmpty } from "../../common/aria";
 import miBaselinePanorama from "@icon/mi/baseline/panorama.svg";
 import miBaselineBrokenImage from "@icon/mi/baseline/broken-image.svg";
 import { Locale } from "../../common/locale";
+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";
 export class MdsImg {
     constructor() {
         this.consumptionMode = 'high';
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.onSuccess = (ev) => {
@@ -49,6 +53,7 @@ export class MdsImg {
         };
         this.imageConsumptionLoaded = false;
         this.imageError = false;
+        this.language = undefined;
         this.alt = '';
         this.crossorigin = 'use-credentials';
         this.height = undefined;
@@ -60,6 +65,9 @@ export class MdsImg {
         this.srcsetConsumption = undefined;
         this.width = undefined;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
     srcsetConsumptionHandler(newValue) {
         this.srcsetConsumptionData = this.formatConsumptionData(newValue);
     }
@@ -88,7 +96,7 @@ export class MdsImg {
         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 })));
@@ -306,7 +314,8 @@ export class MdsImg {
     static get states() {
         return {
             "imageConsumptionLoaded": {},
-            "imageError": {}
+            "imageError": {},
+            "language": {}
         };
     }
     static get events() {
@@ -354,6 +363,27 @@ export class MdsImg {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

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

@@ -20,7 +20,7 @@
   --mds-input-ring: 0 0 0 1px rgb(var(--mds-input-variant-color) / 0.1);
   --mds-input-shadow: 0 1px 3px 0 rgb(var(--mds-input-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-variant-color) / 0.06);
   --mds-input-variant-color: 0 0 0;
-  --mds-input-controls-color: rgb(var(--brand-maggioli-03));
+  --mds-input-controls-color: rgb(var(--variant-primary-03));
   --mds-input-controls-border: 2px solid rgb(var(--tone-neutral-09));
   --mds-input-textarea-min-height: 6rem;
   --mds-input-textarea-max-height: 16rem;
@@ -335,13 +335,13 @@ textarea.input{
 
 :host {
 
-  --mds-input-icon-color: var(--brand-maggioli-03);
+  --mds-input-icon-color: var(--variant-primary-03);
   --mds-input-variant-color: 0 0 0;
 }
 
 :host( :focus ) {
 
-  --mds-input-variant-color: var(--brand-maggioli-04);
+  --mds-input-variant-color: var(--variant-primary-04);
 }
 
 :host( [variant="info"] ) {
@@ -481,6 +481,6 @@ textarea.input{
 
   :host {
 
-    --mds-input-background: rgb(var(--brand-maggioli-07));
+    --mds-input-background: rgb(var(--variant-primary-07));
   }
 }

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

@@ -7,12 +7,16 @@ import miBaselineVisible from "@icon/mi/baseline/visibility.svg";
 import miBaselineVisibleOff from "@icon/mi/baseline/visibility-off.svg";
 import { Host, h } from "@stencil/core";
 import { Locale } from "../../common/locale";
+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";
 export class MdsInput {
     constructor() {
         this.t = new Locale({
+            el: localeEl,
             en: localeEn,
+            es: localeEs,
             it: localeIt,
         });
         this.onInput = (ev) => {
@@ -80,6 +84,10 @@ export class MdsInput {
         this.typography = 'detail';
         this.value = '';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.el);
+        this.t.update();
+    }
     componentWillLoad() {
         var _a;
         this.language = this.t.lang(this.el);
@@ -123,20 +131,20 @@ export class MdsInput {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '732728d25de549c572951a64c6944103e80f2598' }, this.type === 'number'
+        return (h(Host, { key: 'ca5bca3d38a637ff63798e17a43e94c700d5e147' }, this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: 'c1b74e02325b2f9f9261e0f52a1141d6b81d7c76', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
+            && h("mds-button", { key: 'ff7112d587a18d16647bc3b5dfc6dc77ebcc2477', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" }), this.type === 'textarea'
             ? h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })
             : h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, 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, list: this.datalist && 'datalist', part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value }), this.type === 'number'
             && this.controlsLayout === 'vertical'
-            && h("div", { key: 'f01e980292d5a2006d5d76488285abd29f3c14e6', class: "counter counter--vertical" }, h("mds-button", { key: '31979472ab1882c21a4d68e99ef892739dae30b9', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: '3e45f1765f423dce34afbd088de9811e0fa3c712', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
+            && h("div", { key: '44238b57fbed08da81f30dc8048089d94d2e7b4c', class: "counter counter--vertical" }, h("mds-button", { key: '24c0ce6b95dd8dce3c33805bb861b239c595a58d', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), h("mds-button", { key: 'd420b63e53fe0dad6a326959855ff0f62c627885', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineArrowDown : miBaselineRemove, onClick: this.stepDown, role: "button", tabindex: "0", title: this.t.get('decrease'), part: "counter-button-decrease" })), this.type === 'number'
             && this.controlsLayout === 'horizontal'
-            && h("mds-button", { key: '08884b1fe81b1f6357424f2c330d105fb212c625', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
-            && h("mds-button", { key: 'b972511e9321b00800409a53bb4db325736d5f84', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: 'c5ef76a23abfd58c47e39a666947be280597fbac', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '75526ac7c77f36e3e50721fc586dac7b4c8d4cbd', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'a7cd4f9a997327eb83cbd8a336e87cce88b0cb3f', expanded: true, variant: "readonly" }), this.required &&
-            h("mds-input-tip-item", { key: '370252cc73671985b45c3267a3cd0e090c4b0125', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: '6c81bcdfce5746575a5d9c46a24cc26ad57ea138', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: '5ed4306e58c729920ac4426ca3235f5fa8b7ae5c', expanded: true, variant: "text" }, this.tip)), this.datalist &&
-            h("datalist", { key: 'b5c7721134abb7ba6bb97dbe67c12d6956d8b463', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+            && h("mds-button", { key: 'bd8380c85f04115019a8b0202dc4e7aa30d3c9ad', class: "counter-button counter-button--horizontal counter-button--increase", icon: this.controlsIcon === 'arrow' ? miBaselineArrowUp : miBaselineAdd, onClick: this.stepUp, role: "button", tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" }), this.type === 'password'
+            && h("mds-button", { key: '6539cdfc36d63d28d319c79927545f8272179537', class: "password-toggle-button", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => this.isPasswordVisible = !this.isPasswordVisible, role: "button", tabindex: "0", tone: "quiet", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" }), h("mds-input-tip", { key: '8a0f5f05980067693a4335cd2f6355f6ddde09f3', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'f51f29717e92e822e3a1cd557619d6acec5c2fe1', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'aa32b7d8d683a4785d17dcd0d4966357a9a21738', expanded: true, variant: "readonly" }), this.required &&
+            h("mds-input-tip-item", { key: '13c92ab5bca38508d5395119f1f1cdcb303bc183', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })), h("mds-input-tip", { key: 'e907daf8c28d9e3db05202e60501da285ab7d9d2', lang: this.language, position: "bottom", active: this.hasFocus }, this.tip && h("mds-input-tip-item", { key: 'e4a8343e924a4813ac0bd483961b131d2b417132', expanded: true, variant: "text" }, this.tip)), this.datalist &&
+            h("datalist", { key: 'a61d4222f111e589b34d0c5d11bcd45f32d1a8c5', id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
                 h("option", { value: element });
-            })), this.icon && !this.await && h("mds-icon", { key: '22bfc7fe22bdb2e215878e9a6e52730f3459a9f2', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '450c3673d798ba1d36c1ffe2968384719c9506e7', running: this.await, class: clsx('await', this.variant) })));
+            })), this.icon && !this.await && h("mds-icon", { key: 'ef47a0689013b6bd6e8b4c104b3c7895d56c6679', class: clsx('icon', this.variant), name: this.icon }), h("mds-spinner", { key: '3383f336ce1ae44b0d8ca5536ed251a0398d97d9', running: this.await, class: clsx('await', this.variant) })));
     }
     static get is() { return "mds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -652,8 +660,8 @@ export class MdsInput {
                     "references": {
                         "MdsInputEventDetail": {
                             "location": "import",
-                            "path": "./meta/event-detail",
-                            "id": "src/components/mds-input/meta/event-detail.ts::MdsInputEventDetail"
+                            "path": "@type/input",
+                            "id": "src/type/input.ts::MdsInputEventDetail"
                         }
                     }
                 }
@@ -711,6 +719,23 @@ export class MdsInput {
     }
     static get methods() {
         return {
+            "updateLang": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "setFocus": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -737,16 +762,16 @@ export class MdsInput {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "HTMLInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLInputElement"
-                        },
                         "HTMLTextAreaElement": {
                             "location": "global",
                             "id": "global::HTMLTextAreaElement"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
                         }
                     },
-                    "return": "Promise<HTMLInputElement | HTMLTextAreaElement>"
+                    "return": "Promise<HTMLTextAreaElement | HTMLInputElement>"
                 },
                 "docs": {
                     "text": "Returns the native `<input>` element used under the hood.",

package/dist/collection/components/mds-input/test/mds-input.stories.js

@@ -123,6 +123,7 @@ export default {
     },
 };
 const Template = (args) => h("mds-input", Object.assign({}, args));
+const TemplateLanguage = (args) => h("div", { class: "grid gap-400" }, h("mds-input", Object.assign({}, args)), h("div", { class: "grid gap grid-cols-3" }, h("mds-pref", null, h("mds-pref-language", null, h("mds-pref-language-item", { code: "it" }), h("mds-pref-language-item", { code: "en" }), h("mds-pref-language-item", { code: "el" }), h("mds-pref-language-item", { code: "es" }), h("mds-pref-language-item", { code: "ja" })))));
 export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Scrivi qualcosa',
@@ -213,15 +214,23 @@ Icon.args = {
     icon: 'mi/round/email',
     placeholder: 'Status input field',
 };
-const FormIntegrationTemplate = (args) => (h("div", { class: "grid gap-600" }, h("form", { class: "grid gap-400", id: "mds-icon-fi", name: "mds-icon-fi" }, h("mds-input", Object.assign({}, args)), h("mds-button", { class: "w-min", type: "button", role: "submit", onClick: () => {
-        const form = document.querySelector('form');
-        const span = document.querySelector('span.input-value');
-        span.innerText = form['mds-input'].value !== '' ? form['mds-input'].value : 'Empty';
-        form.addEventListener('submit', (e) => {
+export const TestLanguageChange = TemplateLanguage.bind({});
+TestLanguageChange.args = {
+    icon: 'mi/round/email',
+    readonly: true,
+    placeholder: 'Status input field',
+};
+const FormIntegrationTemplate = (args) => {
+    return (h("div", { class: "grid gap-600" }, h("form", { class: "grid gap-400", id: "mds-icon-fi", name: "mds-icon-fi", onSubmit: (e) => {
             e.preventDefault();
             console.info('Submitted', e);
-        });
-    } }, "Check value")), h("mds-text", { variant: "code" }, "Input value taken from form element: ", h("span", { class: "input-value rounded text-tone-neutral-04 bg-tone-neutral-08 px-2" }, "Empty"))));
+        } }, h("mds-input", Object.assign({}, args)), h("mds-button", { class: "w-min", type: "submit", onClick: (e) => {
+            e.preventDefault();
+            const form = document.querySelector('form');
+            const span = document.querySelector('span.input-value');
+            span.innerText = form['mds-input'].value !== '' ? form['mds-input'].value : 'Empty';
+        } }, "Check value")), h("mds-text", { variant: "code" }, "Input value taken from form element: ", h("span", { class: "inline-flex input-value rounded text-tone-neutral-01 bg-tone-neutral-08 px-200 py-50" }, "Empty"))));
+};
 export const FormIntegration = FormIntegrationTemplate.bind({});
 FormIntegration.args = {
     placeholder: 'Es: Hello world!',

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

@@ -118,9 +118,9 @@ export class MdsInputField {
         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 is() { return "mds-input-field"; }
     static get encapsulation() { return "shadow"; }
@@ -617,8 +617,8 @@ export class MdsInputField {
                     "references": {
                         "MdsInputEventDetail": {
                             "location": "import",
-                            "path": "@component/mds-input/meta/event-detail",
-                            "id": "src/components/mds-input/meta/event-detail.ts::MdsInputEventDetail"
+                            "path": "@type/input",
+                            "id": "src/type/input.ts::MdsInputEventDetail"
                         }
                     }
                 }
@@ -702,16 +702,16 @@ export class MdsInputField {
                             "location": "global",
                             "id": "global::Promise"
                         },
-                        "HTMLInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLInputElement"
-                        },
                         "HTMLTextAreaElement": {
                             "location": "global",
                             "id": "global::HTMLTextAreaElement"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
                         }
                     },
-                    "return": "Promise<HTMLInputElement | HTMLTextAreaElement | null | undefined>"
+                    "return": "Promise<HTMLTextAreaElement | HTMLInputElement | null | undefined>"
                 },
                 "docs": {
                     "text": "Returns the native `<input>` element used under the hood.",

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

@@ -22,11 +22,11 @@
 :host {
 
   --mds-input-range-thumb-size: 1rem;
-  --mds-input-range-thumb-background: rgb(var(--brand-maggioli-04));
+  --mds-input-range-thumb-background: rgb(var(--variant-primary-04));
   --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));
   --mds-input-range-track-background: rgb(var(--tone-neutral-09));
   --mds-input-range-track-size: 0.5rem;
-  --mds-input-range-track-progress-background: rgb(var(--brand-maggioli-03));
+  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));
   gap: 0.25rem;
   transition-duration: 200ms;
 
@@ -192,9 +192,9 @@
 @container style(--magma-pref-theme: dark) {
   :host {
 
-    --mds-input-range-thumb-background: rgb(var(--brand-maggioli-04));
+    --mds-input-range-thumb-background: rgb(var(--variant-primary-04));
     --mds-input-range-track-background: rgb(var(--tone-neutral-07));
-    --mds-input-range-track-progress-background: rgb(var(--brand-maggioli-05));
+    --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));
   }
 }
 
@@ -203,9 +203,9 @@
   @media (prefers-color-scheme: dark) {
     :host {
 
-      --mds-input-range-thumb-background: rgb(var(--brand-maggioli-04));
+      --mds-input-range-thumb-background: rgb(var(--variant-primary-04));
       --mds-input-range-track-background: rgb(var(--tone-neutral-07));
-      --mds-input-range-track-progress-background: rgb(var(--brand-maggioli-05));
+      --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));
     }
   }
 }

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

@@ -46,13 +46,14 @@ export class MdsInputRange {
         this.calculateProgress();
     }
     componentDidLoad() {
-        var _a;
-        this.inputElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.field');
+        var _a, _b;
+        this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
+        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
         this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: '9c8324dfe76033ae1451587cd50793e7ceacc284' }, h("header", { key: '69f40e9bec14e0e1d119f90c55a625b905266aa1', class: "header", part: "header" }, h("mds-text", { key: '08b0175db859f964c1a13a47335375f70edaf353', class: "label", typography: "label" }, h("slot", { key: '4b3c07572221ead50e00cc788c3ab55b338c15c0' })), h("mds-text", { key: '82f212eac1211e8b5fe2605f35ad7652d63b61ea', class: "value", typography: "label" }, this.value)), h("div", { key: '5f55fa2197a934b8feb0dc539c966c054a824558', class: "range" }, h("div", { key: '5fd94d96b3b43c88d22bd2636f34bafb21b41bd1', class: "track" }, h("div", { key: '2364fb6dcbe24ec0b23588af1f308e90fe23addc', class: "contrast-area" }), h("div", { key: '688bb44d42d7946f0c6d2e846f9514df9df4a49d', class: "track-total" }, h("div", { key: '05d431cf526193667f88b74c3349e910076f2849', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: 'edc77c0c0b8bafbe3aafae85d8bcf6f1a682f1d4', class: "field", max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'c92ab8563410461213ec304d48633fa05aa2a914' }, h("header", { key: '761ee2fd85bd78beaead463ac24aa356e23359eb', class: "header", part: "header" }, h("mds-text", { key: '3917734e52ba2f28cb0182870945f5a25c384189', class: "label", typography: "label" }, h("slot", { key: '7295908985059db99d628e6d8414d5304874e0e8' })), h("mds-text", { key: '0d39a81709459e0478dfa2812cc861bfaf072c46', class: "value", typography: "label" }, this.value)), h("div", { key: 'a459a88c212591bff0d8e93793db770141c09a50', class: "range" }, h("div", { key: '165870361567832a29263f4d5b86bfb6aa5a2123', class: "track" }, h("div", { key: 'abd1017e7a33fe82398d77d28d8f56bb4459bde7', class: "contrast-area" }), h("div", { key: '22475d8687c090f2f403bbf8e3726b08982a84af', class: "track-total" }, h("div", { key: '151b6e11544724e3d95347046629499738090e1c', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: 'b1f06f7712d1b682c2bfee7417eb27bc520da234', class: "field", "aria-label": this.label, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-input-range/test/mds-input-range.stories.js

@@ -3,19 +3,19 @@ export default {
     title: 'Form / Range',
     argTypes: {
         min: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The lowest value in the range of permitted values',
         },
         max: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The greatest value in the range of permitted values',
         },
         step: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below',
         },
         value: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The value attribute contains a number which contains a representation of the selected number',
         },
     },