wcs-core 7.1.0 → 7.2.0

package/dist/collection/components/tabs/tabs.css

@@ -24,6 +24,24 @@
   --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);
   --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);
   --wcs-tabs-headers-border-bottom: var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);
+  --wcs-tabs-mobile-breakpoint: var(--wcs-phone-breakpoint-max-width, 575px);
+  --wcs-tabs-mobile-overlay-border-width: var(--wcs-semantic-border-width-default);
+  --wcs-tabs-mobile-overlay-border-color: var(--wcs-semantic-color-border-secondary);
+  --wcs-tabs-mobile-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);
+  --wcs-tabs-mobile-overlay-padding: var(--wcs-semantic-spacing-base);
+  --wcs-tabs-mobile-overlay-border-radius: var(--wcs-semantic-border-radius-base);
+  --wcs-tabs-mobile-gap: var(--wcs-semantic-spacing-base);
+  --wcs-tabs-mobile-padding: 0 var(--wcs-semantic-spacing-base);
+  --wcs-tabs-mobile-height: var(--wcs-semantic-size-m);
+  --wcs-tabs-mobile-font-weight-default: var(--wcs-semantic-font-weight-medium);
+  --wcs-tabs-mobile-font-weight-active: var(--wcs-semantic-font-weight-black);
+  --wcs-tabs-mobile-font-size: var(--wcs-semantic-font-size-base);
+  --wcs-tabs-mobile-color: var(--wcs-semantic-color-text-primary);
+  --wcs-tabs-mobile-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);
+  --wcs-tabs-mobile-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);
+  --wcs-tabs-mobile-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);
+  --wcs-tabs-mobile-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);
+  --wcs-tabs-mobile-border-radius: var(--wcs-semantic-border-radius-base);
   --wcs-tabs-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
   display: block;
 }
@@ -100,4 +118,89 @@
   height: var(--wcs-tabs-indicator-height);
   background-color: var(--wcs-tabs-indicator-background-color);
   border-radius: var(--wcs-tabs-indicator-border-radius);
-}
+}
+
+/* ============= */
+/* region MOBILE */
+/* ============= */
+button {
+  background-color: inherit;
+}
+
+#mobile-button {
+  border: 0;
+  font-family: var(--wcs-font-sans-serif), sans-serif;
+  text-align: center;
+  color: var(--wcs-tabs-color-default);
+  font-size: 1rem;
+  font-weight: var(--wcs-tabs-font-weight-default);
+  padding-right: calc(0.75 * var(--wcs-tabs-padding-right)); /* reduce padding right because of the arrow */
+}
+#mobile-button span {
+  display: flex;
+  align-items: center;
+}
+#mobile-button .arrow {
+  fill: var(--wcs-tabs-color-default);
+}
+#mobile-button:hover .arrow {
+  fill: var(--wcs-tabs-color-hover);
+}
+#mobile-button:active .arrow {
+  fill: var(--wcs-tabs-color-press);
+}
+
+.popover {
+  display: none;
+  z-index: 9999;
+  overflow: hidden;
+  border: var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);
+  border-radius: var(--wcs-tabs-mobile-overlay-border-radius);
+  padding: var(--wcs-tabs-mobile-overlay-padding);
+  background-color: var(--wcs-tabs-mobile-overlay-background-color);
+}
+.popover [role=tab] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  gap: var(--wcs-tabs-mobile-gap);
+  padding: var(--wcs-tabs-mobile-padding);
+  height: var(--wcs-tabs-mobile-height);
+  font-weight: var(--wcs-tabs-mobile-font-weight-default);
+  font-size: var(--wcs-tabs-mobile-font-size);
+  color: var(--wcs-tabs-mobile-color);
+  background-color: var(--wcs-tabs-mobile-background-color);
+  border-radius: var(--wcs-tabs-mobile-border-radius);
+  transition-duration: var(--wcs-tabs-transition-duration);
+  transition-property: background-color, color;
+  transition-timing-function: ease;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.popover [role=tab]:focus {
+  background-color: var(--wcs-tabs-mobile-background-color-focus);
+}
+.popover [role=tab]:focus-visible {
+  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);
+  outline-offset: 0;
+  border-radius: var(--wcs-tabs-mobile-border-radius);
+}
+.popover [role=tab]:hover {
+  background-color: var(--wcs-tabs-mobile-background-color-hover);
+}
+.popover [role=tab]:active {
+  background-color: var(--wcs-tabs-mobile-background-color-press);
+}
+.popover .mobile-active {
+  font-weight: var(--wcs-tabs-mobile-font-weight-active);
+}
+
+.show {
+  display: block;
+}
+
+/* ================ */
+/* endregion MOBILE */
+/* ================ */

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

@@ -1,9 +1,15 @@
 import { h, Host } from "@stencil/core";
 import { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
+import { SelectArrow } from "../select/select-arrow";
+import { createPopper } from "@popperjs/core";
 const TABS_INHERITED_ATTRS = [];
 /**
  * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.
  *
+ * ## Accessibility guidelines 💡
+ * > - Mobile display should be used for narrower screens (automatically set by default).
+ * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+ *
  * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator
  * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator
  * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator
@@ -25,6 +31,24 @@ const TABS_INHERITED_ATTRS = [];
  * @cssprop --wcs-tabs-padding-left - Padding left of the tabs
  * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs
  * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs
+ * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)
+ * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay
  */
 export class Tabs {
     constructor() {
@@ -36,6 +60,8 @@ export class Tabs {
         this.headersOnly = false;
         this.gutter = undefined;
         this.description = undefined;
+        this.mobileOverlayExpanded = false;
+        this.mobile = false;
         this.headers = [];
         this.currentActiveTabIndex = 0;
     }
@@ -45,6 +71,13 @@ export class Tabs {
     selectedTabkeyChanged(newValue) {
         this.updateCurrentActiveIndexByTabKey(newValue);
     }
+    onMobileChange(newValue) {
+        // Remove the popper instance when switching from mobile to desktop for performance
+        if (!newValue) {
+            this.popper.destroy();
+            this.popper = null;
+        }
+    }
     emitActiveTabChange() {
         this.tabChange.emit({
             tabName: this.headers[this.currentActiveTabIndex],
@@ -63,6 +96,42 @@ export class Tabs {
     onTabLoaded() {
         this.refreshHeaders();
     }
+    onWindowClickEvent(event) {
+        if (this.mobile) {
+            const clickedOnMobileButtonOrOverlay = event.composedPath().some(el => el === this.mobileButton || el === this.popoverDiv);
+            if (this.mobileOverlayExpanded && !clickedOnMobileButtonOrOverlay) {
+                this.mobileOverlayExpanded = false;
+            }
+        }
+    }
+    /**
+     * Init resize observer for mobile
+     */
+    tabsDidLoadWithResizeObserver() {
+        const smallBreakpoint = getComputedStyle(this.el).getPropertyValue('--wcs-tabs-mobile-breakpoint') || '575px';
+        const smallBreakpointValue = parseInt(smallBreakpoint, 10);
+        return new ResizeObserver(entry => {
+            const cr = entry[0].contentRect;
+            const paddingRight = cr.right - cr.width;
+            const paddingLeft = cr.left;
+            // Switch to mobile mode if the screen is smaller than the breakpoint
+            this.mobile = cr.width <= smallBreakpointValue - (paddingLeft + paddingRight);
+        });
+    }
+    initMobileOverlay() {
+        this.popper = createPopper(this.mobileButton, this.popoverDiv, {
+            placement: 'bottom-start',
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 8]
+                    }
+                }
+            ]
+        });
+    }
     componentDidLoad() {
         this.putTabsInCorrectDivIfTheyAreNot();
         this.refreshHeaders();
@@ -72,6 +141,20 @@ export class Tabs {
         if (this.selectedKey) {
             this.updateCurrentActiveIndexByTabKey(this.selectedKey);
         }
+        if (!this.resizeObserver) {
+            this.resizeObserver = this.tabsDidLoadWithResizeObserver();
+            this.resizeObserver.observe(document.body);
+        }
+    }
+    componentDidRender() {
+        if (this.mobile) {
+            if (!this.popper) {
+                this.initMobileOverlay();
+            }
+            else {
+                this.popper.update();
+            }
+        }
     }
     // XXX: Firefox < 63
     putTabsInCorrectDivIfTheyAreNot() {
@@ -93,8 +176,7 @@ export class Tabs {
         switch (ev.key) {
             case ' ':
             case 'Enter': {
-                this.currentActiveTabIndex = tabIndex;
-                this.emitActiveTabChange();
+                this.selectTabAndEmitChangeEvent(tabIndex);
                 ev.preventDefault();
                 break;
             }
@@ -130,6 +212,53 @@ export class Tabs {
             }
         }
     }
+    handleKeyDownMobile(ev, tabIndex) {
+        var _a, _b;
+        const target = ev.target;
+        switch (ev.key) {
+            case ' ':
+            case 'Enter': {
+                this.selectTabAndEmitChangeEvent(tabIndex);
+                ev.preventDefault();
+                break;
+            }
+            case 'ArrowUp': {
+                if ((_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.classList.contains('wcs-tab-header-mobile')) {
+                    target.previousElementSibling.focus();
+                    ev.preventDefault();
+                }
+                break;
+            }
+            case 'ArrowDown': {
+                if ((_b = target.nextElementSibling) === null || _b === void 0 ? void 0 : _b.classList.contains('wcs-tab-header-mobile')) {
+                    target.nextElementSibling.focus();
+                    ev.preventDefault();
+                }
+                break;
+            }
+            case 'Home': {
+                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header-mobile:first-child');
+                if (firstTab) {
+                    firstTab.focus();
+                    ev.preventDefault();
+                }
+                break;
+            }
+            case 'End': {
+                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header-mobile:last-child');
+                if (lastTab) {
+                    lastTab.focus();
+                    ev.preventDefault();
+                }
+                break;
+            }
+            case 'Escape': {
+                this.mobileOverlayExpanded = false;
+                ev.preventDefault();
+                break;
+            }
+        }
+    }
     refreshHeaders() {
         this.headers = [];
         this.tabs
@@ -149,8 +278,13 @@ export class Tabs {
                 : [];
     }
     selectTabAndEmitChangeEvent(index) {
+        var _a;
         this.currentActiveTabIndex = index;
         this.emitActiveTabChange();
+        if (this.mobile) {
+            this.mobileOverlayExpanded = false;
+            (_a = this.mobileButton) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }
     componentWillUpdate() {
         if (!this.headersOnly) {
@@ -163,8 +297,16 @@ export class Tabs {
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, TABS_INHERITED_ATTRS));
     }
+    disconnectedCallback() {
+        var _a;
+        if (this.popper) {
+            this.popper.destroy();
+            this.popper = null;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     async setAriaAttribute(attr, value) {
-        setOrRemoveAttribute(this.nativeTablist, attr, value);
+        setOrRemoveAttribute(this.mobile ? this.popoverDiv : this.nativeTablist, attr, value);
     }
     updateTabVisibility() {
         this.tabs.forEach((el, idx) => {
@@ -179,8 +321,29 @@ export class Tabs {
     hideAllTabsContent() {
         this.tabs.forEach((el) => el.hidden = true);
     }
+    onMobileButtonClick() {
+        this.mobileOverlayExpanded = !this.mobileOverlayExpanded;
+        const tabElementToFocus = this.popoverDiv.querySelectorAll('[role=tab]')[this.currentActiveTabIndex];
+        requestAnimationFrame(() => {
+            tabElementToFocus === null || tabElementToFocus === void 0 ? void 0 : tabElementToFocus.focus();
+        });
+    }
+    onMobileButtonKeyDown(ev) {
+        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+            this.onMobileButtonClick();
+        }
+    }
+    mobileLayout() {
+        return [
+            h("button", { id: "mobile-button", class: "wcs-tab-header active", "aria-controls": "menu", role: "button", "aria-expanded": this.mobileOverlayExpanded ? 'true' : 'false', ref: el => this.mobileButton = el, onClick: () => this.onMobileButtonClick(), onKeyDown: (evt) => this.onMobileButtonKeyDown(evt), onBlur: ($event) => $event.stopImmediatePropagation() }, h("span", null, this.headers[this.currentActiveTabIndex], " ", h(SelectArrow, { up: this.mobileOverlayExpanded }))),
+            h("div", Object.assign({ class: (this.mobileOverlayExpanded ? 'show ' : '') + 'popover', role: "tablist", id: "menu", "aria-label": this.description, "aria-orientation": "vertical", ref: el => this.popoverDiv = el, tabIndex: -1 }, this.inheritedAttributes), this.headers.map((header, idx) => h("div", { class: 'wcs-tab-header-mobile ' + (this.currentActiveTabIndex === idx ? 'mobile-active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDownMobile(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, h("span", null, header))))
+        ];
+    }
+    desktopLayout() {
+        return (this.headers.map((header, idx) => h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, h("span", null, header))));
+    }
     render() {
-        return (h(Host, { key: '22e579eee0adc18107ae55e85efc5b9b6eb2f537' }, h("div", Object.assign({ key: 'f4571687ee9f7832b7a8286d21c815a300b4b201', class: "wcs-tabs-headers", role: "tablist", ref: (el) => (this.nativeTablist = el), "aria-label": this.description }, this.inheritedAttributes), this.headers.map((header, idx) => h("div", { class: 'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : ''), onClick: () => this.selectTabAndEmitChangeEvent(idx), onKeyDown: evt => this.handleKeyDown(evt, idx), tabIndex: this.currentActiveTabIndex === idx ? 0 : -1, role: "tab", id: `tabs-id-${this.tabsId}-tab-id-${idx}`, "aria-controls": `tabs-id-${this.tabsId}-tab-panel-${idx}`, "aria-label": header, "aria-selected": this.currentActiveTabIndex === idx ? 'true' : 'false' }, h("span", null, header)))), h("div", { key: 'cf1db062352a270f5458f316bc6549a93f5703be', class: "wcs-tabs" }, h("slot", { key: 'd8f0fad9ab978d34dd76f83f2bdce98a24277371', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
+        return (h(Host, { key: '072fa3551b320a6415c20a3107500f2bee2aa690' }, h("div", Object.assign({ key: '294008dc27c2ff694119c3ce136caf866a0802b3', class: "wcs-tabs-headers", role: this.mobile ? null : 'tablist', ref: (el) => (this.nativeTablist = el), "aria-orientation": this.mobile ? null : 'horizontal', "aria-label": this.mobile ? null : this.description }, (!this.mobile && this.inheritedAttributes)), this.mobile ? this.mobileLayout() : this.desktopLayout()), h("div", { key: 'd20bb48fe80434a6797c86d206a86d11081b92ea', class: "wcs-tabs" }, h("slot", { key: 'd4a31047e41627dc9c2cfb63f201e5e7ddc40f15', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
     }
     /**
      * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:
@@ -191,6 +354,7 @@ export class Tabs {
      */
     onTabsSlotChange() {
         let tabId = 0;
+        this.refreshHeaders();
         this.tabs.forEach(tab => {
             tab.setAttribute("aria-label", this.headers.at(tabId));
             // set an ID to set aria-controls on header tab 
@@ -287,7 +451,7 @@ export class Tabs {
                     "text": "Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\nseparately render the tab content."
                 },
                 "attribute": "headers-only",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "gutter": {
@@ -328,6 +492,8 @@ export class Tabs {
     }
     static get states() {
         return {
+            "mobileOverlayExpanded": {},
+            "mobile": {},
             "headers": {},
             "currentActiveTabIndex": {}
         };
@@ -398,6 +564,9 @@ export class Tabs {
             }, {
                 "propName": "selectedKey",
                 "methodName": "selectedTabkeyChanged"
+            }, {
+                "propName": "mobile",
+                "methodName": "onMobileChange"
             }];
     }
     static get listeners() {
@@ -407,6 +576,12 @@ export class Tabs {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "click",
+                "method": "onWindowClickEvent",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    State,\n    ComponentInterface,\n    Event,\n    EventEmitter,\n    Watch,\n    h,\n    Host,\n    Listen, Method\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/**\n * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\n * \n * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator \n * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator\n * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator\n * @cssprop --wcs-tabs-color-default - Text color of the tabs\n * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered\n * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed\n * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused\n * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected\n * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused\n * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered\n * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed\n * @cssprop --wcs-tabs-border-radius - Border radius of the tabs\n * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab\n * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs\n * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected\n * @cssprop --wcs-tabs-padding-top - Padding top of the tabs\n * @cssprop --wcs-tabs-padding-right - Padding right of the tabs\n * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs\n * @cssprop --wcs-tabs-padding-left - Padding left of the tabs\n * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs\n * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsTabsElement;\n    private nativeTablist!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * Tab headers alignment.\n     */\n    @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n    /**\n     * Current selected tab index.\n     * Starts at 0.\n     */\n    @Prop() selectedIndex: number = 0;\n\n    @Prop() selectedKey: any;\n\n    /**\n     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n     * separately render the tab content.\n     */\n    @Prop() headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop({ reflect: true }) gutter: boolean;\n\n    /**\n     * Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n     */\n    @Prop() description: string;\n\n    /**\n     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\n\n    private tabsId: number = tabsId++;\n\n    @Watch('selectedIndex')\n    selectedIndexChanged(newValue: number) {\n        this.currentActiveTabIndex = newValue;\n    }\n\n    @Watch('selectedKey')\n    selectedTabkeyChanged(newValue: any) {\n        this.updateCurrentActiveIndexByTabKey(newValue);\n    }\n\n    private emitActiveTabChange() {\n        this.tabChange.emit({\n            tabName: this.headers[this.currentActiveTabIndex],\n            tabIndex: this.currentActiveTabIndex,\n            selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n        });\n    }\n\n    private updateCurrentActiveIndexByTabKey(newValue: any) {\n        for (let i = 0; i < this.tabs.length; i++) {\n            const tab = this.tabs[i];\n            if (tab.itemKey === newValue) {\n                this.currentActiveTabIndex = i;\n            }\n        }\n    }\n\n    @Listen('tabLoaded')\n    onTabLoaded() {\n        this.refreshHeaders();\n    }\n\n    componentDidLoad() {\n        this.putTabsInCorrectDivIfTheyAreNot();\n        this.refreshHeaders();\n        if (this.selectedIndex) {\n            this.currentActiveTabIndex = this.selectedIndex;\n        }\n        if (this.selectedKey) {\n            this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n        }\n    }\n\n    // XXX: Firefox < 63\n    private putTabsInCorrectDivIfTheyAreNot() {\n        const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n        if (tabDiv.querySelector('slot') === null) {\n            Array.from(this.el.querySelectorAll('wcs-tab'))\n                .filter(node => node.parentNode !== tabDiv)\n                .forEach(tab => {\n                    if (tab.parentElement.isEqualNode(this.el)) {\n                        this.el.removeChild(tab);\n                        tabDiv.appendChild(tab);\n                    }\n                });\n        }\n    }\n\n    handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.currentActiveTabIndex = tabIndex;\n                this.emitActiveTabChange();\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowLeft': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowRight': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n        }\n    }\n\n    private refreshHeaders() {\n        this.headers = [];\n        this.tabs\n            .forEach(x => {\n                this.headers.push(x.getAttribute('header'));\n            });\n    }\n\n    private get tabs() {\n        const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n        // FIXME: problem with this selector being too greedy in ff < 63\n        const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n        return tabs.length !== 0\n            ? tabs\n            : tabsEl?.querySelector('slot')\n                ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n                : [];\n    }\n\n    private selectTabAndEmitChangeEvent(index: number) {\n        this.currentActiveTabIndex = index;\n        this.emitActiveTabChange()\n    }\n\n    componentWillUpdate() {\n        if (!this.headersOnly) {\n            this.updateTabVisibility();\n        } else {\n            this.hideAllTabsContent();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TABS_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTablist, attr, value);\n    }\n\n    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.hidden = true;\n            } else {\n                el.hidden = false;\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\"\n                     role=\"tablist\"\n                     ref={(el) => (this.nativeTablist = el)}\n                     aria-label={this.description}\n                     {...this.inheritedAttributes}>\n                    {this.headers.map((header, idx) =>\n                        <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n                             onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                             onKeyDown={evt => this.handleKeyDown(evt, idx)}\n                             tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                             role=\"tab\"\n                             id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                             // aria-controls refers to ID of the tab panel related to the header\n                             aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                             aria-label={header}\n                             aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                        >\n                            <span>{header}</span>\n                        </div>\n                    )}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n     * - id: to let header tab refers it proper panel\n     * - aria-label: take the same name as it's referenced header name\n     * \n     * @private\n     */\n    private onTabsSlotChange() {\n        let tabId = 0;\n        this.tabs.forEach(tab => {\n            tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n            // set an ID to set aria-controls on header tab \n            // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n            tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n            tabId++;\n        });\n    }\n}\n\nlet tabsId = 0;\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Element,\n    State,\n    ComponentInterface,\n    Event,\n    EventEmitter,\n    Watch,\n    h,\n    Host,\n    Listen, Method\n} from '@stencil/core';\n\nimport { WcsTabsAlignment, WcsTabChangeEvent } from './tabs-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { SelectArrow } from \"../select/select-arrow\";\nimport { createPopper, Instance } from \"@popperjs/core\";\n\nconst TABS_INHERITED_ATTRS = [];\n\n/**\n * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.\n * \n * ## Accessibility guidelines 💡\n * > - Mobile display should be used for narrower screens (automatically set by default).\n * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)\n * \n * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator \n * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator\n * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator\n * @cssprop --wcs-tabs-color-default - Text color of the tabs\n * @cssprop --wcs-tabs-color-hover - Text color of the tabs when hovered\n * @cssprop --wcs-tabs-color-press - Text color of the tabs when pressed\n * @cssprop --wcs-tabs-color-focus - Text color of the tabs when focused\n * @cssprop --wcs-tabs-color-selected - Text color of the tabs when selected\n * @cssprop --wcs-tabs-background-color-focus - Background color of the tabs when focused\n * @cssprop --wcs-tabs-background-color-hover - Background color of the tabs when hovered\n * @cssprop --wcs-tabs-background-color-press - Background color of the tabs when pressed\n * @cssprop --wcs-tabs-border-radius - Border radius of the tabs\n * @cssprop --wcs-tabs-border-color-focus - Outline color on a focused tab\n * @cssprop --wcs-tabs-font-weight-default - Font weight of the tabs\n * @cssprop --wcs-tabs-font-weight-selected - Font weight of the tabs when selected\n * @cssprop --wcs-tabs-padding-top - Padding top of the tabs\n * @cssprop --wcs-tabs-padding-right - Padding right of the tabs\n * @cssprop --wcs-tabs-padding-bottom - Padding bottom of the tabs\n * @cssprop --wcs-tabs-padding-left - Padding left of the tabs\n * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs\n * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs\n * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)\n * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay\n * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay\n * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay\n * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay\n */\n@Component({\n    tag: 'wcs-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class Tabs implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsTabsElement;\n    private nativeTablist!: HTMLElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * Tab headers alignment.\n     */\n    @Prop({reflect: true}) align: WcsTabsAlignment = 'start';\n\n    /**\n     * Current selected tab index.\n     * Starts at 0.\n     */\n    @Prop() selectedIndex: number = 0;\n\n    @Prop() selectedKey: any;\n\n    /**\n     * Whether to skip rendering the tabpanel with the content of the selected tab. Use this prop if you plan to\n     * separately render the tab content.\n     */\n    @Prop({ reflect: true }) headersOnly: boolean = false;\n    /** Determines if tabs header should have a border at the bottom */\n    @Prop({ reflect: true }) gutter: boolean;\n\n    /**\n     * Description is used to provide aria-label for the tabs container which has `role=\"tablist\"`.\n     */\n    @Prop() description: string;\n\n    // region MOBILE\n    \n    /**\n     * Mobile display : This div is shown on the user interface when the tabs are expanded\n     * @private\n     */\n    private popoverDiv!: HTMLDivElement;\n\n    private popper: Instance;\n    \n    @State() private mobileOverlayExpanded: boolean = false;\n\n    /**\n     * If true, the tabs will be displayed as a dropdown list containing the tabs. Useful for narrower screens.\n     */\n    @State() private mobile: boolean = false;\n\n    /**\n     * Mobile display: the selected tab semantically become a button that opens an overlay\n     */\n    private mobileButton!: HTMLButtonElement;\n\n    /**\n     * Observe the screen resize to switch between mobile and desktop mode\n     */\n    private resizeObserver: ResizeObserver;\n\n\n    // endregion MOBILE\n\n    /**\n     *\n     * Emitted when the selected tab change.\n     */\n    @Event() tabChange!: EventEmitter<WcsTabChangeEvent>;\n\n    @State() private headers: string[] = [];\n\n    @State() private currentActiveTabIndex = 0;\n\n    private tabsId: number = tabsId++;\n\n    @Watch('selectedIndex')\n    selectedIndexChanged(newValue: number) {\n        this.currentActiveTabIndex = newValue;\n    }\n\n    @Watch('selectedKey')\n    selectedTabkeyChanged(newValue: any) {\n        this.updateCurrentActiveIndexByTabKey(newValue);\n    }\n    \n    @Watch('mobile')\n    onMobileChange(newValue: boolean) {\n        // Remove the popper instance when switching from mobile to desktop for performance\n        if (!newValue) {\n            this.popper.destroy();\n            this.popper = null;\n        }\n    }\n\n    private emitActiveTabChange() {\n        this.tabChange.emit({\n            tabName: this.headers[this.currentActiveTabIndex],\n            tabIndex: this.currentActiveTabIndex,\n            selectedKey: this.tabs[this.currentActiveTabIndex].itemKey\n        });\n    }\n\n    private updateCurrentActiveIndexByTabKey(newValue: any) {\n        for (let i = 0; i < this.tabs.length; i++) {\n            const tab = this.tabs[i];\n            if (tab.itemKey === newValue) {\n                this.currentActiveTabIndex = i;\n            }\n        }\n    }\n\n    @Listen('tabLoaded')\n    onTabLoaded() {\n        this.refreshHeaders();\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        if (this.mobile) {\n            const clickedOnMobileButtonOrOverlay = event.composedPath().some(el => el === this.mobileButton || el === this.popoverDiv);\n            if (this.mobileOverlayExpanded && !clickedOnMobileButtonOrOverlay) {\n                this.mobileOverlayExpanded = false;\n            }\n        }\n    }\n\n    /**\n     * Init resize observer for mobile\n     */\n    private tabsDidLoadWithResizeObserver(): ResizeObserver {\n        const smallBreakpoint = getComputedStyle(this.el).getPropertyValue('--wcs-tabs-mobile-breakpoint') || '575px';\n        const smallBreakpointValue = parseInt(smallBreakpoint, 10);\n\n        return new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            // Switch to mobile mode if the screen is smaller than the breakpoint\n            this.mobile = cr.width <= smallBreakpointValue - (paddingLeft + paddingRight);\n        });\n    }\n\n\n    private initMobileOverlay() {\n        this.popper = createPopper(this.mobileButton, this.popoverDiv, {\n            placement: 'bottom-start',\n            strategy: 'fixed',\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n    }\n\n    componentDidLoad() {\n        this.putTabsInCorrectDivIfTheyAreNot();\n        this.refreshHeaders();\n        if (this.selectedIndex) {\n            this.currentActiveTabIndex = this.selectedIndex;\n        }\n        if (this.selectedKey) {\n            this.updateCurrentActiveIndexByTabKey(this.selectedKey);\n        }\n        if (!this.resizeObserver) {\n            this.resizeObserver = this.tabsDidLoadWithResizeObserver();\n            this.resizeObserver.observe(document.body);\n        }\n    }\n\n    componentDidRender() {\n        if (this.mobile) {\n            if(!this.popper) {\n                this.initMobileOverlay();\n            } else {\n                this.popper.update();\n            }\n        }\n    }\n\n    // XXX: Firefox < 63\n    private putTabsInCorrectDivIfTheyAreNot() {\n        const tabDiv = this.el.shadowRoot.querySelector('.wcs-tabs');\n        if (tabDiv.querySelector('slot') === null) {\n            Array.from(this.el.querySelectorAll('wcs-tab'))\n                .filter(node => node.parentNode !== tabDiv)\n                .forEach(tab => {\n                    if (tab.parentElement.isEqualNode(this.el)) {\n                        this.el.removeChild(tab);\n                        tabDiv.appendChild(tab);\n                    }\n                });\n        }\n    }\n\n    handleKeyDown(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.selectTabAndEmitChangeEvent(tabIndex);\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowLeft': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowRight': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n        }\n    }\n\n    handleKeyDownMobile(ev: KeyboardEvent, tabIndex: number) {\n        const target = ev.target as HTMLDivElement;\n        switch (ev.key) {\n            case ' ':\n            case 'Enter': {\n                this.selectTabAndEmitChangeEvent(tabIndex);\n                ev.preventDefault();\n                break;\n            }\n            case 'ArrowUp': {\n                if (target.previousElementSibling?.classList.contains('wcs-tab-header-mobile')) {\n                    (target.previousElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'ArrowDown': {\n                if (target.nextElementSibling?.classList.contains('wcs-tab-header-mobile')) {\n                    (target.nextElementSibling as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Home': {\n                const firstTab = this.el.shadowRoot.querySelector('.wcs-tab-header-mobile:first-child');\n                if (firstTab) {\n                    (firstTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'End': {\n                const lastTab = this.el.shadowRoot.querySelector('.wcs-tab-header-mobile:last-child');\n                if (lastTab) {\n                    (lastTab as HTMLDivElement).focus();\n                    ev.preventDefault();\n                }\n                break;\n            }\n            case 'Escape': {\n                this.mobileOverlayExpanded = false;\n                ev.preventDefault();\n                break;\n            }\n        }\n    }\n\n    private refreshHeaders() {\n        this.headers = [];\n        this.tabs\n            .forEach(x => {\n                this.headers.push(x.getAttribute('header'));\n            });\n    }\n\n    private get tabs() {\n        const tabsEl = this.el.shadowRoot.querySelector('.wcs-tabs');\n        // FIXME: problem with this selector being too greedy in ff < 63\n        const tabs = this.el.shadowRoot.querySelectorAll('.wcs-tabs > wcs-tab');\n\n        return tabs.length !== 0\n            ? tabs\n            : tabsEl?.querySelector('slot')\n                ? tabsEl?.querySelector('slot')?.assignedElements() as unknown as NodeListOf<HTMLWcsTabElement>\n                : [];\n    }\n\n    private selectTabAndEmitChangeEvent(index: number) {\n        this.currentActiveTabIndex = index;\n        this.emitActiveTabChange();\n        \n        if (this.mobile) {\n            this.mobileOverlayExpanded = false;\n            this.mobileButton?.focus();\n            \n        }\n    }\n\n    componentWillUpdate() {\n        if (!this.headersOnly) {\n            this.updateTabVisibility();\n        } else {\n            this.hideAllTabsContent();\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, TABS_INHERITED_ATTRS),\n        };\n    }\n\n    disconnectedCallback(): void {\n        if (this.popper) {\n            this.popper.destroy();\n            this.popper = null;\n        }\n        this.resizeObserver?.disconnect();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.mobile ? this.popoverDiv : this.nativeTablist, attr, value);\n    }\n\n    private updateTabVisibility() {\n        this.tabs.forEach((el: HTMLWcsTabElement, idx: number) => {\n            if (idx !== this.currentActiveTabIndex) {\n                el.hidden = true;\n            } else {\n                el.hidden = false;\n            }\n        });\n    }\n\n    private hideAllTabsContent() {\n        this.tabs.forEach((el: HTMLWcsTabElement) => el.hidden = true);\n    }\n    \n    onMobileButtonClick() {\n        this.mobileOverlayExpanded = !this.mobileOverlayExpanded;\n        const tabElementToFocus = this.popoverDiv.querySelectorAll('[role=tab]')[this.currentActiveTabIndex] as HTMLElement;\n        requestAnimationFrame(() => {\n            tabElementToFocus?.focus();\n        })\n    }\n    \n    onMobileButtonKeyDown(ev: KeyboardEvent) {\n        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {\n            this.onMobileButtonClick();\n        }\n    }\n\n    mobileLayout() {\n        return [\n            <button id=\"mobile-button\"\n                    class=\"wcs-tab-header active\"\n                    aria-controls=\"menu\"\n                    role=\"button\"\n                    aria-expanded={this.mobileOverlayExpanded ? 'true' : 'false'}\n                    ref={el => this.mobileButton = el}\n                    onClick={() => this.onMobileButtonClick()}\n                    onKeyDown={(evt) => this.onMobileButtonKeyDown(evt)}\n                    onBlur={($event) => $event.stopImmediatePropagation()}>\n                <span>\n                    {this.headers[this.currentActiveTabIndex]} <SelectArrow up={this.mobileOverlayExpanded}/>\n                </span>\n            </button>,\n            <div class={(this.mobileOverlayExpanded ? 'show ' : '') + 'popover'}\n                 role=\"tablist\"\n                 id=\"menu\"\n                 aria-label={this.description}\n                 aria-orientation=\"vertical\"\n                 ref={el => this.popoverDiv = el}\n                 tabIndex={-1}\n                 {...this.inheritedAttributes}>\n                {this.headers.map((header, idx) =>\n                    <div class={'wcs-tab-header-mobile ' + (this.currentActiveTabIndex === idx ? 'mobile-active' : '')}\n                         onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                         onKeyDown={evt => this.handleKeyDownMobile(evt, idx)}\n                         tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                         role=\"tab\"\n                         id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                        // aria-controls refers to ID of the tab panel related to the header\n                         aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                         aria-label={header}\n                         aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                    >\n                        <span>{header}</span>\n                    </div>\n                )}\n            </div>\n        ]\n    }\n    \n    desktopLayout() {\n        return (\n            this.headers.map((header, idx) =>\n                <div class={'wcs-tab-header ' + (this.currentActiveTabIndex === idx ? 'active' : '')}\n                     onClick={() => this.selectTabAndEmitChangeEvent(idx)}\n                     onKeyDown={evt => this.handleKeyDown(evt, idx)}\n                     tabIndex={this.currentActiveTabIndex === idx ? 0 : -1}\n                     role=\"tab\"\n                     id={`tabs-id-${this.tabsId}-tab-id-${idx}`}\n                    // aria-controls refers to ID of the tab panel related to the header\n                     aria-controls={`tabs-id-${this.tabsId}-tab-panel-${idx}`}\n                     aria-label={header}\n                     aria-selected={this.currentActiveTabIndex === idx ? 'true' : 'false'}\n                >\n                    <span>{header}</span>\n                </div>\n            )\n        )\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"wcs-tabs-headers\"\n                     role={this.mobile ? null : 'tablist'}\n                     ref={(el) => (this.nativeTablist = el)}\n                     aria-orientation={this.mobile ? null : 'horizontal'}\n                     aria-label={this.mobile ? null : this.description}\n                     {...(!this.mobile && this.inheritedAttributes)}>\n                    {this.mobile ? this.mobileLayout() : this.desktopLayout()}\n                </div>\n                <div class=\"wcs-tabs\">\n                    <slot onSlotchange={() => this.onTabsSlotChange()} name=\"wcs-tab\"/>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:\n     * - id: to let header tab refers it proper panel\n     * - aria-label: take the same name as it's referenced header name\n     * \n     * @private\n     */\n    private onTabsSlotChange() {\n        let tabId = 0;\n        this.refreshHeaders();\n        this.tabs.forEach(tab => {\n            tab.setAttribute(\"aria-label\", this.headers.at(tabId));\n            // set an ID to set aria-controls on header tab \n            // (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/#:~:text=Refers%20to%20the%20element)\n            tab.setAttribute(\"id\", `tabs-id-${this.tabsId}-tab-panel-${tabId}`);\n            tabId++;\n        });\n    }\n}\n\nlet tabsId = 0;\n"]}

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

@@ -170,7 +170,7 @@ export class Textarea {
     render() {
         const value = this.getValue();
         const style = Object.assign({}, (this.resize && { 'resize': this.resize }));
-        return (h(Host, { key: 'd2f0cea260f9745f49f4aa259004b704af492c33', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("textarea", Object.assign({ key: 'a5c87bbb2888132fd62f26df0f36e5d4e003ad84', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
+        return (h(Host, { key: '2ffd19f34c0feb9a49931942e48d7b7193ff377e', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("textarea", Object.assign({ key: 'ce0c430d962cf93b962c7a6227ec98d6cfcc46f0', class: "native-textarea", ref: el => this.nativeInput = el, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, style: style }, this.inheritedAttributes), value)));
     }
     static get is() { return "wcs-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -445,7 +445,7 @@ export class Textarea {
                     "text": "If `true`, the user must fill in a value before submitting a form."
                 },
                 "attribute": "required",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "spellcheck": {
@@ -562,7 +562,7 @@ export class Textarea {
                     "text": "If `true`, the element height will increase based on the value."
                 },
                 "attribute": "auto-grow",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "value": {