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

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

@@ -19,7 +19,7 @@ export class SpwLoading {
         };
     }
     render() {
-        return (h(Host, { key: '1cc27da35a115c199e6b660621dd0062b69f1570' }, h("div", { key: '93f97a9413e59f845285c75079d3e7953e7d9449', class: this.loadingClasses }, h("div", { key: '95ac4ac5a560f123b0bceb6c4485cef9324eb81f', class: "spw-loading__spinner" }), this.text && h("p", { key: '077ee7c1ca63850bf688cff7872cfcfef02dc517', class: "spw-loading__text" }, this.text))));
+        return (h(Host, { key: '76cf34de4fcf09b6fb52453822e34a6e26d6d070' }, h("div", { key: '2ce941734d29fc333e15b1a4fee1bf535a3aed4a', class: this.loadingClasses }, h("div", { key: '6fa9fef281da025e26864903e4867f96e507fe0b', class: "spw-loading__spinner" }), this.text && h("p", { key: '4cee47a4936be359ffbe432d1addcb953ae1c5b4', class: "spw-loading__text" }, this.text))));
     }
     static get is() { return "spw-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -454,12 +454,69 @@ template {
 .spw-message--compact {
   padding: 16px;
 }
+.spw-message--compact .spw-message__title-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "close close" "icon title" "right right";
+  gap: 0;
+  align-items: center;
+}
+@media (min-width: 1024px) {
+  .spw-message--compact .spw-message__title-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+}
+.spw-message--compact .spw-message__icon {
+  grid-area: icon;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 18px;
+  margin-right: 8px;
+}
 .spw-message--compact .spw-message__title {
+  grid-area: title;
   font-size: 16px;
   display: inline;
+  min-width: 0;
+}
+@media (min-width: 1024px) {
+  .spw-message--compact .spw-message__title {
+    flex: 1;
+  }
 }
-.spw-message--compact .spw-message__title spw-icon {
-  margin-right: 4px;
+.spw-message--compact .spw-message__right {
+  grid-area: right;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 12px;
+}
+@media (min-width: 1024px) {
+  .spw-message--compact .spw-message__right {
+    margin-top: 0;
+    margin-left: auto;
+    padding-left: 24px;
+  }
+}
+.spw-message--compact .spw-message__right--empty {
+  display: none;
+}
+.spw-message--compact .spw-message__close {
+  grid-area: close;
+  justify-self: start;
+  margin-bottom: 12px;
+}
+@media (min-width: 1024px) {
+  .spw-message--compact .spw-message__close {
+    justify-self: auto;
+    margin-bottom: 0;
+    margin-left: 24px;
+  }
 }
 .spw-message--default {
   background: var(--spw-message-default-background-color);

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

@@ -14,6 +14,7 @@ export class SpwMessage {
         this.size = 'default';
         this.isVisible = true;
         this.hasSlotContent = false;
+        this.hasRightSlotContent = false;
         this.handleKeyDown = (ev) => {
             if (ev.key === 'Enter') {
                 ev.preventDefault();
@@ -30,6 +31,12 @@ export class SpwMessage {
                 this.hasSlotContent = assignedNodes.some(node => { var _a; return node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== ''); });
             }
         };
+        this.handleRightSlotChange = () => {
+            if (this.rightSlotElement) {
+                const assignedNodes = this.rightSlotElement.assignedNodes({ flatten: true });
+                this.hasRightSlotContent = assignedNodes.some(node => { var _a; return node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== ''); });
+            }
+        };
     }
     /**
      * Affiche le message
@@ -46,7 +53,8 @@ export class SpwMessage {
     render() {
         const iconToDisplay = this.icon || getIcon(this.variant);
         const isCompact = this.size === 'compact';
-        return this.isVisible ? (h(Host, null, h("div", { class: getElementClass(this.variant, this.size), role: "alert", "aria-live": "polite", "aria-label": this.messageTitle }, h("div", { class: "spw-message__title-container" }, h("strong", { class: "spw-message__title" }, h("spw-icon", { icon: iconToDisplay }), " ", this.messageTitle, isCompact && this.hasSlotContent && h("span", { class: "spw-message__separator" }, "\u00A0:\u00A0"), isCompact && (h("span", { class: "spw-message__inline-content" }, h("slot", { ref: el => (this.slotElement = el), onSlotchange: this.handleSlotChange })))), this.isDismissable && (h("spw-link", { tabindex: "0", icon: "fa-close", class: "spw-message__close", "aria-label": this.dismissableText, onClick: this.handleDismiss, onKeyDown: this.handleKeyDown }, this.dismissableText))), !isCompact && (h("div", { class: "spw-message__text" }, h("slot", { ref: el => (this.slotElement = el), onSlotchange: this.handleSlotChange })))))) : null;
+        const showRightSlot = isCompact && !this.isDismissable;
+        return this.isVisible ? (h(Host, null, h("div", { class: getElementClass(this.variant, this.size), role: "alert", "aria-live": "polite", "aria-label": this.messageTitle }, h("div", { class: "spw-message__title-container" }, isCompact && (h("span", { class: "spw-message__icon", "aria-hidden": "true" }, h("spw-icon", { icon: iconToDisplay }))), h("strong", { class: "spw-message__title" }, !isCompact && h("spw-icon", { icon: iconToDisplay }), !isCompact && ' ', this.messageTitle, isCompact && this.hasSlotContent && h("span", { class: "spw-message__separator" }, "\u00A0:\u00A0"), isCompact && (h("span", { class: "spw-message__inline-content" }, h("slot", { ref: el => (this.slotElement = el), onSlotchange: this.handleSlotChange })))), showRightSlot && (h("span", { class: { 'spw-message__right': true, 'spw-message__right--empty': !this.hasRightSlotContent } }, h("slot", { name: "right", ref: el => (this.rightSlotElement = el), onSlotchange: this.handleRightSlotChange }))), this.isDismissable && (h("spw-link", { tabindex: "0", icon: "fa-close", class: "spw-message__close", "aria-label": this.dismissableText, onClick: this.handleDismiss, onKeyDown: this.handleKeyDown }, this.dismissableText))), !isCompact && (h("div", { class: "spw-message__text" }, h("slot", { ref: el => (this.slotElement = el), onSlotchange: this.handleSlotChange })))))) : null;
     }
     static get is() { return "spw-message"; }
     static get encapsulation() { return "shadow"; }
@@ -205,7 +213,8 @@ export class SpwMessage {
     static get states() {
         return {
             "isVisible": {},
-            "hasSlotContent": {}
+            "hasSlotContent": {},
+            "hasRightSlotContent": {}
         };
     }
     static get events() {

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

@@ -172,13 +172,13 @@ export class SpwModal {
         };
     }
     render() {
-        return (h(Host, { key: '16c9b95bb4d4a7c8a30d7cf8c8f1180a57b9758d' }, h("div", { key: 'ed4ce3b9a690af363deb23fda38b581af43acbff', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '1faf5cbdf2a7dda9e5a018d8740beef1b04cd1df', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '4a720df2b34cb7ac297afcdd63fe358d6cf68e0d', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '66c3c2a37d445e83e98caefdf00070b695ea169a', class: "spw-modal__content", ref: el => (this.modalContent = el), onScroll: this.handleContentScroll }, h("div", { key: '36b51115b608dee56e59991a81b7a9f52e37b7e7', class: "spw-modal__header" }, h("div", { key: '9eb6eeb344cd249b7d01c121867074df02df0262', class: "spw-modal__title-container" }, this.alertIcon && h("spw-icon", { key: '9ad8e3db4e79c57bf3a1fcec88cb4a3878e7b356', class: "spw-modal__alert-icon", icon: this.alertIcon }), h("h2", { key: '0abb86eb218f53cab5a3d4d74d85a759054cff9b', class: "spw-modal__caption" }, this.caption)), this.showCloseButton && (h("div", { key: '66b2ec5a6e8407d2683b55d184e96b1c9b815823', class: {
+        return (h(Host, { key: 'bd4e9c04cab8653097ef97673d8f49ab140dc5b3' }, h("div", { key: '8b1ba84f62fdd79b612469ce78fd0e906b90c176', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: 'c6dccc2e6570d0f90d37c4600dedd472d5f1b562', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'f34b4c137ac80b0f38c2098b73b9654776e1a4b8', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '1659d22b2619a68b3e9d7dad8c7095def8daf19e', class: "spw-modal__content", ref: el => (this.modalContent = el), onScroll: this.handleContentScroll }, h("div", { key: 'e09893f9b8f44d0f68c18fbd8be0e18119d3eee1', class: "spw-modal__header" }, h("div", { key: '8981dbdb894c101e203bc22c2a416e5a48282f86', class: "spw-modal__title-container" }, this.alertIcon && h("spw-icon", { key: 'e5cff7df714f3f869eb1015ea36aab3fefe47156', class: "spw-modal__alert-icon", icon: this.alertIcon }), h("h2", { key: '06268e7c2fce950b1931254a5ed91347f75b6631', class: "spw-modal__caption" }, this.caption)), this.showCloseButton && (h("div", { key: '6cfdb4469167b6935efd7485aec8f2b233feb9d9', class: {
                 'spw-modal__close-button': true,
                 'spw-modal__close-button--sticky': this.isCloseButtonSticky,
-            }, ref: el => (this.closeButton = el), onClick: () => this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: '8c6467ef94fbc24697ffc031a516140e46d6c14a', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'd49b5c986d12f58fb4a83122cdd5e281a30726a8', class: "spw-modal__body" }, h("slot", { key: '02775e3c735f422f0c737c93515970610886f071', name: "content" })), h("div", { key: '32defb07798503b9cb6d42d9ec83aa2daef5f58e', class: { 'spw-modal__buttons': true, 'spw-modal__footer--buttons-present': this.slotButtonsPresent } }, h("slot", { key: 'f6fa36952b3d73cd02014d5b3059d4feeed24435', name: "buttons", onSlotchange: (e) => {
+            }, ref: el => (this.closeButton = el), onClick: () => this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: '6bfe34c67838503f5a71b442df52a559ee44ca47', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: '328c29868ebf538b1a6a58c051337f931ef2d29a', class: "spw-modal__body" }, h("slot", { key: '129a87bf3cc1382a5b8f53861dee4f8027486dfd', name: "content" })), h("div", { key: '523facf0e734e25d5db4c13e9bc1b31721ddfe4b', class: { 'spw-modal__buttons': true, 'spw-modal__footer--buttons-present': this.slotButtonsPresent } }, h("slot", { key: '28eacf80be5cbdc6da0de18e6b55b10e368c57a3', name: "buttons", onSlotchange: (e) => {
                 const slot = e.target;
                 this.slotButtonsPresent = slot.assignedNodes({ flatten: true }).length > 0;
-            } })))), h("div", { key: '4e5a643019b2a7b989922d1ca47eca659804c585', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+            } })))), h("div", { key: 'bd56f5598bcfa3c3995ebdf7dec6a2426cf6e4ed', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "spw-modal"; }
     static get encapsulation() { return "shadow"; }

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: '14fa107f752870d60c7fb914552c946ec2bbb492' }, h("slot", { key: '5648c75c220c24ef53d1e00a254ea768502bbd87' })));
+        return (h(Host, { key: 'f70536eb02cd74dc63e6fd57c8514c421eb24e54' }, h("slot", { key: '3ad328b69e8d2080e31af75600e533cc25da19c8' })));
     }
     static get is() { return "spw-mosaic-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,7 +85,13 @@ export class SpwMosaic {
             const slot = this.el.shadowRoot.querySelector('slot');
             const masonryItems = slot.assignedElements({ flatten: true });
             if (masonryItems.length > 0) {
-                const baseItem = Array.from(masonryItems).find(item => !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile'));
+                const baseItem = Array.from(masonryItems).find(item => {
+                    const hasNoSpan = !item.hasAttribute('col-span-desktop') && !item.hasAttribute('col-span-tablet') && !item.hasAttribute('col-span-mobile');
+                    const hasSpanOne = (!item.hasAttribute('col-span-desktop') || item.getAttribute('col-span-desktop') === '1') &&
+                        (!item.hasAttribute('col-span-tablet') || item.getAttribute('col-span-tablet') === '1') &&
+                        (!item.hasAttribute('col-span-mobile') || item.getAttribute('col-span-mobile') === '1');
+                    return hasNoSpan || hasSpanOne;
+                });
                 let columnWidth;
                 if (baseItem) {
                     columnWidth = baseItem;
@@ -156,7 +162,7 @@ export class SpwMosaic {
         };
     }
     render() {
-        return (h(Host, { key: '0ffcea1b5b38b5fd436a24dbd67936e14c435272' }, h("div", { key: '673e879305bc5c3553f5076479684415aa4ec2ae', class: this.elementClass }, h("slot", { key: 'c775b18265e25219de78c61f6a07ec3fc369d97e' }))));
+        return (h(Host, { key: '2f089897601479ee6a6de26c457460a08d0ba884' }, h("div", { key: '32c337b7772c450732445c47dc37331ba7ef697d', class: this.elementClass }, h("slot", { key: '8cc1dc94be28dd59ee942676800e827754d5c0dc' }))));
     }
     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: '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 }) => {
+        const prevArrow = showPrevArrow && (h("li", { key: 'b84213529792e41d6fdc14af67801d8c709f0f69', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: 'fdda9c8eed1553ad552b40158d03081d9401069b', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '1012c813c379d97f91c859cfd950fa30ea346af2', icon: "fa-chevron-left" }), " ", h("span", { key: '05cc676da38ee9f4cbc9cd97a4ed120af552b342', class: "spw-pagination__item-arrow-text" }, this.previousButtonText))));
+        const nextArrow = showNextArrow && (h("li", { key: 'cc16631f997ed1eab3d2beefbde88fd49204f195', class: "spw-pagination__item spw-pagination__item--desktop spw-pagination__item--arrow" }, h("button", { key: '5a6a4e13922c00e9d91eeb08c9ad2b317e1825ca', onClick: () => this.goToPage(this.currentPage + 1) }, h("span", { key: '7e8329d128eed2fe03412701f8179295f1b2aebb', class: "spw-pagination__item-arrow-text" }, this.nextButtonText), " ", h("spw-icon", { key: '8cd4037965d980da28c0577d65fee206072a627b', icon: "fa-chevron-right" }))));
+        const prevArrowMobile = this.currentPage > 1 && (h("li", { key: 'dc0832c032680e0a1419b1499dff06c63b92dd60', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: '3e2917ccc49bc161c4a5d8096832a6a0d0c1bd9a', onClick: () => this.goToPage(this.currentPage - 1) }, h("spw-icon", { key: '49245cf34526ac9706b3f731ffc737adc3643a91', icon: "fa-chevron-left" }), " ", h("span", { key: '769a740d3e05213996f76e09ac74a41e4fd0ef69' }, this.previousButtonText))));
+        const nextArrowMobile = this.currentPage < this.totalPages && (h("li", { key: '6e236299858eca24a1074831f5c73aa5ca7321d1', class: "spw-pagination__item spw-pagination__item--arrow" }, h("button", { key: 'e577fb3c98e80f45e92a83f2bf20c9fb7798f648', onClick: () => this.goToPage(this.currentPage + 1), disabled: this.currentPage >= this.totalPages }, h("span", { key: 'a9a0ef10e81024d08cf894d38978ae8048ffeb1e' }, this.nextButtonText), " ", h("spw-icon", { key: '3674d79412476f03ce1745a278dc7e3f0b03578e', icon: "fa-chevron-right" }))));
+        const mobileArrows = (h("ul", { key: '1920cff0102f87b927ebd315fb374c716a635e9e', class: "spw-pagination__mobile-arrows" }, prevArrowMobile, nextArrowMobile));
+        return (h(Host, { key: 'a362b963708afb6a7d1b3d91d6fcffb55edec974' }, h("div", { key: 'e05338ca78a938d525f7a1a6d3e6a98153cd94fa', class: this.getPaginationClass() }, this.variant === 'input' && (h(Fragment, { key: 'ea815e6de3d12793411b05ce5938c733c1b84136' }, h("ul", { key: '8b7d63d5bbec21cabb12f3ccb8cbe3046409abf2' }, prevArrow, h("li", { key: '55367459a8be4819278530cc31d36cc3eb0d1107', class: "spw-pagination__input" }, h("spw-text-field", { key: '26926e63f93958af0d692bfc2962d66983790683', value: this.inputPageValue, type: "text", name: "pagination-input", onInput: event => this.handleInputChange(event), onKeyDown: event => this.handleKeyDown(event), disabled: this.isDisabled })), h("li", { key: '3f84bcc43732a2d39505b038f6762eed0d9ccfae', class: "spw-pagination__total-pages" }, "sur ", this.totalPages, " ", this.totalPages === 1 ? 'page' : 'pages'), nextArrow), mobileArrows)), this.variant === 'numbers' && (h(Fragment, { key: '2961252972f7f08fc437b4ec8fb797a21e2e936a' }, h("ul", { key: 'ad621520e14899fbff346bd421a20a99aefa0396' }, 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: '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" }))));
+        return (h("div", { key: '5f29d5ced1f854e54239f9d8c366131cd7a1c723', class: "spw-radio" }, h("input", { key: '4b77a9af19e015c2a02b0e03d46e23eada74498a', 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: 'bf61c93c451ab565d9f2105dd975ad6f1ce5a374', class: `spw-radio__label ${this.disabled ? 'spw-radio__label--disabled' : ''}`, onClick: e => this.handleRadio(e) }, h("slot", { key: '181355d4689daafd08f6f2ad9f27cfa57fd25057' }))), h("div", { key: 'd8f1081f2d9daef138c55d086bc80ea4dc52d0af', 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: '15c6c418fb430b17fb467c3068e78c41d6473d93', 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: '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 })));
+        return (h(Host, { key: 'cdfe1bec596845b67c1b9c686ad0bcc70e2a032b', class: this.hostClass }, h("spw-button", { key: 'c732207179a6482d6852456d8f5fa0a6b7e7787d', "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-search-field/spw-search-field.js

@@ -175,8 +175,18 @@ export class SpwSearchField {
             this.filteredItems = [];
             return;
         }
-        const normalizedSearchText = this.normalizeString(this.searchText);
-        this.filteredItems = this.parsedItems.filter(item => !item.disabled && this.normalizeString(item.label).includes(normalizedSearchText));
+        const terms = this.normalizeString(this.searchText).split(/\s+/).filter(Boolean);
+        if (!terms.length) {
+            this.filteredItems = this.parsedItems.filter(item => !item.disabled);
+            return;
+        }
+        this.filteredItems = this.parsedItems.filter(item => {
+            var _a, _b;
+            if (item.disabled)
+                return false;
+            const haystack = this.normalizeString(`${item.label} ${(_a = item.searchableText) !== null && _a !== void 0 ? _a : ''} ${(_b = item.category) !== null && _b !== void 0 ? _b : ''}`);
+            return terms.every(term => haystack.includes(term));
+        });
     }
     normalizeString(str) {
         return str
@@ -243,14 +253,56 @@ export class SpwSearchField {
         }
     }
     highlightMatch(item) {
-        const normalizedSearchText = this.normalizeString(this.searchText);
-        const normalizedItem = this.normalizeString(item);
-        const startIndex = normalizedItem.indexOf(normalizedSearchText);
-        if (startIndex === -1 || !this.searchText) {
+        var _a;
+        const terms = this.normalizeString(this.searchText).split(/\s+/).filter(Boolean);
+        if (!terms.length)
+            return item;
+        const normalizedChars = Array.from(item).map(ch => this.normalizeString(ch));
+        const normalizedItem = normalizedChars.join('');
+        const normalizedToOriginal = [];
+        normalizedChars.forEach((n, i) => {
+            for (let j = 0; j < n.length; j++)
+                normalizedToOriginal.push(i);
+        });
+        const ranges = [];
+        for (const term of terms) {
+            if (!term)
+                continue;
+            let from = 0;
+            while (from <= normalizedItem.length - term.length) {
+                const idx = normalizedItem.indexOf(term, from);
+                if (idx === -1)
+                    break;
+                const startOrig = normalizedToOriginal[idx];
+                const endOrig = ((_a = normalizedToOriginal[idx + term.length - 1]) !== null && _a !== void 0 ? _a : item.length - 1) + 1;
+                ranges.push([startOrig, endOrig]);
+                from = idx + term.length;
+            }
+        }
+        if (!ranges.length)
             return item;
+        ranges.sort((a, b) => a[0] - b[0]);
+        const merged = [ranges[0]];
+        for (let i = 1; i < ranges.length; i++) {
+            const last = merged[merged.length - 1];
+            if (ranges[i][0] <= last[1]) {
+                last[1] = Math.max(last[1], ranges[i][1]);
+            }
+            else {
+                merged.push(ranges[i]);
+            }
+        }
+        const parts = [];
+        let cursor = 0;
+        for (const [start, end] of merged) {
+            if (start > cursor)
+                parts.push(item.slice(cursor, start));
+            parts.push(h("strong", null, item.slice(start, end)));
+            cursor = end;
         }
-        const endIndex = startIndex + normalizedSearchText.length;
-        return (h("span", null, item.slice(0, startIndex), h("strong", null, item.slice(startIndex, endIndex)), item.slice(endIndex)));
+        if (cursor < item.length)
+            parts.push(item.slice(cursor));
+        return h("span", null, parts);
     }
     get elementClass() {
         return {
@@ -262,10 +314,10 @@ export class SpwSearchField {
         };
     }
     render() {
-        return (h("div", { key: '5837b60701c5adffa83e5ce64b2404c5d053c161', ref: el => (this.hostElement = el), class: this.elementClass }, this.label && (h("spw-field-label", { key: '1ef0c03b22c5aaa411c5f8e066cb09e1534b9e9d', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor, onClick: () => { var _a; return (_a = this.textFieldElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } })), h("div", { key: 'c3e4353df5ede82c0724535c93e38e54a360e13b', class: "spw-search-field__container" }, h("spw-text-field", { key: '7c8651c36d9d37929782972c02f7361095a9c584', ref: el => (this.textFieldElement = el), placeholder: this.placeholder, name: this.name, size: this.size, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, onValueChanged: this.handleValueChanged, onKeyDown: event => this.handleKeyDown(event) }), this.hasSubmitButton && h("button", { key: '7bfed3b469a2bd50f08b7c071ace067641e3d173', type: "button", class: "spw-search-field__submit", onClick: this.handleSubmit, "aria-label": "Rechercher" })), this.showDropdown && this.isOpen && !!this.items && (h("div", { key: '9505e7903d1ab159afd59264e5c3c9cfdfd14c07', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: '9655a5877ce3adc25703f44b7abb2a0f8c4b3a1e' }, this.filteredItems.map((item, index) => (h("li", { class: {
+        return (h("div", { key: 'f116af8760acd3e30009afc64ee7a4ae50b6a484', ref: el => (this.hostElement = el), class: this.elementClass }, this.label && (h("spw-field-label", { key: '9f03ed16fd4cc4b37da0397d717be45a967ab1f5', label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor, onClick: () => { var _a; return (_a = this.textFieldElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } })), h("div", { key: 'a719b41f82dd87ce011c5b089341b22f81e3e2d0', class: "spw-search-field__container" }, h("spw-text-field", { key: '104bf733e3aa472625ef0f33ba98e55bf8cea02c', ref: el => (this.textFieldElement = el), placeholder: this.placeholder, name: this.name, size: this.size, "is-search": true, "is-clear": true, required: this.required, disabled: this.disabled, assistiveText: this.assistiveText, value: this.searchText, onValueChanged: this.handleValueChanged, onKeyDown: event => this.handleKeyDown(event) }), this.hasSubmitButton && h("button", { key: '0e75f4d042f435b6f551fff620cce28018fd456f', type: "button", class: "spw-search-field__submit", onClick: this.handleSubmit, "aria-label": "Rechercher" })), this.showDropdown && this.isOpen && !!this.items && (h("div", { key: '9c3e059418f401d05ff2bdd91b15e4345e9eb8f2', class: `spw-search-field__options spw-search-field__options--${this.dropdownDirection}` }, !!this.filteredItems.length && (h("ul", { key: '3b1d0269339792aecc8279a460635d3d96a13c8b' }, this.filteredItems.map((item, index) => (h("li", { class: {
                 'spw-search-field__option': true,
                 'spw-search-field__option--focused': index === this.focusedItemIndex,
-            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-search-field__category" }, " - ", item.category)))))), this.isLoading && (h("p", { key: 'ca7c114f02d66f03803edd7ba38e248da7319f9d', class: "spw-search-field__loading" }, h("spw-loading", { key: 'ca1d7ba8f7997fffdc94d38210ab45672fe275ca', text: this.loadingText }))), !this.isLoading && !this.filteredItems.length && h("p", { key: 'a3c9452107ec03b68ca1523544fa0f9075423452', class: "spw-search-field__no-results" }, this.noResults), !!this.filteredItems.length && this.viewAllResults && (h("p", { key: 'ed530b7e1b28ca9e809031a94c86138603a85902', class: "spw-search-field__view-all" }, h("a", { key: 'c2b9e5605e4dc849b1c715e9ae66830062884495', href: this.viewAllResultsLink, onClick: this.viewAllResultsSubmit ? this.handleSubmit : undefined }, this.viewAllResults, " ", h("spw-icon", { key: 'f5dae623c2204783d04f9ad45b8c89909b447be6', icon: "fa-arrow-right" }))))))));
+            }, onClick: () => this.selectItem(item) }, this.highlightMatch(item.label), " ", item.category && h("span", { class: "spw-search-field__category" }, " - ", item.category)))))), this.isLoading && (h("p", { key: 'c2d1ea927a5f0d5f3dd32ea1f70ea059e3262c6d', class: "spw-search-field__loading" }, h("spw-loading", { key: '8c305c9dabbb1ac73518e12daebde3c3dd7e0829', text: this.loadingText }))), !this.isLoading && !this.filteredItems.length && h("p", { key: '6de0fc35708f70dcd42a2b5921fe9ccc0a2b7fee', class: "spw-search-field__no-results" }, this.noResults), !!this.filteredItems.length && this.viewAllResults && (h("p", { key: '5c27c78406f6920d722bdb8e5ac56e39bf0a92f7', class: "spw-search-field__view-all" }, h("a", { key: '78c853800f4661534f4fedf89ed5be8806d8d320', href: this.viewAllResultsLink, onClick: this.viewAllResultsSubmit ? this.handleSubmit : undefined }, this.viewAllResults, " ", h("spw-icon", { key: '6bc150d034af662ead76f9273f097dd6ee1a5506', icon: "fa-arrow-right" }))))))));
     }
     static get is() { return "spw-search-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -144,25 +144,21 @@ export class SpwSelect {
             this.selectElement.value = String(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" })));
+        });
     }
     handleClear(event) {
         event.stopPropagation();
@@ -178,7 +174,7 @@ export class SpwSelect {
         };
     }
     render() {
-        return (h(Host, { key: 'd3ccd489ec86a0b97bdf7b9381c1e7a3cefbb383' }, h("div", { key: '91e29a92856e4d43017c146361b6df8793c5b500', class: this.elementClass }, this.label && (h("spw-field-label", { key: '49fbc4422c9a03e04fbb3380c621ec7e30fba829', 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: '0d1809e1ba89356957828269ba48e0c2023bb9be', class: "spw-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '8699a924cb0f73d5f71518817a4b5fd1b9a561fb', class: "spw-select__container" }, h("select", { key: 'f46e93c8d2b42d0b128a45ea13e75cb02fcc569e', id: this.name, name: this.name, "aria-label": this.accAriaLabel || this.label || this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: 'b77f86e33c40a4554fbeb7fa41750e9a8f5275f2', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("div", { key: 'b5b1ec5298d28a6d4b3fa140ca0698578a97fa60', class: "spw-select__icons" }, this.isClear && !!this.internalValue && (h("span", { key: 'f4b1eb192835244f4a0c34494c5fbe53c9d69a21', class: "spw-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: '2f4dce811cd2ff66f948b62ee1571eb2cfb93e4e', icon: "fa-xmark" }))), h("spw-icon", { key: 'f08da6debbdaa04458d02c0edb5e0e76c298a440', class: "spw-select__arrow", icon: "fa-chevron-down" }))), !this.items && h("slot", { key: '36f5f910750f8d9bea47eba8f52d660e60217f6e' })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage(), this.renderWarningMessage()));
+        return (h(Host, { key: '40c21707209a4bf00dbcf6c13a0a6d91930beab7' }, h("div", { key: '3bb2935727a321b562dd97797b86339745edae36', class: this.elementClass }, this.label && (h("spw-field-label", { key: 'a68f1ef45bf5781535f936f86380e04abd6f5854', 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: '279da1ef9160b9a2df3cd52816ae1a38abdaf6a4', class: "spw-select__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'da7cb4b526c4478efb82d54fb7cd408964af751f', class: "spw-select__container" }, h("select", { key: 'fc9f07515547219d2a790487cb9e7a576c258dcf', id: this.name, name: this.name, "aria-label": this.accAriaLabel || this.label || this.name, class: "spw-select__trigger", onChange: event => this.handleSelectChange(event), disabled: this.disabled, ref: el => (this.selectElement = el), tabindex: this.disabled ? -1 : 0 }, h("option", { key: '2ebb2a1e2170ffc03ffa8f82d8acb854555e01ad', value: "", disabled: true, selected: !this.internalValue }, this.placeholder)), h("div", { key: '8dd1b8ad114e727c2fe9391bf2aa3b6a4b0c0727', class: "spw-select__icons" }, this.isClear && !!this.internalValue && (h("span", { key: '80413ad6551378337d34b4de2b9bfff712c22978', class: "spw-select__clear", onClick: event => this.handleClear(event) }, h("spw-icon", { key: 'd3db5433b65d76b5b72c24f5c3177de484f8b151', icon: "fa-xmark" }))), h("spw-icon", { key: '80fe66a40b2d665acfd96b4a4babe5cc50b4b172', class: "spw-select__arrow", icon: "fa-chevron-down" }))), !this.items && h("slot", { key: 'eb98caf68ad419bb2ca1f487fc98f2011de7126e' })), this.renderMessages()));
     }
     static get is() { return "spw-select"; }
     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: '338dcc69af19f31c0e2d42e149cf5f5a7760cba6', class: this.elementClass, style: this.style });
+        return h("div", { key: 'aac786b768e926f4ed6ece23b4f188c72fc9d627', 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: 'f5f051303b83e74f1e4bdd31486c536ee7706e65', class: this.classes }, h("div", { key: 'a9d84ffccc7e181082513ea0cf5b9d342d882862', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '31ef27c97fc453bdb483790278df7f1d569d9a5e' }))));
+        return (h(Host, { key: 'cfa469e972997f70f8c7dae4051f84521bca8582', class: this.classes }, h("div", { key: '95bc1bbc829a58707c329d2799a9edbea3f57de3', class: "spw-sidebar-navigation-dropdown__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: 'fb7123db2d5d5e61308fd4eb30c03872fea8313c' }))));
     }
     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: '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 iconContent = h("spw-icon", { key: '718a0870923b11abf6e3469ef320c11e3d9096a8', variant: this.iconVariant, icon: this.icon });
+        const iconDiv = (h("div", { key: 'aad3ef7f6b183a41a431bd7e7561a15d8c14804c', class: "spw-sidebar-navigation-item__icon" }, this.bubble && h("span", { key: '831ba4f25c13f158b6a9e488c040888e62ec06df', 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: '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" }))));
+        return (h(Tag, { key: '8b8b08a838783c54a7e9945decf90b2811f58927', 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: '856201c2af6bb45dcfc725f7cb5500c2c7a45742', class: "spw-sidebar-navigation-item__content" }, h("div", { key: '08617171900b7aaf541861f2aa8046aee9640cc4', class: "spw-sidebar-navigation-item__content-label" }, h("slot", { key: '911af3daddfbf5829d0a24626b1c5aef6add1067' })), this.hasDropdown && (h("div", { key: 'c7fb65f768428afd9159839e6ac00c7be7ab758a', class: toggleClasses, onClick: this.handleDropdownToggle, tabIndex: this.disabled ? -1 : 0 }, h("spw-icon", { key: '0c010bd669bf238cb0ecbcb5b0332e971e3e3079', icon: "fa-chevron-down" }))), h("slot", { key: 'b81efa2c2af1aeba5dc0e7dc9fcca2c258dcb822', 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: '95fb838c1497c039652cc46e8297d9cb47ad33c0' }, h("spw-separator", { key: 'aa2a50a9dfc9fe8dbd6665a9bef7c53a6cfb03e2', class: "spw-sidebar-navigation-separator" })));
+        return (h(Host, { key: 'c4da27eb51b730aaa325423662b8f22867743039' }, h("spw-separator", { key: 'b2bac3105b3b54dd613886df2b25e798790d3fb9', 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: '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 }))));
+        return (h(Host, { key: '20426b0c81fa6c37edcab71f954cb51c8c7db302', class: this.hostClass }, h("div", { key: '0382a04d7943f744173474b7b7702c16174c0f63', class: this.elementClass }, h("span", { key: '0f9dc5293bbcffa05132afe1aa3189f022f5b67b', class: "spw-sidebar__toggle", onClick: this.toggleSidebar, "aria-expanded": this.expanded.toString() }, h("spw-icon", { key: '68d6a7684f8a9f027e76803ae714b26bf5e85034', icon: "fa-chevron-right" })), h("div", { key: '21972b383f94f93753d281477ecc67b3ee10603a', class: "spw-sidebar__content" }, h("slot", { key: '3b0b8406d9cbcfdcab6813217d2ac2f5502922bc', name: "navigation-top" }), h("slot", { key: '9ee99f3a7c3a0287eb9a3c95e09391bf557e21e9', name: "navigation-bottom" })), h("div", { key: '738669f5a431726670f2199510067d7ba03a726a', 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.js

@@ -5,10 +5,10 @@ export class SpwSidenavGroup {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '14c12823f32b2743ed20c831e67bc806046ad52b', class: {
+        return (h(Host, { key: '53c81df6b37aecb9094322b6ec8232cbad3dff60', 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' }))));
+            } }, h("div", { key: '8e50ebeec2c1ac59e18618c14aac87ba28923bf1', class: "spw-sidenav-group__content", style: { display: this.open ? 'block' : 'none' } }, h("slot", { key: '67d50cc3b7ec09ef2ca07c0563178e72b424c37a' }))));
     }
     static get is() { return "spw-sidenav-group"; }
     static get originalStyleUrls() {

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

@@ -465,4 +465,59 @@ spw-sidenav-group .spw-sidenav-item__label {
   opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
+}
+
+@media (max-width: 767px) {
+  .spw-sidenav-item__chevron spw-icon {
+    transform: rotate(-90deg) !important;
+    transition: none !important;
+  }
+  spw-sidenav[data-show-root=true] spw-sidenav-item spw-sidenav-item {
+    display: none;
+  }
+  spw-sidenav[data-show-root=true] spw-sidenav-group .spw-sidenav-group__content {
+    display: none !important;
+  }
+  spw-sidenav:not([data-show-root=true]):not(:has(.spw-sidenav-item--mobile-focused)) spw-sidenav-item:has(> .spw-sidenav-item--active):has(spw-sidenav-item > .spw-sidenav-item--active) > .spw-sidenav-item > .spw-sidenav-item__row {
+    display: none;
+  }
+  spw-sidenav:not([data-show-root=true]):not(:has(.spw-sidenav-item--mobile-focused)):has(.spw-sidenav-item--active) > spw-sidenav-item:not(:has(> .spw-sidenav-item--active)) {
+    display: none;
+  }
+  spw-sidenav:not([data-show-root=true]):not(:has(.spw-sidenav-item--mobile-focused)) spw-sidenav-group:has(> spw-sidenav-item > .spw-sidenav-item--active):has(> spw-sidenav-item spw-sidenav-item > .spw-sidenav-item--active) > spw-sidenav-item:not(:has(> .spw-sidenav-item--active)) {
+    display: none;
+  }
+  spw-sidenav:not([data-show-root=true]):not(:has(.spw-sidenav-item--mobile-focused)) spw-sidenav-item:has(> .spw-sidenav-item--active) > spw-sidenav-group > .spw-sidenav-group__content {
+    display: block !important;
+  }
+  spw-sidenav:not([data-show-root=true]):not(:has(.spw-sidenav-item--mobile-focused)) spw-sidenav-item:has(> .spw-sidenav-item--active):has(spw-sidenav-item > .spw-sidenav-item--active) > .spw-sidenav-item > spw-sidenav-group > .spw-sidenav-group__content {
+    padding-left: 0;
+  }
+  spw-sidenav:not([data-show-root=true]):not(:has(.spw-sidenav-item--mobile-focused)) spw-sidenav-item:has(> .spw-sidenav-item--active):has(spw-sidenav-item > .spw-sidenav-item--active) > .spw-sidenav-item > spw-sidenav-group > .spw-sidenav-group__content::before {
+    display: none;
+  }
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:not(:has(.spw-sidenav-item--mobile-focused)) {
+    display: none;
+  }
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(> .spw-sidenav-item--mobile-focused) > .spw-sidenav-item > spw-sidenav-group > .spw-sidenav-group__content > spw-sidenav-item,
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(> .spw-sidenav-item--mobile-focused) > spw-sidenav-group > .spw-sidenav-group__content > spw-sidenav-item,
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(> .spw-sidenav-item--mobile-focused) > .spw-sidenav-item > spw-sidenav-group > spw-sidenav-item,
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(> .spw-sidenav-item--mobile-focused) > spw-sidenav-group > spw-sidenav-item {
+    display: block;
+  }
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > .spw-sidenav-item > .spw-sidenav-item__row {
+    display: none;
+  }
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > .spw-sidenav-item > spw-sidenav-group > .spw-sidenav-group__content,
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > spw-sidenav-group > .spw-sidenav-group__content {
+    display: block !important;
+  }
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > .spw-sidenav-item > spw-sidenav-group > .spw-sidenav-group__content,
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > spw-sidenav-group > .spw-sidenav-group__content {
+    padding-left: 0;
+  }
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > .spw-sidenav-item > spw-sidenav-group > .spw-sidenav-group__content::before,
+  spw-sidenav:not([data-show-root=true]):has(.spw-sidenav-item--mobile-focused) spw-sidenav-item:has(.spw-sidenav-item--mobile-focused) > spw-sidenav-group > .spw-sidenav-group__content::before {
+    display: none;
+  }
 }