@spw-ds/spw-stencil-library 1.14.2 → 1.15.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: '08654a87ffbca2483e7ba8d06e66c3acfa7451af', class: containerClass }, this.showLeftArrow && (h("button", { key: 'd65d96c9cea2f377c3c3a87c97a86c6de5a49657', 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: '8796f9bdb3b676075019cb5394405e93b59ceb5d', icon: "fa-chevron-left" }))), h("nav", { key: '695e3d495ad17b0b04f54b2f6129839dc534647d', class: navClass, "aria-label": this.accAriaLabel || 'Navigation' }, h("ul", { key: 'f09a3444ba343b2276ed776bcc7c9afec626b5c7', class: listClass, role: "tablist", ref: el => (this.ulElement = el), onScroll: this.handleScroll }, h("slot", { key: 'df732f63ab39e30a6c4674d7e5314636b49976ae' }))), this.showRightArrow && (h("button", { key: '0e7cae5c151ecbdb30054da1bcd94481305e7101', 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: '306b468cbc6a1befd79db4e44b4e92bffe8573ad', 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: '8a6ab7177120da7cfeaa6df17b4702b77280158c', class: this.active ? '--active' : '' }, h("li", { key: '059aa9439e4782abbfcf1be19bd643507e38597f', 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: 'a409e234a4fae3f7d1f4fd4d1e11dfc374021afe', cursor: this.disabled ? 'disabled' : 'pointer', class: "spw-tooltip--has-ellipsis", tooltipText: this.slotText }, iconPosition === 'left' && iconElement, h("slot", { key: 'e517fa9a8a021881b97ce9503a1e8ea63dc2257a' }), iconPosition === 'right' && iconElement, tagElement)), !this.hasEllipsis && (h(Fragment, { key: '99b80b94b52376f53e0d52e25d574280a290cd1d' }, iconPosition === 'left' && iconElement, h("slot", { key: 'ea54c06d2b5be6190bd8118d8168a95c7a6099fc' }), iconPosition === 'right' && iconElement, tagElement)), ' ', this.bubble && h("span", { key: '5445b05a864444ca81bc825ee52d4727b8c760ee', 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: '7e118680d9abcc148c3ec800194d3ce8a18f4178', class: this.elementClass }, h("slot", { key: '7a5c3ecbbf5673b04c892e9acf9e9d472e50e0ee', name: "navigation" }), h("slot", { key: '9bb53a4d2111087ce6fe378861ead015bfcb525f', 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: 'b3d137d06f23bbc00e32c2b4f4d0d80872f0bd0f' }, h(TagType, Object.assign({ key: '856fc1cf018cb5b81bb75486aa0504436d80d16e' }, attrs, { class: this.elementClass }), this.iconPosition === 'left' && iconElement, h("slot", { key: 'e3565bbe9c857973b4dcbd6aad56ad10a3558bb2' }), 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);
   }

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: '5869c33237fa6f602e1e14952e5907c84f033cc3', class: this.elementClass }, this.label && (h("spw-field-label", { key: '45aa105846bb5e410ed0c6eed3d7b885c85e2e80', 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: '2291b70d8173c62784789acfc3fe33444f537a71', class: "spw-text-field__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'd94f8a1a1330ac41e5005f39e6895a73758db0a9', class: "spw-text-field__container" }, this.type === 'number' && this.hasControls && (h("button", { key: '22f2bf66c017b29250754153a1fe1c92c974e392', 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: '0b4e07fe06704629a758657b71ef05a97192579b', icon: "fa-minus" }))), h("div", { key: 'a68d68dbca4b903824d9e3c281865288ac1e964c', class: "spw-text-field__input-container" }, h("input", { key: 'f5bd3a5e1995dbb1a6fa35b09e1b6f22683ff710', 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: 'd6b12c440ed633c0f332a7f8fb4a241fca505016', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '98a87e1ce6d02571796116aa7588378a0c34eebb', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: '2a4b6cebc5fe099e3d5375d308332267d86dec59', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && !this.hasSubmitButton && h("spw-icon", { key: '5e3838098d4bd150306215ce71d247d48e611a01', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" }), this.hasSubmitButton && (h("button", { key: 'd1bbf030d7769d8afa31e43b2c2d5769f7588c55', type: "button", class: "spw-text-field__submit", onClick: () => this.handleSubmit(), "aria-label": "Rechercher" }, h("spw-icon", { key: '790f1e3032a95b06de87d6deb9c77adf0fb69ad7', icon: "fa-magnifying-glass" })))))), this.type === 'number' && this.hasControls && (h("button", { key: '47baef8589df4aa6e6d065f19d7d3732bb49ed75', 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: 'c4b681cca4a413ddf96171b5dd2d3eaf7aa80c47', icon: "fa-plus" }))), this.indicator && h("div", { key: 'e66969d09f31e4a15139ff02d721a4e4827d6dc9', 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: '83625aa979ac1eb4d28c656dad54b105ff481be7', class: this.elementClass }, this.label && (h("spw-field-label", { key: 'f0783d52a5ff1b3972588672314c117bdf3e5396', 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: 'a914637fb2443731874d2d924e93812d131be6b3', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '6493f6c3a7ac951bd0ab0d921297edd6188ad250', class: "spw-textarea__container" }, h("textarea", { key: '53a1ee705c79dfb677088ae6dbacdd74bcf51ae9', 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: 'f3b357211e37d7e3442e042ef33068df5b2683e2', class: `spw-theme-${this.theme}` }, h("slot", { key: 'e6bdb0c0710b6441b35f705888656aa2a4c53e4b' })));
     }
     static get is() { return "spw-theme-provider"; }
     static get properties() {

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.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-tile/spw-tile-description/spw-tile-description.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileDescription {
     render() {
-        return (h("div", { key: 'd455a13d393ef8b2f3ae0b9b541f1b8dceafc902', class: "spw-tile-description" }, h("slot", { key: '9291788b57b07ea1ec2a9fd671e2cb8d1ce0e702' })));
+        return (h("div", { key: '10111f6125a54c499de83df1059af7068196fb91', class: "spw-tile-description" }, h("slot", { key: 'c496445be46a2b21a053d1cba9d3cda1996d0bac' })));
     }
     static get is() { return "spw-tile-description"; }
     static get encapsulation() { return "shadow"; }