@spw-ds/spw-stencil-library 1.11.0 → 1.12.1

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

@@ -17,26 +17,43 @@ export class SpwGroup {
         this.isFullWidth = false;
         /** Comportement du flex-wrap sur le container */
         this.flexWrap = 'nowrap';
+        /** Message d'erreur à afficher sous le groupe (pour les types checkboxes et radios) */
+        this.error = '';
+        /** Message d'indication (hint) à afficher sous le groupe (pour les types checkboxes et radios) */
+        this.hint = '';
+        /** Message de succès à afficher sous le groupe (pour les types checkboxes et radios) */
+        this.success = '';
+        /** Message de warning à afficher sous le groupe (pour les types checkboxes et radios) */
+        this.warning = '';
         /** Positionnement du tooltip */
         this.tooltipDirection = 'top';
         /** Curseur du tooltip */
         this.tooltipCursor = 'help';
-        this.handleSlotChange = () => {
-            var _a;
-            const elements = ((_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements) ? this.slotEl.assignedElements() : Array.from(this.host.querySelectorAll('*'));
-            elements.forEach(element => {
-                if (this.disabled) {
-                    element.setAttribute('disabled', '');
-                }
-                else {
-                    element.removeAttribute('disabled');
-                }
-            });
-        };
+    }
+    get isCheckboxOrRadio() {
+        return this.type === 'checkboxes' || this.type === 'radios';
     }
     componentDidLoad() {
         this.handleSlotChange();
     }
+    handleSlotChange() {
+        var _a;
+        const elements = ((_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements) ? this.slotEl.assignedElements() : Array.from(this.host.querySelectorAll('*'));
+        elements.forEach(element => {
+            if (this.disabled) {
+                element.setAttribute('disabled', '');
+            }
+            else {
+                element.removeAttribute('disabled');
+            }
+            if (this.isCheckboxOrRadio && this.error) {
+                element.setAttribute('error', '');
+            }
+            else {
+                element.removeAttribute('error');
+            }
+        });
+    }
     get groupClasses() {
         return {
             'spw-group': true,
@@ -44,13 +61,24 @@ export class SpwGroup {
             'spw-group--vertical': this.orientation === 'vertical',
             'spw-group--reversed': this.isReversed,
             'spw-group--disabled': this.disabled,
+            'spw-group--is-error': !!(this.error && this.isCheckboxOrRadio),
             'spw-group--is-full-width': this.isFullWidth,
             [`spw-group--${this.type}`]: true,
             [`spw-group--align-${this.alignment}`]: true,
         };
     }
+    renderMessages() {
+        if (!this.isCheckboxOrRadio)
+            return;
+        return [
+            this.error && h("spw-field-message", { variant: "error" }, this.error),
+            this.hint && h("spw-field-message", { variant: "hint" }, this.hint),
+            this.success && h("spw-field-message", { variant: "success" }, this.success),
+            this.warning && h("spw-field-message", { variant: "warning" }, this.warning),
+        ];
+    }
     render() {
-        return (h(Host, { key: 'e41360b16f6cc5dc9d658f242631f89f3d4f852d' }, h("div", { key: '4d607514ef227223d17c803bf5eb1e666cc09ba1', class: this.groupClasses }, this.label && (h("spw-field-label", { key: '2ee090e6fcccc719ff61816c5c0fc18e63635b27', class: "spw-group__field-label", label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), h("div", { key: '73a3e5e024d69c5c472acddabec3ce62d7a63bf1', class: "spw-group__container", style: { flexWrap: this.flexWrap } }, h("slot", { key: '7abab1853fc3d1306359e9fe4a3585a49957b322', ref: el => (this.slotEl = el) })))));
+        return (h(Host, { key: '2d8438c4e41a748a04c282991d6fa0c9811626ef' }, h("div", { key: '3cedc33a257bdb112e0b03dbf703d3eba07f262f', class: this.groupClasses }, this.label && (h("spw-field-label", { key: '9b9988718669bc2f832d280549f32f72b2580e0e', class: "spw-group__field-label", label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.isCheckboxOrRadio && this.assistiveText && (h("spw-field-message", { key: '3ffbe7cdc69048a63fbd89342024c86787502a0e', class: "spw-group__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '50533c9bd5cca52ba2620e005a86a19e23237daa', class: "spw-group__container", style: { flexWrap: this.flexWrap } }, h("slot", { key: '91c0a8fd562f4eaa2edacb5489fc14703c8f88f8', ref: el => (this.slotEl = el) })), this.renderMessages())));
     }
     static get is() { return "spw-group"; }
     static get originalStyleUrls() {
@@ -263,6 +291,105 @@ export class SpwGroup {
                 "attribute": "flex-wrap",
                 "defaultValue": "'nowrap'"
             },
+            "assistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte d'assistance \u00E0 afficher sous le label (pour les types checkboxes et radios)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "assistive-text"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'erreur \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'indication (hint) \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint",
+                "defaultValue": "''"
+            },
+            "success": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message de succ\u00E8s \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "success",
+                "defaultValue": "''"
+            },
+            "warning": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message de warning \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "warning",
+                "defaultValue": "''"
+            },
             "tooltipTitle": {
                 "type": "string",
                 "mutable": false,
@@ -363,4 +490,13 @@ export class SpwGroup {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleSlotChange"
+            }, {
+                "propName": "error",
+                "methodName": "handleSlotChange"
+            }];
+    }
 }

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

@@ -49,7 +49,7 @@ export class SpwHeaderLang {
         }
     }
     render() {
-        return (h(Host, { key: 'f412be59ad362fcbf7090e1b237a59523d7e3877' }, h("div", { key: '0918815cda392973071528bb7c458351e18cf1aa', class: "spw-header-lang" }, h("spw-button", { key: 'ab16aec8e90a32acba575d2592b89e832cd1ef87', variant: "tertiary", surface: "light", icon: "fa-chevron-down", class: "spw-header-lang__active-lang", onKeyDown: this.handleButtonKeyDown, onClick: this.handleButtonClick }, this.activeLang), h("select", { key: '362ca222b6978aff3eed72ec898defc92a80edd6', "aria-label": this.accAriaLabel || 'Lang', class: "spw-header-lang__select", onChange: e => this.handleChange(e), ref: el => (this.selectEl = el), tabIndex: -1 }), h("ul", { key: 'd2eb3baa05b6df90cdcfe0e31826af1b156076d9', class: "spw-header-lang__options" }, this.options.map(option => {
+        return (h(Host, { key: '06242ab720bf430b9fc2b2f3dee6792465511ab9' }, h("div", { key: 'bb3a9606231b8bf69b6e19346223b52044bfb280', class: "spw-header-lang" }, h("spw-button", { key: '02c5b7db54c98c34a5a67c2ed50a42b43bb43861', variant: "tertiary", surface: "light", icon: "fa-chevron-down", class: "spw-header-lang__active-lang", onKeyDown: this.handleButtonKeyDown, onClick: this.handleButtonClick }, this.activeLang), h("select", { key: '247fe0ac8ac870da425f52e41f239921529fdf70', "aria-label": this.accAriaLabel || 'Lang', class: "spw-header-lang__select", onChange: e => this.handleChange(e), ref: el => (this.selectEl = el), tabIndex: -1 }), h("ul", { key: 'a5b041a4630a55593243ff102ee0738eb8efb2ea', class: "spw-header-lang__options" }, this.options.map(option => {
             var _a;
             const label = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
             const value = option.getAttribute('value') || '';

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

@@ -63,7 +63,7 @@ export class SpwHeaderNavigation {
         };
     }
     render() {
-        return (h(Host, { key: '6078e4f7dee4bd27fb66e76998118e6d784c7bf9' }, h("nav", { key: 'bf13eaba0a759615db788ea43aa097026a7d3f58', class: this.elementClass, ref: el => (this.navEl = el) }, h("div", { key: '5d706bf947dcdd651f94a4edef15b32ddbaf8e67', class: "spw-ds-container spw-tw-flex spw-tw-items-center spw-tw-justify-between" }, h("div", { key: 'f6ccb3d16f4151a9bfc7a6447488e5c75457cf88', class: "spw-header-navigation__list" }, h("div", { key: '8e78d8179fa7d1e57c84d817646fefa456f23094', class: "spw-header-navigation__list-back" }, h("a", { key: 'ae55b50e963cb8f3ceed6a0f3e902f8db46b5d0a', href: "#", onClick: event => this.redirectToHome(event) }, h("spw-icon", { key: '3b29e66fb542672671b2c1bb860eb3609aaac51d', icon: "fa-chevron-left" }), " ", h("span", { key: 'b71a900baba8b011aef72b9a1c69cb459030892b' }, "Page d'accueil"))), h("slot", { key: '988fbb3969d55bad2400525bc9dbfd668bb83c3b' })), this.extraButton && (h("div", { key: '7b4c88fdd7c0d8422e9b84b439a64dedf1418127', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--desktop" }, h("spw-button", { key: 'f61edd3010339198ed0b74c65dd134865c942c27', variant: this.extraButtonVariant, icon: this.extraButtonIcon, href: this.extraButtonHref, target: this.extraButtonTarget, size: "small" }, this.extraButtonText))))), this.extraButton && (h("div", { key: 'a04257238d8e4e03e77ea5e723c1b6e4f2422a79', class: "spw-header-navigation__extra-button-parent spw-header-navigation__extra-button--mobile" }, h("div", { key: 'b351dda9a09df7e6b7e47934d8302e1b4dc07a8c', class: "spw-ds-container" }, h("div", { key: '9b4153a7d1df5d4173255ed37850d5049e5e5b5b', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--mobile" }, h("spw-button", { key: '36a492ec47b5f7a521a3533698a3a786f914ed20', "is-full-width": "true", variant: this.extraButtonVariant, icon: this.extraButtonIcon, href: this.extraButtonHref, target: this.extraButtonTarget, size: "small" }, this.extraButtonText)))))));
+        return (h(Host, { key: '7e02a00c46b7de989dbd4a0d36249805a494c2bf' }, h("nav", { key: 'c596b8719bcda2890122ab6a490d2ea150153905', class: this.elementClass, ref: el => (this.navEl = el) }, h("div", { key: '42c2579e00a97af469c2a66731928741ed56390e', class: "spw-ds-container spw-tw-flex spw-tw-items-center spw-tw-justify-between" }, h("div", { key: '9c8e5a295fb0e9f84227b512920306056ff0d1ea', class: "spw-header-navigation__list" }, h("div", { key: '9da5ef2b5e1c8b95e1bde00a00634a90fde0bda2', class: "spw-header-navigation__list-back" }, h("a", { key: '33c922fb8117da033fa637a3e62d9d3db07506dd', href: "#", onClick: event => this.redirectToHome(event) }, h("spw-icon", { key: '6f852439825b6876b2fd1bf1a9ff17c813a81406', icon: "fa-chevron-left" }), " ", h("span", { key: '7551d645db0058b12143cc0372227fe698b9825e' }, "Page d'accueil"))), h("slot", { key: '0deb7663476d76b6f68e00135c95ccef1bc2cb72' })), this.extraButton && (h("div", { key: '3e2aee21e622c5b12f0d9c888866a1f32ac1d008', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--desktop" }, h("spw-button", { key: '5776b2f283fda296733c628463cfdebe8fd25cd1', variant: this.extraButtonVariant, icon: this.extraButtonIcon, href: this.extraButtonHref, target: this.extraButtonTarget, size: "small" }, this.extraButtonText))))), this.extraButton && (h("div", { key: 'd08a05c44a043ded59aaab0ddabd4f21d1fa77ff', class: "spw-header-navigation__extra-button-parent spw-header-navigation__extra-button--mobile" }, h("div", { key: '4f350aae01ee1e5ce4e666a5941d7b20b13fc97b', class: "spw-ds-container" }, h("div", { key: 'ef7553fe6cf2e24470ee42936d184415667233da', class: "spw-header-navigation__extra-button spw-header-navigation__extra-button--mobile" }, h("spw-button", { key: '2eb3cde318b2f5d6ba299375a2b6210dfec78f48', "is-full-width": "true", variant: this.extraButtonVariant, icon: this.extraButtonIcon, href: this.extraButtonHref, target: this.extraButtonTarget, size: "small" }, this.extraButtonText)))))));
     }
     static get is() { return "spw-header-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class SpwHeaderNavigationDropdown {
         }
     }
     render() {
-        return (h(Host, { key: 'fd920b86e9c31a738b6ce2e2031dcc7a13fbd10b', class: { 'spw-header-navigation-dropdown--is-megamenu': this.isMegamenu } }, h("div", { key: 'ba0cc67dadf4488f8840050fbbfda37c2cbdfc12', class: "spw-header-navigation-dropdown" }, h("slot", { key: '53679c89bfaacfce3d4e3f112a2f61b0eeb1a43c' }), this.shouldShowViewMore && (h("spw-link", { key: 'fbe282a2d64afad936e06dcfb908cb1acf636981', icon: "fa-arrow-right", class: "spw-header-navigation-item--view-more", href: this.parentHref, target: this.parentTarget }, this.viewMoreText)))));
+        return (h(Host, { key: 'ba7103f29234e8bae802d8aecf08f942b9fa5481', class: { 'spw-header-navigation-dropdown--is-megamenu': this.isMegamenu } }, h("div", { key: '7371574a8be7084a053cf9fa91eb5c5239fd0769', class: "spw-header-navigation-dropdown" }, h("slot", { key: '1609aa6db756e127e8cd5ca954fee0c4c0b63486' }), this.shouldShowViewMore && (h("spw-link", { key: '226401939eb4327ebe413c73860e58439fb7e7c7', icon: "fa-arrow-right", class: "spw-header-navigation-item--view-more", href: this.parentHref, target: this.parentTarget }, this.viewMoreText)))));
     }
     static get is() { return "spw-header-navigation-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-header/spw-header-navigation-item/spw-header-navigation-item.css

@@ -767,4 +767,14 @@ template {
     font-weight: normal;
     border-left: 1px solid var(--spw-colors-support-grey-grey-300) !important;
   }
+}
+@media (min-width: 1024px) {
+  :host([data-level="3"]) .spw-header-navigation-item--is-megamenu ::slotted(a:hover) {
+    text-decoration: underline !important;
+  }
+}
+@media (min-width: 1024px) {
+  :host([data-level="3"]) .spw-header-navigation-item--is-megamenu ::slotted(a:active) {
+    color: var(--spw-ds-active) !important;
+  }
 }

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

@@ -162,7 +162,7 @@ export class SpwHeaderNavigationItem {
             'spw-header-navigation-item--is-subnav-visible': this.isSubnavVisible,
             'spw-header-navigation-item--is-megamenu': this.variant === 'megamenu',
         };
-        return (h(Host, { key: '856dfa01b6a909e25dc3f8b76a3c38756556a8dc', "data-level": this.level }, h("div", { key: '24547c4fdf8d08a2a88e2cc24455d3816fd99ba4', class: elementClass }, h("div", { key: '3509b51ea619fbedf67650fdc5794ad38a8f7b08', class: "spw-header-navigation-item__content", onClick: event => this.toggleSubnavVisibility(event) }, this.isSubnavVisible && (h("div", { key: '1c4c174e4332229dbb951130ff95be07a8646c74', class: `spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}` }, h("div", { key: '2341055ac9fd8de1c4af599efea5ffa087dfb56c', class: "spw-header-navigation-item__top-back", onClick: event => this.handleBackClick(event) }, h("spw-icon", { key: '5b7b0cab514c661ee06aa7de45ddf927aed78bb8', icon: "fa-chevron-left" }), " ", h("span", { key: 'd58c7f6930439b7feb8e6fcfe93b470034e86f9c' }, this.level === 1 ? '' : this.level === 2 ? 'Menu principal' : storedTitle)), h("div", { key: '4fbb695354cc118ba19f38cf4fdaa67086ade767', class: "spw-header-navigation-item__top-title" }, h("a", { key: 'b3b12b919c4d319d5f32a7331a5b6b2152252925', href: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.link) || '#', target: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.target) || '_self' }, (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) || '')))), h("slot", { key: '95676ec2658dd63e917f6f387d1d7a0299cfc78f' })))));
+        return (h(Host, { key: 'e952c4870e1aa4939b14a210565fa3509460256a', "data-level": this.level }, h("div", { key: '7c038d9fd7c6c055b76bd59b05d4b3994a7be2e0', class: elementClass }, h("div", { key: '3e94692f9383cefaaf46aaf74f9106265524ef3b', class: "spw-header-navigation-item__content", onClick: event => this.toggleSubnavVisibility(event) }, this.isSubnavVisible && (h("div", { key: 'ddce685e6067f559f94dfd2b325d2a795ebe94a3', class: `spw-header-navigation-item__top spw-header-navigation-item__top--${this.level}` }, h("div", { key: '387d26e8a57da5d4369d800b763cc8e0062d084f', class: "spw-header-navigation-item__top-back", onClick: event => this.handleBackClick(event) }, h("spw-icon", { key: '5beca235171ae596b17bb79776db39af855f4fd0', icon: "fa-chevron-left" }), " ", h("span", { key: 'b9006b33470692e209ba3c6139181616f9488ab3' }, this.level === 1 ? '' : this.level === 2 ? 'Menu principal' : storedTitle)), h("div", { key: '4b682e1f1a1ef92b695f5b50cb9b7cd4b411fde6', class: "spw-header-navigation-item__top-title" }, h("a", { key: '7bd2492d5b62b58be3f074a11651e3287ece5f91', href: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.link) || '#', target: (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.target) || '_self' }, (pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.title) || '')))), h("slot", { key: 'c57027af3472e46897c0fc0a05e097b4b2f1b1ca' })))));
     }
     static get is() { return "spw-header-navigation-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-header/spw-header-persona/spw-header-persona.css

@@ -391,14 +391,18 @@ template {
 }
 @media (min-width: 1024px) {
   .spw-header-persona {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
     padding-left: 24px;
     margin-left: 24px;
+    margin-right: 12px;
     border-left: 1px solid var(--spw-colors-support-grey-grey-300);
   }
 }
 .spw-header-persona__label {
   font-size: 14px;
-  margin-bottom: 2px;
   display: block;
   color: var(--spw-colors-support-grey-grey-700);
 }
@@ -419,12 +423,23 @@ template {
 }
 @media (min-width: 1024px) {
   .spw-header-persona__active-persona {
-    text-decoration: underline;
+    transition: all ease 0.15s;
+    border-radius: var(--spw-ds-border-radius-full);
+    background: var(--spw-colors-support-grey-grey-100);
+    padding: 8px 12px;
+    font-size: 14px;
   }
-  .spw-header-persona:hover .spw-header-persona__active-persona {
-    text-decoration: none;
+}
+@media (min-width: 1024px) {
+  .spw-header-persona__active-persona:has(~ .spw-header-persona__select:hover), .spw-header-persona__active-persona:hover {
+    background: var(--spw-colors-support-grey-grey-300);
   }
 }
+.spw-header-persona__active-persona:focus-visible {
+  outline: 2px solid var(--spw-ds-focus);
+  outline-offset: 2px;
+  border-radius: var(--spw-ds-border-radius-full);
+}
 .spw-header-persona__trigger {
   display: block;
 }

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

@@ -46,7 +46,7 @@ export class SpwHeaderPersona {
         }
     }
     render() {
-        return (h(Host, { key: '21a7ec1d9e39faa17a6e0c55e57d08dce2930342' }, h("div", { key: '04a1759c756ffb367a7156edc8d27867fb7ccf00', class: "spw-header-persona", onClick: this.handleButtonClick, onKeyDown: this.handleButtonKeyDown }, h("span", { key: '11c5653feed8408eb17ae2a957b2a36f3b263b41', class: "spw-header-persona__label" }, this.personaLabel), h("div", { key: '6905e4ec31232e1bf5fa9b6b988c4abb51e0def3', class: "spw-header-persona__active-persona" }, this.activePersona, " ", h("spw-icon", { key: '47277eb14c2ee2756f058260a2f858072ea0bb41', icon: "fa-chevron-down" })), h("select", { key: 'c7382be1ce6a7e9417d0b175134075d05ab6ca1b', "aria-label": this.accAriaLabel || this.personaLabel, class: "spw-header-persona__select", ref: el => (this.selectEl = el), onChange: e => this.handleChange(e), tabIndex: -1 }))));
+        return (h(Host, { key: 'e4b59a2e369219aaa37bd9feda07a8ea744b2237' }, h("div", { key: '1052b05e702b3a5ac280aaece9943960f40aece8', class: "spw-header-persona", onClick: this.handleButtonClick, onKeyDown: this.handleButtonKeyDown }, h("span", { key: 'a49eda95727e18bbde6a8b5da032d1232e31ac1b', class: "spw-header-persona__label" }, this.personaLabel), h("div", { key: '4193bf378aaf026f5b6f3fc645e8b780d947e854', class: "spw-header-persona__active-persona" }, this.activePersona, " ", h("spw-icon", { key: 'd78a9e006c8c84126d219c229235247efbd513e7', icon: "fa-chevron-down" })), h("select", { key: '3d8af10298b497fcd10f9428b3bdef0277d4b11c', "aria-label": this.accAriaLabel || this.personaLabel, class: "spw-header-persona__select", ref: el => (this.selectEl = el), onChange: e => this.handleChange(e), tabIndex: -1 }))));
     }
     static get is() { return "spw-header-persona"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-header/spw-header-persona-item/spw-header-persona-item.js

@@ -4,7 +4,7 @@ export class SpwHeaderPersonaItem {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '7440cfe471a4ba75af3979c305a98d5ee47961f6' }, h("div", { key: 'aed89b4c846cc871a3236a9d5f8d39f668de64fa', class: { 'spw-header-persona-item': true, 'spw-header-persona-item--active': this.active } }, h("slot", { key: '78313623a80425922f11b453299ba2a2ea0be5a4' }))));
+        return (h(Host, { key: 'd6834360f2865641ce06cd779f6850bd02c00f14' }, h("div", { key: '33b3a2dba14ee2acbdc70058120a312c071f4110', class: { 'spw-header-persona-item': true, 'spw-header-persona-item--active': this.active } }, h("slot", { key: 'e253c7aa5959c74d23d552a2a4316fa53b365b16' }))));
     }
     static get is() { return "spw-header-persona-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -432,6 +432,11 @@ template {
 .spw-header__title a:active {
   opacity: 0.9;
 }
+.spw-header__title a:focus-visible {
+  outline: 3px solid white;
+  outline-offset: 3px;
+  box-shadow: 0 0 0 5px black;
+}
 .spw-header__title svg {
   min-width: 36px;
 }