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

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

@@ -45,7 +45,7 @@ export class SpwMosaicItem {
         }
     }
     render() {
-        return (h(Host, { key: '04a1163bf00c9fa4fd26766b0010cfda8d8d2cbb' }, h("slot", { key: '5ab56c1ae0ca4d8473284fb74d318efab007d1cb' })));
+        return (h(Host, { key: '14fa107f752870d60c7fb914552c946ec2bbb492' }, h("slot", { key: '5648c75c220c24ef53d1e00a254ea768502bbd87' })));
     }
     static get is() { return "spw-mosaic-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,12 +85,30 @@ export class SpwMosaic {
             const slot = this.el.shadowRoot.querySelector('slot');
             const masonryItems = slot.assignedElements({ flatten: true });
             if (masonryItems.length > 0) {
-                // Trouver un item sans colSpan pour calculer la largeur de base d'une colonne
-                const baseItem = Array.from(masonryItems).find(item => !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile')) ||
-                    masonryItems[0];
+                const baseItem = Array.from(masonryItems).find(item => !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile'));
+                let columnWidth;
+                if (baseItem) {
+                    columnWidth = baseItem;
+                    const sizer = this.el.querySelector('.spw-mosaic__sizer');
+                    sizer === null || sizer === void 0 ? void 0 : sizer.remove();
+                }
+                else {
+                    let sizer = this.el.querySelector('.spw-mosaic__sizer');
+                    if (!sizer) {
+                        sizer = document.createElement('div');
+                        sizer.className = 'spw-mosaic__sizer';
+                        sizer.style.height = '0';
+                        sizer.style.padding = '0';
+                        sizer.style.margin = '0';
+                        sizer.style.visibility = 'hidden';
+                        this.el.appendChild(sizer);
+                    }
+                    sizer.style.width = `calc(100% / ${this.colsDesktop})`;
+                    columnWidth = sizer;
+                }
                 this.masonry = new Masonry(this.el, {
                     itemSelector: 'spw-mosaic-item',
-                    columnWidth: baseItem,
+                    columnWidth,
                     percentPosition: true,
                     gutter: 0,
                 });
@@ -117,6 +135,8 @@ export class SpwMosaic {
             this.masonry = null;
             this.initialized = false;
         }
+        const sizer = this.el.querySelector('.spw-mosaic__sizer');
+        sizer === null || sizer === void 0 ? void 0 : sizer.remove();
     }
     observeSlotChanges() {
         const slot = this.el.shadowRoot.querySelector('slot');
@@ -136,7 +156,7 @@ export class SpwMosaic {
         };
     }
     render() {
-        return (h(Host, { key: '334696b89e3164c23996672062beaeb8b278fbec' }, h("div", { key: '0548ef1fd19b768e72e3a28f890ca27f733120a6', class: this.elementClass }, h("slot", { key: '519ead1db49c101efc8c68b735b7e793e497c49c' }))));
+        return (h(Host, { key: '0ffcea1b5b38b5fd436a24dbd67936e14c435272' }, h("div", { key: '673e879305bc5c3553f5076479684415aa4ec2ae', class: this.elementClass }, h("slot", { key: 'c775b18265e25219de78c61f6a07ec3fc369d97e' }))));
     }
     static get is() { return "spw-mosaic"; }
     static get encapsulation() { return "shadow"; }

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

@@ -167,12 +167,12 @@ export class SpwPagination {
         const pages = this.calculatePageRange();
         const showPrevArrow = this.currentPage > 1;
         const showNextArrow = this.currentPage < this.totalPages;
-        const prevArrow = showPrevArrow && (h("li", { key: 'fff8c53f44ed0b24b9f150febab76934a5d0c65b', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '4683ff7b49848a970c073cdef82351246fdfaeb6', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '8100d69ffaef074a8b968bcc460609281d530cc3', icon: "fa-chevron-left" }), " ", h("span", { key: '93c2cb2edf692f6044453d6bb2bdf2e1955b1844', class: "spw-pagination__item-arrow-text" }, this.previousButtonText))));
-        const nextArrow = showNextArrow && (h("li", { key: '09438af671c9979f50e42cbc614e489f150f254e', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: 'ced63eed5e977d14495c3743a16d5c880290c47c', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: 'a197e149be556f5bd9b562720a39a96a3ee8595f', class: "spw-pagination__item-arrow-text" }, this.nextButtonText), " ", h("spw-icon", { key: 'e8b3aac239ec2b93727eea30663fbe45a71f5e69', icon: "fa-chevron-right" }))));
-        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: '5fbded02de87b04b7e4ee1db1de8c1d90f8d00e1', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '266cb6243906ff31f7d858ee468ebe1608ff3e79', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '94b6fc58726c070f08ca5e99eb3db7ecb2efa94d', icon: "fa-chevron-left" }), " ", h("span", { key: '80dba1564815128b5122de187c1b77352c6979df' }, this.previousButtonText))));
-        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: '152fb6a3265903a59328ec821ae39959fe4bf797', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '08bfa90c4f6e7255ac5e8f6c7c04c462d8e82f44', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: '87adcd5f675849d5a22c972c2d81b40157563bda' }, this.nextButtonText), " ", h("spw-icon", { key: 'e63a7f995b7a2590529fc7508c0236c2c5a6bd31', icon: "fa-chevron-right" }))));
-        const mobileArrows = (h("ul", { key: '1a1aac0686b258504e87bc0c28092a4520f1b06a', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
-        return (h(Host, { key: '38e992e659b2f495f8fb9a7179f6495ea33b65e6' }, h("div", { key: '364998499c41a1bb553a1a0a20a9b5bfb54ab5ab', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: '58f894dad67e1eb955efe7f07d4e6d618d89e425' }, h("ul", { key: 'eb88e1d90b12ee57f6291e22b8e83ebeaa3a7795' }, prevArrow, h("li", { key: '44ba0de1f0667a8a08092d437ea9083b59c9ddb9', class: "spw-pagination__input" }, h("spw-text-field", { key: '3657e851a79cb4125265dfb31c8dc6237b6ceaff', value: this.inputPageValue, type: "text", name: "pagination-input", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled })), h("li", { key: 'ce556cd4687415deb80b5cdaf649f2d3454b38e2', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " ", this.totalPages === 1 ? 'page' : 'pages'), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: 'fa0855df49e8875f7372f993c37f5470fba032ea' }, h("ul", { key: 'e344f6c415d7f464b5292c90b3ec3d57eed2687b' }, prevArrow, pages.map(({ page, class: pageClass }) => {
+        const prevArrow = showPrevArrow && (h("li", { key: '7d333273df25b9438fa0e80145b4babc5416f373', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '800cbc3d298db429d20fcc9c77befa38bfd238f8', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '2c5b47638e615d95250615bcbeceaeabc61b7618', icon: "fa-chevron-left" }), " ", h("span", { key: '8c9a30abaea93a8ef86c43d9ad495306bdd3ae65', class: "spw-pagination__item-arrow-text" }, this.previousButtonText))));
+        const nextArrow = showNextArrow && (h("li", { key: '5cfa0348113cadea051faa5886a30f3278eb8e60', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '8fbb720d8cbc184efa3a66dd52624c6a4129e27f', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: 'b2dc2426fdca52922ef8e5afbe692e35cc13cc46', class: "spw-pagination__item-arrow-text" }, this.nextButtonText), " ", h("spw-icon", { key: '5187d7a541479e0f5203244da521c9493585c4a4', icon: "fa-chevron-right" }))));
+        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: '0e130b565e414335351ba30fbd535c565690f24a', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: 'e9a089565da6a579d08c62dfba93614cfc10ec3f', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '650e490c50ffcda963d911b0edd403a99f316b1d', icon: "fa-chevron-left" }), " ", h("span", { key: '90593caca48b7b24f3b628cbc894d3715db6dc63' }, this.previousButtonText))));
+        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: 'a34f6fb90abc33828fbf5e6f7eca2639ab8ccdf0', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '1698edf9e7bd46b76af487822dccdcbf1a995ce5', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: '092efd8fc112baf2e319fb982383c3669bb65f49' }, this.nextButtonText), " ", h("spw-icon", { key: '30ae8ec9c01a9cd4583f62caf3a580fc407f0b8e', icon: "fa-chevron-right" }))));
+        const mobileArrows = (h("ul", { key: '78440007620e254bb64a9c9baf6cf43fdc0c66a2', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
+        return (h(Host, { key: '0fcbe22212f506c24e151171b9b63894abec4e58' }, h("div", { key: 'a9a02a859bfb99cb98a7f4e9f81d9f1c42012507', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: '59dfcccd9ce475f0ba723e5dc615af9c15d9c7b6' }, h("ul", { key: 'f9b650f864f69c0d1e0d7512c06876000dbd3086' }, prevArrow, h("li", { key: '7507cb7bb5ea8294cf9e0feb60026d878ce92026', class: "spw-pagination__input" }, h("spw-text-field", { key: '0ca931d42b92a97414a11b25680f4d211cf9fc56', value: this.inputPageValue, type: "text", name: "pagination-input", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled })), h("li", { key: '004fca7d0dc00d466dd355f1c65c3c1cac34f910', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " ", this.totalPages === 1 ? 'page' : 'pages'), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: '8cf6cb21d95cc70bc3e2219a8951e3e36b5335df' }, h("ul", { key: '45b5ebad43f0a4c5b15c9d72f39205eaaacc1e94' }, prevArrow, pages.map(({ page, class: pageClass }) => {
             if (page === '...') {
                 return (h("li", { class: `spw-pagination__item spw-pagination__item--dots ${pageClass}` }, h("spw-icon", { icon: "fa-ellipsis" })));
             }

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

@@ -91,7 +91,7 @@ export class SpwRadio {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: '4150ce36766b42eedc45ad03899fa25953d44b8d', class: "spw-radio" }, h("input", { key: '0aa81522086b68ee9661f571c24ba6f38057e3bf', type: "radio", ref: el => (this.inputElement = el), checked: this.internalChecked, "aria-checked": this.internalChecked ? 'true' : 'false', onChange: this.handleRadio.bind(this), name: this.name, value: this.value, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '8035c81838019557a886a591c178ec957da00c81', class: `spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`, onClick: e => this.handleRadio(e) }, h("slot", { key: '5fb0d4c0df296ffdfd177be36fb556b53ae628b7' }))), h("div", { key: '4bda2e047b2d9b199f4f16f73c7c2851cd2cc513', tabIndex: this.disabled ? -1 : 0, onClick: e => this.handleRadio(e), onKeyDown: this.handleKeydown.bind(this), role: "radio", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled, "aria-label": this.accAriaLabel || this.name, class: this.elementClass }, this.internalChecked && h("span", { key: '28c79896755d829dbd63c6402360668c98a8ba21', class: "spw-radio__circle" }))));
+        return (h("div", { key: '11f754c90756a9542669bbf9d713e22ad2cae205', class: "spw-radio" }, h("input", { key: '6c40832d777178b10e5379c795df44cd72e0d5da', type: "radio", ref: el => (this.inputElement = el), checked: this.internalChecked, "aria-checked": this.internalChecked ? 'true' : 'false', onChange: this.handleRadio.bind(this), name: this.name, value: this.value, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'b0c5b31a9d21086731d10085b329353683783a29', class: `spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`, onClick: e => this.handleRadio(e) }, h("slot", { key: 'bd88819599218cba68cac2dbafd586d0b6ae9440' }))), h("div", { key: 'd92406b7e4923b639b74764ae537326c5423dfd4', tabIndex: this.disabled ? -1 : 0, onClick: e => this.handleRadio(e), onKeyDown: this.handleKeydown.bind(this), role: "radio", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled, "aria-label": this.accAriaLabel || this.name, class: this.elementClass }, this.internalChecked && h("span", { key: '47dd83a6d282e80cde4971681da561ab1e7c10c8', class: "spw-radio__circle" }))));
     }
     static get is() { return "spw-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,7 +73,7 @@ export class SpwScrolltop {
         };
     }
     render() {
-        return (h(Host, { key: 'dffd5dfb3e0da35b1008571181bbee461179da19', class: this.hostClass }, h("spw-button", { key: '8b4fad34b061667f95de5df1d8d052198a139b1f', "is-icon-only": true, icon: "fa-chevron-up", variant: "primary", size: "medium", "acc-aria-label": this.accAriaLabel, onClick: this.scrollToTop })));
+        return (h(Host, { key: '9961dd5b7f75d3e61cc4d908623cd84d338a651e', class: this.hostClass }, h("spw-button", { key: '77ece2019b7b1a603e90ab7e7ff4754d54e59035', "is-icon-only": true, icon: "fa-chevron-up", variant: "primary", size: "medium", "acc-aria-label": this.accAriaLabel, onClick: this.scrollToTop })));
     }
     static get is() { return "spw-scrolltop"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class SpwSeparator {
         };
     }
     render() {
-        return h("div", { key: '6ab2aeb17e2f50a0bc917ede54a58a4ebc39c9fb', class: this.elementClass, style: this.style });
+        return h("div", { key: '338dcc69af19f31c0e2d42e149cf5f5a7760cba6', class: this.elementClass, style: this.style });
     }
     static get is() { return "spw-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SpwSidebarNavigationDropdown {
         };
     }
     render() {
-        return (h(Host, { key: 'b99700684df4095c48b902e418290ab46b799608', class: this.classes }, h("div", { key: '92edb187c4eee6889ef9f48868500fc0548d7379', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: 'ab41290c9483ed51976fa9f8175e915f7ac5dcce' }))));
+        return (h(Host, { key: 'f5f051303b83e74f1e4bdd31486c536ee7706e65', class: this.classes }, h("div", { key: 'a9d84ffccc7e181082513ea0cf5b9d342d882862', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '31ef27c97fc453bdb483790278df7f1d569d9a5e' }))));
     }
     static get is() { return "spw-sidebar-navigation-dropdown"; }
     static get originalStyleUrls() {

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

@@ -169,14 +169,14 @@ export class SpwSidebarNavigationItem {
     }
     render() {
         const Tag = this.href && !this.disabled && !this.openOnClick ? 'a' : 'div';
-        const iconContent = h("spw-icon", { key: '63ec14de9596159a057c03b410a67c746a4e8ffa', variant: this.iconVariant, icon: this.icon });
-        const iconDiv = (h("div", { key: 'ced35e640b0865360a4f329d81c7ce3093705003', class: "spw-sidebar-navigation-item__icon" }, this.bubble && h("span", { key: '1d8234cddbf7cd86218306f48a2ccb4e74b3ce5f', class: "spw-sidebar-navigation-item__bubble" }, this.bubble), iconContent));
+        const iconContent = h("spw-icon", { key: '177097c92bb1099f4aae1f9dc32ca27f2052f876', variant: this.iconVariant, icon: this.icon });
+        const iconDiv = (h("div", { key: 'b8c15e5c57240031e5fda1feb8cc25bbc7238385', class: "spw-sidebar-navigation-item__icon" }, this.bubble && h("span", { key: 'ab9eeff993b44168529cdf0f70263714e47b6233', class: "spw-sidebar-navigation-item__bubble" }, this.bubble), iconContent));
         const iconWithBubble = this.tooltipTitle ? (h("spw-tooltip", { cursor: this.disabled ? 'disabled' : 'pointer', "tooltip-title": this.tooltipTitle, direction: "right", visible: !this.navExpanded }, iconDiv)) : (iconDiv);
         const toggleClasses = {
             'spw-sidebar-navigation-item__dropdown-toggle': true,
             'spw-sidebar-navigation-item__dropdown-toggle--open': this.dropdownOpen,
         };
-        return (h(Tag, { key: '6a47b6fbc8ddcfc7116ba137155a53f0301127b8', class: this.classes, href: this.openOnClick ? undefined : this.href, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.openOnClick ? this.handleItemClick : undefined }, this.icon && iconWithBubble, h("div", { key: '810babe3a6966ddf99f2944ff702b6c55874b770', class: "spw-sidebar-navigation-item__content" }, h("div", { key: '8425351daa767c2529f1c56144551d6193514024', class: "spw-sidebar-navigation-item__content-label" }, h("slot", { key: '9151b15755ab6f89d38d411a3f1f24617b4b0a64' })), this.hasDropdown && (h("div", { key: 'c75983616ee771d2fd77a81d02e1d10b93ac66a0', class: toggleClasses, onClick: this.handleDropdownToggle, tabIndex: this.disabled ? -1 : 0 }, h("spw-icon", { key: '4c35cea803b47563eb84196e4e5f104cccdc4604', icon: "fa-chevron-down" }))), h("slot", { key: 'ab421b69d0f31dbaaeea2e1128b3456da27890da', name: "dropdown" }))));
+        return (h(Tag, { key: 'd2dd60756047831a36d8f329160426f76f7f0b76', class: this.classes, href: this.openOnClick ? undefined : this.href, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.openOnClick ? this.handleItemClick : undefined }, this.icon && iconWithBubble, h("div", { key: '2b48bbc0f3c2593440ed2bc7a6d66e4513263c87', class: "spw-sidebar-navigation-item__content" }, h("div", { key: '0f94fcb259d394e209db009e5bea466a75f1185b', class: "spw-sidebar-navigation-item__content-label" }, h("slot", { key: '9764e3718053efa0e0a19be13b2e3d02ba67ec77' })), this.hasDropdown && (h("div", { key: '7973abd9d6244b871dc2772a68fc7792c0ab4b88', class: toggleClasses, onClick: this.handleDropdownToggle, tabIndex: this.disabled ? -1 : 0 }, h("spw-icon", { key: 'c1ed5e1782e6b6aeb3f233a1eca8c01689c3e462', icon: "fa-chevron-down" }))), h("slot", { key: '4210a48e35ccc0d3fe91ddce03dc7890bb0aa3b5', name: "dropdown" }))));
     }
     static get is() { return "spw-sidebar-navigation-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-sidebar/spw-sidebar-navigation-separator/spw-sidebar-navigation-separator.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwSidebarNavigationSeparator {
     render() {
-        return (h(Host, { key: 'b8d8d7381fb7db4dd914e1c6e457edeb4aad195f' }, h("spw-separator", { key: 'ff2c9ed4afc9ebf6c34fc4fbc2ac25feb85fee39', class: "spw-sidebar-navigation-separator" })));
+        return (h(Host, { key: '95fb838c1497c039652cc46e8297d9cb47ad33c0' }, h("spw-separator", { key: 'aa2a50a9dfc9fe8dbd6665a9bef7c53a6cfb03e2', class: "spw-sidebar-navigation-separator" })));
     }
     static get is() { return "spw-sidebar-navigation-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class SpwSidebar {
         };
     }
     render() {
-        return (h(Host, { key: '456b9b0e397244516036e59c6b03169ba17ced97', class: this.hostClass }, h("div", { key: '9643d85115caa0ea7386deac28cb1c19d604510c', class: this.elementClass }, h("span", { key: 'aae5aa3c1030c23644588a25adbe24ffb3626425', class: "spw-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: 'e035d61a09b971531bc713efc56beae2b0f3311b', icon: "fa-chevron-right" })), h("div", { key: '3c61038fb3bd04dd980a68a6e2dc99fa3fcdef4f', class: "spw-sidebar__content" }, h("slot", { key: 'fdcb6e86d19d893537a4c5d88abed96c7b3ae486', name: "navigation-top" }), h("slot", { key: '832fb90561e152e038248a2d7182e2daf5827a25', name: "navigation-bottom" })), h("div", { key: 'b03e48eadcde46bcf52a97b6ffeb0c67bf4b558a', class: "spw-sidebar__resize-border", onClick: this.toggleSidebar }))));
+        return (h(Host, { key: '0924ab547e2aaf8e73953932fb6b986f13263c8d', class: this.hostClass }, h("div", { key: '8211ff2060aa579bdb20fd9e2803fe32a67f9de3', class: this.elementClass }, h("span", { key: '00219a4b83343bfb202950532c951bbb62141ecb', class: "spw-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: 'f7911a3a31f6644b8851e90e2291c6be36b99a7b', icon: "fa-chevron-right" })), h("div", { key: '93e59680bb556e7aadba1b34cdb7b3df19404cad', class: "spw-sidebar__content" }, h("slot", { key: 'c2b3e5c14df75d656f89c1341ac415d43e9a93c9', name: "navigation-top" }), h("slot", { key: 'dd4b7053eae40ee598c9c8cc21bce1126f6c76d5', name: "navigation-bottom" })), h("div", { key: '93c129ace7b4b955ea3694d1139828e2b80db17f', class: "spw-sidebar__resize-border", onClick: this.toggleSidebar }))));
     }
     static get is() { return "spw-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-sidenav/spw-sidenav-group/spw-sidenav-group.css

@@ -0,0 +1,379 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.3; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li {
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+:host {
+  box-sizing: border-box;
+  line-height: 1.3;
+  -webkit-text-size-adjust: 100%;
+  font-size: 100%;
+}
+
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: inherit;
+  font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
+}
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+
+:root {
+  --spw-ds-container-xl: 1200px;
+  --spw-ds-container-lg: 1024px;
+  --spw-ds-container-md: 768px;
+  --spw-ds-container-sm: 640px;
+}
+
+.spw-ds-container {
+  width: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@media (min-width: 360px) {
+  .spw-ds-container {
+    max-width: var(--spw-ds-container-sm);
+  }
+}
+@media (min-width: 768px) {
+  .spw-ds-container {
+    max-width: var(--spw-ds-container-md);
+  }
+}
+@media (min-width: 1024px) {
+  .spw-ds-container {
+    max-width: var(--spw-ds-container-lg);
+  }
+}
+@media (min-width: 1200px) {
+  .spw-ds-container {
+    max-width: var(--spw-ds-container-xl);
+  }
+}
+
+:host {
+  display: block;
+}
+
+.spw-sidenav-group__content {
+  padding-left: 30px;
+  position: relative;
+}
+.spw-sidenav-group__content:before {
+  content: "";
+  position: absolute;
+  top: 6px;
+  left: 12px;
+  width: 1px;
+  height: calc(100% - 12px);
+  background-color: var(--spw-colors-support-grey-grey-300);
+}

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

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+export class SpwSidenavGroup {
+    constructor() {
+        /** Si true, le groupe est ouvert */
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: '14c12823f32b2743ed20c831e67bc806046ad52b', class: {
+                'spw-sidenav-group': true,
+                'spw-sidenav-group--open': this.open,
+            } }, h("div", { key: '826c7e98f2230308a0332beeee261eaa9847f2a2', class: "spw-sidenav-group__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '6e6baa27d08927c42adbc9ccb4c68691c5163c5a' }))));
+    }
+    static get is() { return "spw-sidenav-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-sidenav-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-sidenav-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si true, le groupe est ouvert"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            }
+        };
+    }
+}