@spw-ds/spw-stencil-library 1.16.0 → 1.17.1

package/dist/collection/components/spw-button/spw-button.css

@@ -525,10 +525,20 @@ template {
   color: var(--spw-ds-primary);
   text-decoration: var(--spw-button-text-decoration-tertiary) !important;
   text-underline-offset: 2px;
+  white-space: normal;
+  text-wrap: wrap;
+  text-align: left;
+  line-height: 1.3;
+}
+.spw-button--tertiary .spw-button__inner-text {
+  justify-content: flex-start;
 }
 .spw-button--tertiary:not([disabled]):hover, .spw-button--tertiary:not([disabled]):active {
   text-decoration-thickness: 2px !important;
 }
+.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-ds-variant);
+}
 .spw-button--tertiary:not([disabled]):active {
   color: var(--spw-ds-active);
 }
@@ -551,34 +561,20 @@ template {
 }
 
 /* Surface dark */
-.spw-button--surface-dark {
-  box-shadow: var(--spw-effect-elevation-8);
-}
-.spw-button--surface-dark:not([disabled]):active {
-  box-shadow: var(--spw-effect-elevation-active-0), var(--spw-effect-elevation-active-1), var(--spw-effect-elevation-active-2);
-}
-.spw-button--surface-dark[disabled] {
-  box-shadow: none;
-}
 .spw-button--surface-dark.spw-button--primary {
   color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
+  border-color: transparent;
   background: var(--spw-ds-white);
 }
 .spw-button--surface-dark.spw-button--primary:not([disabled]):hover {
-  background: transparent;
-  color: var(--spw-ds-white);
-  border-color: var(--spw-ds-white);
+  background: var(--spw-colors-support-grey-grey-300);
 }
 .spw-button--surface-dark.spw-button--primary:not([disabled]):active {
-  background: transparent;
-  color: var(--spw-colors-support-grey-grey-500);
-  border-color: var(--spw-colors-support-grey-grey-500);
+  background: var(--spw-colors-support-grey-grey-400);
 }
 .spw-button--surface-dark.spw-button--primary[disabled] {
-  border-color: var(--spw-colors-support-grey-grey-700);
-  background: var(--spw-colors-support-grey-grey-700);
   color: var(--spw-colors-support-grey-grey-800);
+  background: var(--spw-colors-support-grey-grey-600);
 }
 .spw-button--surface-dark.spw-button--primary spw-loading {
   --spw-loading-border-color: var(--spw-colors-support-grey-grey-300);
@@ -590,19 +586,14 @@ template {
   border-color: var(--spw-ds-white);
 }
 .spw-button--surface-dark.spw-button--secondary:not([disabled]):hover {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
-  background: var(--spw-ds-white);
+  background: rgba(0, 0, 0, 0.3);
 }
 .spw-button--surface-dark.spw-button--secondary:not([disabled]):active {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-colors-support-grey-grey-400);
-  background: var(--spw-colors-support-grey-grey-400);
+  background: rgba(0, 0, 0, 0.5);
 }
 .spw-button--surface-dark.spw-button--secondary[disabled] {
   border-color: var(--spw-colors-support-grey-grey-700);
-  background: var(--spw-colors-support-grey-grey-700);
-  color: var(--spw-colors-support-grey-grey-800);
+  color: var(--spw-colors-support-grey-grey-700);
 }
 .spw-button--surface-dark.spw-button--secondary spw-loading {
   --spw-loading-border-color: rgba(255, 255, 255, 0.2);
@@ -615,6 +606,9 @@ template {
 .spw-button--surface-dark.spw-button--tertiary:not([disabled]):hover, .spw-button--surface-dark.spw-button--tertiary:not([disabled]):active {
   box-shadow: none;
 }
+.spw-button--surface-dark.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-ds-white);
+}
 .spw-button--surface-dark.spw-button--tertiary:not([disabled]):active {
   color: var(--spw-ds-primary);
 }
@@ -627,35 +621,21 @@ template {
 }
 
 /* Surface primary */
-.spw-button--surface-primary {
-  box-shadow: none;
-}
-.spw-button--surface-primary:not([disabled]):active {
-  box-shadow: none;
-}
-.spw-button--surface-primary[disabled] {
-  box-shadow: none;
-}
 .spw-button--surface-primary.spw-button--primary {
   color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
+  border-color: transparent;
   background: var(--spw-ds-white);
 }
 .spw-button--surface-primary.spw-button--primary:not([disabled]):hover {
-  background: transparent;
-  color: var(--spw-ds-white);
-  border-color: var(--spw-ds-white);
+  background: rgba(255, 255, 255, 0.8);
+  border-color: transparent;
 }
 .spw-button--surface-primary.spw-button--primary:not([disabled]):active {
-  background: transparent;
-  color: white;
-  border-color: white;
-  opacity: 0.9;
+  background: var(--spw-ds-white);
+  border-color: transparent;
 }
 .spw-button--surface-primary.spw-button--primary[disabled] {
-  border-color: white;
-  background: white;
-  color: var(--spw-colors-support-grey-grey-600);
+  color: var(--spw-colors-support-grey-grey-700);
   opacity: 0.5;
 }
 .spw-button--surface-primary.spw-button--primary spw-loading {
@@ -668,20 +648,12 @@ template {
   border-color: var(--spw-ds-white);
 }
 .spw-button--surface-primary.spw-button--secondary:not([disabled]):hover {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: var(--spw-ds-white);
-  background: var(--spw-ds-white);
+  background: rgba(0, 0, 0, 0.2);
 }
 .spw-button--surface-primary.spw-button--secondary:not([disabled]):active {
-  color: var(--spw-colors-support-grey-grey-900);
-  border-color: white;
-  background: white;
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.3);
 }
 .spw-button--surface-primary.spw-button--secondary[disabled] {
-  border-color: white;
-  background: white;
-  color: var(--spw-colors-support-grey-grey-600);
   opacity: 0.5;
 }
 .spw-button--surface-primary.spw-button--secondary spw-loading {
@@ -689,15 +661,13 @@ template {
   --spw-loading-spinner-color: white;
 }
 .spw-button--surface-primary.spw-button--tertiary {
-  box-shadow: none;
   color: var(--spw-ds-white);
 }
-.spw-button--surface-primary.spw-button--tertiary:not([disabled]):hover, .spw-button--surface-primary.spw-button--tertiary:not([disabled]):active {
-  box-shadow: none;
+.spw-button--surface-primary.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-ds-white);
 }
 .spw-button--surface-primary.spw-button--tertiary:not([disabled]):active {
-  color: white;
-  opacity: 0.9;
+  color: var(--spw-ds-active);
 }
 .spw-button--surface-primary.spw-button--tertiary[disabled] {
   color: white;
@@ -714,22 +684,34 @@ template {
   background: var(--spw-colors-support-grey-grey-500);
 }
 .spw-button--surface-light.spw-button--secondary {
+  background: transparent;
   color: var(--spw-colors-support-grey-grey-900);
-  background: var(--spw-ds-white);
+  border-color: var(--spw-colors-support-grey-grey-900);
 }
 .spw-button--surface-light.spw-button--secondary:not([disabled]):hover {
-  background: var(--spw-colors-support-grey-grey-300);
+  color: var(--spw-colors-support-grey-grey-900);
+  border-color: var(--spw-colors-support-grey-grey-900);
+  background: rgba(0, 0, 0, 0.2);
 }
 .spw-button--surface-light.spw-button--secondary:not([disabled]):active {
-  background: var(--spw-colors-support-grey-grey-500);
+  color: white;
+  border-color: var(--spw-colors-support-grey-grey-900);
+  background: var(--spw-colors-support-grey-grey-900);
 }
 .spw-button--surface-light.spw-button--secondary[disabled] {
+  border-color: var(--spw-colors-support-grey-grey-600);
   color: var(--spw-colors-support-grey-grey-600);
-  background: var(--spw-colors-support-grey-grey-500);
+}
+.spw-button--surface-light.spw-button--secondary spw-loading {
+  --spw-loading-border-color: rgba(255, 255, 255, 0.2);
+  --spw-loading-spinner-color: white;
 }
 .spw-button--surface-light.spw-button--tertiary {
   color: var(--spw-colors-support-grey-grey-900);
 }
+.spw-button--surface-light.spw-button--tertiary:not([disabled]):hover {
+  color: var(--spw-colors-support-grey-grey-900);
+}
 .spw-button--surface-light.spw-button--tertiary:not([disabled]):active {
   color: var(--spw-ds-primary);
 }

package/dist/collection/components/spw-card/spw-card.css

@@ -419,6 +419,13 @@ template {
 .spw-card--no-image.spw-card--event .spw-card__dates {
   left: 15px;
 }
+.spw-card--news .spw-card__dates {
+  left: auto;
+  right: 16px;
+  top: 16px;
+  bottom: auto;
+  transform: none;
+}
 .spw-card__date-item {
   text-align: center;
   margin: 4px 0;

package/dist/collection/components/spw-card/spw-card.js

@@ -130,7 +130,7 @@ export class SpwCard {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': this.disabled ? 'true' : null,
         };
-        return (h(Host, { key: 'f95a6ae6c3605ceedbd161b4d7fd6ccb32b5c9a5', class: { '--is-full-height': this.fullHeight } }, h("article", { key: 'c0f5558843980898fc024c6a58ad4c5fc0874dae', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: 'b6f5ff06ba07a44d192ccc1280f4b1ec91aec7ae' }, attrs, { class: { 'spw-card__dates': true, 'spw-card__dates--range': !!(dateStart && dateEnd), 'spw-card__dates--single': !!(dateStart && !dateEnd) } }), dateStart && (h("div", { key: '38739600168e556e1825a952d59d6b56dddfbd38', class: "spw-card__date-item" }, h("div", { key: 'e2d976245e9149f19289ed6760f9616d252bc0df', class: "spw-card__date-content" }, dateEnd && h("span", { key: 'cad7e3030d55c6784fbf8482b26d02c1090a2494', class: "spw-card__date-label" }, this.fromLabel), this.formatDate(dateStart)))), dateEnd && (h("div", { key: '5cd8ac811280cf3eb15a088f4d50d1c39d07b065', class: "spw-card__date-item" }, h("div", { key: 'd650d7ab355881400f9f3e2b2ab1e80dc5cd8e19', class: "spw-card__date-content" }, h("span", { key: 'b8c923502709ed1b6be4f548076128e8559d6c34', class: "spw-card__date-label" }, this.toLabel), this.formatDate(dateEnd)))))), h(TagType, Object.assign({ key: '38734f2432f59b83af58ad7b7600e529fe8263b0' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '70cc28a5bf5206cc6a9c17297dd2dcaca895d8b0' })))));
+        return (h(Host, { key: 'f95a6ae6c3605ceedbd161b4d7fd6ccb32b5c9a5', class: { '--is-full-height': this.fullHeight } }, h("article", { key: 'c0f5558843980898fc024c6a58ad4c5fc0874dae', class: this.elementClass }, (variant === 'event' || variant === 'news') && (h(TagType, Object.assign({ key: 'b56469bf1b35f9407bd12b01155c7162b2a15b45' }, attrs, { class: { 'spw-card__dates': true, 'spw-card__dates--range': !!(dateStart && dateEnd), 'spw-card__dates--single': !!(dateStart && !dateEnd) } }), dateStart && (h("div", { key: '36b8b7445ef4c3824ef95a9f5df12ca27732a3da', class: "spw-card__date-item" }, h("div", { key: 'de92e7eb54af473d927181cbc03c27f590e4ed09', class: "spw-card__date-content" }, dateEnd && h("span", { key: '2a0c914e82cd5457ebf6a43190308841761a41b6', class: "spw-card__date-label" }, this.fromLabel), this.formatDate(dateStart)))), dateEnd && (h("div", { key: '45902a1bc90ccddf0e4a38e5d6729691853fee6b', class: "spw-card__date-item" }, h("div", { key: 'fa2fdefc3bbbdeb04fd826ede3e916146579d725', class: "spw-card__date-content" }, h("span", { key: '50ec4287a4b796947ad7c9675d4ca1e460fab5fc', class: "spw-card__date-label" }, this.toLabel), this.formatDate(dateEnd)))))), h(TagType, Object.assign({ key: '164517f886bfb6060e64693522267d6778ef61a3' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'a94ef1805d867f4c91a63bd7bb1f4bfa6d732db1' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-custom-select/spw-custom-select.css

@@ -509,7 +509,7 @@ template {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 11;
+  z-index: 14;
   width: 100%;
   margin-top: 1px;
   display: flex;

package/dist/collection/components/spw-custom-select/spw-custom-select.js

@@ -483,25 +483,21 @@ export class SpwCustomSelect {
                 break;
         }
     }
-    renderErrorMessage() {
-        if (this.error) {
-            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { name: "details", slot: "details" })));
-        }
-    }
-    renderHintMessage() {
-        if (this.hint) {
-            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { name: "details", slot: "details" })));
-        }
-    }
-    renderWarningMessage() {
-        if (this.warning) {
-            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { name: "details", slot: "details" })));
-        }
-    }
-    renderSuccessMessage() {
-        if (this.success) {
-            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { name: "details", slot: "details" })));
-        }
+    // isExpandable (details slot) uniquement sur le dernier message affiché
+    renderMessages() {
+        const messages = [];
+        if (this.error)
+            messages.push({ variant: 'error', text: this.error, showIcon: this.showErrorIcon });
+        if (this.hint)
+            messages.push({ variant: 'hint', text: this.hint, showIcon: this.showHintIcon });
+        if (this.success)
+            messages.push({ variant: 'success', text: this.success, showIcon: this.showSuccessIcon });
+        if (this.warning)
+            messages.push({ variant: 'warning', text: this.warning, showIcon: this.showWarningIcon });
+        return messages.map((m, i) => {
+            const isLast = i === messages.length - 1;
+            return (h("spw-field-message", { variant: m.variant, showIcon: m.showIcon, isExpandable: isLast && this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, m.text, isLast && h("slot", { name: "details", slot: "details" })));
+        });
     }
     get elementClass() {
         const showCreate = this.showCreateButton();
@@ -580,19 +576,19 @@ export class SpwCustomSelect {
         const filteredOptions = this.getFilteredOptions();
         const showPlaceholder = this.showPlaceholder();
         const showCreate = this.showCreateButton();
-        return (h("div", { key: '075816be82b83e4ff87e3b8acb699331e1b93873', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: '9243de1d006313839fd75cdfd960135608e19802', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'b9187b59eae8c1cb618ef72fbf2057a80890717d', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'eb3d52c7e08d22a6824b861a423e41473add308c', class: "spw-custom-select__wrapper" }, h("div", { key: '3ea2df7f2171d795fc681e1e54f4a15abe5ce6a3', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '02a97e4e274bdfb8edc3018efc3f69277e16e6a2', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '93275dd4f05996654df1a4cdce1aa0b0c35ede52', class: "spw-custom-select__search" }, h("input", { key: '495ebc87298b60ce23adafa5970dd7068d1ba51a', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }), showCreate && this.isOpen && this.hasSelectedValue && (h("button", { key: '19e031a37c9416f08dc8f86d82e5126b678e4915', class: "spw-custom-select__create-btn spw-custom-select__create-btn--big", type: "button", onMouseDown: (event) => {
+        return (h("div", { key: '358422a9b9a98c9c09f1d17fa7ba4080a7159afa', class: this.elementClass, ref: el => (this.host = el) }, this.label && (h("spw-field-label", { key: 'c03aec8b695cf0a825db43e68de0c5d73e2c3711', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'e4443485205447a46a97d1416c4c20e7b7c50664', class: "spw-custom-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '470d2a5091f0ccc314b090d7da5c4dfa71e663e1', class: "spw-custom-select__wrapper" }, h("div", { key: '5b28939e3c2104610f982919c8dc7c4929157a44', class: "spw-custom-select__container", id: this.name, ref: el => (this.selectContainer = el), onClick: event => this.toggleDropdown(event), onKeyDown: event => this.handleKeyDown(event), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'c37c002dd4572207202670017b42c9944eddfbbe', class: "spw-custom-select__selected" }, this.isSearchVisible() && (h("div", { key: '5ca297ad620ec490a1b5d35b12eef662ef09a64c', class: "spw-custom-select__search" }, h("input", { key: 'f587c3ed01eccfc1ae99070bf9a751361615ca89', class: "spw-custom-select__search-input", placeholder: this.searchPlaceholder, onInput: event => this.handleSearchInput(event), value: this.searchText }), showCreate && this.isOpen && this.hasSelectedValue && (h("button", { key: '2c37918104f234acd59c5df67006e0f37d868f0b', class: "spw-custom-select__create-btn spw-custom-select__create-btn--big", type: "button", onMouseDown: (event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.addCreatedOption(this.searchText);
-            } }, h("spw-icon", { key: '23bb75e44c6a1f74274c87be82ca5ef55ce1272c', icon: "fa-plus" }))))), showPlaceholder && h("span", { key: 'a80921899ec9687857323eee0296ad44b6c775e0' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '1bfa5decab9a3051d6c3641b0cc01e5d93c863a9', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
+            } }, h("spw-icon", { key: '4476c023c17f721e093de039c70082113b168db6', icon: "fa-plus" }))))), showPlaceholder && h("span", { key: '1d917d4155dab1b047465e9793b63630a843cae0' }, this.placeholder), this.multiple && this.internalValue.length > 0 && (h("div", { key: '8bdd3159992bd8d00f7afb896b58003836e51ea8', class: "spw-custom-select__selected-items" }, this.internalValue.map(val => {
             var _a;
             return (h("span", { class: "spw-custom-select__selected-item" }, (_a = this.parsedOptions.find(option => String(option.value) === String(val))) === null || _a === void 0 ? void 0 :
                 _a.label, h("spw-icon", { icon: "fa-times", class: "spw-custom-select__deselect-icon", onClick: event => this.selectOption(val, event) })));
-        }))), !this.multiple && h("span", { key: '0a386c27e0eba81c3580d49618d61f218b27133a' }, this.getSelectedLabels()))), h("div", { key: 'deb6c2cd37ce5db9586c7f3d0b5a51f7871d1b15', class: "spw-custom-select__icons" }, showCreate && !(this.isOpen && this.hasSelectedValue) && (h("button", { key: 'eb087835e04d9010419c7bade6655ebb54fdd166', class: "spw-custom-select__create-btn", type: "button", onMouseDown: (event) => {
+        }))), !this.multiple && h("span", { key: '2334df86497700a0e25ef4a1ee68115af3bc349d' }, this.getSelectedLabels()))), h("div", { key: '98d6b1565b711b28fbb348ee2877bba0e3590ba1', class: "spw-custom-select__icons" }, showCreate && !(this.isOpen && this.hasSelectedValue) && (h("button", { key: 'f0e2e6e174ed5b030a2f9f4f1e82f9960b95a211', class: "spw-custom-select__create-btn", type: "button", onMouseDown: (event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.addCreatedOption(this.searchText);
-            } }, h("spw-icon", { key: '51245fd24e580561380ad325f7d712e5c2e4c6c5', icon: "fa-plus" }))), this.isClear && (this.hasSelectedValue || !!this.searchText) && (h("span", { key: 'b3c328e3303be083386a573e2f0531bcf3b3fd8c', class: "spw-custom-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: '901f42f0b454d290e3e5083de84f930493795dce', icon: "fa-xmark" }))), h("div", { key: 'ae1a3dc6f013d68f359a5030e2515e6e82130d92', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'cf6e35d678d4e89d5d4c41f3729a440e257d1bde', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' }))), this.isOpen && (h("div", { key: '2756a3d722f0ea5b999a982e2dca80bfb5a31f0f', class: {
+            } }, h("spw-icon", { key: '9b2f777e859c8be971dc7a069aae7822aa3c6ab1', icon: "fa-plus" }))), this.isClear && (this.hasSelectedValue || !!this.searchText) && (h("span", { key: 'e9a9553430abc3ac47f966fd4a132dbcaf9e2931', class: "spw-custom-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: '98169855a2c9ff794e6897c96f27bff254464592', icon: "fa-xmark" }))), h("div", { key: 'e7bac72b7a065e1e35e2a016f0f985600caa43b2', class: "spw-custom-select__arrow" }, h("spw-icon", { key: 'b7ce78ce337e69778035b5d53823c0265772de5c', icon: this.isOpen ? 'fa-chevron-up' : 'fa-chevron-down' }))), this.isOpen && (h("div", { key: '932a38100e78e64707f2d9014e381be024e9495c', class: {
                 'spw-custom-select__options': true,
                 [`spw-custom-select__options--${this.dropdownDirection}`]: true,
                 'spw-custom-select__options--fixed': this.fixedDropdown,
@@ -603,7 +599,7 @@ export class SpwCustomSelect {
                     left: `${this.dropdownPosition.left}px`,
                     width: `${this.dropdownPosition.width}px`,
                 }
-                : {} }, h("div", { key: '068f62410b9cd62d382e3158eec764a046b57a72', class: "spw-custom-select__options-list" }, !!filteredOptions.length && (h("ul", { key: 'f6cf9b974716fa92042ab6b07c5e5d4337d8b1e1' }, filteredOptions.map((option, index) => (h("li", { class: {
+                : {} }, h("div", { key: 'b6bfe9801edf04781cf0e90b3d4df21749f885b6', class: "spw-custom-select__options-list" }, !!filteredOptions.length && (h("ul", { key: '0d44ccae774e2dd839529508fc2971fb607e82b7' }, filteredOptions.map((option, index) => (h("li", { class: {
                 'spw-custom-select__option': true,
                 'spw-custom-select__option--selected': this.multiple
                     ? this.internalValue.some(val => String(val) === String(option.value))
@@ -611,7 +607,7 @@ export class SpwCustomSelect {
                 'spw-custom-select__option--focused': index === this.focusedOptionIndex,
                 'spw-custom-select__option--disabled': option.disabled,
                 'spw-custom-select__option--created': !!option.created,
-            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-custom-select__checkbox", checked: this.internalValue.some(val => String(val) === String(option.value)), disabled: option.disabled })), option.label, option.created && (h("spw-icon", { class: "spw-custom-select__option-remove", icon: "fa-trash", onClick: (event) => this.removeCreatedOption(option, event) }))))))), !filteredOptions.length && h("p", { key: 'f20a6196114b89a9e69cdce4f50e7107078c5ee1', class: "spw-custom-select__no-results" }, this.noResultsText)), this.hasSlottedFooter && (h("div", { key: 'fd36a7e651b572c32aa0340d3edff0e1d5b0e31b', class: "spw-custom-select__options-footer" }, h("slot", { key: '6601ff4fcfb2c51fa1b8fddcd9ff6f9f5fdcebec', name: "footer" })))))), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+            }, onClick: () => this.selectOption(option.value) }, this.multiple && (h("spw-checkbox", { onKeyDown: event => this.handleOptionKeyDown(event, option.value), class: "spw-custom-select__checkbox", checked: this.internalValue.some(val => String(val) === String(option.value)), disabled: option.disabled })), option.label, option.created && (h("spw-icon", { class: "spw-custom-select__option-remove", icon: "fa-trash", onClick: (event) => this.removeCreatedOption(option, event) }))))))), !filteredOptions.length && h("p", { key: 'd7f15a608b4fe19c10ccf365f7647c9c0b831412', class: "spw-custom-select__no-results" }, this.noResultsText)), this.hasSlottedFooter && (h("div", { key: '1142b7c96b8a3e6b49a445cb4cfc5427620d1199', class: "spw-custom-select__options-footer" }, h("slot", { key: '487e3993d95680d914481695ada22ce6dbc7a250', name: "footer" })))))), this.renderMessages()));
     }
     static get is() { return "spw-custom-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-date-picker/spw-date-picker.js

@@ -898,6 +898,22 @@ export class SpwDatePicker {
         this.dateChange.emit({ value: this.value, date: dateToEmit });
         this.updateRangeConstraints();
     }
+    // isExpandable (details slot) uniquement sur le dernier message affiché
+    renderMessages() {
+        const messages = [];
+        if (this.error)
+            messages.push({ variant: 'error', text: this.error, showIcon: this.showErrorIcon });
+        if (this.hint)
+            messages.push({ variant: 'hint', text: this.hint, showIcon: this.showHintIcon });
+        if (this.success)
+            messages.push({ variant: 'success', text: this.success, showIcon: this.showSuccessIcon });
+        if (this.warning)
+            messages.push({ variant: 'warning', text: this.warning, showIcon: this.showWarningIcon });
+        return messages.map((m, i) => {
+            const isLast = i === messages.length - 1;
+            return (h("spw-field-message", { variant: m.variant, showIcon: m.showIcon, isExpandable: isLast && this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, m.text, isLast && h("slot", { name: "details", slot: "details" })));
+        });
+    }
     render() {
         const inputClass = {
             'spw-date-picker__input': true,
@@ -910,7 +926,7 @@ export class SpwDatePicker {
             'spw-date-picker--is-clear': this.isClearIconVisible,
         };
         const errorMessage = this.error || this.internalError;
-        return (h(Host, { key: '564bc68f8ad447f770da4c8728f6d58a384a9b2b' }, h("div", { key: '32ccc3cda6d814e03421420246ed16330ea849c2', class: containerClass }, this.label && (h("spw-field-label", { key: '80583426a18953b34e8fc201afa824f912518f19', label: this.label, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '0dc408e84a46e244c091346d2933ce2303d1a38f', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '4c1ff3ff68256ca217ec08064a445dbded3ab965', class: "spw-date-picker__input-container" }, h("input", { key: 'f17dbd4e81beac9034360d7f37c9ac035246b296', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-label": this.accAriaLabel || this.label || this.name, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), h("div", { key: '4045e0a3c681853098a82b9c02299ae102afe226', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: '6d306f9bea41e7247d12b58d1d5835fb2f94f1e5', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: 'de27f7a164391647c8d493903cafc7daa8265ce7', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: '56752a196dab51adfd885ee2cf77fe0aa00df145', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: 'ecc83e23e44439e69e776a55a18efb1713cfaa0f', icon: "fa-calendar", variant: "fa-regular", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '31591b3fb7000b0ed02a6bf644fd6b716a31f5e7', variant: "error", showIcon: this.showErrorIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { key: 'e64d3106764297df28b83a5faa80199931af97fa', name: "details", slot: "details" }))), this.hint && (h("spw-field-message", { key: 'a53097541783ed894989cd8558623365aa24c240', variant: "hint", showIcon: this.showHintIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { key: 'b5ad3ca2403c6bc7ff151163343a608aac901a3e', name: "details", slot: "details" }))), this.success && (h("spw-field-message", { key: '41e4ec713c6f90a12acf4ebf44331d4197a0fa15', variant: "success", showIcon: this.showSuccessIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { key: 'ac0cf72b8b8ba372f678318b0371ad7d8e95033b', name: "details", slot: "details" }))), this.warning && (h("spw-field-message", { key: 'a0135160706177af565dfbb1bf00d93b80406efd', variant: "warning", showIcon: this.showWarningIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { key: 'ce8f1a543fae42a05a132e0ac34aefd35e2fe4a2', name: "details", slot: "details" }))))));
+        return (h(Host, { key: '5955d70f961ed5e105ff020c78c856eb96992eb1' }, h("div", { key: 'e0dab771bbff96b83de4da985c24a9462b0417b2', class: containerClass }, this.label && (h("spw-field-label", { key: '754992beb8b04fb001f0e8d2b7cc92353c7588b4', label: this.label, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '7abf65973a626621bce3dce5d6465be91c1737a6', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '93963d8f8dbbef0256953a41aa041bb5de48708f', class: "spw-date-picker__input-container" }, h("input", { key: '751c01e03a22f0a11e23b37a4135735dc3ef1533', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-label": this.accAriaLabel || this.label || this.name, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), h("div", { key: '7fa138207f199962010e53f07d98b24448427629', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: 'b1c82234eb5409d03097956aaba6b27ec25569da', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '6d5be28b1e4cf1b767a680ae4d622ab68d2f1a5b', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: '0099ffd2a57954568cdddac457fe792e7b9c97bd', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: '44ff7f5577e1bc73df0dc1df75553dc2289502a8', icon: "fa-calendar", variant: "fa-regular", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.renderMessages())));
     }
     static get is() { return "spw-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-drawer/spw-drawer.js

@@ -216,13 +216,13 @@ export class SpwDrawer {
         };
     }
     render() {
-        return (h(Host, { key: '959023af74f1f006cb52ff26b8befc1b55526c09' }, h("div", { key: '0b48c017357960db20fbf1d5359493c2ed8d26e2', class: this.containerClass }, this.modal && h("div", { key: '83462c42f8cc7031f0112cb3f4516f947fcbe99a', class: "spw-drawer__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '2b28ec80a7ad5a811293c1b488596de35e331484', ref: el => (this.drawerPanel = el), class: this.panelClass, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '9f59f1eca71c1503a0eb7aed9d1b4e04008f96d5', class: "spw-drawer__header" }, this.showCaption && h("h2", { key: 'a722f7d54a5b333c3c43d5a4ae82bfb5f1fd6540', class: "spw-drawer__caption" }, this.caption), this.showCloseButton && (h("div", { key: '418acf5d3f54a4f24d8b92e62ef2770fa35ac5f5', class: "spw-drawer__close-button", ref: el => (this.closeButtonEl = el), tabindex: "0", role: "button", onClick: () => this.doBeforeClose('CLOSE_BUTTON'), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: '6f2d090746ab8f134abf7f5513316cf175e54ca4', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: '86f2ebde999686b9525387f63f4dbff5365f728e', class: "spw-drawer__body", ref: el => (this.drawerContent = el) }, h("slot", { key: '1874804cc1740f1032e27d482223dd83a755e737', name: "content" })), h("div", { key: '3fb59d6bed76b2e670457c9f70ab5def222c5069', class: {
+        return (h(Host, { key: '0a6a6ac65023c0297195a8f64d3865d65c17dbaf' }, h("div", { key: '3217a678f8d16d16a98e08740098d3003b5b8e84', class: this.containerClass }, this.modal && h("div", { key: '602cf69f04637c915392bcbdba352efd93b1dd94', class: "spw-drawer__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '57d02c42df508a9d45fcc5c0db42535f93eaa305', ref: el => (this.drawerPanel = el), class: this.panelClass, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '7fcfb05bc737699a6cae0867d1a761cd3d324b06', class: "spw-drawer__header" }, this.showCaption && h("h2", { key: '659f7175cc6eda8fbb709c016246ecdb856b5a4c', class: "spw-drawer__caption" }, this.caption), this.showCloseButton && (h("div", { key: 'e9751f85a59804f58af890413ab268f3d5c5459f', class: "spw-drawer__close-button", ref: el => (this.closeButtonEl = el), tabindex: "0", role: "button", onClick: () => this.doBeforeClose('CLOSE_BUTTON'), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: '5c4a7bcb9541e50c8eb59e8a77f0b5a58bde4b02', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'dbd1a9e03b2103f7d89e8b0865d98f85d9305e81', class: "spw-drawer__body", ref: el => (this.drawerContent = el) }, h("slot", { key: '917e8eddd7a051960dc6a03b418f8bbd5059197d', name: "content" })), h("div", { key: '837566c0a01191c78aa575eb1c6a5d31f34670c3', class: {
                 'spw-drawer__footer': true,
                 'spw-drawer__footer--present': this.slotFooterPresent,
-            } }, h("slot", { key: 'f36304df12e7546f9925f8ce91efb0d7edf8b985', name: "footer", onSlotchange: (e) => {
+            } }, h("slot", { key: '9e84e715b6004766d65e0237bee769566e6ea872', name: "footer", onSlotchange: (e) => {
                 const slot = e.target;
                 this.slotFooterPresent = slot.assignedNodes({ flatten: true }).length > 0;
-            } }))), h("div", { key: 'eeaf9d766f88ed01cd7b1c50bc15a6b61ec89983', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+            } }))), h("div", { key: 'f630d54786270a8045c89e29a12ba121ade8ee43', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "spw-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-dropdown/spw-dropdown-container/spw-dropdown-container.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwDropdownContainer {
     render() {
-        return (h(Host, { key: '254b2d132682cd814071d3a9efe34302aa5c2fb8' }, h("div", { key: 'cf9ec527584a84088280a1becc2f6bdc029ee527', class: "spw-dropdown-container" }, h("slot", { key: 'e5eaaf9c68f77041f6056af1bb7e1101b48c1ffc' }))));
+        return (h(Host, { key: 'c5dfb232a53c88f23dc1f974696f811c85fecf57' }, h("div", { key: 'ae76d1933e3eaef179cf85e5acfb3f8796c7034d', class: "spw-dropdown-container" }, h("slot", { key: 'd926f30cc13d7fbb323a2dd562b1eea8c2f59b8c' }))));
     }
     static get is() { return "spw-dropdown-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-dropdown/spw-dropdown-item/spw-dropdown-item.js

@@ -83,7 +83,7 @@ export class SpwDropdownItem {
             'spw-dropdown-item__toggle': true,
             'spw-dropdown-item__toggle--open': this.subItemsOpen,
         };
-        return (h(Host, { key: '32e923b3a9e108f1086174906faee0da128ff653' }, h(Tag, { key: '6d8ef52d2f13479c89f27f778ab9f9bf6825a7f6', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: '38f32fedc809d43ecdb54a1b951beca4e1d66736', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '1a56eb106833f1de640edb96a9384dc12c319170', variant: this.iconVariant, icon: this.icon }))), h("div", { key: 'd17e23cf648d73ada4446ddf734337486d7c8065', class: "spw-dropdown-item__content" }, h("div", { key: '0825c1c2975fbd3fae85a824e24271cbd022d951', class: "spw-dropdown-item__label" }, h("slot", { key: 'cf1c32853c466f2739d825e6374d547cd70cd913' })), this.hasSubItems && (h("div", { key: '906e05ba073404465f8d846b02c977945a29b343', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '6575e949217f70d56d4f2b182f2091f663034c59', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: '256d12700e405244870e4a336a59dcd36a3eb2d2', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '3c84ac7480468f6789595e9506e34100b4184a68', name: "sub-items" })))));
+        return (h(Host, { key: '6039aa657a6a4db77a2f7fe05580750976f43b1d' }, h(Tag, { key: 'b8f28edf44a169543128afd2ff7291fbf7f0bff2', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: 'f3081d688b106ffc98f439a1abc79e51a1570c67', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: 'ad828fc45782d76ddb2bd9c8014a9d9e805b79a2', variant: this.iconVariant, icon: this.icon }))), h("div", { key: 'd681cb0b6b24cc5b5acd9dcbf356893d4c983af1', class: "spw-dropdown-item__content" }, h("div", { key: '333a617fd17f08260deb110c8b15c828d6bb49a0', class: "spw-dropdown-item__label" }, h("slot", { key: '2ad02cc8624cf9304f84c35b95018274b2fcdcae' })), this.hasSubItems && (h("div", { key: '5a1f2412aa066ebe611751d3e7c04ebee10ffdbf', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: 'ad714af7ecad526a71936f861b9c3078a3f87276', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: '5b75116726c0d8d1b3d481c5ec7cfa6e2468cc45', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '6aa46fa63137c6ce465ee8907ea85aa622512059', name: "sub-items" })))));
     }
     static get is() { return "spw-dropdown-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-dropdown/spw-dropdown.js

@@ -233,7 +233,7 @@ export class SpwDropdown {
         dropdown.style.visibility = 'visible';
     }
     render() {
-        return (h("div", { key: '355a6c48bfc0256e89821adc33ee5302617cc815', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: 'ea07cd30880d19c666293f895a4deeebdff6a0f8' })));
+        return (h("div", { key: '178def035dab4df44facbf82315c29d982e065bb', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: 'a86d20cea8f68aa750dbb7d7aeba0e13c01f5edc' })));
     }
     static get is() { return "spw-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-field-label/spw-field-label.js

@@ -21,7 +21,7 @@ export class SpwFieldLabel {
         return !!(this.tooltipText || this.tooltipTitle);
     }
     render() {
-        return (h(Host, { key: '98e1c6ce4789a41cb40cf17e05b4b5f01ede9206' }, h("label", { key: '806fcafd344b1ec3aebad9f7ca5240fe60c66a70', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: 'df417feeb140d5791a115d9454062962135fddaa', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: '5874bf363f3c0f194b4710b85e3bc7e4e594ed00', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: '80048d6b4ab44327a48b400fd443c63705c16bf4', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: '3522289fd7311ac8d834a99119003aea6468e125', class: "spw-field-label__required" }, "*"))));
+        return (h(Host, { key: 'c52052ffddf2165799a5b1e8cff0819aceeff91c' }, h("label", { key: '4a10f27fc26d352d94c1f58920883fe9bd6987f1', class: "spw-field-label", htmlFor: this.name, onClick: this.handleClick }, h("span", { key: '8ff780a360a11dd807d5699bf85366c9def3200f', class: "spw-field-label__text" }, this.label), this.hasTooltip && (h("spw-tooltip", { key: 'fe27fc64947802a3f37b589aa43b4074961cc650', tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, maxWidth: this.tooltipMaxWidth, direction: this.tooltipDirection, cursor: this.tooltipCursor }, h("spw-icon", { key: '44912845596090f2d5e69a32a9600c62ef8e175c', variant: "fa-regular", icon: "fa-circle-info", class: "spw-field-label__icon" }))), this.required && h("span", { key: 'de283f3b520ec7c4b1b4571fbecef935bb3fd499', class: "spw-field-label__required" }, "*"))));
     }
     static get is() { return "spw-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-field-message/spw-field-message.css

@@ -392,7 +392,7 @@ template {
   line-height: 1.5;
 }
 .spw-field-message__expandable {
-  margin-top: 4px;
+  margin-top: 6px;
 }
 .spw-field-message__expandable spw-link {
   user-select: none;
@@ -405,23 +405,11 @@ template {
 .spw-field-message__details {
   margin: 6px 0;
   padding: 16px;
-  border: 1px solid transparent;
+  border: 1px solid var(--spw-colors-support-grey-grey-300);
   background: var(--spw-colors-support-grey-grey-50);
   border-radius: 4px;
   color: var(--spw-colors-support-grey-grey-800);
 }
-.spw-field-message--error .spw-field-message__details {
-  border-color: var(--spw-color-states-error-error-300);
-}
-.spw-field-message--warning .spw-field-message__details {
-  border-color: var(--spw-color-themes-orange-orange-500);
-}
-.spw-field-message--success .spw-field-message__details {
-  border-color: var(--spw-color-states-success-success-500);
-}
-.spw-field-message--hint .spw-field-message__details {
-  border-color: var(--spw-colors-support-grey-grey-300);
-}
 .spw-field-message__details--hidden {
   display: none;
 }

package/dist/collection/components/spw-field-message/spw-field-message.js

@@ -37,7 +37,7 @@ export class SpwFieldMessage {
     }
     render() {
         const { isExpandable, isExpanded, expandLabel, collapseLabel } = this;
-        return (h(Host, { key: 'b38c0aa42f009699030e3ee86140eab077e599c9' }, h("div", { key: '5ee40f9390f1029192b3d23eed4215fa33a8602b', class: this.elementClass }, this.showIcon && (h("div", { key: 'd8b45a7b87fa01a6b63f754dda7a313cb0633a49', class: "spw-field-message__icon" }, h("spw-icon", { key: '6517e220995aeabeb8684ac8aba8f7f3e5526195', icon: this.variantIcon }))), h("span", { key: '6473b11a31c69cb7dbd648218c5b62f0a6c199a5', class: "spw-field-message__text" }, h("slot", { key: '228dff3a239c19348d20ebf0f28ec063b1545981' }), isExpandable && (h("div", { key: '833936731b2374a41bf89c149cb72bc74e2656a3', class: "spw-field-message__expandable" }, h("div", { key: 'da953e19879ce23254463dcafebd9c21ce3d16bf', class: { 'spw-field-message__details': true, 'spw-field-message__details--hidden': !isExpanded } }, h("slot", { key: '116d71e3546d38805f4ee26627d5d506df1b564b', name: "details" })), h("spw-link", { key: '617265971ba78f7a4f4c0bcfeb665b37370a7327', href: "#", icon: isExpanded ? 'fa-chevron-up' : 'fa-chevron-down', onClick: this.toggleExpanded }, isExpanded ? collapseLabel : expandLabel)))))));
+        return (h(Host, { key: '0eca782d02fd33f6d1c3aec9f757285c90d56e9d' }, h("div", { key: '1cb65229cdf9af52e35bab2c4ba6e80426266203', class: this.elementClass }, this.showIcon && (h("div", { key: 'a2fcb8f1c07596e86eab0958e6d21729fa83190a', class: "spw-field-message__icon" }, h("spw-icon", { key: '8db298fb8a078dea7f2d11df574bbc90d26e9068', icon: this.variantIcon }))), h("span", { key: '4de975363a2c1edf52f7f8705f2975e3829526fd', class: "spw-field-message__text" }, h("slot", { key: '1b7a99972dc56da986ee17c279c22b04f959581e' }), isExpandable && (h("div", { key: '723f3fc9b22c7ecb5d1c3f67ffb1fad2587b8924', class: "spw-field-message__expandable" }, h("div", { key: '3f37026e90095977ac6271e98dcc6ffa7ecc1e7a', class: { 'spw-field-message__details': true, 'spw-field-message__details--hidden': !isExpanded } }, h("slot", { key: '7cbf66a6c763a27e09bd3dfaee76ad8b20509a38', name: "details" })), h("spw-link", { key: 'b4269a46acc07330f293829f29883d1a1e6c5611', href: "#", icon: isExpanded ? 'fa-chevron-up' : 'fa-chevron-down', onClick: this.toggleExpanded }, isExpanded ? collapseLabel : expandLabel)))))));
     }
     static get is() { return "spw-field-message"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/spw-file-upload/spw-file-upload.js

@@ -249,10 +249,10 @@ export class SpwFileUpload {
     render() {
         const inputTextNoDrop = this.multiple ? this.textChooseFiles : this.textChooseFile;
         const inputTextDrop = this.multiple ? this.textDropFiles : this.textDropFile;
-        return (h("div", { key: 'b9ebd2c1fc52c12db5a618184286764f2940286c', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: 'dcb8127694409b0b2e5a6b8eb8ec145e0611a6d5', type: "file", ref: el => (this.inputElement = el), onChange: this.handleFileChange.bind(this), name: this.name, multiple: this.multiple, accept: this.accept, style: { display: 'none' }, disabled: this.isMaxFilesReached }), this.enableDropZone ? (h("div", { tabindex: this.disabled || this.isMaxFilesReached ? -1 : 0, onKeyDown: this.handleKeydown.bind(this), onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), class: "spw-file-upload__dropzone" }, inputTextDrop, " ", h("span", { class: "spw-file-upload__dropzone-link" }, this.textChooseFromComputer))) : (h("spw-button", { variant: "secondary", onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), disabled: this.disabled || this.isMaxFilesReached }, inputTextNoDrop)), h("div", { key: '17ce5706ea9ddfe6b86abaa2d2d8bb07792ac29f', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: '4d122133f13dc87218591517c423326a01fc8ab5' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: '6ddfc9b38a2e0063cb83567f5389f136988b0283', class: "spw-file-upload__info" }, this.selectedFiles.length > 0 ? (h("ul", { class: "spw-file-upload__info-list" }, this.selectedFiles.map((file, index) => (h("li", { key: index }, h("span", { class: "spw-file-upload__info-list-name" }, file.name), h("div", { class: "spw-file-upload__info-list-actions" }, h("span", { class: "spw-file-upload__spacing" }, formatFileSize(file.size)), h("a", { class: "spw-file-upload__info-list-delete", href: "#", onClick: e => {
+        return (h("div", { key: '04c9a5ce4a9819f292e7b78739b58f6669e3c9f7', class: this.elementClass, onDragOver: this.handleDragOver.bind(this), onDragLeave: this.handleDragLeave.bind(this), onDrop: this.handleDrop.bind(this) }, h("input", { key: '805d6de83cdba2201de81141290605163f15c82b', type: "file", ref: el => (this.inputElement = el), onChange: this.handleFileChange.bind(this), name: this.name, multiple: this.multiple, accept: this.accept, style: { display: 'none' }, disabled: this.isMaxFilesReached }), this.enableDropZone ? (h("div", { tabindex: this.disabled || this.isMaxFilesReached ? -1 : 0, onKeyDown: this.handleKeydown.bind(this), onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), class: "spw-file-upload__dropzone" }, inputTextDrop, " ", h("span", { class: "spw-file-upload__dropzone-link" }, this.textChooseFromComputer))) : (h("spw-button", { variant: "secondary", onClick: () => !this.disabled && !this.isMaxFilesReached && this.inputElement.click(), disabled: this.disabled || this.isMaxFilesReached }, inputTextNoDrop)), h("div", { key: '7b70b5162ad53d084a474ba03f93cdb3d9cde1c9', class: "spw-file-upload__hints" }, this.hintsMessages.length > 0 && (h("ul", { key: 'fefdbf67a4e02c5c5cc98555581e9c1df68234ed' }, this.hintsMessages.map((message, index) => (h("li", { key: index }, message)))))), h("div", { key: '3eebd438cc820cdc195ef8c05c3da8e091454e4c', class: "spw-file-upload__info" }, this.selectedFiles.length > 0 ? (h("ul", { class: "spw-file-upload__info-list" }, this.selectedFiles.map((file, index) => (h("li", { key: index }, h("span", { class: "spw-file-upload__info-list-name" }, file.name), h("div", { class: "spw-file-upload__info-list-actions" }, h("span", { class: "spw-file-upload__spacing" }, formatFileSize(file.size)), h("a", { class: "spw-file-upload__info-list-delete", href: "#", onClick: e => {
                 e.preventDefault();
                 this.removeFile(index);
-            } }, this.textDelete))))))) : (''), this.fileLimitErrors.length > 0 && (h("ul", { key: '555c82b252214a6587d9a80405d727ab73561fc0', class: `spw-file-upload__errors ${this.isMaxFilesReachedExact ? 'spw-file-upload__errors--warning' : ''}` }, this.fileLimitErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: this.isMaxFilesReachedExact ? 'fa-circle-exclamation' : 'fa-warning' }), message))))), this.fileTypeErrors.length > 0 && (h("ul", { key: '9aee36f1c9d26711eb58e723a14ddcdeef447ece', class: "spw-file-upload__errors" }, this.fileTypeErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: "fa-warning" }), message))))))));
+            } }, this.textDelete))))))) : (''), this.fileLimitErrors.length > 0 && (h("ul", { key: 'fa4df64dd8b66fb0d96600a28f1856d68801c387', class: `spw-file-upload__errors ${this.isMaxFilesReachedExact ? 'spw-file-upload__errors--warning' : ''}` }, this.fileLimitErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: this.isMaxFilesReachedExact ? 'fa-circle-exclamation' : 'fa-warning' }), message))))), this.fileTypeErrors.length > 0 && (h("ul", { key: '7c4fca9fec8a6487f0788df0bf7f5534fb0f2f9d', class: "spw-file-upload__errors" }, this.fileTypeErrors.map((message, index) => (h("li", { key: index }, h("spw-icon", { class: "spw-file-upload__spacing", icon: "fa-warning" }), message))))))));
     }
     static get is() { return "spw-file-upload"; }
     static get encapsulation() { return "shadow"; }