wcs-core 7.5.0 → 7.6.0

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

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

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

@@ -16,7 +16,7 @@ const SkeletonRectangle = class {
         this.width = 'auto';
     }
     render() {
-        return (index.h(index.Host, { key: 'edf5aa2fa711b6e27d066dab259559154af9b08e', style: { height: this.height, width: this.width } }, index.h("span", { key: 'f139ef33c3d2a10aede15bbd540f10758cc1ce16', "aria-hidden": "true" })));
+        return (index.h(index.Host, { key: '67da0cd70d8cff6fa889ec4a337ab51a70c2da55', style: { height: this.height, width: this.width } }, index.h("span", { key: 'b6b8a8cbc2bbf5387d3a5c66d8e5c6deba7dbe5a', "aria-hidden": "true" })));
     }
 };
 SkeletonRectangle.style = WcsSkeletonRectangleStyle0;

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

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

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

@@ -65,7 +65,7 @@ const Switch = class {
         return controlComponentInterface.getSlottedContentText(this.el);
     }
     render() {
-        return (index.h(index.Host, { key: 'cedd87377ee17731f5422f42117321f23d944281' }, index.h("label", { key: '1bb8e511921d30ccf6153738eb6a0844ea3f4082', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.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)), index.h("span", { key: 'fcc0664435cb4d40d6fd95571ff233ae44806f58', class: "wcs-checkmark" }), index.h("span", { key: '67a951e606c537e911352799de289e4eefc87e23', class: "text" }, index.h("slot", { key: 'dbe2ced66c88f5184144661215c9332d464c01fc' })))));
+        return (index.h(index.Host, { key: '482132afd430c9dcc4f43e945f73516cd3ff0916' }, index.h("label", { key: '347ef36c5f79f40c07b033061fc4306c7af1d6d4', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", Object.assign({ key: '3fd70b6177fc09b5d86af8985b89d33c20bec1a2', 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)), index.h("span", { key: '9fd555c6694b6ec7bb0257c248d440bdba797227', class: "wcs-checkmark" }), index.h("span", { key: '1b54f6891ba864be362055ceaba9f0853c75fd16', class: "text" }, index.h("slot", { key: 'bc3338c266b9ead8338ba50a69fcafcb325d13f3' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

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

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

@@ -306,7 +306,7 @@ const Tabs = class {
         return (this.headers.map((header, idx) => index.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' }, index.h("span", null, header))));
     }
     render() {
-        return (index.h(index.Host, { key: '072fa3551b320a6415c20a3107500f2bee2aa690' }, index.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()), index.h("div", { key: 'd20bb48fe80434a6797c86d206a86d11081b92ea', class: "wcs-tabs" }, index.h("slot", { key: 'd4a31047e41627dc9c2cfb63f201e5e7ddc40f15', onSlotchange: () => this.onTabsSlotChange(), name: "wcs-tab" }))));
+        return (index.h(index.Host, { key: '52a78624d4440876aacfcabeb2b25df81867d64c' }, index.h("div", Object.assign({ key: '6bdbb2386f24c7d4f808a5af656ea8efc740a2d1', 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()), index.h("div", { key: 'dfc2a9df4b2778cbb5d0144aaca7fd54cf699f9c', class: "wcs-tabs" }, index.h("slot", { key: 'a97bec22c495527408eb56caf91a30a67aed3e4f', 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:

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

@@ -136,7 +136,7 @@ const Textarea = class {
     render() {
         const value = this.getValue();
         const style = Object.assign({}, (this.resize && { 'resize': this.resize }));
-        return (index.h(index.Host, { key: '2ffd19f34c0feb9a49931942e48d7b7193ff377e', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.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)));
+        return (index.h(index.Host, { key: 'daa597288a0d494b61344a1c60e21208823964b6', "aria-disabled": this.disabled ? 'true' : null }, this.icon ? (index.h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, index.h("textarea", Object.assign({ key: '978490deee1bb0808336ad345f9ec9daa8b0e30e', 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 index.getElement(this); }

package/dist/cjs/wcs-tooltip.cjs.entry.js

@@ -1652,7 +1652,7 @@ const Tooltip = class {
         (_a = this.tippyInstance) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (index.h(index.Host, { key: '34f019e113250ce19d69186080c932f838ac5c86', role: "tooltip" }, index.h("slot", { key: '7edce2cfc96d454177668c81d615231369600977', onSlotchange: _ => this.updateTippyContent() })));
+        return (index.h(index.Host, { key: '430814e1eefde613ed887a70b837c5603b3d7656', role: "tooltip" }, index.h("slot", { key: 'f1915740c4c18c7c154bedd8db7bc10e7836822c', onSlotchange: _ => this.updateTippyContent() })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wcs.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"wcs-editable-field.cjs\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination.cjs\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-alert-drawer.cjs\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64]}]]],[\"wcs-horizontal-stepper.cjs\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb.cjs\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter.cjs\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid.cjs\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal.cjs\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown.cjs\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu.cjs\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input.cjs\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea.cjs\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion.cjs\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"multiExpandable\":[4,\"multi-expandable\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content.cjs\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header.cjs\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel.cjs\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar.cjs\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app.cjs\",[[1,\"wcs-app\"]]],[\"wcs-badge.cjs\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item.cjs\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card.cjs\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body.cjs\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content.cjs\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer.cjs\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header.cjs\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media.cjs\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-chip.cjs\",[[1,\"wcs-chip\",{\"value\":[1],\"label\":[1],\"selected\":[516],\"open\":[516],\"disabled\":[516],\"variant\":[513],\"mode\":[513]}]]],[\"wcs-com-nav.cjs\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category.cjs\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item.cjs\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu.cjs\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider.cjs\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider.cjs\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header.cjs\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item.cjs\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field.cjs\",[[1,\"wcs-field\"]]],[\"wcs-field-content.cjs\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label.cjs\",[[1,\"wcs-field-label\"]]],[\"wcs-footer.cjs\",[[1,\"wcs-footer\"]]],[\"wcs-galactic.cjs\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column.cjs\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell.cjs\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header.cjs\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint.cjs\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon.cjs\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item.cjs\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties.cjs\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property.cjs\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select.cjs\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav.cjs\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item.cjs\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial.cjs\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio.cjs\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group.cjs\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle.cjs\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle.cjs\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text.cjs\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch.cjs\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab.cjs\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs.cjs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip.cjs\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert.cjs\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar.cjs\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"required\":[4],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-select_2.cjs\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3.cjs\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-mat-icon.cjs\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2.cjs\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"wcs-editable-field.cjs\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination.cjs\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-alert-drawer.cjs\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64]}]]],[\"wcs-horizontal-stepper.cjs\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb.cjs\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter.cjs\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid.cjs\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal.cjs\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown.cjs\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu.cjs\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input.cjs\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea.cjs\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion.cjs\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"multiExpandable\":[4,\"multi-expandable\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content.cjs\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header.cjs\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel.cjs\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar.cjs\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app.cjs\",[[1,\"wcs-app\"]]],[\"wcs-badge.cjs\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item.cjs\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card.cjs\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body.cjs\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content.cjs\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer.cjs\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header.cjs\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media.cjs\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-chip.cjs\",[[1,\"wcs-chip\",{\"value\":[1],\"label\":[1],\"selected\":[516],\"open\":[516],\"disabled\":[516],\"variant\":[513],\"mode\":[513]}]]],[\"wcs-com-nav.cjs\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category.cjs\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item.cjs\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu.cjs\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider.cjs\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider.cjs\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header.cjs\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item.cjs\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field.cjs\",[[1,\"wcs-field\"]]],[\"wcs-field-content.cjs\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label.cjs\",[[1,\"wcs-field-label\"]]],[\"wcs-footer.cjs\",[[1,\"wcs-footer\"]]],[\"wcs-galactic.cjs\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column.cjs\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell.cjs\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header.cjs\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint.cjs\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon.cjs\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item.cjs\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties.cjs\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property.cjs\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select.cjs\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav.cjs\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item.cjs\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial.cjs\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio.cjs\",[[1,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group.cjs\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle.cjs\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle.cjs\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text.cjs\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch.cjs\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab.cjs\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs.cjs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip.cjs\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert.cjs\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar.cjs\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"required\":[4],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-select_2.cjs\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3.cjs\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-mat-icon.cjs\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2.cjs\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/card/card.js

@@ -1,10 +1,17 @@
 import { h } from "@stencil/core";
 /**
- * The card component is a container that display content such as text, images, buttons, and lists.
+ * The card component is a container that displays content such as text, images, buttons, and lists.
  * A card can be a single component, but is often made up of a header, title, subtitle, and content.
  *
- * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
- * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
+ * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside
+ * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`
+ * to keep the card structure clear and well-designed.
+ *
+ * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive
+ * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.
+ *
+ * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a
+ * direct child `wcs-card-body` when you need to host structured content.
  *
  * @slot - Default slot for the card content
  *
@@ -44,7 +51,7 @@ export class Card {
         return this.el.querySelector('wcs-card-body');
     }
     render() {
-        return (h("slot", { key: '20a57cf8fc64155e65a98bdb69618ec013ea5a7f', onSlotchange: () => this.onSlotChange() }));
+        return (h("slot", { key: '58153235717a53e0b2fc02a22a8656985059d292', onSlotchange: () => this.onSlotChange() }));
     }
     static get is() { return "wcs-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGvF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,IAAI;;oBAGI,MAAM;2BAKQ,IAAI;;IAGnC,kBAAkB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACzC,CAAC;IAEO,YAAY;QAChB,IAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAClB,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACzC,CAAC;IACL,CAAC;IAEO,6BAA6B;;QACjC,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9D,CAAC;IAEO,4BAA4B;;QAChC,MAAA,IAAI,CAAC,eAAe,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7D,CAAC;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACnD,CAAC;IAEO,eAAe;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,CACnD,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that display content such as text, images, buttons, and lists.  \n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n * \n * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`\n * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGvF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAMH,MAAM,OAAO,IAAI;;oBAGI,MAAM;2BAKQ,IAAI;;IAGnC,kBAAkB;QACd,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACzC,CAAC;IAEO,YAAY;QAChB,IAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAClB,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACzC,CAAC;IACL,CAAC;IAEO,6BAA6B;;QACjC,MAAA,IAAI,CAAC,gBAAgB,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC9D,CAAC;IAEO,4BAA4B;;QAChC,MAAA,IAAI,CAAC,eAAe,EAAE,0CAAE,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7D,CAAC;IAEO,gBAAgB;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACnD,CAAC;IAEO,eAAe;QACnB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,CACnD,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop, Element, Watch } from '@stencil/core';\nimport { CardMode, CardOrientation } from './card-interface';\n\n/**\n * The card component is a container that displays content such as text, images, buttons, and lists.\n * A card can be a single component, but is often made up of a header, title, subtitle, and content.\n *\n * While cards are flexible, it is important to use them consistently. You may use `wcs-card-media` outside\n * `wcs-card-body`, and `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` within `wcs-card-body`\n * to keep the card structure clear and well-designed.\n *\n * `wcs-card-content` is intended for textual content only. If you need to display a form or other rich interactive\n * content inside a card, place it directly inside `wcs-card-body` instead of wrapping it in `wcs-card-content`.\n *\n * A card can also be used as a visual wrapper to get the card border, radius, and background. In that case, prefer a\n * direct child `wcs-card-body` when you need to host structured content.\n *\n * @slot - Default slot for the card content\n * \n * @cssprop --wcs-card-border-color - Border color of the card\n * @cssprop --wcs-card-border-radius - Border radius of the card\n * @cssprop --wcs-card-border-width - Border width of the card\n * @cssprop --wcs-card-background-color - Background color of the card\n * @cssprop --wcs-card-text-color - Text color of the card\n * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal\n */\n@Component({\n    tag: 'wcs-card',\n    styleUrl: 'card.scss',\n    shadow: true\n})\nexport class Card implements ComponentInterface {\n    @Element() private el!: HTMLElement;\n    @Prop({reflect: true, mutable: true})\n    mode: CardMode = 'flat';\n    /**\n     * The orientation of the card, can be horizontal or vertical\n     */\n    @Prop({reflect: true})\n    orientation: CardOrientation = null;\n\n    @Watch('orientation')\n    orientationChanged() {\n        this.updateWcsCardImageOrientation();\n    }\n\n    private onSlotChange() {\n        if(this.orientation) {\n            this.updateWcsCardBodyOrientation();\n            this.updateWcsCardImageOrientation();\n        }\n    }\n\n    private updateWcsCardImageOrientation() {\n        this.findWcsCardMedia()?.setOrientation(this.orientation);\n    }\n\n    private updateWcsCardBodyOrientation() {\n        this.findWcsCardBody()?.setOrientation(this.orientation);\n    }\n\n    private findWcsCardMedia(): HTMLWcsCardMediaElement {\n        return this.el.querySelector('wcs-card-media');\n    }\n\n    private findWcsCardBody(): HTMLWcsCardBodyElement {\n        return this.el.querySelector('wcs-card-body');\n    }\n\n    render() {\n        return (\n            <slot onSlotchange={() => this.onSlotChange()}/>\n        );\n    }\n}\n"]}

package/dist/collection/components/card-content/card-content.js

@@ -1,18 +1,23 @@
 import { Host, h } from "@stencil/core";
 /**
- * A content for a card inside card-body. Commonly used to provide more details about the card content.
+ * A text content container for a card inside `wcs-card-body`.
+ * Commonly used to provide additional details about the card content.
  * The information provided should be concise and easy to read.
  *
+ * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.
+ * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside
+ * `wcs-card-content`.
+ *
  * By default, the margin is removed from the top and bottom of the card description.
  *
- * @slot - The content of the card description.
+ * @slot - The textual content of the card description.
  *
  * @cssprop --wcs-card-content-color - The color of the card description.
  * @cssprop --wcs-card-content-font-size - The font size of the card description.
  */
 export class CardContent {
     render() {
-        return (h(Host, { key: '970e45353d35495c5a4500e168f6b9fda970c7a0' }, h("slot", { key: '26f30084a71090b8894593f8c57f35a7e9f60f65' })));
+        return (h(Host, { key: 'c270d71ea05c98a0bb8acc01809d3d0e66b13152' }, h("slot", { key: 'caa336108533b717cf8ae3620382ffae05aabd9b' })));
     }
     static get is() { return "wcs-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-content/card-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../../src/components/card-content/card-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,WAAW;IAEtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * A content for a card inside card-body. Commonly used to provide more details about the card content. \n * The information provided should be concise and easy to read.\n * \n * By default, the margin is removed from the top and bottom of the card description.\n * \n * @slot - The content of the card description.\n * \n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../../src/components/card-content/card-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,WAAW;IAEtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * A text content container for a card inside `wcs-card-body`.\n * Commonly used to provide additional details about the card content.\n * The information provided should be concise and easy to read.\n *\n * Use `wcs-card-content` for text only. It applies text-oriented layout rules and overflow behavior.\n * Forms and other rich interactive content should be placed directly inside `wcs-card-body`, not inside\n * `wcs-card-content`.\n *\n * By default, the margin is removed from the top and bottom of the card description.\n *\n * @slot - The textual content of the card description.\n *\n * @cssprop --wcs-card-content-color - The color of the card description.\n * @cssprop --wcs-card-content-font-size - The font size of the card description.\n */\n@Component({\n  tag: 'wcs-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -4,6 +4,14 @@
  */
 :host {
   display: flex;
+  /*
+  * DO NOT REMOVE:
+  * The native button is absolutely positioned.
+  * This `position: relative` makes `wcs-dropdown` its containing block.
+  * Without it, the button can be laid out relative to another ancestor higher in the DOM,
+  * so when the browser focuses the native button it may scroll the window unexpectedly.
+  */
+  position: relative;
   --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);
   --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);
   --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);

package/dist/collection/components/dropdown/dropdown.e2e.playwright.js

@@ -316,5 +316,58 @@ test.describe('Dropdown component', () => {
             await expect(dropdown).toBeFocused();
         });
     });
+    test.describe('Behavior in window with scroll', () => {
+        test('should preserve the window scroll position when clicking on a dropdown inside a scrollable container', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                    <div style="margin-top: 150vh; display: flex; gap: 16px; align-items: center;">
+                        <wcs-dropdown id="dropdown" mode="plain" shape="normal" size="m">
+                            <span slot="placeholder">Dropdown</span>
+                            <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                            <wcs-dropdown-item>Second item</wcs-dropdown-item>
+                        </wcs-dropdown>
+                    </div>
+                    <div style="margin-top: 200vh;">Other content</div>
+                </div>
+            `);
+            const body = page.locator('body');
+            const dropdown = page.locator('wcs-dropdown');
+            await dropdown.scrollIntoViewIfNeeded();
+            // When
+            await dropdown.click();
+            await page.waitForChanges();
+            // Then
+            const scrollY = await body.evaluate(() => window.scrollY);
+            expect(scrollY).toBe(0);
+        });
+        test('should preserve the window scroll position when tabbing to a dropdown inside a scrollable container', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                    <div style="margin-top: 150vh; display: flex; gap: 16px; align-items: center;">
+                        <button id="before-dropdown">Before dropdown</button>
+                        <wcs-dropdown id="dropdown" mode="plain" shape="normal" size="m">
+                            <span slot="placeholder">Dropdown</span>
+                            <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                            <wcs-dropdown-item>Second item</wcs-dropdown-item>
+                        </wcs-dropdown>
+                    </div>
+                    <div style="margin-top: 200vh;">Other content</div>
+                </div>
+            `);
+            const body = page.locator('body');
+            const beforeDropdownButton = page.locator('#before-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            await beforeDropdownButton.scrollIntoViewIfNeeded();
+            await beforeDropdownButton.focus();
+            // When
+            await page.keyboard.press('Tab');
+            // Then
+            await expect(dropdownButton).toBeFocused();
+            const scrollY = await body.evaluate(() => window.scrollY);
+            expect(scrollY).toBe(0);
+        });
+    });
 });
 //# sourceMappingURL=dropdown.e2e.playwright.js.map

package/dist/collection/components/dropdown/dropdown.e2e.playwright.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Dropdown component', () => {\n    test.describe('keyboard interactions', () => {\n        test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('ArrowUp');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Home\n            await page.keyboard.press('Home');\n            await page.waitForChanges();\n\n            // Then\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing End\n            await page.keyboard.press('End');\n            await page.waitForChanges();\n\n            // Then\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n            await page.keyboard.press('ArrowUp');\n            await page.waitForChanges();\n\n            // Then\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Escape\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // Then\n            await expect(secondItem).toBeFocused();\n        });\n\n        test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Escape\n            await page.keyboard.press('Escape');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Tab\n            await page.keyboard.press('Tab'); // should close the menu and focus back to button\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n            await page.keyboard.down('Shift');\n            await page.keyboard.press('Tab');\n            await page.keyboard.up('Shift');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            // spy on the custom event on the locator\n            const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(itemClickSpy).toHaveReceivedEventTimes(1);\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n    });\n});\n"]}
+{"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Dropdown component', () => {\n    test.describe('keyboard interactions', () => {\n        test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('ArrowUp');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Home\n            await page.keyboard.press('Home');\n            await page.waitForChanges();\n\n            // Then\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing End\n            await page.keyboard.press('End');\n            await page.waitForChanges();\n\n            // Then\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n            await page.keyboard.press('ArrowUp');\n            await page.waitForChanges();\n\n            // Then\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Escape\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // Then\n            await expect(secondItem).toBeFocused();\n        });\n\n        test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Escape\n            await page.keyboard.press('Escape');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Tab\n            await page.keyboard.press('Tab'); // should close the menu and focus back to button\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n            await page.keyboard.down('Shift');\n            await page.keyboard.press('Tab');\n            await page.keyboard.up('Shift');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            // spy on the custom event on the locator\n            const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(itemClickSpy).toHaveReceivedEventTimes(1);\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n    });\n\n    test.describe('Behavior in window with scroll', () => {\n        test('should preserve the window scroll position when clicking on a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n                    <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n                        <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n                            <span slot=\"placeholder\">Dropdown</span>\n                            <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                            <wcs-dropdown-item>Second item</wcs-dropdown-item>\n                        </wcs-dropdown>\n                    </div>\n                    <div style=\"margin-top: 200vh;\">Other content</div>\n                </div>\n            `);\n\n            const body = page.locator('body');\n            const dropdown = page.locator('wcs-dropdown');\n\n            await dropdown.scrollIntoViewIfNeeded();\n\n            // When\n            await dropdown.click();\n            await page.waitForChanges();\n\n            // Then\n            const scrollY = await body.evaluate(() => window.scrollY);\n            expect(scrollY).toBe(0);\n        });\n\n        test('should preserve the window scroll position when tabbing to a dropdown inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n                    <div style=\"margin-top: 150vh; display: flex; gap: 16px; align-items: center;\">\n                        <button id=\"before-dropdown\">Before dropdown</button>\n                        <wcs-dropdown id=\"dropdown\" mode=\"plain\" shape=\"normal\" size=\"m\">\n                            <span slot=\"placeholder\">Dropdown</span>\n                            <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                            <wcs-dropdown-item>Second item</wcs-dropdown-item>\n                        </wcs-dropdown>\n                    </div>\n                    <div style=\"margin-top: 200vh;\">Other content</div>\n                </div>\n            `);\n\n            const body = page.locator('body');\n            const beforeDropdownButton = page.locator('#before-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            await beforeDropdownButton.scrollIntoViewIfNeeded();\n            await beforeDropdownButton.focus();\n\n            // When\n            await page.keyboard.press('Tab');\n\n            // Then\n            await expect(dropdownButton).toBeFocused();\n            const scrollY = await body.evaluate(() => window.scrollY);\n            expect(scrollY).toBe(0);\n        });\n    });\n});\n"]}