wcs-core 7.1.0 → 7.2.1

package/dist/esm/wcs-skeleton-circle.entry.js

@@ -10,7 +10,7 @@ const SkeletonCircle = class {
         this.radius = 50;
     }
     render() {
-        return (h(Host, { key: '35693d9a55aa03effb704c51234571cd9ebbbeac', style: { width: `${this.radius}px`, height: `${this.radius}px` } }, h("span", { key: 'b1e806d2d016647626956aeb2962681d13083762', "aria-hidden": "true" })));
+        return (h(Host, { key: '0d5704fdc6c41256665994d2a2d63c525e14ee6c', style: { width: `${this.radius}px`, height: `${this.radius}px` } }, h("span", { key: 'e2712e309be66af8be9fd3aee2b34ee20b67a980', "aria-hidden": "true" })));
     }
 };
 SkeletonCircle.style = WcsSkeletonCircleStyle0;

package/dist/esm/wcs-skeleton-rectangle.entry.js

@@ -12,7 +12,7 @@ const SkeletonRectangle = class {
         this.width = 'auto';
     }
     render() {
-        return (h(Host, { key: '79da527f4afa1c4b972d8a91cf97aadf90c207f8', style: { height: this.height, width: this.width } }, h("span", { key: '53c1ad5daec31199e59326a2fd7e1730c895c2f6', "aria-hidden": "true" })));
+        return (h(Host, { key: 'edf5aa2fa711b6e27d066dab259559154af9b08e', style: { height: this.height, width: this.width } }, h("span", { key: 'f139ef33c3d2a10aede15bbd540f10758cc1ce16', "aria-hidden": "true" })));
     }
 };
 SkeletonRectangle.style = WcsSkeletonRectangleStyle0;

package/dist/esm/wcs-skeleton-text.entry.js

@@ -10,7 +10,7 @@ const SkeletonText = class {
         this.height = 'body';
     }
     render() {
-        return h("span", { key: '9f7fd22e258db1be4ca8aef533e548fe14fc24ea', "aria-hidden": "true" });
+        return h("span", { key: 'ba89cefda296d6c9fec4c035756a12deddfc35e3', "aria-hidden": "true" });
     }
 };
 SkeletonText.style = WcsSkeletonTextStyle0;

package/dist/esm/wcs-switch.entry.js

@@ -61,7 +61,7 @@ const Switch = class {
         return getSlottedContentText(this.el);
     }
     render() {
-        return (h(Host, { key: '7583a10f5f7f2dbad7b31fcab1864d950b7a773c' }, h("label", { key: '93dcf06138949976d600935058f82dc7c0fd44cb', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '274e8126f833188a2e60f8ed62f1fbc63efa7970', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onClick: this.handleInputClick.bind(this), onFocus: this.handleFocus.bind(this), checked: this.checked, id: this.name, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.nativeInput = el; } }, this.inheritedAttributes)), h("span", { key: '57e6bcc1b48d4765ec081736e7bc13000dbaa665', class: "wcs-checkmark" }), h("span", { key: 'f03e632e387bb25030ab0cd0f4e5aa451c17d042', class: "text" }, h("slot", { key: 'ab9340d1fa032ab2da0318387c5332def8b757dd' })))));
+        return (h(Host, { key: 'cedd87377ee17731f5422f42117321f23d944281' }, h("label", { key: '1bb8e511921d30ccf6153738eb6a0844ea3f4082', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: 'b05af8decb4cd3c23b2c814fd849612370c896e6', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onClick: this.handleInputClick.bind(this), onFocus: this.handleFocus.bind(this), checked: this.checked, id: this.name, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, ref: el => { this.nativeInput = el; } }, this.inheritedAttributes)), h("span", { key: 'fcc0664435cb4d40d6fd95571ff233ae44806f58', class: "wcs-checkmark" }), h("span", { key: '67a951e606c537e911352799de289e4eefc87e23', class: "text" }, h("slot", { key: 'dbe2ced66c88f5184144661215c9332d464c01fc' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/wcs-switch.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-switch.entry.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,4mJAA4mJ,CAAC;AAC/nJ,wBAAe,SAAS;;ACgBxB,MAAM,sBAAsB,GAAG,CAAC,UAAU,CAAC,CAAC;MAwC/B,MAAM;;;;;;QAEP,aAAQ,GAAG,cAAc,SAAS,EAAE,EAAE,CAAC;QAEvC,wBAAmB,GAAyB,EAAE,CAAC;oBAExC,IAAI,CAAC,QAAQ;uBAKK,KAAK;8BAKwB,QAAQ;wBAKzB,KAAK;;IAkBlD,YAAY,CAAC,EAAS;QAClB,EAAE,CAAC,wBAAwB,EAAE,CAAC;QAC9B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAGD,MAAM,eAAe,CAAC,CAAQ;QAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC5B;IAED,gBAAgB,CAAC,EAAgB;;;QAG7B,IAAI,EAAE,CAAC,MAAM,EAAE;YACX,EAAE,CAAC,wBAAwB,EAAE,CAAA;YAC7B,EAAE,CAAC,cAAc,EAAE,CAAC;SACvB;KACJ;IAED,iBAAiB;QACb,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAChB,OAAO,EAAE,IAAI,CAAC,OAAO;SACxB,CAAC,CAAC;KACN;IAED,WAAW,CAAC,KAAiB;QACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,UAAU,CAAC,KAAiB;QACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACvD;IAGD,MAAM,QAAQ;QACV,OAAO,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACzC;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACD,8DAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ,IACzE,4EAAO,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EACtC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,EAAE,MAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAA,EAAC,IAC9B,IAAI,CAAC,mBAAmB,EAC3B,EACR,6DAAM,KAAK,EAAC,eAAe,GAAQ,EACnC,6DAAM,KAAK,EAAC,MAAM,IACd,8DAAO,CACJ,CACH,CACL,EACT;KACL;;;;AAGL,IAAI,SAAS,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);\n    --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n    --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n    // TODO : Les variables figma sont bindées sur les primitives\n    --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n    --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n    --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n    --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n    --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-switch-dot-size: 0.875rem; /* 14px */\n\n    --wcs-switch-height: var(--wcs-semantic-size-xs);\n    --wcs-switch-width: var(--wcs-semantic-size-l);\n\n    --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    display: flex;\n    user-select: none;\n    margin-bottom: 0;\n\n    gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/* If the selector focus-visible is not supported by the browser, use focus-within instead */\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n    }\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]) {\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]) {\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]) {\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default switch */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n}\n\n.text {\n    color: var(--wcs-switch-text-color-default);\n\n    font-weight: var(--wcs-switch-text-font-weight-default);\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    font-weight: var(--wcs-switch-text-font-weight-selected);\n    color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: var(--wcs-switch-padding-vertical);\n    left: var(--wcs-switch-padding-horizontal);\n    width: var(--wcs-switch-dot-size);\n    height: var(--wcs-switch-dot-size);\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-switch-dot-color-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled-selected);\n    }\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: var(--wcs-switch-width);\n    height: var(--wcs-switch-height);\n    border-radius: var(--wcs-switch-border-radius);\n    background-color: var(--wcs-switch-background-color-initial);\n\n    min-width: 3rem;\n    position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* When the switch is checked, change the dot to white */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/* When the switch is checked, change background */\ninput:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n\n/* When the switch is checked and hover, change background */\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n */\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: {\n        delegatesFocus: true,\n    }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private switchId = `wcs-switch-${switchIds++}`;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({reflect: true}) checked = false;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({reflect: true}) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify whether the switch is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Emitted when the switch has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n    \n    /**\n     * Emitted when the switch loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    \n    handleChange(ev: Event) {\n        ev.stopImmediatePropagation();\n        ev.preventDefault();\n        this.toggleSwitchState();\n    }\n\n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.toggleSwitchState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleSwitchState() {\n        if (this.disabled) return;\n        \n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n\n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onBlur={this.handleBlur.bind(this)}\n                           onChange={this.handleChange.bind(this)}\n                           onClick={this.handleInputClick.bind(this)}\n                           onFocus={this.handleFocus.bind(this)}\n                           checked={this.checked}\n                           id={this.name}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.nativeInput = el}}\n                           {...this.inheritedAttributes}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet switchIds = 0;\n"],"version":3}
+{"file":"wcs-switch.entry.js","mappings":"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","names":[],"sources":["src/components/switch/switch.scss?tag=wcs-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-switch-background-color-initial: var(--wcs-semantic-color-background-control-indicator-default);\n    --wcs-switch-background-color-final: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-switch-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-disabled-selected: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-switch-background-color-hover-selected: var(--wcs-semantic-color-background-control-indicator-hover);\n\n    --wcs-switch-padding-horizontal: var(--wcs-semantic-spacing-small);\n    --wcs-switch-padding-vertical: calc((var(--wcs-switch-height) - var(--wcs-switch-dot-size)) / 2); // to center the dot vertically, at the middle of the dot\n\n    // TODO : Les variables figma sont bindées sur les primitives\n    --wcs-switch-dot-color-default: var(--wcs-semantic-color-foreground-brand); // the dot color when the switch is not checked\n    --wcs-switch-dot-color-selected: var(--wcs-semantic-color-foreground-control-indicator-selected); // the dot color when the switch is checked\n    --wcs-switch-dot-color-disabled: var(--wcs-semantic-color-foreground-control-indicator-disabled);\n\n    --wcs-switch-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-switch-text-color-selected: var(--wcs-semantic-color-text-primary);\n    --wcs-switch-text-color-disabled: var(--wcs-semantic-color-text-disabled);\n\n    --wcs-switch-text-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-switch-text-font-weight-selected: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-switch-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-switch-dot-translate-x: calc(var(--wcs-switch-width) - var(--wcs-switch-dot-size) - (2 * var(--wcs-switch-padding-horizontal)));\n    --wcs-switch-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    --wcs-switch-dot-size: 0.875rem; /* 14px */\n\n    --wcs-switch-height: var(--wcs-semantic-size-xs);\n    --wcs-switch-width: var(--wcs-semantic-size-l);\n\n    --wcs-switch-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-switch-gap: var(--wcs-semantic-spacing-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    display: flex;\n    user-select: none;\n    margin-bottom: 0;\n\n    gap: var(--wcs-switch-gap);\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n}\n\n/* If the selector focus-visible is not supported by the browser, use focus-within instead */\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-switch-outline-color-focus), $border-radius: var(--wcs-switch-border-radius));\n    }\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]) {\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]) {\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]) {\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default switch */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 0;\n    width: 0;\n}\n\n.text {\n    color: var(--wcs-switch-text-color-default);\n\n    font-weight: var(--wcs-switch-text-font-weight-default);\n    line-height: 1.375;\n}\n\n.wcs-container:not([aria-disabled]) input:checked ~ .text {\n    font-weight: var(--wcs-switch-text-font-weight-selected);\n    color: var(--wcs-switch-text-color-selected);\n}\n\n.wcs-checkmark::before {\n    position: absolute;\n    transition: all var(--wcs-switch-transition-duration) ease-out;\n}\n\n.wcs-checkmark::before {\n    bottom: var(--wcs-switch-padding-vertical);\n    left: var(--wcs-switch-padding-horizontal);\n    width: var(--wcs-switch-dot-size);\n    height: var(--wcs-switch-dot-size);\n    content: \"\";\n    border-radius: 50%;\n    background-color: var(--wcs-switch-dot-color-default);\n}\n\n:host([disabled]:not([checked])) {\n    .wcs-checkmark::before {\n        background-color: var(--wcs-switch-dot-color-disabled);\n    }\n\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled);\n    }\n}\n\n:host([disabled][checked]) {\n    .wcs-checkmark {\n        background-color: var(--wcs-switch-background-color-disabled-selected);\n    }\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-switch-text-color-disabled);\n    }\n}\n\n.wcs-checkmark {\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    width: var(--wcs-switch-width);\n    height: var(--wcs-switch-height);\n    border-radius: var(--wcs-switch-border-radius);\n    background-color: var(--wcs-switch-background-color-initial);\n\n    min-width: 3rem;\n    position: relative;\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* When the switch is checked, change the dot to white */\ninput:not([disabled]):checked + .wcs-checkmark::before,\n.wcs-container:focus input:not([disabled]) + .wcs-checkmark::before {\n    background-color: var(--wcs-switch-dot-color-selected);\n}\n\n/* Switch transition */\ninput:checked + .wcs-checkmark::before {\n    transform: translateX(var(--wcs-switch-dot-translate-x));\n}\n\n/* When the switch is checked, change background */\ninput:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-final);\n}\n\n/* When the switch is checked and hover, change background */\n.wcs-container:hover input:not([disabled]):checked + .wcs-checkmark {\n    background-color: var(--wcs-switch-background-color-hover-selected);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop\n} from '@stencil/core';\nimport { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst SWITCH_INHERITED_ATTRS = ['tabindex'];\n\n/**\n * The switch component is a control used to switch between on and off state.\n * \n * @cssprop --wcs-switch-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-switch-text-color-default - Color of the text when the switch is not selected\n * @cssprop --wcs-switch-text-color-selected - Color of the text when the switch is selected\n * @cssprop --wcs-switch-text-color-disabled - Color of the text when the switch is disabled\n\n * \n * @cssprop --wcs-switch-background-color-initial - Background color of the switch when not selected\n * @cssprop --wcs-switch-background-color-final - Background color of the switch when selected\n * @cssprop --wcs-switch-background-color-disabled - Background color of the switch when disabled\n * @cssprop --wcs-switch-background-color-disabled-selected - Background color of the switch when disabled and selected\n * @cssprop --wcs-switch-background-color-hover-selected - Background color of the switch when hovered and selected\n * \n * @cssprop --wcs-switch-height - Height of the switch\n * @cssprop --wcs-switch-width - Width of the switch\n * @cssprop --wcs-switch-border-radius - Border radius of the switch\n * @cssprop --wcs-switch-padding-horizontal - Horizontal padding of the switch\n * @cssprop --wcs-switch-padding-vertical - Vertical padding of the switch\n * \n * @cssprop --wcs-switch-dot-color-default - Color of the dot when not selected\n * @cssprop --wcs-switch-dot-color-selected - Color of the dot when selected\n * @cssprop --wcs-switch-dot-color-disabled - Color of the dot when disabled\n * \n * @cssprop --wcs-switch-dot-translate-x - Horizontal translation of the dot (from left to right = right to left)\n * @cssprop --wcs-switch-dot-size - Size of the dot\n * \n * @cssprop --wcs-switch-gap - Gap between the switch and the text\n */\n@Component({\n    tag: 'wcs-switch',\n    styleUrl: 'switch.scss',\n    shadow: {\n        delegatesFocus: true,\n    }\n})\nexport class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private switchId = `wcs-switch-${switchIds++}`;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    @Prop() name = this.switchId;\n\n    /**\n     * If `true`, the switch is selected.\n     */\n    @Prop({ reflect: true }) checked: boolean = false;\n\n    /**\n     * Specifie the alignment of the switch with the label content\n     */\n    @Prop({ reflect: true }) labelAlignment: SwitchLabelAlignment = 'center';\n\n    /**\n     * Specify whether the switch is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<SwitchChangeEventDetail>;\n\n    /**\n     * Emitted when the switch has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n    \n    /**\n     * Emitted when the switch loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    \n    handleChange(ev: Event) {\n        ev.stopImmediatePropagation();\n        ev.preventDefault();\n        this.toggleSwitchState();\n    }\n\n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n\n        this.toggleSwitchState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleSwitchState() {\n        if (this.disabled) return;\n        \n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n\n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, SWITCH_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onBlur={this.handleBlur.bind(this)}\n                           onChange={this.handleChange.bind(this)}\n                           onClick={this.handleInputClick.bind(this)}\n                           onFocus={this.handleFocus.bind(this)}\n                           checked={this.checked}\n                           id={this.name}\n                           class=\"wcs-switch\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           ref={el => {this.nativeInput = el}}\n                           {...this.inheritedAttributes}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet switchIds = 0;\n"],"version":3}

package/dist/esm/wcs-tab.entry.js

@@ -14,7 +14,7 @@ const Tab = class {
         this.tabLoaded.emit();
     }
     render() {
-        return (h(Host, { key: '805ddbb0eafcce267e7f102f8d7c19712d5b04be', slot: "wcs-tab", role: "tabpanel" }, h("slot", { key: 'ec2afee10cefdf575df100582e769e3bf93d2412' })));
+        return (h(Host, { key: '794409fa3f716ebb644a961702f98908d396c9e2', slot: "wcs-tab", role: "tabpanel" }, h("slot", { key: '9d98f7701d339eb5a1c3a9680595d7e5e88beba6' })));
     }
 };
 Tab.style = WcsTabStyle0;

package/dist/esm/wcs-tabs.entry.js

@@ -1,7 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d9de61ce.js';
 import { i as inheritAriaAttributes, a as inheritAttributes, s as setOrRemoveAttribute } from './helpers-ece6a2d3.js';
+import { S as SelectArrow } from './select-arrow-e62de386.js';
+import { c as createPopper } from './popper-e491c314.js';
 
-const tabsCss = ":host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--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-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}";
+const tabsCss = ":host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--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}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}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));}#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}";
 const WcsTabsStyle0 = tabsCss;
 
 const TABS_INHERITED_ATTRS = [];
@@ -17,6 +19,8 @@ const Tabs = class {
         this.headersOnly = false;
         this.gutter = undefined;
         this.description = undefined;
+        this.mobileOverlayExpanded = false;
+        this.mobile = false;
         this.headers = [];
         this.currentActiveTabIndex = 0;
     }
@@ -26,6 +30,13 @@ const Tabs = class {
     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],
@@ -44,6 +55,42 @@ const Tabs = class {
     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();
@@ -53,6 +100,20 @@ const Tabs = class {
         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() {
@@ -74,8 +135,7 @@ const Tabs = class {
         switch (ev.key) {
             case ' ':
             case 'Enter': {
-                this.currentActiveTabIndex = tabIndex;
-                this.emitActiveTabChange();
+                this.selectTabAndEmitChangeEvent(tabIndex);
                 ev.preventDefault();
                 break;
             }
@@ -111,6 +171,53 @@ const Tabs = class {
             }
         }
     }
+    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
@@ -130,8 +237,13 @@ const Tabs = class {
                 : [];
     }
     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) {
@@ -144,8 +256,16 @@ const Tabs = class {
     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) => {
@@ -160,8 +280,29 @@ const Tabs = class {
     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:
@@ -172,6 +313,7 @@ const Tabs = class {
      */
     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 
@@ -183,7 +325,8 @@ const Tabs = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "selectedIndex": ["selectedIndexChanged"],
-        "selectedKey": ["selectedTabkeyChanged"]
+        "selectedKey": ["selectedTabkeyChanged"],
+        "mobile": ["onMobileChange"]
     }; }
 };
 let tabsId = 0;

package/dist/esm/wcs-tabs.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/tabs/tabs.scss?tag=wcs-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-tabs-indicator-height: calc(var(--wcs-semantic-size-base) / 2);\n    --wcs-tabs-indicator-background-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-indicator-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-tabs-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-tabs-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-tabs-color-selected: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    --wcs-tabs-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n    --wcs-tabs-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-tabs-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-tabs-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-tabs-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-tabs-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-tabs-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-tabs-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-tabs-padding-bottom: calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));\n    --wcs-tabs-padding-left: var(--wcs-semantic-spacing-large);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-tabs-headers-border-bottom: var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);\n\n    --wcs-tabs-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n}\n\n:host([align=start]) .wcs-tabs-headers {\n    justify-content: start;\n}\n\n:host([align=end]) .wcs-tabs-headers {\n    justify-content: end;\n}\n\n:host([align=center]) .wcs-tabs-headers {\n    justify-content: center;\n}\n\n.wcs-tabs-headers {\n    overflow-x: auto;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n\n:host([gutter]) {\n    .wcs-tabs-headers {\n        border-bottom: var(--wcs-tabs-headers-border-bottom);\n    }\n}\n\n.wcs-tab-header {\n    position: relative;\n\n    padding: var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);\n    border-radius: var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n    transition: all var(--wcs-tabs-transition-duration) ease-out;\n\n    span {\n        text-align: center;\n        color: var(--wcs-tabs-color-default);\n        font-size: 1rem;\n        font-weight: var(--wcs-tabs-font-weight-default);\n    }\n\n    &:hover {\n        background-color: var(--wcs-tabs-background-color-hover);\n\n        span {\n            color: var(--wcs-tabs-color-hover);\n        }\n    }\n\n    // TODO : mettre le focus outline sur la wcs-tab-header comme dans figma\n    &:focus-visible > span {\n        @include focus-outline(var(--wcs-tabs-border-color-focus));\n    }\n\n    &:active {\n        background-color: var(--wcs-tabs-background-color-press);\n\n        span {\n            color: var(--wcs-tabs-color-press);\n        }\n    }\n}\n\n\n.active {\n    span {\n        font-weight: var(--wcs-tabs-font-weight-selected);\n        color: var(--wcs-tabs-color-selected);\n    }\n\n    &::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        content: \"\";\n        height: var(--wcs-tabs-indicator-height);\n        background-color: var(--wcs-tabs-indicator-background-color);\n        border-radius: var(--wcs-tabs-indicator-border-radius);\n    }\n}\n","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":"wcs-tabs.entry.js","mappings":"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","names":[],"sources":["src/components/tabs/tabs.scss?tag=wcs-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-tabs-indicator-height: calc(var(--wcs-semantic-size-base) / 2);\n    --wcs-tabs-indicator-background-color: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-indicator-border-radius: var(--wcs-semantic-border-radius-full);\n\n    --wcs-tabs-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-tabs-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-tabs-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-tabs-color-selected: var(--wcs-semantic-color-foreground-action-secondary-default);\n\n    --wcs-tabs-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n    --wcs-tabs-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-tabs-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-tabs-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-tabs-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-tabs-font-weight-default: var(--wcs-semantic-font-weight-roman);\n    --wcs-tabs-font-weight-selected: var(--wcs-semantic-font-weight-roman);\n\n    --wcs-tabs-padding-top: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-padding-right: var(--wcs-semantic-spacing-large);\n    --wcs-tabs-padding-bottom: calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));\n    --wcs-tabs-padding-left: var(--wcs-semantic-spacing-large);\n\n    --wcs-tabs-gutter-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-gutter-background-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-tabs-headers-border-bottom: var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);\n\n    --wcs-tabs-mobile-breakpoint: var(--wcs-phone-breakpoint-max-width, 575px);\n\n    --wcs-tabs-mobile-overlay-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-tabs-mobile-overlay-border-color: var(--wcs-semantic-color-border-secondary);\n    --wcs-tabs-mobile-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);\n    --wcs-tabs-mobile-overlay-padding: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-mobile-overlay-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-tabs-mobile-gap: var(--wcs-semantic-spacing-base);\n    --wcs-tabs-mobile-padding: 0 var(--wcs-semantic-spacing-base);\n    --wcs-tabs-mobile-height: var(--wcs-semantic-size-m);\n    --wcs-tabs-mobile-font-weight-default: var(--wcs-semantic-font-weight-medium);\n    --wcs-tabs-mobile-font-weight-active: var(--wcs-semantic-font-weight-black);\n    --wcs-tabs-mobile-font-size: var(--wcs-semantic-font-size-base);\n    --wcs-tabs-mobile-color: var(--wcs-semantic-color-text-primary);\n    --wcs-tabs-mobile-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-tabs-mobile-background-color-focus: var(--wcs-semantic-color-background-action-secondary-focus);\n    --wcs-tabs-mobile-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-tabs-mobile-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-tabs-mobile-border-radius: var(--wcs-semantic-border-radius-base);\n\n    --wcs-tabs-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: block;\n}\n\n:host([align=start]) .wcs-tabs-headers {\n    justify-content: start;\n}\n\n:host([align=end]) .wcs-tabs-headers {\n    justify-content: end;\n}\n\n:host([align=center]) .wcs-tabs-headers {\n    justify-content: center;\n}\n\n.wcs-tabs-headers {\n    overflow-x: auto;\n    display: flex;\n    flex-direction: row;\n    position: relative;\n}\n\n:host([gutter]) {\n    .wcs-tabs-headers {\n        border-bottom: var(--wcs-tabs-headers-border-bottom);\n    }\n}\n\n.wcs-tab-header {\n    position: relative;\n\n    padding: var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);\n    border-radius: var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n    transition: all var(--wcs-tabs-transition-duration) ease-out;\n\n    span {\n        text-align: center;\n        color: var(--wcs-tabs-color-default);\n        font-size: 1rem;\n        font-weight: var(--wcs-tabs-font-weight-default);\n    }\n\n    &:hover {\n        background-color: var(--wcs-tabs-background-color-hover);\n\n        span {\n            color: var(--wcs-tabs-color-hover);\n        }\n    }\n\n    // TODO : mettre le focus outline sur la wcs-tab-header comme dans figma\n    &:focus-visible > span {\n        @include focus-outline(var(--wcs-tabs-border-color-focus));\n    }\n\n    &:active {\n        background-color: var(--wcs-tabs-background-color-press);\n\n        span {\n            color: var(--wcs-tabs-color-press);\n        }\n    }\n}\n\n\n.active {\n    span {\n        font-weight: var(--wcs-tabs-font-weight-selected);\n        color: var(--wcs-tabs-color-selected);\n    }\n\n    &::after {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n        content: \"\";\n        height: var(--wcs-tabs-indicator-height);\n        background-color: var(--wcs-tabs-indicator-background-color);\n        border-radius: var(--wcs-tabs-indicator-border-radius);\n    }\n}\n\n/* ============= */\n/* region MOBILE */\n/* ============= */\n\nbutton {\n    background-color: inherit;\n}\n\n#mobile-button {\n    border: 0;\n    font-family: var(--wcs-font-sans-serif), sans-serif;\n    text-align: center;\n    color: var(--wcs-tabs-color-default);\n    font-size: 1rem;\n    font-weight: var(--wcs-tabs-font-weight-default);\n    padding-right: calc(0.75 * var(--wcs-tabs-padding-right)); /* reduce padding right because of the arrow */\n\n    span {\n        display: flex;\n        align-items: center;\n    }\n\n    .arrow {\n        fill: var(--wcs-tabs-color-default);\n    }\n\n    &:hover {\n        .arrow {\n            fill: var(--wcs-tabs-color-hover);\n        }\n    }\n\n    &:active {\n        .arrow {\n            fill: var(--wcs-tabs-color-press);\n        }\n    }\n}\n\n.popover {\n    display: none;\n    z-index: 9999;\n    overflow: hidden;\n    border: var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);\n    border-radius: var(--wcs-tabs-mobile-overlay-border-radius);\n    padding: var(--wcs-tabs-mobile-overlay-padding);\n    background-color: var(--wcs-tabs-mobile-overlay-background-color);\n\n    [role=tab] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        cursor: pointer;\n        user-select: none;\n\n        gap: var(--wcs-tabs-mobile-gap);\n        padding: var(--wcs-tabs-mobile-padding);\n        height: var(--wcs-tabs-mobile-height);\n        font-weight: var(--wcs-tabs-mobile-font-weight-default);\n        font-size: var(--wcs-tabs-mobile-font-size);\n\n        color: var(--wcs-tabs-mobile-color);\n        background-color: var(--wcs-tabs-mobile-background-color);\n        border-radius: var(--wcs-tabs-mobile-border-radius);\n\n        transition-duration: var(--wcs-tabs-transition-duration);\n        transition-property: background-color, color;\n        transition-timing-function: ease;\n\n        overflow: hidden;\n        white-space: nowrap;\n\n        &:focus {\n            background-color: var(--wcs-tabs-mobile-background-color-focus);\n        }\n\n        &:focus-visible {\n            @include focus-outline($border-radius: var(--wcs-tabs-mobile-border-radius), $outline-offset: 0);\n        }\n\n        &:hover {\n            background-color: var(--wcs-tabs-mobile-background-color-hover);\n        }\n\n        &:active {\n            background-color: var(--wcs-tabs-mobile-background-color-press);\n        }\n\n    }\n\n    .mobile-active {\n        font-weight: var(--wcs-tabs-mobile-font-weight-active);\n    }\n}\n\n.show {\n    display: block;\n}\n\n/* ================ */\n/* endregion MOBILE */\n/* ================ */\n","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"],"version":3}

package/dist/esm/wcs-textarea.entry.js

@@ -132,7 +132,7 @@ const Textarea = class {
     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 delegatesFocus() { return true; }
     get el() { return getElement(this); }