@spw-ds/spw-stencil-library 1.14.0 → 1.14.1

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -51,15 +51,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -51,15 +51,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-custom-select/spw-custom-select.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-date-picker/spw-date-picker.css

@@ -53,15 +53,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-dropdown/spw-dropdown-container/spw-dropdown-container.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**
@@ -388,6 +379,11 @@ template {
 .spw-dropdown-item:hover {
   background-color: var(--spw-colors-support-grey-grey-200);
 }
+.spw-dropdown-item:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 0;
+  box-shadow: 0 0 0 4px black;
+}
 .spw-dropdown-item--disabled {
   cursor: not-allowed;
   opacity: 0.5;

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

@@ -23,6 +23,20 @@ export class SpwDropdownItem {
                 this.subItemsOpen = !this.subItemsOpen;
             }
         };
+        this.handleItemKeyDown = (event) => {
+            var _a;
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                if (this.hasSubItems && !this.href) {
+                    this.subItemsOpen = !this.subItemsOpen;
+                }
+                else if (this.href) {
+                    (_a = this.el.querySelector('a')) === null || _a === void 0 ? void 0 : _a.click();
+                }
+            }
+        };
     }
     componentDidLoad() {
         this.checkForSubItems();
@@ -69,7 +83,7 @@ export class SpwDropdownItem {
             'spw-dropdown-item__toggle': true,
             'spw-dropdown-item__toggle--open': this.subItemsOpen,
         };
-        return (h(Host, { key: '64d51205ea8e220d8d3d22c6163ffae1def82892' }, h(Tag, { key: '5cfb7b0bd5d57228f49efb175bfa01c2b1678c8c', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleItemClick }, this.icon && (h("div", { key: 'b397503e12d41f4b3f339d73aa014942ee94b70e', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '0545ea4d6f163007279e315bbb0fd80c6f5e22a2', variant: this.iconVariant, icon: this.icon }))), h("div", { key: 'eff42c92481ce24a1807f7eb97ce0df4092b3310', class: "spw-dropdown-item__content" }, h("div", { key: '8735e69e60341295fdb844af88704ce040aa0cd8', class: "spw-dropdown-item__label" }, h("slot", { key: '8f186c331628491298a61ca203e1ef1d9f80825e' })), this.hasSubItems && (h("div", { key: '91c60f4dd34200d5e575a7cec98e6f690c6195ef', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: 'c563396ee0b6e27f81be1466f2d9c7b8f03b9c70', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: '41325cd7b9755084a80ed15ebb7e505a1d5ca0a0', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '927d7b7b3b9206ea64a4b930d3f91d76d49128e1', name: "sub-items" })))));
+        return (h(Host, { key: '9972c17813e0f7be9d07188a6a6596fc5f3e9b75' }, h(Tag, { key: '9048817b668d6f9ea4294f327af676b2128b2632', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: 'a43132e6f697d77849d158164bcdbe783b56ab21', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '5c8643b3c22b79c1a665c420edb9529453699341', variant: this.iconVariant, icon: this.icon }))), h("div", { key: '65db2295b5086d4e342234a336251ec282b9eebc', class: "spw-dropdown-item__content" }, h("div", { key: '54d0059dd24a51a136b0afee730cea8c25f02ecb', class: "spw-dropdown-item__label" }, h("slot", { key: '4e992a877d20ec0b84c83a8f5786eec8301a1e63' })), this.hasSubItems && (h("div", { key: 'f8a34e4a575ae202670cb86ec3095e0b7b717ed2', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '44593757e5e18c481ed0faab171adaf6129e29fe', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: 'fde76f69a90e770c732899d326c4880915b0baa7', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '2b1f6087cd1063dd3a028b9ba2f091702f960290', name: "sub-items" })))));
     }
     static get is() { return "spw-dropdown-item"; }
     static get originalStyleUrls() {

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -16,7 +16,10 @@ export class SpwDropdown {
         this.isVisible = false;
         this.dropdownEl = null;
         this.movedContentEl = null;
+        this.triggerEl = null;
+        this.handleKeyDown = null;
         this.showDropdown = () => {
+            var _a, _b;
             if (this.isVisible)
                 return;
             const slotContent = this.host.querySelector('[slot="dropdownContent"]');
@@ -24,11 +27,13 @@ export class SpwDropdown {
                 return;
             this.isVisible = true;
             this.spwDropdownOpen.emit();
+            this.triggerEl = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.spw-dropdown__trigger')) !== null && _b !== void 0 ? _b : null;
             this.dropdownEl = document.createElement('div');
             this.dropdownEl.className = `spw-dropdown-fixed spw-dropdown-fixed--${this.direction} spw-dropdown-fixed--${this.alignment}`;
             if (this.hasPadding)
                 this.dropdownEl.classList.add('spw-dropdown-fixed--padded');
             this.dropdownEl.setAttribute('role', 'menu');
+            this.dropdownEl.setAttribute('aria-modal', 'false');
             this.dropdownEl.style.width = `${this.contentWidth || 200}px`;
             this.dropdownEl.style.maxHeight = this.maxHeight !== 'auto' ? `${this.maxHeight}px` : 'none';
             this.dropdownEl.style.overflowY = this.maxHeight !== 'auto' ? 'auto' : 'visible';
@@ -38,6 +43,10 @@ export class SpwDropdown {
             requestAnimationFrame(() => {
                 this.positionDropdown();
                 this.addListeners();
+                const focusable = this.getFocusableElements();
+                if (focusable.length > 0) {
+                    focusable[0].focus();
+                }
             });
         };
         this.hideDropdown = () => {
@@ -68,6 +77,14 @@ export class SpwDropdown {
     connectedCallback() {
         this.handleClickOutside = this.handleClickOutside.bind(this);
         this.handleScrollOrResize = this.handleScrollOrResize.bind(this);
+        this.handleTriggerKeyDown = this.handleTriggerKeyDown.bind(this);
+        this.host.addEventListener('keydown', this.handleTriggerKeyDown);
+    }
+    handleTriggerKeyDown(e) {
+        if ((e.key === 'Enter' || e.key === ' ') && !this.isVisible) {
+            e.preventDefault();
+            this.open = true;
+        }
     }
     componentDidLoad() {
         if (this.open) {
@@ -76,16 +93,73 @@ export class SpwDropdown {
     }
     disconnectedCallback() {
         this.removeListeners();
+        this.host.removeEventListener('keydown', this.handleTriggerKeyDown);
     }
     addListeners() {
         document.addEventListener('click', this.handleClickOutside, true);
         window.addEventListener('scroll', this.handleScrollOrResize, true);
         window.addEventListener('resize', this.handleScrollOrResize);
+        this.handleKeyDown = (e) => {
+            var _a;
+            if (!this.dropdownEl)
+                return;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+                (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+                return;
+            }
+            if (e.key === 'Tab') {
+                const focusable = this.getFocusableElements();
+                if (focusable.length === 0)
+                    return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (e.shiftKey) {
+                    if (document.activeElement === first) {
+                        e.preventDefault();
+                        last.focus();
+                    }
+                }
+                else {
+                    if (document.activeElement === last) {
+                        e.preventDefault();
+                        first.focus();
+                    }
+                }
+                return;
+            }
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                const focusable = this.getFocusableElements();
+                if (focusable.length === 0)
+                    return;
+                const currentIndex = focusable.indexOf(document.activeElement);
+                if (e.key === 'ArrowDown') {
+                    const next = currentIndex < focusable.length - 1 ? currentIndex + 1 : 0;
+                    focusable[next].focus();
+                }
+                else {
+                    const prev = currentIndex > 0 ? currentIndex - 1 : focusable.length - 1;
+                    focusable[prev].focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', this.handleKeyDown, true);
     }
     removeListeners() {
         document.removeEventListener('click', this.handleClickOutside, true);
         window.removeEventListener('scroll', this.handleScrollOrResize, true);
         window.removeEventListener('resize', this.handleScrollOrResize);
+        if (this.handleKeyDown) {
+            document.removeEventListener('keydown', this.handleKeyDown, true);
+            this.handleKeyDown = null;
+        }
+    }
+    getFocusableElements() {
+        if (!this.dropdownEl)
+            return [];
+        return Array.from(this.dropdownEl.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled])')).filter(el => !el.closest('[aria-disabled="true"]'));
     }
     handleClickOutside(event) {
         var _a;
@@ -154,7 +228,7 @@ export class SpwDropdown {
         dropdown.style.visibility = 'visible';
     }
     render() {
-        return (h("div", { key: 'f14c3090969b4a5a84e343f6aacfeb0616afd36a', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open) }, h("slot", { key: '0cfd75ddf8a40ebc2090ca1c5959d27851352d00' })));
+        return (h("div", { key: '9436b4657389ba587830dcc8f7dc9f13aa33ef0a', class: "spw-dropdown__trigger", onClick: () => (this.open = !this.open), "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "menu" }, h("slot", { key: '3abcf24a43d046fde173ffe2ac73d376cf78ec6e' })));
     }
     static get is() { return "spw-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-file-upload/spw-file-upload.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-footer/spw-footer-bottom/spw-footer-bottom.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-footer/spw-footer-content/spw-footer-content.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-footer/spw-footer-content-col/spw-footer-content-col.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

package/dist/collection/components/spw-footer/spw-footer-link/spw-footer-link.css

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**
@@ -385,6 +376,9 @@ template {
     display: block;
   }
 }
+.spw-header-lang spw-button {
+  --spw-button-text-decoration-tertiary: none;
+}
 .spw-header-lang__select {
   display: none;
 }

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -51,15 +51,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**

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

@@ -50,15 +50,6 @@ body {
   margin: 0;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**