wcs-core 7.0.0 → 7.2.0

package/dist/esm/wcs.js

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

package/dist/types/components/alert/alert-interface.d.ts

@@ -0,0 +1,11 @@
+export type WcsAlertIntent = 'success' | 'information' | 'error' | 'warning';
+/**
+ * Interface for the data structure of the alert
+ */
+export type WcsAlertConfig = {
+    title: string;
+    subtitle: string;
+    intent: WcsAlertIntent;
+    showProgressBar?: boolean;
+    timeout?: number;
+};

package/dist/types/components/alert/alert.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { WcsAlertIntent } from "./alert-interface";
+/**
+ * Alerts are used to communicate a state or an action that has been performed.
+ * It has to be used conjunction with the `wcs-alert-drawer` component, or you can use it independently by taking care of
+ * the alert visibility
+ *
+ * @cssprop --wcs-alert-background-color - Background color of the alert
+ * @cssprop --wcs-alert-icon-background-color - Background color of the icon
+ * @cssprop --wcs-alert-title-color - Color of the title
+ * @cssprop --wcs-alert-subtitle-color - Color of the subtitle
+ * @cssprop --wcs-alert-dismiss-button-color - Color of the dismiss button
+ * @cssprop --wcs-alert-title-font-weight - Font weight of the title
+ * @cssprop --wcs-alert-subtitle-font-weight - Font weight of the subtitle
+ * @cssprop --wcs-alert-title-font-size - Font size of the title
+ * @cssprop --wcs-alert-subtitle-font-size - Font size of the subtitle
+ * @cssprop --wcs-alert-border-width - Border width of the alert
+ * @cssprop --wcs-alert-border-color - Border color of the alert
+ * @cssprop --wcs-alert-border-radius - Border radius of the alert
+ * @cssprop --wcs-alert-padding - Padding of the alert
+ * @cssprop --wcs-alert-gap - Gap between each element of the alert, icon content and close button
+ * @cssprop --wcs-alert-min-width - Minimum width of the alert, default to 100% and it is set by alert-drawer component
+ * @cssprop --wcs-alert-progress-bar-height - Height of the progress bar if `showProgressBar` is set to true
+ * @cssprop --wcs-alert-progress-bar-background-color - Background color of the progress bar
+ */
+export declare class Alert {
+    private el;
+    /**
+     * Controls the visibility state of the alert.
+     * This property is exposed to allow control of the alert's display state and animation timing:
+     * - Used by wcs-alert-drawer to coordinate exit animations when the alert is dismissed
+     * - Can be used directly for custom implementations (though using wcs-alert-drawer is recommended)
+     * - When set to false, it triggers the exit animation if implemented
+     *
+     * Note: While direct usage is possible for custom implementations, it's recommended to use
+     * wcs-alert-drawer for consistent alert management and animations.
+     */
+    show: boolean;
+    intent: WcsAlertIntent;
+    /**
+     * Event emitted when the alert is dismissed
+     */
+    wcsAlertDismiss: EventEmitter<void>;
+    /**
+     * Time duration of the alert visibility
+     *
+     * 5000ms by default
+     * If 0, the alert will not emit `wcsAlertDismiss` event automatically
+     */
+    timeout: number;
+    showProgressBar: boolean;
+    /** Only active if timeout > 0, becomes true when the alert reaches its maximum display time */
+    private isTimedOut;
+    /** Indicates if the mouse cursor is hovering over the alert */
+    private isMouseHover;
+    /**
+     * ID of the setTimeout used to manage the alert's lifetime
+     * https://developer.mozilla.org/en-US/docs/Web/API/Window/clearTimeout#notes
+     */
+    private timeoutId;
+    /** Reference to the alert's information icon for managing its aria-label */
+    private annoucementIconHtmlElement;
+    mouseOverHandler(): void;
+    mouseOutHandler(): void;
+    /**
+     * Handles the mouse hover state of the alert
+     * @param hover - true if the mouse is hovering over the alert, false otherwise
+     */
+    private mouseHover;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): Promise<void>;
+    showAlertAndRunTimeout(): Promise<void>;
+    private onCloseButtonClick;
+    private close;
+    private getMaterialIcon;
+    private getAriaLabel;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/alert-drawer/alert-drawer-interface.d.ts

@@ -0,0 +1 @@
+export type WcsAlertDrawerPosition = 'bottom' | 'top' | "top-left" | "top-right" | "bottom-left" | "bottom-right";

package/dist/types/components/alert-drawer/alert-drawer.d.ts

@@ -0,0 +1,83 @@
+import { WcsAlertDrawerPosition } from "./alert-drawer-interface";
+import { WcsAlertConfig } from "../alert/alert-interface";
+/**
+ * Serve as a container for displaying `wcs-alert` components. Directly use this component to display alerts in your applications.
+ *
+ * ## Usage
+ *
+ * You can place the `wcs-alert-drawer` component anywhere in your application. It will be used to display alerts.
+ * You need to set `position` property to define where the alert drawer will be displayed on the screen.
+ *
+ * About alerts order:
+ * - alerts are ordered up-bottom if the position is `top` and bottom-up if the position is `bottom`
+ *
+ * ## Accessibility guidelines 💡
+ *
+ * - The component has `aria-live="polite"` and `aria-atomic="true"` attributes to announce the new alerts to screen readers
+ *
+ * ## Configuration (on the web component)
+ *
+ * Per default, the `wcs-alert-drawer` is configured with:
+ * - `position: 'top-right'`
+ * - `showProgressBar: false`
+ * - `timeout: 5000`
+ *
+ * When using the `WcsAlertDrawer::show(alert: WcsAlertConfig)` method, you can override the default configuration by
+ * overriding it through the argument.
+ * You can also set them in the `wcs-alert-drawer` component directly as attributes
+ *
+ * ```html
+ * <wcs-alert-drawer position="top-right" show-progress-bar timeout="10000">
+ * ```
+ * With this configuration, all alerts will be displayed with a progress bar and a timeout of 10 seconds.
+ *
+ * @slot - the alert drawer content, where alerts you put as children will be displayed
+ *
+ * @cssprop --wcs-alert-drawer-gap - Gap between alerts
+ * @cssprop --wcs-alert-drawer-margin-horizontal - Margin horizontal of the alert drawer
+ * @cssprop --wcs-alert-drawer-margin-vertical - Margin vertical of the alert drawer
+ * @cssprop --wcs-alert-drawer-hide-alert-animation-duration - Duration of the hide alert animation
+ * @cssprop --wcs-alert-drawer-min-width - Minimum width of the alert drawer => define the width of the alerts
+ */
+export declare class AlertDrawer {
+    private el;
+    /**
+     * Position of the alert drawer on the screen
+     */
+    position: WcsAlertDrawerPosition;
+    /**
+     * Timeout for the alert to be dismissed automatically
+     */
+    timeout: number;
+    /**
+     * Whether to show the progress bar or not
+     */
+    showProgressBar: boolean;
+    private alertEventListeners;
+    private timeoutId;
+    private userPrefersReducedMotion;
+    private alertsContainer;
+    /**
+     * Handles the dismissal of an alert
+     * @param alert The alert element
+     */
+    private close;
+    /**
+     * Method exposed on `wcs-alert-drawer` to show an alert programmatically via the JS API
+     * @example
+     * Plain javascript (example inside a script tag):
+     * ```javascript
+     *  document.querySelector('wcs-alert-drawer').show({
+     *      title: 'Alert title',
+     *      subtitle: 'Alert subtitle',
+     *      intent: 'info',
+     *      showProgressBar: true,
+     *      timeout: 5000
+     *  });
+     * @param alert The alert to show
+     */
+    show(alert: WcsAlertConfig): Promise<void>;
+    private renderToast;
+    render(): any;
+    disconnectedCallback(): void;
+}

package/dist/types/components/button/button-interface.d.ts

@@ -2,6 +2,4 @@ import { WcsSize } from '../../shared-types';
 export type WcsButtonType = 'button' | 'submit';
 export type WcsButtonShape = 'normal' | 'round' | 'square';
 export type WcsButtonMode = 'plain' | 'stroked' | 'clear';
-export declare const WcsButtonSizeValues: readonly ["s", "m", "l"];
-export type WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;
-export declare function isWcsButtonSize(size: string): size is WcsButtonSize;
+export type WcsButtonSize = Extract<WcsSize, 's' | 'm' | 'l'>;

package/dist/types/components/card/card-interface.d.ts

@@ -1 +1,2 @@
 export type CardMode = 'flat' | 'raised';
+export type CardOrientation = 'horizontal' | 'vertical';

package/dist/types/components/card/card.d.ts

@@ -1,16 +1,33 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
-import { CardMode } from './card-interface';
+import { CardMode, CardOrientation } from './card-interface';
 /**
  * The card component is a container that display content such as text, images, buttons, and lists.
  * A card can be a single component, but is often made up of a header, title, subtitle, and content.
  *
+ * While they're very flexible, it's important to use them consistently. You may use `wcs-card-media` outside `wcs-card-body`
+ * and `wcs-card-header` `wcs-card-content` `wcs-card-footer` within `wcs-card-body` to make sure the card is well-designed.
+ *
+ * @slot - Default slot for the card content
+ *
  * @cssprop --wcs-card-border-color - Border color of the card
  * @cssprop --wcs-card-border-radius - Border radius of the card
  * @cssprop --wcs-card-border-width - Border width of the card
  * @cssprop --wcs-card-background-color - Background color of the card
  * @cssprop --wcs-card-text-color - Text color of the card
+ * @cssprop --wcs-card-horizontal-min-height - Min height of the card when horizontal
  */
 export declare class Card implements ComponentInterface {
+    private el;
     mode: CardMode;
+    /**
+     * The orientation of the card, can be horizontal or vertical
+     */
+    orientation: CardOrientation;
+    orientationChanged(): void;
+    private onSlotChange;
+    private updateWcsCardImageOrientation;
+    private updateWcsCardBodyOrientation;
+    private findWcsCardMedia;
+    private findWcsCardBody;
     render(): any;
 }

package/dist/types/components/card-body/card-body.d.ts

@@ -1,9 +1,18 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
+import { CardOrientation } from '../card/card-interface';
 /**
  * The card-body is a subcomponent of `wcs-card`. It represents content of the card with an extra padding around.
  *
+ * @slot default - Default slot for the card body content. You can put anything you want. If you want a structured card, you can use `wcs-card-header`, `wcs-card-content`, and `wcs-card-footer` as slot
+ *
  * @cssprop --wcs-card-body-padding - Padding of the card body
+ * @cssprop --wcs-card-body-gap - Gap between each element in the card body
  */
 export declare class CardBody implements ComponentInterface {
+    private orientation;
+    /**
+     * @internal this method is not intended to be used by the user
+     */
+    setOrientation(orientation: CardOrientation): Promise<void>;
     render(): any;
 }

package/dist/types/components/card-content/card-content.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A content for a card inside card-body. Commonly used to provide more details about the card content.
+ * The information provided should be concise and easy to read.
+ *
+ * By default, the margin is removed from the top and bottom of the card description.
+ *
+ * @slot - The content of the card description.
+ *
+ * @cssprop --wcs-card-content-color - The color of the card description.
+ * @cssprop --wcs-card-content-font-size - The font size of the card description.
+ */
+export declare class CardContent {
+    render(): any;
+}

package/dist/types/components/card-footer/card-footer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The card footer component is a container that display content at the bottom of the card.
+ * It uses a flex layout to organize actions the user can take with a card
+ *
+ * @cssprop --wcs-card-footer-gap - Gap of the card footer
+ */
+export declare class CardFooter {
+    render(): any;
+}

package/dist/types/components/card-header/card-header.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The card header component is a container that display a title and an action, it can also display a label as a `<wcs-badge>` component.
+ *
+ * The default slotted element is displayed as a `<h3>` element
+ *
+ * @slot badges - Content for the badge label
+ * @slot actions - Button or any action to display on the right of the title
+ *
+ * @cssprop --wcs-card-header-title-color - Color of the title
+ * @cssprop --wcs-card-header-title-font-size - Font size of the title
+ * @cssprop --wcs-card-header-title-font-weight - Font weight of the title
+ * @cssprop --wcs-card-header-gap - Gap between the title and the badge
+ */
+export declare class CardHeader {
+    render(): any;
+}

package/dist/types/components/card-media/card-media.d.ts

@@ -0,0 +1,20 @@
+import { CardOrientation } from "../card/card-interface";
+/**
+ * The card media component is a container that display an image/icon inside a card.
+ * On horizontal orientation, the image/icon has an aspect ratio of 1/1
+ * On vertical orientation, the image/icon has an aspect ratio of 16/9.
+ *
+ * @slot - The default slot where the image/icon is displayed
+ * @slot vertical - The slot where the image/icon is displayed when the card is vertical
+ * @slot horizontal - The slot where the image/icon is displayed when the card is horizontal
+ *
+ * @cssprop --wcs-card-media-max-width-horizontal - Max width of the image when the card is horizontal
+ */
+export declare class CardMedia {
+    private orientation;
+    /**
+     * @internal this method is not intended to be used by the user
+     */
+    setOrientation(orientation: CardOrientation): Promise<void>;
+    render(): any;
+}

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 import { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';
 import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-aria-attribute";
+import { ControlComponentWithLabel } from "../../utils/control-component-interface";
 /**
  * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.
  *
@@ -45,7 +46,7 @@ import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-ari
  *
  * @cssprop --wcs-checkbox-transition-duration - Duration of the transition
  */
-export declare class Checkbox implements ComponentInterface, MutableAriaAttribute {
+export declare class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {
     private el;
     private nativeInput;
     private inheritedAttributes;
@@ -82,6 +83,7 @@ export declare class Checkbox implements ComponentInterface, MutableAriaAttribut
     componentWillLoad(): Promise<void> | void;
     componentDidLoad(): void;
     setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined): Promise<void>;
+    getLabel(): Promise<string>;
     handleChange(e: Event): void;
     handleHostClick(e: Event): Promise<void>;
     handleInputClick(ev: PointerEvent): void;

package/dist/types/components/counter/counter-interface.d.ts

@@ -2,6 +2,4 @@ import { WcsSize } from "../../shared-types";
 export interface CounterChangeEventDetail {
     value: number;
 }
-export declare const WcsCounterSizeValues: readonly ["m", "l"];
-export type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;
-export declare function isWcsCounterSize(size: string): size is WcsCounterSize;
+export type WcsCounterSize = Extract<WcsSize, 'm' | 'l'>;

package/dist/types/components/counter/counter.d.ts

@@ -32,6 +32,11 @@ export declare class Counter implements ComponentInterface, MutableAriaAttribute
     private spinButton;
     private counterContainer;
     private inheritedAttributes;
+    /**
+     * Default animation duration, in milliseconds
+     * @private
+     */
+    private ANIMATION_DURATION;
     /**
      * Specify the size (height) of the counter.
      */
@@ -77,6 +82,7 @@ export declare class Counter implements ComponentInterface, MutableAriaAttribute
      */
     wcsBlur: EventEmitter<FocusEvent>;
     componentWillLoad(): void;
+    componentDidRender(): void;
     setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined): Promise<void>;
     /**
      * Current value change => handle event and interval

package/dist/types/components/editable-field/editable-field.d.ts

@@ -24,7 +24,6 @@ import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn,
  * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided
  * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.
  *
- *
  * @cssprop --wcs-editable-field-label-color - Color of the label text
  * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text
  * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field
@@ -47,6 +46,7 @@ import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn,
  * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover
  * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field
  * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover
+ * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus
  * @cssprop --wcs-editable-field-border-style - Border style of the editable field
  *
  * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size
@@ -58,13 +58,18 @@ import { EditableComponentUpdateEvent, EditableFieldType, FormatFn, ValidateFn,
  */
 export declare class EditableField implements ComponentInterface {
     private el;
+    private spiedElement;
+    private editModeBtn;
+    private onInputKeydownCallback;
+    private onWcsInputOrChangeCallback;
     private currentState;
     /**
      * Specifies which component is used for editing
      */
     type: EditableFieldType;
     /**
-     * Label of the field
+     * Label of the field.
+     * Will also be part of the edit button `aria-label`.
      */
     label: string;
     /**
@@ -96,10 +101,13 @@ export declare class EditableField implements ComponentInterface {
      */
     size: WcsEditableFieldSize;
     private isError;
-    private spiedElement;
     private currentValue;
     componentWillLoad(): Promise<void> | void;
-    componentDidRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private keyboardSubmitHandler;
+    private onWcsInputOrChange;
+    private cleanUpSpiedElementEventListeners;
     private initWithInput;
     private initWithTextArea;
     private initWithSelect;
@@ -109,18 +117,24 @@ export declare class EditableField implements ComponentInterface {
      * @param elt the element to subscribe to
      * @private
      */
-    private addChangeHandlerForWcsComponents;
+    private addWcsChangeEventHandler;
     /**
      * This method subscribes the component to the input events produced by the other WCS components
      * @param elt the element to subscribe to
      * @private
      */
-    private addInputHandlerForWcsComponents;
+    private addWcsInputEventHandler;
+    /**
+     * This method subscribes the component to the keydown events produced by the other WCS components
+     * @param elt the element to subscribe to
+     * @private
+     */
+    private addKeyDownHandler;
+    private focusEditModeBtn;
     private sendCurrentValue;
     private discardChanges;
     forceDisplayStateAndValidate(): void;
-    onWindowClickEvent(event: MouseEvent): void;
-    private clickInsideComponent;
+    onWindowClickEvent(event: MouseEvent | KeyboardEvent): void;
     /**
      * discard changes and force component state to DISPLAY
      * <br/>
@@ -129,7 +143,7 @@ export declare class EditableField implements ComponentInterface {
     errorHandler(): void;
     onValueChange(): void;
     private onDisplayContainerClick;
-    render(): any;
     private getReadonlySvgIcon;
     private formatValues;
+    render(): any;
 }

package/dist/types/components/grid/grid.d.ts

@@ -129,6 +129,10 @@ export declare class Grid implements ComponentInterface, ComponentDidLoad, Mutab
     onSelectedItemsPropertyChange(newValue: any | any[]): void;
     onFocus(event: FocusEvent): void;
     onBlur(event: FocusEvent): void;
+    /**
+     * Set focus on the first cell of the grid
+     */
+    focusFirstCell(): Promise<void>;
     /**
      * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
      * in the table.

package/dist/types/components/grid-pagination/grid-pagination.d.ts

@@ -50,13 +50,18 @@ export declare class GridPagination implements ComponentInterface, MutableAriaAt
     wcsGridPaginationChange: EventEmitter<WcsGridPaginationChangeEventDetails>;
     componentWillLoad(): Promise<void> | void;
     setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined): Promise<void>;
+    private getWcsGrid;
     private lastPage;
     private nextPage;
     private canGoToNextPage;
     private previousPage;
     private canGoToPreviousPage;
     private firstPage;
-    private onChangePagesize;
+    private onChangePageSize;
+    /**
+     * Move focus to the first grid cell after a pagination change
+     */
+    private focusFirstGridCell;
     private emitPaginationChange;
     render(): any;
 }

package/dist/types/components/header/header.d.ts

@@ -5,6 +5,7 @@ import { AriaAttributeName } from "../../utils/mutable-aria-attribute";
  *
  * @slot logo SNCF Logo
  * @slot title Title of your application
+ * @slot center Content to display in the center of the header, useful for a search bar
  * @slot actions Actions such as buttons, dropdown or any useful information to always display on your application
  *
  * @cssprop --wcs-header-background-color - Background color of the header

package/dist/types/components/input/input-interface.d.ts

@@ -1,9 +1,7 @@
 import { WcsSize } from '../../shared-types';
 export type AutocompleteTypes = ('on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo');
 export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local' | 'file';
-export declare const WcsInputSizeValues: readonly ["s", "m", "l"];
-export type WcsInputSize = Extract<WcsSize, typeof WcsInputSizeValues[number]>;
-export declare function isWcsInputSize(size: string): size is WcsInputSize;
+export type WcsInputSize = Extract<WcsSize, 's' | 'm' | 'l'>;
 export type WcsInputAutocorrect = 'on' | 'off';
 export type WcsInputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 export type WcsInputInputMode = 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';

package/dist/types/components/input/input.d.ts

@@ -39,6 +39,7 @@ import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-ari
  * @cssprop --wcs-input-border-color-default - default border color of the input when not focused
  * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled
  * @cssprop --wcs-input-border-color-focus - border color of the input when focused
+ * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused
  * @cssprop --wcs-input-border-color-error - border color of the input when in error state
  *
  * @cssprop --wcs-input-value-color - color of the input value
@@ -155,6 +156,8 @@ export declare class Input implements ComponentInterface, MutableAriaAttribute {
      * The name of the control, which is submitted with the form data.
      */
     name: string;
+    hidePasswordButtonAriaLabel: string;
+    showPasswordButtonAriaLabel: string;
     /**
      * A regular expression that the value is checked against. The pattern must match the entire value, not just some
      * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value