@spw-ds/spw-stencil-library 1.14.2 → 1.16.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: '26c312821b249733c1168b87dbfda34a81546b86' }, h("div", { key: 'd5835eecde858fe201db38097633aaa167fb0ae9', 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: 'acfa7af94914dcf41234f5b0809fda34c76fd3b6' }))));
     }
     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: '88364482e94f002f2e798407d4afcd2ed3db0019' }, h("div", { key: 'e602d3d47b13b3350af36107b397698c6ce91c7d', class: this.groupClasses }, this.label && (h("spw-field-label", { key: '7f4af60defddb9387613fd279cedef1df54d6779', 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: '7141778173e5f55acfff9ff4b818e261adb246e9', class: "spw-group__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'c4d395cdc6d21a19edb569bc1dbeaa443d1b3d14', class: "spw-group__container", style: { flexWrap: this.flexWrap } }, h("slot", { key: '4f3a6ad9725951b695e5459be37c63249292b842', 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: '9f29b49b6d84cdea4798e1825316bf8f35827f4e' }, h("div", { key: '756e3358153adabeb3aca6cc8f0da0d4a766001c', class: "spw-header-lang" }, h("spw-button", { key: '8c8068207704b7a6346268950c7173b8b4c83293', 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: 'f085b56d7b36519ec154310836d1838bf0375e00', "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: '1ce137fc1348042284e492ec7496d6238c8b5b7b', 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: 'fc25e3a35ed921b11f92f74c2b6b1fd0a3ee9dbf' }, h("nav", { key: '3c4d3306fb306c559bbc6fce3e483842846d2d04', class: this.elementClass, ref: el => (this.navEl = el) }, h("div", { key: '10e0040a87a0c06529a4f60b325b7611ac243688', class: "spw-ds-container spw-tw-flex spw-tw-items-center spw-tw-justify-between" }, h("div", { key: '5a6b36df9d2afb976a7dc266657b036067d5340d', class: "spw-header-navigation__list" }, h("div", { key: '7f3fc0081f7f889e935ab4b0b6887dce3242d63f', class: "spw-header-navigation__list-back" }, h("a", { key: '538af26fb6bd9b3730441aa0f568bdedbad99cbc', href: "#", onClick: event => this.redirectToHome(event) }, h("spw-icon", { key: '98c036bd98e0d57b280d634f88166ca013a2a458', icon: "fa-chevron-left" }), " ", h("span", { key: 'dec52a165a44990c64958e6fc0f23af0b5a3cfe5' }, this.homepageLabel))), h("slot", { key: '25e46598bf04cdfe8016abba19039c54adaa6def' })), (this.extraButton || this.extraSecondaryButton) && (h("div", { key: 'b2667407c878202328003629a1b0778574808b96', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--desktop" }, this.extraButton && (h("spw-button", { key: '5a72b8937d01b23d3151a78aa6fbf336309dc65a', 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: 'ec0928081cddd626402857c3c7e3c4ccb5865eae', 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: 'c22eb7f4569d5a26dbf4acf469c20b04dd2c8ad1', class: "spw-header-navigation__extra-button-parent spw-header-navigation__extra-button--mobile" }, h("div", { key: '2f5b9df4745f77ffa95173717a08c42ca268f3c0', class: "spw-ds-container" }, h("div", { key: 'f9beb2fd9d7ef2fec54ceac80b9d27f6f334980d', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--mobile" }, this.extraButton && (h("spw-button", { key: 'd68a51f472cde790a526b9ee6a29e9f7ead877a3', "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: '308c957af7b783069a29b1e1ab116eb87c91cc81', "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: '2b281c50e20395913cf70158c68f9f15c6c8860a', class: { 'spw-header-navigation-dropdown--is-megamenu': this.isMegamenu } }, h("div", { key: '5b362953fba25df8f4e4684a76be129cc308e554', class: "spw-header-navigation-dropdown" }, h("slot", { key: '520b5de68784f3b994ad8858ae8ce6d82d1a4bcb' }), this.shouldShowViewMore && (h("spw-link", { key: '3f79f050576bc584f3a63211dbddf1010daa26a3', 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: '41c297f5b371bf7c419a10ad668dad563eb5f3b3', "data-level": this.level }, h("div", { key: '6a2fe1a924c460c9ab30fb987fe18e2892b1f763', class: elementClass }, h("div", { key: '837bffb63cdc1488583b4b468a8bb18b30992ed0', class: "spw-header-navigation-item__content", onClick: event => this.toggleSubnavVisibility(event) }, this.isSubnavVisible && (h("div", { key: '3f3547766970ed43eee09bcba2981db59bcfd757', class: `spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}` }, h("div", { key: '34de76656dadbf17e78cbf90999647836ebd36f6', class: "spw-header-navigation-item__top-back", onClick: event => this.handleBackClick(event) }, h("spw-icon", { key: '7958c3b3f41c002263b2f67ed460cbd4c057040c', icon: "fa-chevron-left" }), " ", h("span", { key: '22b34f9a544e6c88df3b1930b75d0946893214cd' }, this.level === 1 ? '' : this.level === 2 ? 'Menu principal' : storedTitle)), h("div", { key: '46658300bb7939e72a66e6f437fd0f0f5a108254', class: "spw-header-navigation-item__top-title" }, h("a", { key: '6efb11a0d7252008ed6e27d9f2462087ce06d662', 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: 'a5afdf5a083c6a1c562a6a696981dc7b5db2495e' })))));
     }
     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);
   }