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

package/dist/collection/components/spw-tabs/spw-tabs-content/spw-tabs-content.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.css

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -339,7 +340,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -354,7 +355,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tabs/spw-tabs-navigation/spw-tabs-navigation.js

@@ -102,7 +102,7 @@ export class SpwTabsNavigation {
             'spw-tabs-navigation__list--vertical-on-mobile': this.isVerticalOnMobile,
             'spw-tabs-navigation__list--centered': this.isCentered && !this.hasOverflow,
         };
-        return (h("div", { key: 'c2aa3c34b6a273e6efaf0e70815ff27c38e17c60', class: containerClass }, this.showLeftArrow && (h("button", { key: '08b73d7a3eeae51e7d8ac9d5b0206c1e4c027ffa', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--left", onClick: this.scrollLeft, "aria-label": "Faire d\u00E9filer vers la gauche" }, h("spw-icon", { key: 'eb4dd2efd1e9e4bb6b7d6186a24e89427b0686fa', icon: "fa-chevron-left" }))), h("nav", { key: '3a2ef72c3eb45bd3c60a3defbf0a787171e9ea77', class: navClass, "aria-label": this.accAriaLabel || 'Navigation' }, h("ul", { key: '0c0cb412fa1eec085d3d02215e7101b2ae4b3921', class: listClass, role: "tablist", ref: el => (this.ulElement = el), onScroll: this.handleScroll }, h("slot", { key: '7c59c09e1ad575fb4cba30174440d7641254ec9c' }))), this.showRightArrow && (h("button", { key: 'a0afe6fcff6e097bd5170d6f13ceab59d0c9129d', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--right", onClick: this.scrollRight, "aria-label": "Faire d\u00E9filer vers la droite" }, h("spw-icon", { key: 'd13751031168a328819c78bc860ae92c8be45139', icon: "fa-chevron-right" })))));
+        return (h("div", { key: '2b227b9d3edc52fe3cd7358e8e1b0269863c07d5', class: containerClass }, this.showLeftArrow && (h("button", { key: '6ffc6f975492936714466215e27519ff3137261b', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--left", onClick: this.scrollLeft, "aria-label": "Faire d\u00E9filer vers la gauche" }, h("spw-icon", { key: 'c3609240c389f9f480c79d956b894f433e66a0bd', icon: "fa-chevron-left" }))), h("nav", { key: '85918963ae8cffb79eb21467e54bcda93afb27cb', class: navClass, "aria-label": this.accAriaLabel || 'Navigation' }, h("ul", { key: '36f65c10bcbc0c52095c8491a37fd6bcd6199492', class: listClass, role: "tablist", ref: el => (this.ulElement = el), onScroll: this.handleScroll }, h("slot", { key: '9c0ad17537706fbee2a6158e014593cc6f26b17e' }))), this.showRightArrow && (h("button", { key: '95a250291a6d6586331bc8fd90f6bd011b05f949', class: "spw-tabs-navigation__arrow spw-tabs-navigation__arrow--right", onClick: this.scrollRight, "aria-label": "Faire d\u00E9filer vers la droite" }, h("spw-icon", { key: '6d8646a6d37e816fdfd8a278b5794de3da5f5068', icon: "fa-chevron-right" })))));
     }
     static get is() { return "spw-tabs-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tabs/spw-tabs-navigation-item/spw-tabs-navigation-item.js

@@ -63,7 +63,7 @@ export class SpwTabsNavigationItem {
         const iconClass = `spw-icon--${iconPosition}`;
         const iconElement = this.icon ? h("spw-icon", { class: iconClass, icon: this.icon }) : null;
         const tagElement = this.tagText ? (h("spw-tag", { size: "small", "has-icon": this.tagIcon ? 'true' : 'false', variant: this.tagVariant }, this.tagText)) : null;
-        return (h(Host, { key: 'b227229d5dcaf74f16bc4bdc75c720903ef52783', class: this.active ? '--active' : '' }, h("li", { key: '0b41b6d84cfb428251d5e96d2095e315ea027d56', id: `tab-${this.tabId}`, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.slotText, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, class: this.elementClass, onClick: this.handleClick }, this.hasEllipsis && (h("spw-tooltip", { key: '3a8caf5fe691fa4f3f8b2c21d596f94dbedd5d3f', cursor: this.disabled ? 'disabled' : 'pointer', class: "spw-tooltip--has-ellipsis", tooltipText: this.slotText }, iconPosition === 'left' && iconElement, h("slot", { key: '22ea56aa1bc58a90e6b9cf4fa89c6a9bbfed02b6' }), iconPosition === 'right' && iconElement, tagElement)), !this.hasEllipsis && (h(Fragment, { key: '3d3cf0a700cf012608a97349f35f331ae352cdc1' }, iconPosition === 'left' && iconElement, h("slot", { key: '0db276452c16044e8d48671ce8863bbb8aabedec' }), iconPosition === 'right' && iconElement, tagElement)), ' ', this.bubble && h("span", { key: '1c6e2dfd036f1b57fa60380dc38e52d73d73ec4d', class: "bubble" }))));
+        return (h(Host, { key: '3a8f8534ca1682b8e171f8c19e4db53ce29bd0c4', class: this.active ? '--active' : '' }, h("li", { key: '2e12362ae8375e351c93d53c0f3c37e32e96bf11', id: `tab-${this.tabId}`, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.slotText, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, class: this.elementClass, onClick: this.handleClick }, this.hasEllipsis && (h("spw-tooltip", { key: 'c212ddbc7e42daee44b30b4b4859c474cfb9938f', cursor: this.disabled ? 'disabled' : 'pointer', class: "spw-tooltip--has-ellipsis", tooltipText: this.slotText }, iconPosition === 'left' && iconElement, h("slot", { key: 'c28046baad6d3160d1bc9dc8fb9258c76432562c' }), iconPosition === 'right' && iconElement, tagElement)), !this.hasEllipsis && (h(Fragment, { key: '8ad13772538c74b690e78da8aa114c179be1d05c' }, iconPosition === 'left' && iconElement, h("slot", { key: 'ea83c3dbb8587ecdebad8f1fa81894a535491c2d' }), iconPosition === 'right' && iconElement, tagElement)), ' ', this.bubble && h("span", { key: '28d465f9942b8207263057e53f9ed0f277a9ab99', class: "bubble" }))));
     }
     static get is() { return "spw-tabs-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -167,7 +167,7 @@ export class SpwTabs {
         };
     }
     render() {
-        return (h("div", { key: '4931261e6de2fe7c47ce2e73041b164f70cdb715', class: this.elementClass }, h("slot", { key: 'e9836413f90d03c38f0f5ee6a0388063156ed4f6', name: "navigation" }), h("slot", { key: 'bc6fd0d87cc18122a1e4cca6b5b97637d8977cf8', name: "content" })));
+        return (h("div", { key: '3bfb6a6bea5d4ebc4bc2cec369756414c4d94056', class: this.elementClass }, h("slot", { key: '1b73931774867138ceb9bebb0fb5e56b0a0483c6', name: "navigation" }), h("slot", { key: '229876d6e286f1bf7de291dfd41122ca067de57e', name: "content" })));
     }
     static get is() { return "spw-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -49,7 +49,7 @@ export class SpwTag {
             };
         const iconToDisplay = this.icon || this.getIcon(this.variant);
         const iconElement = this.hasIcon ? h("spw-icon", { variant: this.iconVariant, icon: iconToDisplay }) : null;
-        return (h(Host, { key: '126bc63df6fba6411ceaf811a3b90dfc2a6d7419' }, h(TagType, Object.assign({ key: '04ae3f9cb41874f552eb6f293bea6d4af813d233' }, attrs, { class: this.elementClass }), this.iconPosition === 'left' && iconElement, h("slot", { key: '2d946b68201c665e2818fecf8dc274987b114626' }), this.iconPosition === 'right' && iconElement)));
+        return (h(Host, { key: '4a6158008a587e4a6c534634df08be0c63b98e4b' }, h(TagType, Object.assign({ key: 'bd12d6475acbac06d2f5dfdd87aeb2a15b540ff1' }, attrs, { class: this.elementClass }), this.iconPosition === 'left' && iconElement, h("slot", { key: '195ff4cda1e6e74eab0a3a46d4a04bdbf101da96' }), this.iconPosition === 'right' && iconElement)));
     }
     static get is() { return "spw-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -339,7 +340,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -354,7 +355,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }
@@ -581,6 +582,12 @@ template {
   height: 60px;
   font-size: 18px;
 }
+.spw-text-field--disabled .spw-text-field__number-btn {
+  border-color: var(--spw-color-themes-grey-grey-400);
+}
+.spw-text-field--is-error .spw-text-field__number-btn {
+  border-color: var(--spw-colors-states-error-error-300);
+}
 .spw-text-field--has-controls .spw-text-field__input {
   border-radius: 0;
   border-left: none;

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

@@ -21,6 +21,8 @@ export class SpwTextField {
         this.success = '';
         /** Message de warning à afficher sous le champ */
         this.warning = '';
+        /** Active le panneau dépliable sur les messages (error, hint, success, warning) */
+        this.isExpandable = false;
         /** Affiche une icône d'erreur si vrai */
         this.showErrorIcon = true;
         /** Affiche une icône d'indication si vrai */
@@ -247,22 +249,22 @@ export class SpwTextField {
     }
     renderErrorMessage() {
         if (this.error) {
-            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon }, 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 }, 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" })));
         }
     }
     renderSuccessMessage() {
         if (this.success) {
-            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, 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" })));
         }
     }
     renderWarningMessage() {
         if (this.warning) {
-            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon }, 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" })));
         }
     }
     get elementClass() {
@@ -280,7 +282,7 @@ export class SpwTextField {
         };
     }
     render() {
-        return (h("div", { key: '0bb3d5d363ac29dcfcb588ce4366343d363866cf', class: this.elementClass }, this.label && (h("spw-field-label", { key: '022fe148f8750e1a6b52e0dfe425df5755695d88', 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: 'b905be1412f69f9085d1d69184bdd9e8567389f1', class: "spw-text-field__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'f66a814f2f79cc37e60e258d3d813c0a5b5fae40', class: "spw-text-field__container" }, this.type === 'number' && this.hasControls && (h("button", { key: 'fe1c360b60f02dd37942087c382007857a10d8fc', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--decrement", onClick: () => this.decrement(), disabled: this.disabled || (this.min != null && Number(this.value) <= this.min), "aria-label": this.accAriaLabelDecrement }, h("spw-icon", { key: '3c58b86b727a5e8700c17f22c86fb9e9ea9649a4', icon: "fa-minus" }))), h("div", { key: '632aedc2d41c2360a712739a1ab5ef041698e821', class: "spw-text-field__input-container" }, h("input", { key: '1f49c0652ef359e51082f19ec339ec5cee9f9a8e', class: "spw-text-field__input", ref: el => (this.inputElement = el), type: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'text' : this.type, inputMode: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'decimal' : undefined, min: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.min : undefined, max: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.max : undefined, step: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.step : undefined, placeholder: this.placeholder, "aria-label": this.accAriaLabel || this.name, disabled: this.disabled, name: this.name, id: this.name, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleInput(event), onKeyDown: event => this.handleKeyDown(event) }), (this.isSearch || this.isClearIconVisible) && (h("div", { key: '63c2d0ce95f02475d1dc7a68fe605941690958af', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '27d90e88d09fc8bd1add68f3e743b9479b29c3c7', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: '19b50cd0f4280a5b355a25294bd65a18a544d69b', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && !this.hasSubmitButton && h("spw-icon", { key: '705da868a0b74eb9605b3a157e7503110977bebd', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" }), this.hasSubmitButton && (h("button", { key: '6fd169d591de79f3e4b2f94cebea76ee04e1ae2b', type: "button", class: "spw-text-field__submit", onClick: () => this.handleSubmit(), "aria-label": "Rechercher" }, h("spw-icon", { key: '5d85fb0ad57631d429fafd4a2c132fcc76b73dd8', icon: "fa-magnifying-glass" })))))), this.type === 'number' && this.hasControls && (h("button", { key: '3a70e9dcb65ee787ae4386132e5f94acc3153ca3', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--increment", onClick: () => this.increment(), disabled: this.disabled || (this.max != null && Number(this.value) >= this.max), "aria-label": this.accAriaLabelIncrement }, h("spw-icon", { key: '81399bee05ede15e182057a9d6de4505a4fbdc10', icon: "fa-plus" }))), this.indicator && h("div", { key: '172d218dfd929431382ef02b855f7607955fe550', class: "spw-text-field__indicator" }, this.indicator)), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: 'e4bd9a7658360bb809fea011c1be848d410fd4ac', class: this.elementClass }, this.label && (h("spw-field-label", { key: '966ebc8ec9fc846bb3bbddd5872ea9dadf57f559', 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: '89cda5a205c9e6ebbc559e244df8b2f09af824a6', class: "spw-text-field__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'b9117308948f17fef393c1342e02b838cbb8d1f3', class: "spw-text-field__container" }, this.type === 'number' && this.hasControls && (h("button", { key: '3e9e5115840166cf7d725f6be9353d820ab49752', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--decrement", onClick: () => this.decrement(), disabled: this.disabled || (this.min != null && Number(this.value) <= this.min), "aria-label": this.accAriaLabelDecrement }, h("spw-icon", { key: 'cccf7aa4bce081ed985bd29a90d9d9f0fcd7df87', icon: "fa-minus" }))), h("div", { key: 'ce2962bd886e188465abfb7e882ca1e6bebc1844', class: "spw-text-field__input-container" }, h("input", { key: '9266a73c59ff0625e9bb444af04f1966ae3295bf', class: "spw-text-field__input", ref: el => (this.inputElement = el), type: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'text' : this.type, inputMode: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'decimal' : undefined, min: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.min : undefined, max: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.max : undefined, step: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.step : undefined, placeholder: this.placeholder, "aria-label": this.accAriaLabel || this.name, disabled: this.disabled, name: this.name, id: this.name, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleInput(event), onKeyDown: event => this.handleKeyDown(event) }), (this.isSearch || this.isClearIconVisible) && (h("div", { key: '2e0e41f825ef7b54057e9f8eac56dbbd1692b0eb', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '8c289f6d07ab2a494b8379bb4dd96b7913b636dc', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: '45cee755cd23114506a58e6ed8f84547e6531a47', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && !this.hasSubmitButton && h("spw-icon", { key: '6e50f234680a9b77143dbd8d247afab10b262976', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" }), this.hasSubmitButton && (h("button", { key: '4fbcdab588dce86c0498badad56cd378cf1bede5', type: "button", class: "spw-text-field__submit", onClick: () => this.handleSubmit(), "aria-label": "Rechercher" }, h("spw-icon", { key: '9d0df46e6f24a1c321ccdd9dd883e18907241017', icon: "fa-magnifying-glass" })))))), this.type === 'number' && this.hasControls && (h("button", { key: '415467e32e7940ccdb3c79b6eac874e1a249c977', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--increment", onClick: () => this.increment(), disabled: this.disabled || (this.max != null && Number(this.value) >= this.max), "aria-label": this.accAriaLabelIncrement }, h("spw-icon", { key: 'f854ab9b9b580b0e995991d5ae8dfaa4e1258caa', icon: "fa-plus" }))), this.indicator && h("div", { key: '23924b26b55b036341038b3a6dd18df9fd3d650e', class: "spw-text-field__indicator" }, this.indicator)), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-text-field"; }
     static get encapsulation() { return "shadow"; }
@@ -706,6 +708,64 @@ export class SpwTextField {
                 "attribute": "warning",
                 "defaultValue": "''"
             },
+            "isExpandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active le panneau d\u00E9pliable sur les messages (error, hint, success, warning)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expandable",
+                "defaultValue": "false"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour d\u00E9plier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label"
+            },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour replier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-label"
+            },
             "showErrorIcon": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }
@@ -398,11 +399,6 @@ template {
 .spw-textarea--is-error .spw-textarea__input {
   border-color: var(--spw-colors-states-error-error-300);
 }
-.spw-textarea--large .spw-textarea__input {
-  height: 60px;
-  padding: 0 24px;
-  line-height: 60px;
-}
 .spw-textarea--is-search .spw-textarea__input {
   padding-right: 80px;
 }

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

@@ -10,8 +10,6 @@ export class SpwTextarea {
         this.isSearch = false;
         /** Indique si le champ textarea est requis */
         this.required = false;
-        /** Spécifie la taille du champ textarea : 'large' ou 'medium' */
-        this.size = 'medium';
         /** Message d'erreur à afficher sous le champ textarea */
         this.error = '';
         /** Message d'indication (hint) à afficher sous le champ textarea */
@@ -28,6 +26,8 @@ export class SpwTextarea {
         this.showSuccessIcon = true;
         /** Affiche une icône de warning si vrai */
         this.showWarningIcon = true;
+        /** Active le panneau dépliable sur les messages (error, hint, success, warning) */
+        this.isExpandable = false;
         /** Positionnement du tooltip */
         this.tooltipDirection = 'top';
         /** Curseur du tooltip */
@@ -70,35 +70,34 @@ export class SpwTextarea {
     }
     renderErrorMessage() {
         if (this.error) {
-            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon }, 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 }, 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" })));
         }
     }
     renderSuccessMessage() {
         if (this.success) {
-            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, 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" })));
         }
     }
     renderWarningMessage() {
         if (this.warning) {
-            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon }, 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" })));
         }
     }
     get elementClass() {
         return {
             'spw-textarea': true,
-            [`spw-textarea--${this.size}`]: true,
             'spw-textarea--is-search': this.isSearch,
             'spw-textarea--is-error': !!this.error,
             'spw-textarea--disabled': this.disabled,
         };
     }
     render() {
-        return (h("div", { key: 'dda7f70a4e7b93b18cbc07718b97a8c46d546c3e', class: this.elementClass }, this.label && (h("spw-field-label", { key: '598ab858d7fdfa0758d1d641854ade216c65fa69', 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: '373aab441ca4345480b5ebc0af51f5d3a205dd98', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '6f8575659dcf358fffe2eef5af45f747ad062a55', class: "spw-textarea__container" }, h("textarea", { key: 'a6f3f08edb8580214a1f52a13295127cfe76f382', class: "spw-textarea__input", ref: el => (this.textareaElement = el), value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: '5b930e7ce813970305f482400ba5c86b09bbe3b7', class: this.elementClass }, this.label && (h("spw-field-label", { key: '88877f24e5a0835dc4c06eb7cc44b64c35870566', 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: '311d473c1a77c266aa473ade76168b83a61fbc65', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'cdade3d3b5dde315863a4d51a99904b1a4c4e17c', class: "spw-textarea__container" }, h("textarea", { key: '1ea8a011713f49a21d6f452acb5024899471756a', class: "spw-textarea__input", ref: el => (this.textareaElement = el), value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -309,26 +308,6 @@ export class SpwTextarea {
                 "attribute": "required",
                 "defaultValue": "false"
             },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'large' | 'medium'",
-                    "resolved": "\"large\" | \"medium\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Sp\u00E9cifie la taille du champ textarea : 'large' ou 'medium'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'medium'"
-            },
             "indicator": {
                 "type": "string",
                 "mutable": false,
@@ -527,6 +506,64 @@ export class SpwTextarea {
                 "attribute": "show-warning-icon",
                 "defaultValue": "true"
             },
+            "isExpandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active le panneau d\u00E9pliable sur les messages (error, hint, success, warning)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-expandable",
+                "defaultValue": "false"
+            },
+            "expandLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour d\u00E9plier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expand-label"
+            },
+            "collapseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien pour replier le message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapse-label"
+            },
             "tooltipTitle": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/spw-theme-provider/spw-theme-provider.js

@@ -24,7 +24,7 @@ export class SpwThemeProvider {
         document.documentElement.setAttribute('data-theme', theme);
     }
     render() {
-        return (h("main", { key: 'd3ae7fa0797018604fd42efce0648a844a8fbda0', class: `spw-theme-${this.theme}` }, h("slot", { key: '1ea82606463b9bb2f801a527a523b6eadcadf9a8' })));
+        return (h("main", { key: '0285afd390f8bd53ce43e58ff0982acf2bfb2de0', class: `spw-theme-${this.theme}` }, h("slot", { key: '0ae37393d3ebfad492887fa1979e21123363db79' })));
     }
     static get is() { return "spw-theme-provider"; }
     static get properties() {