wcs-core 7.0.0 → 7.1.0

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-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-editable-field.cjs\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[4],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-horizontal-stepper.cjs\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[4,\"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\":[4],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid.cjs\",[[1,\"wcs-grid\",{\"serverMode\":[4,\"server-mode\"],\"data\":[16],\"loading\":[4],\"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],\"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\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown.cjs\",[[17,\"wcs-dropdown\",{\"noArrow\":[4,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[4],\"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\":[4],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"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\":[4],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[4,\"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\"]},[[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\":[4],\"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]}]]],[\"wcs-card-body.cjs\",[[1,\"wcs-card-body\"]]],[\"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\":[4],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[4,\"custom-cells\"],\"hidden\":[4],\"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-label.cjs\",[[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item.cjs\",[[1,\"wcs-list-item\",{\"activated\":[1028]}]]],[\"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\":[4],\"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\":[4,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio.cjs\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1028],\"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]},[[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\":[4],\"setAriaAttribute\":[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\":[4,\"headers-only\"],\"gutter\":[4],\"description\":[1],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"]}]]],[\"wcs-tooltip.cjs\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[4],\"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-progress-bar.cjs\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[4,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"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\":[1028],\"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_2.cjs\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}]]],[\"wcs-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"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\":[1028],\"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-horizontal-stepper.cjs\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[4,\"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\":[4,\"server-mode\"],\"data\":[16],\"loading\":[4],\"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],\"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\":[4,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown.cjs\",[[17,\"wcs-dropdown\",{\"noArrow\":[4,\"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\":[4],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[4],\"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\":[4],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[4,\"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\"]},[[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]}]]],[\"wcs-card-body.cjs\",[[1,\"wcs-card-body\"]]],[\"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\":[4],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[4,\"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\":[4],\"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\":[4,\"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\":[4,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"]}]]],[\"wcs-tooltip.cjs\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[4],\"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-progress-bar.cjs\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[4,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"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\":[4],\"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-checkbox.cjs\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"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/action-bar/action-bar.js

@@ -24,7 +24,7 @@ export class ActionBar {
         this.hasTabs = !!this.el.querySelector('[slot="tabs"]');
     }
     render() {
-        return (h(Host, { key: '7ceef915c969f34c5cc826feafa3637876063ab8' }, h("div", { key: 'bce1e2d5e0ecbc5642e72cd2a26ca5bc4a9a1a6f', class: "title-actions", "data-has-tabs": this.hasTabs }, h("h1", { key: 'b054d5b628f8dd722f80d8d7dc0a67534fcbb71d' }, h("slot", { key: 'ac21e23f21143db4971c13cc3af77d3991689457' })), h("div", { key: '14f76106d6da1734236ad46a15ab3128849dd3ad', class: "actions" }, h("slot", { key: 'cf7cbfeb2625be986f37f67bfdc0c3b0e9b9e511', name: "actions" }))), h("div", { key: '34076d53169087844439d35df27c3a957068474b', class: "tabs-container" }, h("slot", { key: 'ad15f04c0ebe23cceaacffb825da4176f64ff261', name: "tabs" }))));
+        return (h(Host, { key: 'd67394521e0f511ce6c4632ff2ac177920cee7f6' }, h("div", { key: '15e01e65524923776ff1e9a793a84ca395fc9cb6', class: "title-actions", "data-has-tabs": this.hasTabs }, h("h1", { key: '9b260476e27f3702402fccd690f1481cd2b6937a' }, h("slot", { key: '8610b80130c93f2f3b1bbd987d9c3eb8044389ae' })), h("div", { key: '4b8b05c7331d1de0ac889c475de8a675cb4ab96d', class: "actions" }, h("slot", { key: '129ffb87ce43f64a6793606ae5fbca423270bc9f', name: "actions" }))), h("div", { key: '21f236bd1e8cce919d2410f2865531dc85973079', class: "tabs-container" }, h("slot", { key: '4d137643a6576ee3d34d32dd38e63952ecb9171e', name: "tabs" }))));
     }
     static get is() { return "wcs-action-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -55,7 +55,7 @@ export class ActionBar {
                     "text": "Determines if the action bar should have a border at the bottom.\nYou should not use this property if a gutter is already present on tabs"
                 },
                 "attribute": "gutter",
-                "reflect": false
+                "reflect": true
             }
         };
     }

package/dist/collection/components/action-bar/action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE7F;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,SAAS;;;uBAOS,KAAK;;IAEhC,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO;gBAClD;oBACI,8DAAa,CACZ;gBACL,4DAAK,KAAK,EAAC,SAAS;oBAChB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * The action-bar component is a group of elements appearing across the top of all pages on a business application.\n * \n * @cssprop --wcs-action-bar-background-color - Background color of the action bar\n * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs\n * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions\n * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar\n * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar\n * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar\n * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted\n * @cssprop --wcs-action-bar-title-font-size - Font size of the title\n * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title\n * @cssprop --wcs-action-bar-title-color - Color of the title\n * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter\n * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter\n */\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop() gutter: boolean;\n    @State() private hasTabs = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE7F;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,SAAS;;;uBAOS,KAAK;;IAEhC,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO;gBAClD;oBACI,8DAAa,CACZ;gBACL,4DAAK,KAAK,EAAC,SAAS;oBAChB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * The action-bar component is a group of elements appearing across the top of all pages on a business application.\n * \n * @cssprop --wcs-action-bar-background-color - Background color of the action bar\n * @cssprop --wcs-action-bar-gap - Gap between the title and the tabs\n * @cssprop --wcs-action-bar-gap-actions - Gap between the title and the actions\n * @cssprop --wcs-action-bar-min-height - Minimum height of the action bar\n * @cssprop --wcs-action-bar-padding-horizontal - Horizontal padding of the action bar\n * @cssprop --wcs-action-bar-padding-vertical - Vertical padding of the action bar\n * @cssprop --wcs-action-bar-tabs-margin-top - Margin top of the tabs when slotted\n * @cssprop --wcs-action-bar-title-font-size - Font size of the title\n * @cssprop --wcs-action-bar-title-font-weight - Font weight of the title\n * @cssprop --wcs-action-bar-title-color - Color of the title\n * @cssprop --wcs-tabs-gutter-border-width - Border width of the gutter\n * @cssprop --wcs-tabs-gutter-background-color - Background color of the gutter\n */\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() private el: HTMLWcsActionBarElement;\n    /**\n     * Determines if the action bar should have a border at the bottom.\n     * You should not use this property if a gutter is already present on tabs\n     */\n    @Prop({ reflect: true }) gutter: boolean;\n    @State() private hasTabs = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.hasTabs = !!this.el.querySelector('[slot=\"tabs\"]');\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"title-actions\" data-has-tabs={this.hasTabs}>\n                    <h1>\n                        <slot></slot>\n                    </h1>\n                    <div class=\"actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n                <div class=\"tabs-container\">\n                    <slot name=\"tabs\"></slot>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/badge/badge.css

@@ -20,6 +20,7 @@
   gap: var(--wcs-badge-gap);
   padding: 0 var(--wcs-badge-padding-horizontal);
   height: var(--wcs-badge-height);
+  inline-size: fit-content;
   font-size: var(--wcs-badge-font-size);
   box-sizing: border-box;
   font-weight: var(--wcs-badge-font-weight);

package/dist/collection/components/button/button.js

@@ -126,7 +126,7 @@ export class Button {
         const attrs = this.href !== undefined
             ? { href: this.href, role: 'button', target: this.target }
             : { type: this.type };
-        return (h(TagType, Object.assign({ key: '18b25d0989c1a0c118a40c5df3e6c6c500c258fa' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '346aea28ddb12d386a0001796dbced070079c1d7' }), h("slot", { key: 'e94cd7c713a5abcda793f98f99d368c5ba22d958' })));
+        return (h(TagType, Object.assign({ key: '228586d374a478c0e23a697ddd0bef43fb4011ed' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '1fdef7efc8d2d1febb2e9a83aa48a44426015b89' }), h("slot", { key: '63cedaddd96fe4e20f0ca9ff0f3ea1e373ebd3f0' })));
     }
     static get is() { return "wcs-button"; }
     static get encapsulation() { return "shadow"; }
@@ -324,7 +324,7 @@ export class Button {
                     "text": "Flag to display spinner until the end of action"
                 },
                 "attribute": "loading",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({mutable: true}) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsButtonSize(this.size)) {\n            console.warn(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    isWcsButtonSize,\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonSizeValues,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({ reflect: true, mutable: true }) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (!isWcsButtonSize(this.size)) {\n            console.warn(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}

package/dist/collection/components/checkbox/checkbox.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
+import { getSlottedContentText } from "../../utils/control-component-interface";
 const CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];
 /**
  * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.
@@ -64,6 +65,9 @@ export class Checkbox {
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeInput, attr, value);
     }
+    async getLabel() {
+        return getSlottedContentText(this.el);
+    }
     handleChange(e) {
         e.stopImmediatePropagation();
         e.preventDefault();
@@ -113,7 +117,7 @@ export class Checkbox {
         }
     }
     render() {
-        return (h(Host, { key: '67abc5dd72a4af40cbea9532440bda5fa3485806' }, h("label", { key: 'f71f0db26cb3088bb29899b2125a8f31e7c2e568', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '48ad738d5678ef550017b9bcae3d5d9283f9655e', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: 'a8e25ca97f455ca1d6b6baa466ae7900e8e2476c', class: "wcs-checkmark" }), h("span", { key: '215e0a4f6aa986f38d67e783954a0d7ca7bba877', class: "text" }, h("slot", { key: '928615492124aa1febec5baf593272e02094bef9', onSlotchange: (_) => this.onSlotChange() })))));
+        return (h(Host, { key: 'a20390ff38ab6bf7ec5a0868d396857edd93daa1' }, h("label", { key: 'ab9d5f22c1f48f84dbd75ad4d4699f403cbfb059', htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, h("input", Object.assign({ key: '05afab86b77b327fe9e4f3c9e1e44d67d3c7678d', onBlur: this.handleBlur.bind(this), onChange: this.handleChange.bind(this), onFocus: this.handleFocus.bind(this), onClick: this.handleInputClick.bind(this), checked: this.checked, class: "wcs-checkbox", type: "checkbox", ref: (el) => (this.nativeInput = el), name: this.name, disabled: this.disabled, id: this.name }, this.inheritedAttributes)), h("span", { key: 'f864ab3331ce992ea6b769b06cb29485485300e8', class: "wcs-checkmark" }), h("span", { key: '5709887a3b90454c7a2f711f553f3d95a6f98326', class: "text" }, h("slot", { key: 'ed2dc70d43b7915962c531e901a7abb84b1d34b6', onSlotchange: (_) => this.onSlotChange() })))));
     }
     static get is() { return "wcs-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -323,6 +327,23 @@ export class Checkbox {
                     "text": "",
                     "tags": []
                 }
+            },
+            "getLabel": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the label text",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}

package/dist/collection/components/com-nav-item/com-nav-item.css

@@ -49,7 +49,8 @@
 :host ::slotted(a:focus-visible) {
   outline: none;
 }
-:host :host(:focus-within) {
+
+:host(:focus-within) {
   outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-item-focus-outline-color);
   outline-offset: 0.5rem;
   border-radius: 2px;

package/dist/collection/components/counter/counter.css

@@ -68,6 +68,9 @@
   background-clip: padding-box;
   gap: var(--wcs-counter-gap);
 }
+:host .counter:focus-within {
+  outline: none;
+}
 :host .counter:has(.current-value:focus-visible) {
   outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-counter-outline-color-focus);
   outline-offset: 0;

package/dist/collection/components/counter/counter.js

@@ -1,8 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes, inheritAttributes, isEndKey, isHomeKey, isKeydown, isKeyup, setOrRemoveAttribute } from "../../utils/helpers";
+import { inheritAriaAttributes, inheritAttributes, isEndKey, isHomeKey, isKeydown, isKeyup, parseCssTimeValueToMilliseconds, setOrRemoveAttribute } from "../../utils/helpers";
 import { isWcsCounterSize, WcsCounterSizeValues } from "./counter-interface";
 const COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];
-const ANIMATION_DURATION = 0.175; // seconds
 /**
  * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>
  * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)
@@ -32,6 +31,11 @@ const ANIMATION_DURATION = 0.175; // seconds
 export class Counter {
     constructor() {
         this.inheritedAttributes = {};
+        /**
+         * Default animation duration, in milliseconds
+         * @private
+         */
+        this.ANIMATION_DURATION = 150;
         this.animateRunning = false;
         this.handleDecrement = () => {
             if (this.disabled)
@@ -74,7 +78,7 @@ export class Counter {
                 });
                 this.displayedValue = this.value;
                 this.animateRunning = false;
-            }, 1000 * ANIMATION_DURATION - 20);
+            }, this.ANIMATION_DURATION - 20);
         };
         this.size = 'm';
         this.label = undefined;
@@ -93,6 +97,10 @@ export class Counter {
         }
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, COUNTER_INHERITED_ATTRS));
     }
+    componentDidRender() {
+        var _a, _b;
+        this.ANIMATION_DURATION = (_b = parseCssTimeValueToMilliseconds((_a = window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration')) !== null && _a !== void 0 ? _a : '150ms')) !== null && _b !== void 0 ? _b : 150;
+    }
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.spinButton, attr, value);
     }
@@ -162,7 +170,7 @@ export class Counter {
         });
     }
     render() {
-        return (h(Host, { key: 'd434b2eec575d309f38d01c6e41098d0642e46f8' }, h("div", { key: '03b667ad64ca4df8d7c46ac0091abdaff9c99227', class: "counter" }, h("wcs-button", { key: '365f153616e5f96d2d00441c535cbe8d6d3014d6', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: '7c8d7c723648ef133cdf2da19dd29daf65a4a997', icon: "remove", size: "s" })), h("div", { key: 'c07088653c5a8d08e6cfe039cfa8386ec6daf8cf', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '7f048ddef2bacb1a8c4bd7167afe9e51cd3116e8', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: 'd1f38d3ca08a2f8ddf6b71c5585e96e1cec9b3b7', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: 'ace304e6764d87d3cc774cd4d22cac39b2012c0f', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'ab7241308c768ee562921707ecfffba03b8e57d7', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: '4b3bd5cceb59cfd6b6d4a95c07da1f33c64f6347', icon: "add", size: "s" })))));
+        return (h(Host, { key: 'a957d407947a81ebdc48dde3977ab2b2a19006ad' }, h("div", { key: 'dbc569a37c06b78b6e2dabb87731db62590b347f', class: "counter" }, h("wcs-button", { key: 'c7a9f3e34ac9907789a4218fc44b34698a5897e9', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleDecrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.min }, h("wcs-mat-icon", { key: 'd6467a23f871a6beab70aff5d7c333c544eb9913', icon: "remove", size: "s" })), h("div", { key: '2a1fd878363e0667b2f14a5d767a0367aa6b7149', class: "counter-container", ref: input => this.counterContainer = input }, h("span", { key: '7741dec6872c3c1ba72b0191cb081b41cb43e303', id: "outlier-down", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue - this.step), h("span", Object.assign({ key: '20e00232af8397a0fc042f6570d4c1d74fd14bb5', tabindex: this.disabled ? -1 : 0, role: "spinbutton", ref: (el) => this.spinButton = el, class: "current-value", onBlur: (event) => this.wcsBlur.emit(event), onKeyDown: (event) => this.onKeyDown(event), "aria-disabled": this.disabled ? 'true' : null, "aria-valuenow": this.value, "aria-valuetext": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": this.label }, this.inheritedAttributes), this.displayedValue), h("span", { key: '2794cbc223820ec7bd6fa055aed3ba6fe92fc319', id: "outlier-up", class: "outliers", hidden: true, "aria-hidden": "true" }, this.displayedValue + this.step)), h("wcs-button", { key: 'cbce7b7dba69d9c0546152e6b283fd85f389e7fc', class: "wcs-primary", shape: "round", size: "s", tabindex: -1, onClick: () => this.handleIncrement(), onBlur: (event) => this.wcsBlur.emit(event), disabled: this.disabled || this.value === this.max }, h("wcs-mat-icon", { key: 'af515fae89b19516f9706f1582a77b9daababb3b', icon: "add", size: "s" })))));
     }
     static get is() { return "wcs-counter"; }
     static get encapsulation() { return "shadow"; }
@@ -235,7 +243,7 @@ export class Counter {
                     "text": "Specify whether the counter is disabled or not."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "min": {

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

@@ -1 +1 @@
-{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\nconst ANIMATION_DURATION = 0.175 // seconds\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop() disabled = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.warn(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, 1000 * ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"counter.js","sourceRoot":"","sources":["../../../src/components/counter/counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface, Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEndKey,\n    isHomeKey,\n    isKeydown,\n    isKeyup,\n    parseCssTimeValueToMilliseconds,\n    setOrRemoveAttribute\n} from '../../utils/helpers';\nimport { CounterChangeEventDetail, isWcsCounterSize, WcsCounterSize, WcsCounterSizeValues } from './counter-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst COUNTER_INHERITED_ATTRS = ['tabindex', 'title'];\n\n\n/**\n * Counter component, meant to be used for small range of values (e.g : 0 - 5).<br>\n * For larger or specific ranges, please use [wcs-input (type number)](.?path=/docs/components-input--documentation)\n * \n * @cssprop --wcs-counter-border-radius - Border radius of the counter\n * \n * @cssprop --wcs-counter-value-color-default - Default color of the value \n * @cssprop --wcs-counter-value-color-disabled - Color of the text when the counter is disabled\n * @cssprop --wcs-counter-font-weight - Font weight of the value\n * \n * @cssprop --wcs-counter-height-m - Height medium of the counter\n * @cssprop --wcs-counter-height-l - Height large of the counter\n * @cssprop --wcs-counter-font-size-m - Font size medium of the counter\n * @cssprop --wcs-counter-font-size-l - Font size large of the counter\n * @cssprop --wcs-counter-padding-m - Padding medium of the counter\n * @cssprop --wcs-counter-padding-l - Padding large of the counter\n * \n * @cssprop --wcs-counter-background-color - Background color of the counter\n * @cssprop --wcs-counter-gap - Gap between the buttons and the label\n * @cssprop --wcs-counter-gap-size-m - Gap between the buttons and the label when the size is M\n * @cssprop --wcs-counter-gap-size-l - Gap between the buttons and the label when the size is L\n * @cssprop --wcs-counter-outline-color-focus - Color of the focus outline\n *\n * @cssprop --wcs-counter-transition-duration - Duration of the animation\n * \n */\n@Component({\n    tag: 'wcs-counter',\n    styleUrl: 'counter.scss',\n    shadow: {\n        delegatesFocus: true\n    },\n})\nexport class Counter implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private spinButton!: HTMLSpanElement;\n    private counterContainer!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Default animation duration, in milliseconds\n     * @private\n     */\n    private ANIMATION_DURATION = 150;\n\n    /**\n     * Specify the size (height) of the counter.\n     */\n    @Prop({reflect: true}) size: WcsCounterSize = 'm';\n\n    /**\n     * The label of the counter.<br/>\n     * e.g. Number of passengers, train carriages, railroad tracks...\n     */\n    @Prop({mutable: false}) label!: string;\n\n    /**\n     * Specify whether the counter is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * The minimum value of the counter.\n     * If the value of the min attribute isn't set, then the element has no minimum value.\n     */\n    @Prop({mutable: true}) min?: number;\n\n    /**\n     * The maximum value of the counter.\n     * If the value of the max attribute isn't set, then the element has no maximum value.\n     */\n    @Prop({mutable: true}) max?: number;\n\n    /**\n     * Defines by how much the counter will be incremented or decremented.\n     */\n    @Prop({mutable: true}) step: number = 1;\n\n    /**\n     * Emitted when the value of the counter has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CounterChangeEventDetail>;\n\n    /**\n     * The current value of the counter.\n     */\n    @Prop({mutable: true}) value!: number;\n\n    /**\n     * Only for animation and display purpose\n     */\n    @State() private displayedValue: number;\n\n    private animateRunning = false;\n\n    /**\n     * Emitted when the counter loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad() {\n        this.handleValueChange();\n\n        if (!isWcsCounterSize(this.size)) {\n            console.warn(`Invalid size value for wcs-counter : \"${this.size}\". Must be one of \"${WcsCounterSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COUNTER_INHERITED_ATTRS),\n        };\n    }\n    \n    componentDidRender() {\n        this.ANIMATION_DURATION = parseCssTimeValueToMilliseconds(window.getComputedStyle(this.el).getPropertyValue('--wcs-counter-transition-duration') ?? '150ms') ?? 150;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.spinButton, attr, value);\n    }\n    \n    /**\n     * Current value change => handle event and interval\n     */\n    @Watch('value')\n    valueChange(newVal: any, oldVal: any) {\n        if(oldVal === newVal) return;\n\n        this.handleValueChange();\n    }\n\n    private handleValueChange() {\n        this.setMinimumIfValueIsUndefinedOrNull();\n        this.ensureValueIsNotOutOfMinMax();\n        this.updateDisplayValueIfNoAnimationRunning();\n    }\n\n    private updateDisplayValueIfNoAnimationRunning() {\n        if (!this.animateRunning) {\n            this.displayedValue = this.value;\n        }\n    }\n\n    private ensureValueIsNotOutOfMinMax() {\n        if (this.max !== undefined && this.value > this.max) {\n            this.value = this.max;\n        } else if (this.min !== undefined && this.value < this.min) {\n            this.value = this.min;\n        }\n    }\n\n    private setMinimumIfValueIsUndefinedOrNull() {\n        if (this.value === undefined || this.value === null) {\n            this.value = this.min ?? 0;\n        }\n    }\n\n    onKeyDown(_event: KeyboardEvent) {\n        if (this.disabled) return; \n        \n        if (isKeyup(_event)) {\n            _event.preventDefault();\n            this.handleIncrement()\n        }\n        if (isKeydown(_event)) {\n            _event.preventDefault();\n            this.handleDecrement()\n        }\n        if (isHomeKey(_event)) {\n            _event.preventDefault();\n            if (this.min != null) {\n                this.value = this.min;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n        if (isEndKey(_event)) {\n            _event.preventDefault();\n            if (this.max != null) {\n                this.value = this.max;\n                this.displayedValue = this.value;\n                this.notifyChange();\n            }\n        }\n    }\n\n    private notifyChange() {\n        this.wcsChange.emit({\n            value: this.value\n        });\n    }\n    \n    private handleDecrement = () => {\n        if (this.disabled) return;\n        if (this.min === undefined || this.value > this.min) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value -= this.step;\n            this.notifyChange();\n            this.animate('up');\n        }\n    };\n\n    private handleIncrement = () => {\n        if (this.disabled) return;\n        if (this.max === undefined || this.value < this.max) {\n            // we set animateRunning here to prevent the watch method on value prop from affecting the displayed value\n            // before the animation runs.\n            this.animateRunning = true; \n            this.value += this.step;\n            this.notifyChange();\n            this.animate('down');\n        }\n    };\n\n    private animate = (direction: 'up' | 'down'): void => {\n        // In case someone call animate function, we want ensured that animateRunning is set to true to prevent other \n        // method to mutate the displayedValue.\n        this.animateRunning = true;  \n\n        const outliers = Array.from(this.counterContainer.children)\n            .filter((span: HTMLSpanElement) => span.classList.contains('outliers'));\n\n        this.counterContainer.classList.add('animate-' + direction);\n        outliers.forEach((span: HTMLSpanElement) => {\n            span.hidden = false;\n        });\n        setTimeout(() => {\n            this.counterContainer.classList.remove('animate-' + direction);\n            outliers.forEach((span: HTMLSpanElement) => {\n                span.hidden = true;\n            });\n            this.displayedValue = this.value;\n\n            this.animateRunning = false;\n        }, this.ANIMATION_DURATION - 20);\n    }\n\n    render() {\n        return (\n            <Host>\n                <div class=\"counter\">\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleDecrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.min}>\n                        <wcs-mat-icon icon=\"remove\" size=\"s\"></wcs-mat-icon>  \n                    </wcs-button>\n                    <div class=\"counter-container\" ref={input => this.counterContainer = input}>\n                        <span id=\"outlier-down\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue - this.step}</span>\n                        <span tabindex={this.disabled ? -1 : 0}\n                              role=\"spinbutton\"\n                              ref={(el) => this.spinButton = el}\n                              class=\"current-value\"\n                              onBlur={(event) => this.wcsBlur.emit(event)}\n                              onKeyDown={(event) => this.onKeyDown(event)}\n                              aria-disabled={this.disabled ? 'true' : null}\n                              aria-valuenow={this.value}\n                              aria-valuetext={this.value}\n                              aria-valuemin={this.min}\n                              aria-valuemax={this.max}\n                              aria-label={this.label}\n                              {...this.inheritedAttributes}>{this.displayedValue}</span>\n                        <span id=\"outlier-up\"\n                              class=\"outliers\"\n                              hidden\n                              aria-hidden=\"true\">{this.displayedValue + this.step}</span>\n                    </div>\n                    <wcs-button class=\"wcs-primary\"\n                                shape=\"round\"\n                                size=\"s\"\n                                tabindex={-1}\n                                onClick={() => this.handleIncrement()}\n                                onBlur={(event) => this.wcsBlur.emit(event)}\n                                disabled={this.disabled || this.value === this.max}>\n                        <wcs-mat-icon icon=\"add\" size=\"s\"></wcs-mat-icon>\n                    </wcs-button>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -203,7 +203,7 @@ export class Dropdown {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, DROPDOWN_INHERITED_ATTRS));
     }
     render() {
-        return (h(Host, { key: 'd9f0aaa67dff366e7348e4aa04e320da4e22140d' }, h("button", Object.assign({ key: '4a51cdba15db74f689368a04730fb369fa3eea5f', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '2889dd5844070fdebe42378d78ea48ff98d46747', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: 'ebefdbf77021cf3419d0189c868532e9322ab074', class: "wcs-button-content-wrapper" }, h("slot", { key: '58221a64908d7366d1fa14db09ab3dcb8bcd01af', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: 'b2fb5b0ef3729efc573c38b7c93a1bb7cc9c8018', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: '3ba77338711b95656bd126a0cf46056371f27f51', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '99971db1b1ea35b64548a4fa441bee906e447612', role: "presentation", class: "container" }, h("slot", { key: 'fcb72e8f187871dc19b58e6cb3f072f5a7fc88ec', name: "item" }, h("span", { key: '1aa63a1942b320d8322f90fd35eee4f1a744235c', id: "is-empty" }))))));
+        return (h(Host, { key: '1480819d88a274e16ebb4544de646c47748d8223' }, h("button", Object.assign({ key: 'f5695efc0671635050c8a72a22894ec68691ae18', id: "dropdown-button", "aria-controls": "menu", disabled: this.disabled, "aria-haspopup": "true", role: "button", "aria-expanded": this.expanded ? 'true' : 'false', ref: el => this.nativeButton = el, onClick: ($event) => this.onButtonClick($event), onBlur: ($event) => $event.stopImmediatePropagation() }, this.inheritedAttributes), "Dropdown"), h("wcs-button", { key: '6a6f447e212cebee7af2e73fe03cfe862c820c27', mode: this.mode, shape: this.shape, disabled: this.disabled, size: this.size, ref: el => this.wcsButton = el, "aria-hidden": "true", tabindex: -1, onClick: ($event) => this.onButtonClick($event), onBlur: (e) => e.stopImmediatePropagation() }, h("div", { key: 'e2342ef539cfd88f61a5970f33c9cbce8dc29fa6', class: "wcs-button-content-wrapper" }, h("slot", { key: '1ce22f6b985d763763e4738d188e2e4f9540d8af', name: "placeholder" }), this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))), h("div", { key: '2e62c382bf097f6c85f2c590f8b98feb9d0f2993', class: (this.expanded ? 'show ' : '') + 'popover', id: "menu", role: "menu", "aria-labelledby": "dropdown-button", tabindex: -1, ref: el => this.popoverDiv = el }, h("div", { key: '0556f15d918b936198d4ab61844ffada916bf328', role: "presentation", id: "arrow", "data-popper-arrow": true }), h("div", { key: '27129e6faa2a8921154b547e219e93543a72ac52', role: "presentation", class: "container" }, h("slot", { key: '484b677521290251daf185f50bbfc288538cb5ef', name: "item" }, h("span", { key: '6bdff4146ffe5a503fd024c6a0f89239c031daef', id: "is-empty" }))))));
     }
     static get is() { return "wcs-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -325,7 +325,7 @@ export class Dropdown {
                     "text": "Specifies whether the dropdown button is clickable or not"
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "placement": {