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

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

@@ -29,11 +29,11 @@ export class SpwGrid {
         this.emitConfigurationChanged();
     }
     render() {
-        return (h(Host, { key: '16d3a18ed240bdf10eff043acabdfa226f4678f3' }, h("div", { key: 'cd7cebf046b4c68e6baa6397a7c560c8b6ed23aa', class: { 'spw-grid': true, [`spw-grid--gap-${this.gap}`]: !!this.gap }, style: {
+        return (h(Host, { key: '293bbb5f2a3f9580b133755d653cdb0c58b31173' }, h("div", { key: '7b96f4bcfe3694fb873c51b25acbe90a25d2516b', class: { 'spw-grid': true, [`spw-grid--gap-${this.gap}`]: !!this.gap }, style: {
                 '--spw-grid-cols-mobile': this.colsMobile.toString(),
                 '--spw-grid-cols-tablet': this.colsTablet.toString(),
                 '--spw-grid-cols-desktop': this.colsDesktop.toString(),
-            } }, h("slot", { key: 'f583b0568dc064c5c874d6604c15eba5fad56655' }))));
+            } }, h("slot", { key: 'c1c1bd568dc583553d9a89aba848c4d0ef4809fd' }))));
     }
     static get is() { return "spw-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,6 +25,8 @@ export class SpwGroup {
         this.success = '';
         /** Message de warning à afficher sous le groupe (pour les types checkboxes et radios) */
         this.warning = '';
+        /** Active le panneau dépliable sur les messages (error, hint, success, warning) */
+        this.isExpandable = false;
         /** Positionnement du tooltip */
         this.tooltipDirection = 'top';
         /** Curseur du tooltip */
@@ -37,15 +39,9 @@ export class SpwGroup {
         this.handleSlotChange();
     }
     handleSlotChange() {
-        var _a;
-        const elements = ((_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements) ? this.slotEl.assignedElements() : Array.from(this.host.querySelectorAll('*'));
+        var _a, _b;
+        const elements = (_b = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements()) !== null && _b !== void 0 ? _b : [];
         elements.forEach(element => {
-            if (this.disabled) {
-                element.setAttribute('disabled', '');
-            }
-            else {
-                element.removeAttribute('disabled');
-            }
             if (this.isCheckboxOrRadio && this.error) {
                 element.setAttribute('error', '');
             }
@@ -71,14 +67,14 @@ export class SpwGroup {
         if (!this.isCheckboxOrRadio)
             return;
         return [
-            this.error && h("spw-field-message", { variant: "error" }, this.error),
-            this.hint && h("spw-field-message", { variant: "hint" }, this.hint),
-            this.success && h("spw-field-message", { variant: "success" }, this.success),
-            this.warning && h("spw-field-message", { variant: "warning" }, this.warning),
+            this.error && (h("spw-field-message", { variant: "error", isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { name: "details", slot: "details" }))),
+            this.hint && (h("spw-field-message", { variant: "hint", isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { name: "details", slot: "details" }))),
+            this.success && (h("spw-field-message", { variant: "success", isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { name: "details", slot: "details" }))),
+            this.warning && (h("spw-field-message", { variant: "warning", isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { name: "details", slot: "details" }))),
         ];
     }
     render() {
-        return (h(Host, { key: '048ea573164d5bc2b9f51eb5ef57981e421bbd3f' }, h("div", { key: 'af065e6bcbea71b592f62ac5a18b3a0d1ba90ce6', class: this.groupClasses }, this.label && (h("spw-field-label", { key: 'a6496eaa395df663b50408bce4ed53e9d3cdd8f0', class: "spw-group__field-label", 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.isCheckboxOrRadio && this.assistiveText && (h("spw-field-message", { key: '1aeeab599217ade62bca5e18054c9762c406b05f', class: "spw-group__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'ac1ad856ba0d8ea398240391b729c11cb74bc2af', class: "spw-group__container", style: { flexWrap: this.flexWrap } }, h("slot", { key: '02bb02ebec58ca9a51e43e25118484edbd83a9ac', ref: el => (this.slotEl = el) })), this.renderMessages())));
+        return (h(Host, { key: '46cf831fd90fabba38a9508a777039cedd9924ec' }, h("div", { key: 'c645a9e070ba98a5d5b7b1aec8bd0bdae3e946b4', class: this.groupClasses }, this.label && (h("spw-field-label", { key: '1f46a311e8c6d2bdedd264d465a91790b11b7dd3', class: "spw-group__field-label", 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.isCheckboxOrRadio && this.assistiveText && (h("spw-field-message", { key: '1041d97993cd496248ccd50cdbc7de7def9b7bc1', class: "spw-group__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '79f222b64a3c569f2d3f9152bbe012aa1f312aa3', class: "spw-group__container", style: { flexWrap: this.flexWrap } }, h("slot", { key: '04f0d0b2708d84cd90d5b68d03c91335f636da81', ref: el => (this.slotEl = el) })), this.renderMessages())));
     }
     static get is() { return "spw-group"; }
     static get originalStyleUrls() {
@@ -390,6 +386,64 @@ export class SpwGroup {
                 "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"
+            },
             "tooltipTitle": {
                 "type": "string",
                 "mutable": false,
@@ -489,12 +543,8 @@ export class SpwGroup {
             }
         };
     }
-    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "disabled",
-                "methodName": "handleSlotChange"
-            }, {
                 "propName": "error",
                 "methodName": "handleSlotChange"
             }];

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

@@ -49,7 +49,7 @@ export class SpwHeaderLang {
         }
     }
     render() {
-        return (h(Host, { key: '2fa488c9cb8ff1fa142f237e6d99b5af00bc049d' }, h("div", { key: '35e46a3dd212571ba9eed782ef69da096e088ca7', class: "spw-header-lang" }, h("spw-button", { key: 'e5676f54092655318799999cc31e6706489379a0', variant: "tertiary", surface: "light", icon: "fa-chevron-down", class: "spw-header-lang__active-lang", onKeyDown: this.handleButtonKeyDown, onClick: this.handleButtonClick }, this.activeLang), h("select", { key: 'c26e5a9d1d22f253d8e3ef5374e4bcab04ea2fa1', "aria-label": this.accAriaLabel || 'Lang', class: "spw-header-lang__select", onChange: e => this.handleChange(e), ref: el => (this.selectEl = el), tabIndex: -1 }), h("ul", { key: '1751553d77a25381bc65301c9f86432ab4bdc31a', class: "spw-header-lang__options" }, this.options.map(option => {
+        return (h(Host, { key: '373221b76c0cd173c9bdcf578da504e019ccdf65' }, h("div", { key: '0652afde8658a8d5b17f200d6b7f57b1e30654c3', class: "spw-header-lang" }, h("spw-button", { key: '9592ae125c6acd24101d40263ebc14bbf3696a38', variant: "tertiary", surface: "light", icon: "fa-chevron-down", class: "spw-header-lang__active-lang", onKeyDown: this.handleButtonKeyDown, onClick: this.handleButtonClick }, this.activeLang), h("select", { key: 'a927e6ae8880a67dfbebf27a63ac6cd444797620', "aria-label": this.accAriaLabel || 'Lang', class: "spw-header-lang__select", onChange: e => this.handleChange(e), ref: el => (this.selectEl = el), tabIndex: -1 }), h("ul", { key: '959b43d616bd33b7533757fd201d677ede7f6db9', class: "spw-header-lang__options" }, this.options.map(option => {
             var _a;
             const label = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
             const value = option.getAttribute('value') || '';

package/dist/collection/components/spw-header/spw-header-navigation/spw-header-navigation.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);
   }
@@ -410,7 +411,8 @@ template {
 }
 @media (min-width: 1024px) {
   .spw-header-navigation__extra-button--desktop {
-    display: block;
+    display: flex;
+    gap: 12px;
   }
 }
 .spw-header-navigation__extra-button--mobile {
@@ -418,7 +420,9 @@ template {
 }
 @media (max-width: 1023px) {
   :host(.spw-ds-nav-open) .spw-header-navigation__extra-button--mobile {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
   }
 }
 .spw-header-navigation .spw-ds-container {
@@ -445,9 +449,9 @@ template {
     justify-content: space-between;
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-header-navigation__list {
-    gap: 24px;
+    gap: 16px;
   }
 }
 .spw-header-navigation__list-back {

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

@@ -15,6 +15,16 @@ export class SpwHeaderNavigation {
         this.extraButtonIconPosition = 'left';
         /** Activer l'émission d'événement au clic de l'extra button au lieu de la navigation classique */
         this.emitExtraButtonClick = false;
+        /** Présence ou non d'un deuxième bouton à droite de la navigation */
+        this.extraSecondaryButton = false;
+        /** Attribut target du deuxième extra button */
+        this.extraSecondaryButtonTarget = '_self';
+        /** Variant du deuxième extra button */
+        this.extraSecondaryButtonVariant = 'secondary';
+        /** Position de l'icône du deuxième extra button */
+        this.extraSecondaryButtonIconPosition = 'left';
+        /** Activer l'émission d'événement au clic du deuxième extra button au lieu de la navigation classique */
+        this.emitExtraSecondaryButtonClick = false;
         /** Texte du lien "Page d'accueil" dans la navigation mobile */
         this.homepageLabel = "Page d'accueil";
     }
@@ -40,6 +50,12 @@ export class SpwHeaderNavigation {
             this.extraButtonClick.emit();
         }
     }
+    handleExtraSecondaryButtonClick(event) {
+        if (this.emitExtraSecondaryButtonClick) {
+            event.preventDefault();
+            this.extraSecondaryButtonClick.emit();
+        }
+    }
     handleNavigation(event) {
         event.stopPropagation();
         this.element = event.detail.element;
@@ -75,7 +91,7 @@ export class SpwHeaderNavigation {
         };
     }
     render() {
-        return (h(Host, { key: '33b6d9d41965220e9dec1cd70f17dfecbf93e155' }, h("nav", { key: 'a48ee996c43340d5ab36a48e88c1b3e83ca2e758', class: this.elementClass, ref: el => (this.navEl = el) }, h("div", { key: 'f725d3513a72487508f6088c6b289a816eeb88d6', class: "spw-ds-container spw-tw-flex spw-tw-items-center spw-tw-justify-between" }, h("div", { key: 'c1b96ee3b5098bd1692d7ee1dfa0d8ea4cb9e89c', class: "spw-header-navigation__list" }, h("div", { key: 'a4b2df9f4997fc8b5b17e2184c85001ed40683c6', class: "spw-header-navigation__list-back" }, h("a", { key: '2a4770e93b1e3c94c4e494b4e0f0d6107f523c22', href: "#", onClick: event => this.redirectToHome(event) }, h("spw-icon", { key: '99aeb5e7c3255f91f885afa673b3ee21789d2c4f', icon: "fa-chevron-left" }), " ", h("span", { key: 'af8fc86e964ffde66b60bb6c8bcbdcc0280ddc08' }, this.homepageLabel))), h("slot", { key: '9a57848131fcb56b8886979ca0939c29eff0653b' })), this.extraButton && (h("div", { key: 'd9572ee4a00351c3ff35a52e036ded527b912941', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--desktop" }, h("spw-button", { key: 'bbc1077ef25a2530255d2a9b7fe80aea84988a92', variant: this.extraButtonVariant, icon: this.extraButtonIcon, "icon-position": this.extraButtonIconPosition, href: this.extraButtonHref, target: this.extraButtonTarget, size: "small", onClick: e => this.handleExtraButtonClick(e) }, this.extraButtonText))))), this.extraButton && (h("div", { key: '790f45063f3ca3eaeae3e3f8e177fdf32319cd52', class: "spw-header-navigation__extra-button-parent spw-header-navigation__extra-button--mobile" }, h("div", { key: '1b0b4f3a351f714ff05e0ab04481b3502a0ba963', class: "spw-ds-container" }, h("div", { key: '9399dbbfed327fd621c52834da3fcaba4c8e8c96', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--mobile" }, h("spw-button", { key: '1670f51af60a9270b90b9ba9cc72c32d94f8e790', "is-full-width": "true", variant: this.extraButtonVariant, icon: this.extraButtonIcon, href: this.extraButtonHref, target: this.extraButtonTarget, size: "small", onClick: e => this.handleExtraButtonClick(e) }, this.extraButtonText)))))));
+        return (h(Host, { key: 'b201661d286203550979ce96a594118484e2f485' }, h("nav", { key: '4f70efee708581a90eecf765e00209be017ca897', class: this.elementClass, ref: el => (this.navEl = el) }, h("div", { key: '14747342fa910b8eac3040b6ae895056bd7297d1', class: "spw-ds-container spw-tw-flex spw-tw-items-center spw-tw-justify-between" }, h("div", { key: 'c53139f0151d75ee654f8a0b5d0e47bcaccc23d6', class: "spw-header-navigation__list" }, h("div", { key: '0787925eb1d87f94016b7cc3b436e56f0034de7d', class: "spw-header-navigation__list-back" }, h("a", { key: 'a45139e7c21d27998ceb5dc8e55a55080bcfb3a1', href: "#", onClick: event => this.redirectToHome(event) }, h("spw-icon", { key: '2e8dfc7acf0dc2a40a63861f0d73667f9e2154d0', icon: "fa-chevron-left" }), " ", h("span", { key: '684934a9fdc09fef92965faaa94c6efbad7ed261' }, this.homepageLabel))), h("slot", { key: '69809c8af8136c4e38d482bd041d748d068b02d4' })), (this.extraButton || this.extraSecondaryButton) && (h("div", { key: '4a9bacfeac0b4e7ba2e6e4a9d77879bb92e818f2', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--desktop" }, this.extraButton && (h("spw-button", { key: 'a4cc8f9e7d362eb9bb7a6d72cc83306eb99ff72e', variant: this.extraButtonVariant, icon: this.extraButtonIcon, "icon-position": this.extraButtonIconPosition, href: this.extraButtonHref, target: this.extraButtonTarget, size: "medium", onClick: e => this.handleExtraButtonClick(e) }, this.extraButtonText)), this.extraSecondaryButton && (h("spw-button", { key: '35f36ad7952e3a67153874b2ba6b3ccbccbd298e', variant: this.extraSecondaryButtonVariant, icon: this.extraSecondaryButtonIcon, "icon-position": this.extraSecondaryButtonIconPosition, href: this.extraSecondaryButtonHref, target: this.extraSecondaryButtonTarget, size: "medium", onClick: e => this.handleExtraSecondaryButtonClick(e) }, this.extraSecondaryButtonText)))))), (this.extraButton || this.extraSecondaryButton) && (h("div", { key: 'b43b37441f121b58efa0e2dc51f08b75ed0779e3', class: "spw-header-navigation__extra-button-parent spw-header-navigation__extra-button--mobile" }, h("div", { key: 'c777c59fe3f6f1b9089db9b881dd62b8ece60308', class: "spw-ds-container" }, h("div", { key: '7f34bb2b22e5e7019624837e836e23e1542dfa5d', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--mobile" }, this.extraButton && (h("spw-button", { key: '597d9390675b13913f81b0cf76727623348f9dfe', "is-full-width": "true", variant: this.extraButtonVariant, icon: this.extraButtonIcon, href: this.extraButtonHref, target: this.extraButtonTarget, size: "medium", onClick: e => this.handleExtraButtonClick(e) }, this.extraButtonText)), this.extraSecondaryButton && (h("spw-button", { key: 'fb16c326484cfbfa232b1ca5b9954b886baaa662', "is-full-width": "true", variant: this.extraSecondaryButtonVariant, icon: this.extraSecondaryButtonIcon, href: this.extraSecondaryButtonHref, target: this.extraSecondaryButtonTarget, size: "medium", onClick: e => this.handleExtraSecondaryButtonClick(e) }, this.extraSecondaryButtonText))))))));
     }
     static get is() { return "spw-header-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -268,6 +284,163 @@ export class SpwHeaderNavigation {
                 "attribute": "emit-extra-button-click",
                 "defaultValue": "false"
             },
+            "extraSecondaryButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pr\u00E9sence ou non d'un deuxi\u00E8me bouton \u00E0 droite de la navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button",
+                "defaultValue": "false"
+            },
+            "extraSecondaryButtonHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sp\u00E9cifie le lien du deuxi\u00E8me extra button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button-href"
+            },
+            "extraSecondaryButtonTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribut target du deuxi\u00E8me extra button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button-target",
+                "defaultValue": "'_self'"
+            },
+            "extraSecondaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du deuxi\u00E8me extra button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button-text"
+            },
+            "extraSecondaryButtonVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant du deuxi\u00E8me extra button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button-variant",
+                "defaultValue": "'secondary'"
+            },
+            "extraSecondaryButtonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Ic\u00F4ne du deuxi\u00E8me extra button (r\u00E9f\u00E9rence font-awesome)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button-icon"
+            },
+            "extraSecondaryButtonIconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position de l'ic\u00F4ne du deuxi\u00E8me extra button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extra-secondary-button-icon-position",
+                "defaultValue": "'left'"
+            },
+            "emitExtraSecondaryButtonClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Activer l'\u00E9mission d'\u00E9v\u00E9nement au clic du deuxi\u00E8me extra button au lieu de la navigation classique"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "emit-extra-secondary-button-click",
+                "defaultValue": "false"
+            },
             "homepageLabel": {
                 "type": "string",
                 "mutable": false,
@@ -312,6 +485,21 @@ export class SpwHeaderNavigation {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "extraSecondaryButtonClick",
+                "name": "extraSecondaryButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lors du clic sur le deuxi\u00E8me extra button (si emitExtraSecondaryButtonClick est activ\u00E9)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/spw-header/spw-header-navigation-dropdown/spw-header-navigation-dropdown.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);
   }
@@ -376,7 +377,7 @@ template {
     padding: 16px 0;
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-header-navigation-dropdown--is-megamenu {
     max-width: var(--spw-ds-container-xl);
   }

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

@@ -81,7 +81,7 @@ export class SpwHeaderNavigationDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '8afe985442cb3e253206d406a8dc9c17db279a68', class: { 'spw-header-navigation-dropdown--is-megamenu': this.isMegamenu } }, h("div", { key: '6ade45ebe6da1a9b6514072c48c1831b1bbe481c', class: "spw-header-navigation-dropdown" }, h("slot", { key: '2da5c6f4338dc789ee008b164bf029bdb4197035' }), this.shouldShowViewMore && (h("spw-link", { key: '17f4dd54d77bf879b413cd6e2bb761bc8dd86f84', icon: "fa-arrow-right", class: "spw-header-navigation-item--view-more", href: this.parentHref, target: this.parentTarget }, this.viewMoreText)))));
+        return (h(Host, { key: '0050e1bb558bef8893c8890e016e04f4817df753', class: { 'spw-header-navigation-dropdown--is-megamenu': this.isMegamenu } }, h("div", { key: '95eb4312532ac467e3c3b5828fc122f6d5fd24aa', class: "spw-header-navigation-dropdown" }, h("slot", { key: 'a1c7a39860f1ddb1bdea880e6870b19cd424ade4' }), this.shouldShowViewMore && (h("spw-link", { key: '8bfb5c087ed9834716f843594a8bca6eaa609b54', icon: "fa-arrow-right", class: "spw-header-navigation-item--view-more", href: this.parentHref, target: this.parentTarget }, this.viewMoreText)))));
     }
     static get is() { return "spw-header-navigation-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-header/spw-header-navigation-item/spw-header-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-header/spw-header-navigation-item/spw-header-navigation-item.js

@@ -162,7 +162,7 @@ export class SpwHeaderNavigationItem {
             'spw-header-navigation-item--is-subnav-visible': this.isSubnavVisible,
             'spw-header-navigation-item--is-megamenu': this.variant === 'megamenu',
         };
-        return (h(Host, { key: 'dedbd3e81920490f593c97b738fb3357a4705665', "data-level": this.level }, h("div", { key: 'bc31c1479da1232d0c578ba0272e9a608bb26b65', class: elementClass }, h("div", { key: '4af96da7d539f51ce9cc0307e9c31bd62cbda9d3', class: "spw-header-navigation-item__content", onClick: event => this.toggleSubnavVisibility(event) }, this.isSubnavVisible && (h("div", { key: '5109a376cbfd1262515e95fd9b73c12579c541ca', class: `spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}` }, h("div", { key: 'b27e1c7e414079db4c4db16232d6c203ad51cc9f', class: "spw-header-navigation-item__top-back", onClick: event => this.handleBackClick(event) }, h("spw-icon", { key: '21080fa58646c4ec50c341fd270d3345a3213c22', icon: "fa-chevron-left" }), " ", h("span", { key: '1b2ffce2764344443086509ab5d9742281b33580' }, this.level === 1 ? '' : this.level === 2 ? 'Menu principal' : storedTitle)), h("div", { key: 'd9222d397f233147aeeb0d57108541d2969229ca', class: "spw-header-navigation-item__top-title" }, h("a", { key: 'd2ef0bac0d8dddd320ab2c50322ad2768890874b', href: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.link) || '#', target: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.target) || '_self' }, (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) || '')))), h("slot", { key: '6ff29f730b50051a8d0d5796b470b981e49a5147' })))));
+        return (h(Host, { key: 'f2fa81246df466f616a314f1c00f389373d751d8', "data-level": this.level }, h("div", { key: 'd5a0e0ccb487bc335a53961f0b65389b4a686f50', class: elementClass }, h("div", { key: '9c4ceaac13a2195c2b98c5ba3b5c6abe983545f4', class: "spw-header-navigation-item__content", onClick: event => this.toggleSubnavVisibility(event) }, this.isSubnavVisible && (h("div", { key: 'e83d95fa5b4f498c2a9d0867f890a87cfc32833d', class: `spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}` }, h("div", { key: 'b5622da35a50ac899e313bc032a478950a9053a4', class: "spw-header-navigation-item__top-back", onClick: event => this.handleBackClick(event) }, h("spw-icon", { key: '11935d69525e207ba49dfa31e9151153c2f599cc', icon: "fa-chevron-left" }), " ", h("span", { key: '7eff4e452aee53f0e92550d8bf19662ef8252661' }, this.level === 1 ? '' : this.level === 2 ? 'Menu principal' : storedTitle)), h("div", { key: '10f5aa01b78f5e8115ac0be44b74ae431c643434', class: "spw-header-navigation-item__top-title" }, h("a", { key: '765f571e96549417ad5dd12839b9353c645c631a', href: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.link) || '#', target: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.target) || '_self' }, (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) || '')))), h("slot", { key: 'd17419938f8a15cbd4960be8a902dce95827df09' })))));
     }
     static get is() { return "spw-header-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-header/spw-header-persona/spw-header-persona.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);
   }