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

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

@@ -68,25 +68,21 @@ export class SpwTextarea {
         this.internals.setFormValue(this.internalValue ? this.internalValue : null);
         this.valueChanged.emit(this.internalValue);
     }
-    renderErrorMessage() {
-        if (this.error) {
-            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.error, h("slot", { name: "details", slot: "details" })));
-        }
-    }
-    renderHintMessage() {
-        if (this.hint) {
-            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.hint, h("slot", { name: "details", slot: "details" })));
-        }
-    }
-    renderSuccessMessage() {
-        if (this.success) {
-            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.success, h("slot", { name: "details", slot: "details" })));
-        }
-    }
-    renderWarningMessage() {
-        if (this.warning) {
-            return (h("spw-field-message", { variant: "warning", showIcon: this.showWarningIcon, isExpandable: this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, this.warning, h("slot", { name: "details", slot: "details" })));
-        }
+    // isExpandable (details slot) uniquement sur le dernier message affiché
+    renderMessages() {
+        const messages = [];
+        if (this.error)
+            messages.push({ variant: 'error', text: this.error, showIcon: this.showErrorIcon });
+        if (this.hint)
+            messages.push({ variant: 'hint', text: this.hint, showIcon: this.showHintIcon });
+        if (this.success)
+            messages.push({ variant: 'success', text: this.success, showIcon: this.showSuccessIcon });
+        if (this.warning)
+            messages.push({ variant: 'warning', text: this.warning, showIcon: this.showWarningIcon });
+        return messages.map((m, i) => {
+            const isLast = i === messages.length - 1;
+            return (h("spw-field-message", { variant: m.variant, showIcon: m.showIcon, isExpandable: isLast && this.isExpandable, expandLabel: this.expandLabel, collapseLabel: this.collapseLabel }, m.text, isLast && h("slot", { name: "details", slot: "details" })));
+        });
     }
     get elementClass() {
         return {
@@ -97,7 +93,7 @@ export class SpwTextarea {
         };
     }
     render() {
-        return (h("div", { key: '5b930e7ce813970305f482400ba5c86b09bbe3b7', class: this.elementClass }, this.label && (h("spw-field-label", { key: '88877f24e5a0835dc4c06eb7cc44b64c35870566', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '311d473c1a77c266aa473ade76168b83a61fbc65', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'cdade3d3b5dde315863a4d51a99904b1a4c4e17c', class: "spw-textarea__container" }, h("textarea", { key: '1ea8a011713f49a21d6f452acb5024899471756a', class: "spw-textarea__input", ref: el => (this.textareaElement = el), value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: '58b00a1e00ae56c3115b4be83bc35a2d8355c30a', class: this.elementClass }, this.label && (h("spw-field-label", { key: 'f7438e1adda1cf10217158e34427d8e87a222403', 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: '2f260e15e9950101c33c4839bd3c555c89918599', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '822faad0673a8f0389f369e89928ad3d36eb4701', class: "spw-textarea__container" }, h("textarea", { key: 'b4236aabf1878b6df18ec52069c90dca3ab85aa6', 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.renderMessages()));
     }
     static get is() { return "spw-textarea"; }
     static get encapsulation() { return "shadow"; }

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: '0285afd390f8bd53ce43e58ff0982acf2bfb2de0', class: `spw-theme-${this.theme}` }, h("slot", { key: '0ae37393d3ebfad492887fa1979e21123363db79' })));
+        return (h("main", { key: '065ca382d4d58c36416002ba5dc4dcfb50c1794f', class: `spw-theme-${this.theme}` }, h("slot", { key: '91ec689d709422359646952b736404a79d4ca178' })));
     }
     static get is() { return "spw-theme-provider"; }
     static get properties() {

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.css

@@ -403,6 +403,9 @@ template {
   line-height: 1.5;
   font-size: 18px;
 }
+:host(.--icon.--surface-dark) .spw-tile-description {
+  color: white;
+}
 :host(.--big) .spw-tile-description, :host(.--light) .spw-tile-description {
   color: white;
   line-height: 1.3;

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: '3d9b003f759787e34582178117a40aa86beb62d5', class: "spw-tile-description" }, h("slot", { key: '5ad0c5d8d9d9e776cff00017784bde5b59502d1e' })));
+        return (h("div", { key: '944b6f3e11877aa6c2d932ef76eb8fd559e2958e', class: "spw-tile-description" }, h("slot", { key: '8ae1d62726bd878a2881ac54faa3ce4460eb8d54' })));
     }
     static get is() { return "spw-tile-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.css

@@ -363,20 +363,32 @@ template {
 :host {
   display: block;
   --spw-tile-title-icon: 20px;
+  --spw-tile-title-icon-mobile: 16px;
   --spw-tile-title-underline: none;
 }
 
 :host(.--icon) .spw-tile-title {
   color: var(--spw-color-themes-grey-grey-900);
-  line-height: 1.4;
-  font-size: var(--spw-tile-title-icon);
+  line-height: 1.3;
+  font-size: var(--spw-tile-title-icon-mobile);
   font-weight: 700;
   text-decoration: var(--spw-tile-title-underline);
   transition: all 0.2s linear;
 }
+@media (min-width: 1024px) {
+  :host(.--icon) .spw-tile-title {
+    font-size: var(--spw-tile-title-icon);
+  }
+}
 :host(.--icon.--hovered) .spw-tile-title {
   color: var(--spw-ds-primary);
 }
+:host(.--icon.--surface-dark) .spw-tile-title {
+  color: white;
+}
+:host(.--icon.--surface-dark.--hovered) .spw-tile-title {
+  opacity: 0.8;
+}
 :host(.--light) .spw-tile-title {
   color: white;
   line-height: 1.3;

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileTitle {
     render() {
-        return (h("h3", { key: 'ae2f43d85a1b248315b0866d301c30bfb3e3adc2', class: "spw-tile-title" }, h("slot", { key: '97d54e933b52987434a5bc3c5efd535cfcbefc86' })));
+        return (h("h3", { key: '32bfa3e58b35ac3028e67c22ccccf3024b374818', class: "spw-tile-title" }, h("slot", { key: 'b0b39bf7e7a25f4fe603d6085e1a4b1d85290269' })));
     }
     static get is() { return "spw-tile-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -369,6 +369,7 @@ template {
   text-decoration: none;
   position: relative;
   transition: all 0.3s ease-in-out;
+  border-radius: 6px;
 }
 .spw-tile--hoverable:hover {
   transform: translateY(-5px);
@@ -382,10 +383,20 @@ template {
 .spw-tile--icon {
   padding: 16px 0;
 }
+.spw-tile--icon.spw-tile--height-square, .spw-tile--icon.spw-tile--height-portrait {
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+}
+.spw-tile--icon.spw-tile--height-square {
+  padding-top: 100%;
+}
+.spw-tile--icon.spw-tile--height-portrait {
+  padding-top: 150%;
+}
 .spw-tile--big, .spw-tile--light {
   position: relative;
   padding-top: calc(70% - 12px);
-  border-radius: 6px;
   overflow: hidden;
 }
 @media (min-width: 1024px) {
@@ -466,6 +477,14 @@ template {
   left: 0;
   width: 100%;
 }
+.spw-tile--icon.spw-tile--height-square .spw-tile__content, .spw-tile--icon.spw-tile--height-portrait .spw-tile__content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
 .spw-tile--big.spw-tile--hoverable .spw-tile__content {
   padding-right: 84px;
 }
@@ -488,4 +507,7 @@ template {
 .spw-tile--icon .spw-tile__content-inner ::slotted(spw-icon) {
   font-size: 32px;
   color: var(--spw-ds-primary);
+}
+.spw-tile--icon.spw-tile--surface-dark .spw-tile__content-inner ::slotted(spw-icon) {
+  color: white;
 }

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

@@ -3,7 +3,11 @@ export class SpwTile {
     constructor() {
         /** Type de variante de tuile */
         this.variant = 'light';
-        /** Variante de hauteur de la tuile (valable pour les variants big & light) */
+        /** Surface sur laquelle la tuile est posée (uniquement valable pour le variant "icon" — adapte les couleurs du titre, de la description et de l'icône slottée). */
+        this.surface = 'light';
+        /** Couleur de fond de la tuile. Accepte toute valeur CSS valide (variable CSS, hexadécimal, rgba, etc.). Transparent par défaut. */
+        this.background = 'transparent';
+        /** Variante de hauteur de la tuile. Pour le variant "icon", "landscape" garde le comportement compact par défaut ; "square" et "portrait" appliquent un ratio fixe. */
         this.height = 'landscape';
         /** Attribut target, s'applique uniquement si href est rempli */
         this.target = '_self';
@@ -20,12 +24,20 @@ export class SpwTile {
     }
     applyVariantToChildren() {
         const variantClass = `--${this.variant}`;
+        const surfaceLightClass = '--surface-light';
+        const surfaceDarkClass = '--surface-dark';
         const titleElement = this.el.querySelector('spw-tile-title');
         const descriptionElement = this.el.querySelector('spw-tile-description');
-        titleElement && titleElement.classList.add(variantClass);
+        if (titleElement) {
+            titleElement.classList.add(variantClass);
+            titleElement.classList.toggle(surfaceDarkClass, this.surface === 'dark');
+            titleElement.classList.toggle(surfaceLightClass, this.surface !== 'dark');
+        }
         if (descriptionElement) {
             descriptionElement.classList.add(variantClass);
             descriptionElement.classList.toggle('--reveal-on-hover', this.revealDescription && (this.variant === 'light' || this.variant === 'big'));
+            descriptionElement.classList.toggle(surfaceDarkClass, this.surface === 'dark');
+            descriptionElement.classList.toggle(surfaceLightClass, this.surface !== 'dark');
         }
     }
     get elementClass() {
@@ -33,6 +45,7 @@ export class SpwTile {
             'spw-tile': true,
             'spw-tile--hoverable': !!this.href,
             [`spw-tile--${this.variant}`]: true,
+            [`spw-tile--surface-${this.surface}`]: true,
             [`spw-tile--height-${this.height}`]: true,
             'spw-tile--reveal-description': this.revealDescription && (this.variant === 'light' || this.variant === 'big'),
         };
@@ -62,7 +75,7 @@ export class SpwTile {
                 href,
                 target,
             };
-        return (h(Host, { key: 'cf901f3325453adb4fe130b1d0d3bc9dfa78a323' }, h(TagType, Object.assign({ key: 'f37a6ad65125bb464e3a366760c1bd7850fa3023' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '3bbb2140643181cf6d98ae87583572994b38463b' }, h("img", { key: '8fd96171e647c8ec905955755175d135406f0b50', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '4749a5833581683cb77c175cbec538293b789dd7', class: "spw-tile__content" }, (this.variant === 'big' || this.variant === 'light') && h("div", { key: 'c84b7a75688366c2e61e9aeb67194c64bd447705', class: "spw-tile__overlay" }), h("div", { key: '445985aa0760b2fbc60081c788005b0abfe9bf23', class: "spw-tile__content-inner" }, h("slot", { key: '3f5241b7be0673970e1a044d23817141a6091c73' })), this.href && this.variant === 'big' && (h("span", { key: '3f0a6cd4f1bdea9bbec8708ac86f5d4e895eac59', class: "spw-tile__button" }, h("spw-icon", { key: '1555a4b7c7087b1a177a07d265facfb9fcf37f6d', icon: "fa-chevron-right" })))))));
+        return (h(Host, { key: '30914609d9abde8e0c539d71548ba8593925cca7' }, h(TagType, Object.assign({ key: 'ad190c69b3d66ef6fb3d52f8b2127db32ba408cc' }, attrs, { class: this.elementClass, style: { background: this.background } }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: 'a92362bf9c8e4b835b4601db20effab7cfa56a4c' }, h("img", { key: '1ee8bf2285d97b614712f14fbd5fbdd5632ddee8', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '2b5ce972140a0fb4aee410b0500b49e64d904aa9', class: "spw-tile__content" }, (this.variant === 'big' || this.variant === 'light') && h("div", { key: 'ad4e6e529fb93c995f5ba37b636bf39e3a98da2c', class: "spw-tile__overlay" }), h("div", { key: '5c9da07938380d6faff1ce3da6f732a9f1a2c00d', class: "spw-tile__content-inner" }, h("slot", { key: '8ea1866518944c92fc16f478c555aafaa63b0164' })), this.href && this.variant === 'big' && (h("span", { key: '2e852799e4674d802c85500c7559abf586357573', class: "spw-tile__button" }, h("spw-icon", { key: 'ab051ba109f5d6e20e67b22c7d40a05a639b6c65', icon: "fa-chevron-right" })))))));
     }
     static get is() { return "spw-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -98,6 +111,46 @@ export class SpwTile {
                 "attribute": "variant",
                 "defaultValue": "'light'"
             },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Surface sur laquelle la tuile est pos\u00E9e (uniquement valable pour le variant \"icon\" \u2014 adapte les couleurs du titre, de la description et de l'ic\u00F4ne slott\u00E9e)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "surface",
+                "defaultValue": "'light'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Couleur de fond de la tuile. Accepte toute valeur CSS valide (variable CSS, hexad\u00E9cimal, rgba, etc.). Transparent par d\u00E9faut."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background",
+                "defaultValue": "'transparent'"
+            },
             "height": {
                 "type": "string",
                 "mutable": false,
@@ -110,7 +163,7 @@ export class SpwTile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Variante de hauteur de la tuile (valable pour les variants big & light)"
+                    "text": "Variante de hauteur de la tuile. Pour le variant \"icon\", \"landscape\" garde le comportement compact par d\u00E9faut ; \"square\" et \"portrait\" appliquent un ratio fixe."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -55,10 +55,10 @@ export class SpwTimelineItem {
     }
     render() {
         const showConnector = this.isLast === 'false';
-        return (h(Host, { key: 'bed06990940bf27088d30acf046c7898b36d1867' }, h("div", { key: 'e0097fb58a7e949b624a3f849772c77452ff23e9', class: this.elementClass }, h("div", { key: '650e758e17174fe9616e65f9988cd5da2b57a403', class: "spw-timeline-item__step" }, h("div", { key: '531e0380dbabbee8106a08c12e68e7404860316b', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '51ecd63ea9e2dc2240c8a5a42a2cf0d53b1d5f1f', class: "spw-timeline-item__connector" })), h("div", { key: '7f3da2d7a0ee388eddcfefc8c1b57079c7968097', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'a608d47b21e8e07f1ae10c63424c534dafc50a91', class: "spw-timeline-item__description-wrapper" }, h("div", { key: 'fdec9cbc5f723358d6244ae351e886e7a173371e', ref: el => (this.descriptionRef = el), class: {
+        return (h(Host, { key: '3fed9e49527fe08bd1ae7fb0a135487855597ab4' }, h("div", { key: '625842141c30cd19b812ed10c25054095b87ac80', class: this.elementClass }, h("div", { key: 'de965a59fdf9132967188ddb69e5fbde16550a88', class: "spw-timeline-item__step" }, h("div", { key: 'd7b97454d9c99a99dd79964e80a38c1165d0fe94', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '047b2c6161bebbd3ceef26ea3cdde932574b5c2b', class: "spw-timeline-item__connector" })), h("div", { key: 'ab2c65952ea083472ff67be02f9b1da762d0ad93', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'c4580ce71d4bad8e97896b7085557d27cbe51a75', class: "spw-timeline-item__description-wrapper" }, h("div", { key: '605805d80b31a8cc8f2752c45c2d256f456231bb', ref: el => (this.descriptionRef = el), class: {
                 'spw-timeline-item__description': true,
                 'spw-timeline-item__description--collapsed': !this.isDescriptionExpanded,
-            } }, this.description))), h("slot", { key: '0f999df3ae5f72eb9aa2e2933bb8f5a897983d62' })))));
+            } }, this.description))), h("slot", { key: '6397705468624fa23149897385f2a0437e5f9583' })))));
     }
     static get is() { return "spw-timeline-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,11 +53,11 @@ export class SpwTimeline {
         return this.visibleItems > 0 && items.length > this.visibleItems;
     }
     render() {
-        return (h(Host, { key: '08d6864952bf7068e596612c23421b87529200d9' }, h("div", { key: 'dd3817680c66f28595763d2c94d5a2a158add4ec', class: this.elementClass }, h("slot", { key: '9c6a2f60d3f0fcc647834282104d6a2550af8747' })), this.shouldShowToggleButton() && (h("div", { key: '0c23627843714ef572654c783894452cd2977493', class: {
+        return (h(Host, { key: 'e8f70bae5de172315e31463385f05bdb4ed597e2' }, h("div", { key: '0357d027e9ef9f775329571cd456864bd016387b', class: this.elementClass }, h("slot", { key: 'bd8b414d850e7e2035a8fbb0708c63261c77d441' })), this.shouldShowToggleButton() && (h("div", { key: 'f8748d28486d0149979dd60ea9b573de4ffc0caf', class: {
                 'spw-timeline__toggle': true,
                 'spw-timeline__toggle--more': !this.showAll,
                 'spw-timeline__toggle--less': this.showAll,
-            } }, h("span", { key: '4ce46d6480e6e8d51d201147a452d5ef1642e905', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
+            } }, h("span", { key: '9671a83ddedce1d59cd9d41a3762c34bbc7ea483', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
     }
     static get is() { return "spw-timeline"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwTocContainer {
     constructor() {
-        /** Profondeur maximale des headings à scanner. Ex: "h3" scanne h2 et h3, "h4" scanne h2, h3 et h4. Par défaut tous les niveaux jusqu'à h6. */
+        /** Profondeur maximale des headings à scanner. Ex: "h3" scanne h2 et h3, "h4" scanne h2, h3 et h4. Par défaut tous les niveaux jusqu'à h6. Peut également être définie sur spw-toc-navigation (dans ce cas, la valeur est propagée automatiquement à ce container). */
         this.depth = 'h6';
     }
     async componentDidLoad() {
@@ -121,7 +121,7 @@ export class SpwTocContainer {
         return tocItems;
     }
     render() {
-        return (h(Host, { key: '2a1a9fa7a120d4f64660a74a7a83b0acaeac5528' }, h("slot", { key: 'a9004024f4c44a736c7d76a80aec55fbaa4f233c' })));
+        return (h(Host, { key: '9dabdebfec120849a633d4e2645503053d3b6b50' }, h("slot", { key: 'bfd6165ac2c5f5ddbfda7873dd010c050ee40ecf' })));
     }
     static get is() { return "spw-toc-container"; }
     static get originalStyleUrls() {
@@ -138,7 +138,7 @@ export class SpwTocContainer {
         return {
             "depth": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
                     "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
@@ -148,7 +148,7 @@ export class SpwTocContainer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Profondeur maximale des headings \u00E0 scanner. Ex: \"h3\" scanne h2 et h3, \"h4\" scanne h2, h3 et h4. Par d\u00E9faut tous les niveaux jusqu'\u00E0 h6."
+                    "text": "Profondeur maximale des headings \u00E0 scanner. Ex: \"h3\" scanne h2 et h3, \"h4\" scanne h2, h3 et h4. Par d\u00E9faut tous les niveaux jusqu'\u00E0 h6. Peut \u00E9galement \u00EAtre d\u00E9finie sur spw-toc-navigation (dans ce cas, la valeur est propag\u00E9e automatiquement \u00E0 ce container)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -11,10 +11,25 @@ export class SpwTocNavigation {
         this.h2Distances = new Map();
     }
     async componentDidLoad() {
+        this.propagateDepthToContainer();
         await this.loadItems();
         this.setupIntersectionObserver();
         this.setupScrollHandler();
     }
+    depthChanged() {
+        this.propagateDepthToContainer();
+    }
+    propagateDepthToContainer() {
+        if (!this.depth)
+            return;
+        const tocWrapper = this.el.closest('spw-toc');
+        if (!tocWrapper)
+            return;
+        const container = tocWrapper.querySelector('spw-toc-container');
+        if (container) {
+            container.depth = this.depth;
+        }
+    }
     componentDidRender() {
         this.recalculateH2Distances();
     }
@@ -361,6 +376,25 @@ export class SpwTocNavigation {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'progress'"
+            },
+            "depth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Profondeur maximale des headings \u00E0 scanner. Propage la valeur au spw-toc-container parent (si uniquement spw-toc-navigation configurable). Si non d\u00E9finie, la valeur du spw-toc-container est utilis\u00E9e."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "depth"
             }
         };
     }
@@ -375,6 +409,12 @@ export class SpwTocNavigation {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "depth",
+                "methodName": "depthChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "tocItemsChanged",

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwToc {
     render() {
-        return (h(Host, { key: 'b5573394c9a94b24229e4c62c49e5a5c2ac7ae5b' }, h("slot", { key: '51ad228dd683f0400286bb546de01de97c99fc09' })));
+        return (h(Host, { key: '1a2e6a6a7e62d0f6869c502e1bd81971c3958be0' }, h("slot", { key: 'b61d833d3ad49b5c676e6cff415a1d1ef65f30b8' })));
     }
     static get is() { return "spw-toc"; }
     static get originalStyleUrls() {

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

@@ -127,7 +127,7 @@ export class SpwTooltip {
         };
     }
     render() {
-        return (h("div", { key: '85279a6e6e1fc9de788d0b5f36df918f6284b200', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'acd39fe15bf329ed41143c57a0cf865060377041' })));
+        return (h("div", { key: 'dcdf0a4a2a20b67a8ee8e7afa34b00cd6f6e0bb1', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: '08c755da2d1ae451b1ff40b5ac0bebb6e1cc30b2' })));
     }
     static get is() { return "spw-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -382,10 +382,9 @@ template {
 .spw-topbar__logo {
   display: flex;
   align-items: center;
-  font-size: 26px;
-  font-weight: bold;
   gap: 12px;
   color: var(--spw-colors-support-grey-grey-900);
+  align-self: stretch;
 }
 .spw-topbar__logo-link {
   display: flex;
@@ -393,15 +392,75 @@ template {
   gap: 8px;
   color: inherit;
   text-decoration: none;
+  position: relative;
+  align-self: stretch;
+  transition: all 0.2s linear;
+}
+.spw-topbar__logo-link:hover {
+  opacity: 0.8;
+}
+.spw-topbar__logo-link:active {
+  opacity: 0.9;
+}
+.spw-topbar__logo-link:focus-visible {
+  outline: 3px solid white;
+  outline-offset: 3px;
+  box-shadow: 0 0 0 5px black;
 }
 .spw-topbar__logo-icon {
   width: 37px;
   height: 41px;
+  min-width: 37px;
+}
+.spw-topbar ::slotted([slot=right]) {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .spw-topbar ::slotted([slot=right]) {
+    display: block;
+  }
+}
+.spw-topbar ::slotted([slot=right-mobile]) {
+  display: block;
+}
+@media (min-width: 1024px) {
+  .spw-topbar ::slotted([slot=right-mobile]) {
+    display: none;
+  }
+}
+.spw-topbar .spw-topbar__site-title,
+.spw-topbar ::slotted([slot=logo]) {
+  font-family: "Arial";
+  font-weight: bold;
+  letter-spacing: -1px;
+  color: var(--spw-colors-support-grey-grey-900);
+  line-height: 1.1;
+  font-size: 22px;
+}
+@media (min-width: 1024px) {
+  .spw-topbar .spw-topbar__site-title,
+  .spw-topbar ::slotted([slot=logo]) {
+    font-size: 30px;
+  }
+}
+.spw-topbar__title-border {
+  position: absolute;
+  height: 4px;
+  width: 100%;
+  display: block;
+  bottom: -16px;
+  left: 0;
 }
 .spw-topbar__title {
+  display: none;
   max-width: 160px;
   font-weight: normal;
   color: var(--spw-colors-support-grey-grey-600);
   font-size: 12px;
   line-height: 1.1;
+}
+@media (min-width: 1024px) {
+  .spw-topbar__title {
+    display: block;
+  }
 }