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

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

@@ -0,0 +1,49 @@
+import { Host, h } from "@stencil/core";
+export class SpwSidenav {
+    /** Ferme tous les items ouverts */
+    async closeAll() {
+        const items = this.el.querySelectorAll('spw-sidenav-item');
+        items.forEach(item => { var _a; return (_a = item.close) === null || _a === void 0 ? void 0 : _a.call(item); });
+    }
+    render() {
+        return (h(Host, { key: 'c248ceeea7443805b4471b20553fe005a71af44d' }, h("nav", { key: '32ac7857681d12475f5c09d61d21e9c1c0645a00', class: "spw-sidenav" }, h("slot", { key: '0e88515dba47eb47d0db02eb6c7b45fe9e341db9' }))));
+    }
+    static get is() { return "spw-sidenav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-sidenav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-sidenav.css"]
+        };
+    }
+    static get methods() {
+        return {
+            "closeAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NodeListOf": {
+                            "location": "global",
+                            "id": "global::NodeListOf"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Ferme tous les items ouverts",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -44,7 +44,7 @@ export class SpwSkeleton {
         }
     }
     render() {
-        return (h(Host, { key: 'dc1d4fbea06557e09954e5006267dbd9e7e5b49f' }, h("div", { key: '0ebff5226d490759c099556f6f0f0bcc0d4e1746', class: "spw-skeleton" }, this.renderVariant(), h("slot", { key: 'be2621647c254e502452007f49d6d31566a4b2d9' }))));
+        return (h(Host, { key: 'baf6617e7f6f8d16bc09d9ed86ddfb299a23f94a' }, h("div", { key: '089813b4d4cdeb5d8e9737ed121df936711a8de6', class: "spw-skeleton" }, this.renderVariant(), h("slot", { key: 'bc44a9531c3922c90137cf8110ebcf80cc6f3f16' }))));
     }
     static get is() { return "spw-skeleton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwSliderItem {
     render() {
-        return (h(Host, { key: 'c938284ccf2f8a59ae9cc4eb5239611383d0200e' }, h("div", { key: '055adbd2aab6e5463be6b9bcf908d2dfa47f413d', class: "spw-slider-item" }, h("slot", { key: 'dd5e639fb9af8ed604ca931c7015530886516cad' }))));
+        return (h(Host, { key: 'c1227e735448eaea0fa907b30fcefb1c707be454' }, h("div", { key: '276be5b2365d43ae37f11d217a321f0fdddf0f90', class: "spw-slider-item" }, h("slot", { key: '594ebb9169c11d0e08debc43f12dce462cbc4ff3' }))));
     }
     static get is() { return "spw-slider-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -394,7 +394,7 @@ export class SpwSlider {
             }, onClick: () => this.handleDotClick(i), "aria-label": `Slide ${i + 1}`, "aria-current": i === this.activeIndex ? 'true' : 'false' })))));
     }
     render() {
-        return (h(Host, { key: '8dc34409f1e66313b2b34a8b1f09d136dabe0b16' }, h("div", { key: '7292a94ec194eda34acb54e4ca44f6b86c8edea8', class: this.elementClass, style: { height: `${this.currentHeight}px` }, tabindex: "0", role: "region", "aria-label": this.accAriaLabel }, h("div", { key: '3da03e2be636e7f5bda5c0e6b9fbc3299e523b0e', class: "spw-slider__track" }, h("slot", { key: '58df3b1d27714e2c5aef081269dbd66d52f5f0ff' })), this.showArrows && (h("div", { key: '025ea96fce9080eb7fa7940bb491361393c09ca6', class: "spw-slider__navigation" }, h("button", { key: 'dcc9e6025100f79510581e5f3cf67b1598f3c8a8', class: "spw-slider__arrow spw-slider__arrow--prev", onClick: this.handlePrevious, disabled: this.activeIndex === 0, "aria-label": this.previousSlideText }, h("spw-icon", { key: '29eaeda876748b69b333c58e512d388121b59693', icon: "fa-chevron-left" })), h("button", { key: 'd77142a22e369412632dfcc1c1af7d3e4bdd5999', class: "spw-slider__arrow spw-slider__arrow--next", onClick: this.handleNext, disabled: this.activeIndex === this.totalSlides - 1, "aria-label": this.nextSlideText }, h("spw-icon", { key: '47c94e169d9c8b44725df1eb7c907914bbc554ec', icon: "fa-chevron-right" })))), this.dotsPosition === 'inside' && this.renderDots()), this.dotsPosition === 'outside' && (h("div", { key: '49e8c665ee475e25c2cd2d41c93a6c34b0547b84', class: "spw-slider__dots-container" }, this.renderDots())), this.showAutoplayToggle && (h("div", { key: 'd753476a4b1de6a0bb830563ec43e4be7c0503ec', class: "spw-slider__autoplay-toggle" }, h("spw-checkbox", { key: '51fd35c27c80d61def02c8f094e55a3fac5b78d1', variant: "toggle", checked: this.isAutoplayActive, onSpwChange: this.handleAutoplayToggle }, this.autoplayText)))));
+        return (h(Host, { key: 'e3cdcffa3cd1e788cb9ba3b14b54b93154658998' }, h("div", { key: '4e5895bcfa1c51594acd207537bdb6b793609f0c', class: this.elementClass, style: { height: `${this.currentHeight}px` }, tabindex: "0", role: "region", "aria-label": this.accAriaLabel }, h("div", { key: 'ee4be86960ea0cdf99f105d34a2b511a1a2ef7c9', class: "spw-slider__track" }, h("slot", { key: '9324d09e7496a54d2f70684c815a7b833668d3ef' })), this.showArrows && (h("div", { key: 'f817cf37896af468a2a595ebff223457bcb80622', class: "spw-slider__navigation" }, h("button", { key: '9002d2d66e93dc132a7c054931a259559e8e2398', class: "spw-slider__arrow spw-slider__arrow--prev", onClick: this.handlePrevious, disabled: this.activeIndex === 0, "aria-label": this.previousSlideText }, h("spw-icon", { key: '881b9786ec4c1bad320800688a99c1cdd05864f7', icon: "fa-chevron-left" })), h("button", { key: '531a890269a510ce25cbaaac99d6a7b556ebdbd5', class: "spw-slider__arrow spw-slider__arrow--next", onClick: this.handleNext, disabled: this.activeIndex === this.totalSlides - 1, "aria-label": this.nextSlideText }, h("spw-icon", { key: '67da2f2695217740053fbf13879825fc25f8a68a', icon: "fa-chevron-right" })))), this.dotsPosition === 'inside' && this.renderDots()), this.dotsPosition === 'outside' && (h("div", { key: '37854071cc07c7b649af836b6ee4d23009aa3ccc', class: "spw-slider__dots-container" }, this.renderDots())), this.showAutoplayToggle && (h("div", { key: 'b156e6623b0a19012574d538ba41bd2a87d97fd0', class: "spw-slider__autoplay-toggle" }, h("spw-checkbox", { key: '0613184d17c2426e8ef6a9c967af13b462b99e9e', variant: "toggle", checked: this.isAutoplayActive, onSpwChange: this.handleAutoplayToggle }, this.autoplayText)))));
     }
     static get is() { return "spw-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class SpwSocials {
         this.mainTitle = 'Restez connecté';
     }
     render() {
-        return (h(Host, { key: '6ff94089395e7f04c18e6ef5a874d93f85756892' }, h("div", { key: 'c69878fbdf01d369993b8f78dc7acabb1dd93b33', class: "spw-socials" }, h("div", { key: '5ac6c685042d450dacb44dc6407147a291ab219e', class: "spw-ds-container" }, h("h2", { key: '4990f8ed609500bdc9e93e3ec484e5abb1a2caf9', class: "spw-socials__title" }, this.mainTitle), h("div", { key: 'f9d540af4a0c90a882a79cc0b53be1ae4d707015', class: "spw-socials__content" }, h("slot", { key: '9d35b25004b30bed178be0dea7de3e5afb335881' }))))));
+        return (h(Host, { key: '37ed3a03b7350050ba217872a8a8ee9fcdb747b2' }, h("div", { key: '887f4e81d701a19b99317dead5eacc7f11f64ac3', class: "spw-socials" }, h("div", { key: '037ab94e4f7c748854fbc6375d282bcef10603f2', class: "spw-ds-container" }, h("h2", { key: '4722c336fefac98c035b261e9e03823e6f548975', class: "spw-socials__title" }, this.mainTitle), h("div", { key: 'd3eb5112d91db92e9fff52e51339c31d6085fa9b', class: "spw-socials__content" }, h("slot", { key: '535992ccec35ea2249f67c62491dda3defd40299' }))))));
     }
     static get is() { return "spw-socials"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-table/spw-table-body/spw-table-body.js

@@ -33,7 +33,7 @@ export class SpwTableBody {
         });
     }
     render() {
-        return (h("tbody", { key: '8eca6f932be8e3f41d7f5ab71ec74f998c79ef7b', part: "tbody" }, h("slot", { key: 'c61936337141cce8f2cc73dffd117b6cf01e5bca' })));
+        return (h("tbody", { key: 'a9e204e735c6df8af028d0973e6e9d093b724d1f', part: "tbody" }, h("slot", { key: 'd4ef5fb72710dba922b4ee232b83dc34c4c85fce' })));
     }
     static get is() { return "spw-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-table/spw-table-cell/spw-table-cell.js

@@ -87,7 +87,7 @@ export class SpwTableCell {
             }
             attrs.style = stickyStyles;
         }
-        return (h("td", Object.assign({ key: 'b0d327adc0c9619af3a61343e229116d8f462c93' }, attrs), h("slot", { key: '06cb1436fea375aeded6ed127582976774661f68' })));
+        return (h("td", Object.assign({ key: 'dd15e98018e126db78124d0a36ecc3ada952cd7d' }, attrs), h("slot", { key: '34b37091089de46915e0947ed69800d81a45ba69' })));
     }
     static get is() { return "spw-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwTableContainer {
     render() {
-        return (h(Host, { key: 'a5803eebb686b9e1c9468bd86fb8e5df8f19b1b8' }, h("div", { key: '416427397e66484228354f651dbd82e7c61f6269', class: "spw-table-container" }, h("slot", { key: 'fba054a19a3d613df8f439b7fb78febf2a178b6f' }))));
+        return (h(Host, { key: 'ba32d8351f460f3eb7a5243f8b7a838afa85fe71' }, h("div", { key: '515717d2400c7aefb573e0e5f3b1f69be364c020', class: "spw-table-container" }, h("slot", { key: '8d168442cd75f0556cb369e382fde91d7ecb223d' }))));
     }
     static get is() { return "spw-table-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-table/spw-table-footer/spw-table-footer.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTableFooter {
     render() {
-        return (h("div", { key: '92f118144c69b82db4ec2900c2249ea39c6dc19e', class: "spw-table-footer" }, h("slot", { key: '349546976cd454047bbaf008114c3b2d1f0ff251', name: "left" }), h("slot", { key: '0e47a990a5c9366354d30ebfbb80156fb2edff8e', name: "center" }), h("slot", { key: 'be21d0063070072a820c9ce061d75abb2cc99c0c', name: "right" })));
+        return (h("div", { key: '12ca1ccd23f29a2ff5ce4f83d5c95c144e3ed05b', class: "spw-table-footer" }, h("slot", { key: '1f0c922c3ebffeb4e03cc038ad9283531986ba7a', name: "left" }), h("slot", { key: 'b35dc377529b095c7aeb421d94b38386f7533567', name: "center" }), h("slot", { key: '668cab6205dcc48004e0e9a2ec2b1605ccfe26a2', name: "right" })));
     }
     static get is() { return "spw-table-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-table/spw-table-head/spw-table-head.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTableHead {
     render() {
-        return (h("thead", { key: 'f242ce7e1550c4a49580fa591b4a6c9b61a3193d', part: "thead" }, h("slot", { key: '25b91ffa697555d2f02a9211d81ef490572b2448' })));
+        return (h("thead", { key: 'd957840628bb81aefe0d028e2b87bcdcb70dbefb', part: "thead" }, h("slot", { key: '3d0d79e4b275b2ee7241e7d7f39d2fbb81041dd3' })));
     }
     static get is() { return "spw-table-head"; }
     static get encapsulation() { return "shadow"; }

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

@@ -65,10 +65,10 @@ export class SpwTableHeader {
             }
             attrs.style = stickyStyles;
         }
-        return (h("th", Object.assign({ key: 'ce7cc74eed9c6938e861a8a0d655136d26a06aa7' }, attrs), h("div", { key: '083f10b3048ac936f2bb75880550093bd98c1155', class: {
+        return (h("th", Object.assign({ key: '49901ac1ee181ba20ed0a3034df8e66806ae1e54' }, attrs), h("div", { key: '340392945a5dd4d4c60ec8f0dd3b1e11190e106a', class: {
                 'spw-table-header__content': true,
                 'spw-table-header__content--is-sorted': this.isSorted,
-            } }, h("slot", { key: '4613e31e43c8614664f44415ee08ac516dae162b' }), h("div", { key: '35472e4873913118019d977ce34f1712946b975d', class: "spw-table-header__icons" }, h("slot", { key: 'a7fba819781c4934f310957d4b45bef79b0f76ea', name: "filters" }), (this.tooltipTitle || this.tooltipText) && (h("spw-tooltip", { key: '5f3fc7ac464ff405e7cc806e7e5f05caadda089c', "tooltip-title": this.tooltipTitle, "tooltip-text": this.tooltipText }, h("spw-icon", { key: 'f5b37045e1747cad5a6ea2e7a1479959a67d7d37', variant: "fa-regular", icon: "fa-circle-question" }))), this.sortable && (h("spw-icon", { key: 'ee41a3e217eea013939681a48def032d6aebac45', class: "spw-table-header__sort-icon", icon: this.isSorted ? (this.sortDirection === 'asc' ? 'fa-arrow-up-short-wide' : 'fa-arrow-down-wide-short') : 'fa-arrow-up-arrow-down' }))))));
+            } }, h("slot", { key: '3cdadf97c4a97d6f7f1fe8778ef3509c761a15d2' }), h("div", { key: 'aad3d5b6d8465ca5cbec4fb056e70fbb99cbec9d', class: "spw-table-header__icons" }, h("slot", { key: '3775fb68e7a129db0c1bb6f021ca6ee475a0b8fb', name: "filters" }), (this.tooltipTitle || this.tooltipText) && (h("spw-tooltip", { key: '04a1b70d162ec187ead78f6ea90f4773dc605124', "tooltip-title": this.tooltipTitle, "tooltip-text": this.tooltipText }, h("spw-icon", { key: '724d62b0d6c8532bd50e486778ab5cc43c45ed19', variant: "fa-regular", icon: "fa-circle-question" }))), this.sortable && (h("spw-icon", { key: 'ff9ea419a7fe8f8fe10e8bafb67c20278fbf6c94', class: "spw-table-header__sort-icon", icon: this.isSorted ? (this.sortDirection === 'asc' ? 'fa-arrow-up-short-wide' : 'fa-arrow-down-wide-short') : 'fa-arrow-up-arrow-down' }))))));
     }
     static get is() { return "spw-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-table/spw-table-row/spw-table-row.js

@@ -49,7 +49,7 @@ export class SpwTableRow {
         };
     }
     render() {
-        return (h(Host, { key: 'd63972338e3a369fcf4283785dcb0a6c9a951bca', part: "row" }, h("tr", { key: 'b0360654aff1fa225205e1d14559d4c870ee2d4b', class: this.elementClass, part: "row" }, h("slot", { key: '2a13f9383b5edf0ba26e6666cb81f5c7cc1d38bb' }))));
+        return (h(Host, { key: '2e5b39c7bd307e27d424b9b7607fb42935e4498c', part: "row" }, h("tr", { key: '43ce9efb0946dc89c6bf783da7073406a6fd6b76', class: this.elementClass, part: "row" }, h("slot", { key: '16c69e9d52c86d0286ae3fc42d9c0abc5c339121' }))));
     }
     static get is() { return "spw-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-table/spw-table-sidebar/spw-table-sidebar.js

@@ -123,7 +123,7 @@ export class SpwTableSidebar {
     }
     render() {
         const style = Object.assign(Object.assign({}, (this.observedHeight !== undefined && { height: `${this.observedHeight}px` })), { '--spw-table-sidebar-width': `${this.sidebarWidth}px` });
-        return (h(Host, { key: 'e4a9d1a354e32ef75efd8ef35f43c762b076e870', style: style, class: this.hostClass }, h("nav", { key: 'bb90239cc30b9eca49ebf0c894aa49e5b58c6aef', class: this.elementClass }, h("span", { key: '156cb5e97301822b609b589976cea3863fdb7b54', class: "spw-table-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: '8fc362d585fbcc5a5665794fea821cbcb96caaa7', icon: "fa-chevron-left" })), h("div", { key: '7482227bda0933747f31f9b22619ed38a6a3079f', class: "spw-table-sidebar__mini", onClick: this.toggleSidebar }, h("spw-icon", { key: '4a83771c96c9c27f23cb4b1679894875fd644530', icon: this.sidebarIcon, variant: "fa-regular" })), h("div", { key: '60bad1c24dee5c603ac3ec6fbe853ecced481cc2', class: "spw-table-sidebar__content" }, h("div", { key: '1a638e4991e67185a86417792f4454da4a145451', class: "spw-table-sidebar__header" }, h("span", { key: 'fc0f7b5a002d3fd73bd1a5991048c90dece45398', class: "spw-table-sidebar__header-title" }, h("spw-icon", { key: '86dae93102277fc63cc260f3d3d28fa538d07eb9', icon: this.sidebarIcon, variant: "fa-regular" }), " ", this.sidebarTitle), this.hasReset && (h("spw-button", { key: '97f4c00f9c1ca32d01292261c661134c7e86ee5a', class: "spw-table-sidebar__header-reset", onClick: this.handleReset, type: "button", variant: "secondary", size: "small", isIconOnly: true, icon: this.resetIcon }))), h("div", { key: '88281ad76c136273bde8e9ac8217503cfd10eaca', class: "spw-table-sidebar__scrollable-content" }, h("slot", { key: 'd37272c7272d51abe6c972882809bad6b4ffe7fd' })), h("div", { key: '65eb9775f2c0a53797ee59bda9a134e3551f6fd1', class: "spw-table-sidebar__footer" }, h("slot", { key: '62999f25d68bc356b3033c3bd4943d0a79611740', name: "sidebar-footer" }))))));
+        return (h(Host, { key: 'fb4374fe40ceeefaaf11ae09e93de670caded7c6', style: style, class: this.hostClass }, h("nav", { key: '11f9cf9fab69bd57a4d7580d4f3cdeb5c14a79c0', class: this.elementClass }, h("span", { key: '47b5f9bdf217683e357e04851bd5a01f7f600b32', class: "spw-table-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: '3b837e3d4d2292218a4d5ea91f7ff2c3dc7c8552', icon: "fa-chevron-left" })), h("div", { key: 'd9a7679ed519a5734c89ee529b798b44a897badf', class: "spw-table-sidebar__mini", onClick: this.toggleSidebar }, h("spw-icon", { key: '6d21fbc9dcbd8aadbbaf44307b0fb6f1b7818410', icon: this.sidebarIcon, variant: "fa-regular" })), h("div", { key: '07eb451fd29dedf0c39bd9c5bb132968a184ced6', class: "spw-table-sidebar__content" }, h("div", { key: '43fd77c40dabedb907fd8cc936e97776f582164b', class: "spw-table-sidebar__header" }, h("span", { key: '0142aaa659a39687f7b3c6da39f01285c602b59d', class: "spw-table-sidebar__header-title" }, h("spw-icon", { key: '25b7139651b3832fab1543d43fe9252b1b316010', icon: this.sidebarIcon, variant: "fa-regular" }), " ", this.sidebarTitle), this.hasReset && (h("spw-button", { key: 'c03787c7c5faa815479b641715ce560db0fe3418', class: "spw-table-sidebar__header-reset", onClick: this.handleReset, type: "button", variant: "secondary", size: "small", isIconOnly: true, icon: this.resetIcon }))), h("div", { key: '66e976bf79f4cf19678b3f48c325ec6ca04d7ba2', class: "spw-table-sidebar__scrollable-content" }, h("slot", { key: '8eb07f0a9b371f6ee63663a30cff72be20967f1c' })), h("div", { key: '3c085ce9a9acef989a0b3d86759a0fa89c49469a', class: "spw-table-sidebar__footer" }, h("slot", { key: 'c7ad275117018bec8f1e42325d0335bf6d56b5d8', name: "sidebar-footer" }))))));
     }
     static get is() { return "spw-table-sidebar"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

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

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

@@ -582,6 +582,12 @@ template {
   height: 60px;
   font-size: 18px;
 }
+.spw-text-field--disabled .spw-text-field__number-btn {
+  border-color: var(--spw-color-themes-grey-grey-400);
+}
+.spw-text-field--is-error .spw-text-field__number-btn {
+  border-color: var(--spw-colors-states-error-error-300);
+}
 .spw-text-field--has-controls .spw-text-field__input {
   border-radius: 0;
   border-left: none;

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

@@ -282,7 +282,7 @@ export class SpwTextField {
         };
     }
     render() {
-        return (h("div", { key: '5869c33237fa6f602e1e14952e5907c84f033cc3', class: this.elementClass }, this.label && (h("spw-field-label", { key: '45aa105846bb5e410ed0c6eed3d7b885c85e2e80', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '2291b70d8173c62784789acfc3fe33444f537a71', class: "spw-text-field__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'd94f8a1a1330ac41e5005f39e6895a73758db0a9', class: "spw-text-field__container" }, this.type === 'number' && this.hasControls && (h("button", { key: '22f2bf66c017b29250754153a1fe1c92c974e392', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--decrement", onClick: () => this.decrement(), disabled: this.disabled || (this.min != null && Number(this.value) <= this.min), "aria-label": this.accAriaLabelDecrement }, h("spw-icon", { key: '0b4e07fe06704629a758657b71ef05a97192579b', icon: "fa-minus" }))), h("div", { key: 'a68d68dbca4b903824d9e3c281865288ac1e964c', class: "spw-text-field__input-container" }, h("input", { key: 'f5bd3a5e1995dbb1a6fa35b09e1b6f22683ff710', class: "spw-text-field__input", ref: el => (this.inputElement = el), type: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'text' : this.type, inputMode: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'decimal' : undefined, min: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.min : undefined, max: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.max : undefined, step: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.step : undefined, placeholder: this.placeholder, "aria-label": this.accAriaLabel || this.name, disabled: this.disabled, name: this.name, id: this.name, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleInput(event), onKeyDown: event => this.handleKeyDown(event) }), (this.isSearch || this.isClearIconVisible) && (h("div", { key: 'd6b12c440ed633c0f332a7f8fb4a241fca505016', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '98a87e1ce6d02571796116aa7588378a0c34eebb', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: '2a4b6cebc5fe099e3d5375d308332267d86dec59', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && !this.hasSubmitButton && h("spw-icon", { key: '5e3838098d4bd150306215ce71d247d48e611a01', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" }), this.hasSubmitButton && (h("button", { key: 'd1bbf030d7769d8afa31e43b2c2d5769f7588c55', type: "button", class: "spw-text-field__submit", onClick: () => this.handleSubmit(), "aria-label": "Rechercher" }, h("spw-icon", { key: '790f1e3032a95b06de87d6deb9c77adf0fb69ad7', icon: "fa-magnifying-glass" })))))), this.type === 'number' && this.hasControls && (h("button", { key: '47baef8589df4aa6e6d065f19d7d3732bb49ed75', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--increment", onClick: () => this.increment(), disabled: this.disabled || (this.max != null && Number(this.value) >= this.max), "aria-label": this.accAriaLabelIncrement }, h("spw-icon", { key: 'c4b681cca4a413ddf96171b5dd2d3eaf7aa80c47', icon: "fa-plus" }))), this.indicator && h("div", { key: 'e66969d09f31e4a15139ff02d721a4e4827d6dc9', class: "spw-text-field__indicator" }, this.indicator)), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: 'e4bd9a7658360bb809fea011c1be848d410fd4ac', class: this.elementClass }, this.label && (h("spw-field-label", { key: '966ebc8ec9fc846bb3bbddd5872ea9dadf57f559', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '89cda5a205c9e6ebbc559e244df8b2f09af824a6', class: "spw-text-field__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'b9117308948f17fef393c1342e02b838cbb8d1f3', class: "spw-text-field__container" }, this.type === 'number' && this.hasControls && (h("button", { key: '3e9e5115840166cf7d725f6be9353d820ab49752', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--decrement", onClick: () => this.decrement(), disabled: this.disabled || (this.min != null && Number(this.value) <= this.min), "aria-label": this.accAriaLabelDecrement }, h("spw-icon", { key: 'cccf7aa4bce081ed985bd29a90d9d9f0fcd7df87', icon: "fa-minus" }))), h("div", { key: 'ce2962bd886e188465abfb7e882ca1e6bebc1844', class: "spw-text-field__input-container" }, h("input", { key: '9266a73c59ff0625e9bb444af04f1966ae3295bf', class: "spw-text-field__input", ref: el => (this.inputElement = el), type: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'text' : this.type, inputMode: this.type === 'number' && (this.decimalPrecision != null || this.mask != null) ? 'decimal' : undefined, min: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.min : undefined, max: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.max : undefined, step: this.type === 'number' && this.decimalPrecision == null && this.mask == null ? this.step : undefined, placeholder: this.placeholder, "aria-label": this.accAriaLabel || this.name, disabled: this.disabled, name: this.name, id: this.name, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleInput(event), onKeyDown: event => this.handleKeyDown(event) }), (this.isSearch || this.isClearIconVisible) && (h("div", { key: '2e0e41f825ef7b54057e9f8eac56dbbd1692b0eb', class: "spw-text-field__icons" }, this.isClearIconVisible && (h("span", { key: '8c289f6d07ab2a494b8379bb4dd96b7913b636dc', class: "spw-text-field__clear", onClick: () => this.handleClear() }, h("spw-icon", { key: '45cee755cd23114506a58e6ed8f84547e6531a47', class: "spw-text-field__icon spw-text-field__icon--clear", icon: "fa-xmark" }))), this.isSearch && !this.hasSubmitButton && h("spw-icon", { key: '6e50f234680a9b77143dbd8d247afab10b262976', class: "spw-text-field__icon spw-text-field__icon--search", icon: "fa-magnifying-glass" }), this.hasSubmitButton && (h("button", { key: '4fbcdab588dce86c0498badad56cd378cf1bede5', type: "button", class: "spw-text-field__submit", onClick: () => this.handleSubmit(), "aria-label": "Rechercher" }, h("spw-icon", { key: '9d0df46e6f24a1c321ccdd9dd883e18907241017', icon: "fa-magnifying-glass" })))))), this.type === 'number' && this.hasControls && (h("button", { key: '415467e32e7940ccdb3c79b6eac874e1a249c977', type: "button", class: "spw-text-field__number-btn spw-text-field__number-btn--increment", onClick: () => this.increment(), disabled: this.disabled || (this.max != null && Number(this.value) >= this.max), "aria-label": this.accAriaLabelIncrement }, h("spw-icon", { key: 'f854ab9b9b580b0e995991d5ae8dfaa4e1258caa', icon: "fa-plus" }))), this.indicator && h("div", { key: '23924b26b55b036341038b3a6dd18df9fd3d650e', class: "spw-text-field__indicator" }, this.indicator)), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-text-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,7 +97,7 @@ export class SpwTextarea {
         };
     }
     render() {
-        return (h("div", { key: '83625aa979ac1eb4d28c656dad54b105ff481be7', class: this.elementClass }, this.label && (h("spw-field-label", { key: 'f0783d52a5ff1b3972588672314c117bdf3e5396', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'a914637fb2443731874d2d924e93812d131be6b3', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '6493f6c3a7ac951bd0ab0d921297edd6188ad250', class: "spw-textarea__container" }, h("textarea", { key: '53a1ee705c79dfb677088ae6dbacdd74bcf51ae9', class: "spw-textarea__input", ref: el => (this.textareaElement = el), value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h("div", { key: '5b930e7ce813970305f482400ba5c86b09bbe3b7', class: this.elementClass }, this.label && (h("spw-field-label", { key: '88877f24e5a0835dc4c06eb7cc44b64c35870566', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '311d473c1a77c266aa473ade76168b83a61fbc65', class: "spw-textarea__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'cdade3d3b5dde315863a4d51a99904b1a4c4e17c', class: "spw-textarea__container" }, h("textarea", { key: '1ea8a011713f49a21d6f452acb5024899471756a', class: "spw-textarea__input", ref: el => (this.textareaElement = el), value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
     }
     static get is() { return "spw-textarea"; }
     static get encapsulation() { return "shadow"; }

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

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

@@ -362,6 +362,40 @@ template {
 
 :host {
   display: block;
+  overflow: hidden;
+}
+
+:host(.--light),
+:host(.--big) {
+  margin-top: 6px;
+}
+
+@media (max-width: 1023px) {
+  :host(.--reveal-on-hover) {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  :host(.--reveal-on-hover) {
+    display: grid;
+    grid-template-rows: 0fr;
+    margin-top: 0;
+    opacity: 0;
+    transition: grid-template-rows 0.25s ease-in, margin-top 0.25s ease-in, opacity 0.35s 0.05s ease-in;
+  }
+}
+
+@media (min-width: 1024px) {
+  :host(.--reveal-on-hover.--revealed) {
+    grid-template-rows: 1fr;
+    margin-top: 6px;
+    opacity: 1;
+  }
+}
+
+:host(.--reveal-on-hover) .spw-tile-description {
+  min-height: 0;
+  overflow: hidden;
 }
 
 :host(.--icon) .spw-tile-description {

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

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: 'f99caa90ebcbb8e1cc6523a5d78b6bd549bd3b78', class: "spw-tile-title" }, h("slot", { key: '553527800ce162bc3d7d7350f47784d0bf80ca1d' })));
+        return (h("h3", { key: 'ae2f43d85a1b248315b0866d301c30bfb3e3adc2', class: "spw-tile-title" }, h("slot", { key: '97d54e933b52987434a5bc3c5efd535cfcbefc86' })));
     }
     static get is() { return "spw-tile-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -415,9 +415,6 @@ template {
   height: 100%;
   z-index: 2;
 }
-.spw-tile--big:hover:before, .spw-tile--light:hover:before {
-  opacity: 0.3;
-}
 .spw-tile__overlay, .spw-tile__image {
   position: absolute;
   width: 100%;
@@ -427,55 +424,68 @@ template {
 }
 .spw-tile__overlay {
   z-index: 2;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 65%, rgba(0, 0, 0, 0.75) 100%);
+  height: calc(100% + 48px);
+  bottom: 0;
+  top: auto;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--shades-alpha-dark-alpha-dark-alpha-900, rgba(0, 0, 0, 0.87)) 100%);
 }
 .spw-tile__image {
   z-index: 1;
   object-fit: cover;
 }
 .spw-tile__button {
-  background: white;
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  background: transparent;
   width: 48px;
   height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--spw-ds-primary);
+  color: white;
   border-radius: 50%;
   transition: all 0.2s ease-in;
-  border: 2px solid transparent;
+  border: 3px solid white;
   font-size: 20px;
   margin-top: 12px;
+  z-index: 2;
 }
 .spw-tile:hover .spw-tile__button {
-  border-color: white;
-  color: white;
-  background: transparent;
+  background: rgba(0, 0, 0, 0.5);
 }
 
-.spw-tile--icon .spw-tile__content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0 12px;
-  text-align: center;
-}
-.spw-tile--icon .spw-tile__content ::slotted(spw-icon) {
-  font-size: 32px;
-  color: var(--spw-ds-primary);
-}
 .spw-tile--light .spw-tile__content, .spw-tile--big .spw-tile__content {
   position: absolute;
   z-index: 3;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0;
   padding: 24px;
   bottom: 0;
   left: 0;
   width: 100%;
 }
+.spw-tile--big.spw-tile--hoverable .spw-tile__content {
+  padding-right: 84px;
+}
 .spw-tile--light .spw-tile__content {
   text-align: center;
   padding-bottom: 24px;
+}
+.spw-tile__content-inner {
+  position: relative;
+  z-index: 3;
+  flex: 1;
+}
+.spw-tile--icon .spw-tile__content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 12px;
+  text-align: center;
+}
+.spw-tile--icon .spw-tile__content-inner ::slotted(spw-icon) {
+  font-size: 32px;
+  color: var(--spw-ds-primary);
 }

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

@@ -9,23 +9,24 @@ export class SpwTile {
         this.target = '_self';
         /** Texte alternatif de l'image de fond */
         this.imageAlt = '';
-        /** Opacité de l'overlay (valeur entre 0 et 100) */
-        this.overlayOpacity = 100;
+        /** Masque la spw-tile-description et la révèle au hover (uniquement pour la variante light et big - masquée en mobile) */
+        this.revealDescription = true;
     }
-    componentWillLoad() {
+    componentDidLoad() {
         this.applyVariantToChildren();
     }
     slotChanged() {
         this.applyVariantToChildren();
     }
     applyVariantToChildren() {
-        requestAnimationFrame(() => {
-            const variantClass = `--${this.variant}`;
-            const titleElement = this.el.querySelector('spw-tile-title');
-            const descriptionElement = this.el.querySelector('spw-tile-description');
-            titleElement && titleElement.classList.add(variantClass);
-            descriptionElement && descriptionElement.classList.add(variantClass);
-        });
+        const variantClass = `--${this.variant}`;
+        const titleElement = this.el.querySelector('spw-tile-title');
+        const descriptionElement = this.el.querySelector('spw-tile-description');
+        titleElement && titleElement.classList.add(variantClass);
+        if (descriptionElement) {
+            descriptionElement.classList.add(variantClass);
+            descriptionElement.classList.toggle('--reveal-on-hover', this.revealDescription && (this.variant === 'light' || this.variant === 'big'));
+        }
     }
     get elementClass() {
         return {
@@ -33,6 +34,7 @@ export class SpwTile {
             'spw-tile--hoverable': !!this.href,
             [`spw-tile--${this.variant}`]: true,
             [`spw-tile--height-${this.height}`]: true,
+            'spw-tile--reveal-description': this.revealDescription && (this.variant === 'light' || this.variant === 'big'),
         };
     }
     onMouseEnter() {
@@ -46,6 +48,10 @@ export class SpwTile {
         if (titleElement && this.href) {
             titleElement.classList.toggle('--hovered', isHovered);
         }
+        const descriptionElement = this.el.querySelector('spw-tile-description');
+        if (descriptionElement && this.revealDescription && (this.variant === 'light' || this.variant === 'big')) {
+            descriptionElement.classList.toggle('--revealed', isHovered);
+        }
     }
     render() {
         const { href, target } = this;
@@ -56,7 +62,7 @@ export class SpwTile {
                 href,
                 target,
             };
-        return (h(Host, { key: '89a1d7890f33b4277fe290561b4478b283532c2c' }, h(TagType, Object.assign({ key: '23faf83b253d66ba49ca510a3a46eace74fa52fa' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: 'ef2de37dddbed6327ccbfe8477b4c9d298e30004' }, h("div", { key: 'ec4a36c628552e8e98a01e35eea34d7a79e75767', class: "spw-tile__overlay", style: { opacity: `${this.overlayOpacity / 100}` } }), h("img", { key: 'ef410c766d41b6e441b0005324a0c5adf1323ff7', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: 'e23849e31aec483c8ad27b2bf06bc87cfbdb1b5c', class: "spw-tile__content" }, h("slot", { key: 'ff78c1e5b5547cf69ac606a1408d06ead6b3998e' }), this.href && this.variant === 'big' && (h("span", { key: '2a16455c519cd52fd95697392bab1f2bd6f7bc23', class: "spw-tile__button" }, h("spw-icon", { key: 'fa1aca41ab16723c6a8f3bca5d1cbed78b8f56d1', icon: "fa-chevron-right" })))))));
+        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" })))))));
     }
     static get is() { return "spw-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -190,25 +196,25 @@ export class SpwTile {
                 "attribute": "image-alt",
                 "defaultValue": "''"
             },
-            "overlayOpacity": {
-                "type": "number",
+            "revealDescription": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Opacit\u00E9 de l'overlay (valeur entre 0 et 100)"
+                    "text": "Masque la spw-tile-description et la r\u00E9v\u00E8le au hover (uniquement pour la variante light et big - masqu\u00E9e en mobile)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "overlay-opacity",
-                "defaultValue": "100"
+                "attribute": "reveal-description",
+                "defaultValue": "true"
             }
         };
     }

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: '3411a4dad7b254fb64ec6e495cddfb0a3e96bf12' }, h("div", { key: '17add3871d75777fb208e0460cefd44bd438ac70', class: this.elementClass }, h("div", { key: 'f0e0bdc7bca68101f84517cfa8acc81cbee5a708', class: "spw-timeline-item__step" }, h("div", { key: '7b240a6afcc7370957cb68fd2415d723e117faa7', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: 'ad54ebc763fbc4a22de6609545086e13a1721e4c', class: "spw-timeline-item__connector" })), h("div", { key: '07b50deacbe371184a7be1d75b234b11e91d4501', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'e09d96371e0ea9db29d5cd4c4485bd9902246a84', class: "spw-timeline-item__description-wrapper" }, h("div", { key: 'ec9797e7065e7f23915e4364f95e7ced7411ca3d', ref: el => (this.descriptionRef = el), class: {
+        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: {
                 'spw-timeline-item__description': true,
                 'spw-timeline-item__description--collapsed': !this.isDescriptionExpanded,
-            } }, this.description))), h("slot", { key: 'fe602e230db5f2efebe1700db6f0481d288b6a7d' })))));
+            } }, this.description))), h("slot", { key: '0f999df3ae5f72eb9aa2e2933bb8f5a897983d62' })))));
     }
     static get is() { return "spw-timeline-item"; }
     static get encapsulation() { return "shadow"; }