wcs-core 3.0.0 → 4.0.0

package/dist/cjs/wcs.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["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"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown.cjs",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"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],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea.cjs",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"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],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["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"],"close":[64]}]]],["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]}]]],["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]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","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,"mousedown","onMouseDown"],[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]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["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-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["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],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["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]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
+  return index.bootstrapLazy([["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"]]]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter.cjs",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"currentValue":[32],"displayedValue":[32]}]]],["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"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown.cjs",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"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],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea.cjs",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"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],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion.cjs",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["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"],"close":[64]}]]],["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]}]]],["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]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","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,"mousedown","onMouseDown"],[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]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["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],"expanded":[32],"disabled":[32]}]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["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],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["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]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button.cjs",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "./components/native-select/native-select.component.js",
     "./components/accordion/accordion.js",
     "./components/accordion-content/accordion-content.js",
     "./components/accordion-header/accordion-header.js",
@@ -14,6 +15,7 @@
     "./components/com-nav/com-nav.js",
     "./components/com-nav-category/com-nav-category.js",
     "./components/com-nav-submenu/com-nav-submenu.js",
+    "./components/counter/counter.js",
     "./components/divider/divider.js",
     "./components/dropdown/dropdown.js",
     "./components/dropdown-divider/dropdown-divider.js",

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;AAO7F,MAAM,OAAO,SAAS;;;mBAOC,KAAK;;EAExB,iBAAiB;IACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,WAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO;QAClD;UACI,eAAa,CACZ;QACL,WAAK,KAAK,EAAC,SAAS;UAChB,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ;MACN,WAAK,KAAK,EAAC,gBAAgB;QACvB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n    tag: 'wcs-action-bar',\n    styleUrl: 'action-bar.scss',\n    shadow: true\n})\nexport class ActionBar implements ComponentInterface {\n    @Element() 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() 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;AAO7F,MAAM,OAAO,SAAS;;;mBAOS,KAAK;;EAEhC,iBAAiB;IACb,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,WAAK,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,OAAO;QAClD;UACI,eAAa,CACZ;QACL,WAAK,KAAK,EAAC,SAAS;UAChB,YAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CACJ;MACN,WAAK,KAAK,EAAC,gBAAgB;QACvB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core';\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"]}

package/dist/collection/components/app/app.js

@@ -19,6 +19,5 @@ export class App {
       "$": ["app.css"]
     };
   }
-  static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=app.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/components/app/app.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ1E,MAAM,OAAO,GAAG;EAGZ,MAAM;IACF,OAAO;MACH,YAAM,IAAI,EAAC,QAAQ,GAAE;MACrB,YAAM,IAAI,EAAC,SAAS,GAAE;MACtB,YAAM,IAAI,EAAC,SAAS,GAAE;KACzB,CAAC;EACN,CAAC;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h } from '@stencil/core';\n\n\n@Component({\n    tag: 'wcs-app',\n    styleUrl: 'app.scss',\n    shadow: true\n})\nexport class App implements ComponentInterface {\n    @Element() el!: HTMLWcsAppElement;\n\n    render() {\n        return [\n            <slot name=\"header\"/>,\n            <slot name=\"sidebar\"/>,\n            <slot name=\"content\"/>\n        ];\n    }\n}\n"]}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/components/app/app.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,GAAG;EAEZ,MAAM;IACF,OAAO;MACH,YAAM,IAAI,EAAC,QAAQ,GAAE;MACrB,YAAM,IAAI,EAAC,SAAS,GAAE;MACtB,YAAM,IAAI,EAAC,SAAS,GAAE;KACzB,CAAC;EACN,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h } from '@stencil/core';\n\n\n@Component({\n    tag: 'wcs-app',\n    styleUrl: 'app.scss',\n    shadow: true\n})\nexport class App implements ComponentInterface {\n\n    render() {\n        return [\n            <slot name=\"header\"/>,\n            <slot name=\"sidebar\"/>,\n            <slot name=\"content\"/>\n        ];\n    }\n}\n"]}

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

@@ -1,2 +1,6 @@
-export {};
+export const WcsButtonSizeValues = ['s', 'm', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
+export function isWcsButtonSize(size) {
+  // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues
+  return WcsButtonSizeValues.includes(size);
+}
 //# sourceMappingURL=button-interface.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-interface.js","sourceRoot":"","sources":["../../../src/components/button/button-interface.ts"],"names":[],"mappings":"","sourcesContent":["export type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'small' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n"]}
+{"version":3,"file":"button-interface.js","sourceRoot":"","sources":["../../../src/components/button/button-interface.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAI9J,MAAM,UAAU,eAAe,CAAC,IAAY;EACxC,2EAA2E;EAC3E,OAAO,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC9C,CAAC","sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type WcsButtonType = 'button' | 'submit';\n\nexport type WcsButtonShape = 'normal' | 'round' | 'square';\n\nexport type WcsButtonMode = 'plain' | 'stroked' | 'clear';\n\nexport const WcsButtonSizeValues = ['s', 'm', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsButtonSize = Extract<WcsSize, typeof WcsButtonSizeValues[number]>;\n\nexport function isWcsButtonSize(size: string): size is WcsButtonSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsButtonSizeValues\n    return WcsButtonSizeValues.includes(size);\n}\n"]}

package/dist/collection/components/button/button.css

@@ -172,7 +172,6 @@
 
 :host {
   display: inline-block;
-  --wcs-button-padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);
   --wcs-button-color: var(--wcs-contrast, var(--wcs-white, white));
   --wcs-button-background-color: var(--wcs-base, var(--wcs-primary, #0088CE));
   --wcs-button-ripple-color: var(--wcs-contrast, var(--wcs-white, white));
@@ -204,34 +203,41 @@
   --wcs-button-ripple-color: var(--wcs-base);
 }
 
-:host([shape=small]) {
-  --wcs-button-padding: 2px 16px;
+:host([size=l]) {
+  --wcs-button-padding: var(--wcs-padding-m) var(--wcs-padding);
+  --wcs-button-min-height: var(--wcs-size-l);
+  --wcs-button-min-width: var(--wcs-size-l);
+  --wcs-button-font-size: 1.0625rem;
 }
-:host([shape=small]) .wcs-inner-button {
-  min-width: var(--wcs-button-min-width, unset);
-  min-height: var(--wcs-button-min-height, unset);
+
+:host([size=m]) {
+  --wcs-button-padding: var(--wcs-padding-m) var(--wcs-padding);
+  --wcs-button-min-height: var(--wcs-size-m);
+  --wcs-button-min-width: var(--wcs-size-m);
+  --wcs-button-font-size: 1rem;
+}
+
+:host([size=s]) {
+  --wcs-button-padding: var(--wcs-padding-s) var(--wcs-padding);
+  --wcs-button-min-height: var(--wcs-size-s);
+  --wcs-button-min-width: var(--wcs-size-s);
+  --wcs-button-font-size: 0.9375rem;
 }
 
 :host([shape=round]) {
-  --wcs-button-padding: 0;
-  --wcs-button-border-radius: 50%;
+  --wcs-button-border-radius: 2rem;
 }
-:host([shape=round]) .wcs-inner-button {
-  min-width: var(--wcs-button-min-width, 42px);
-  min-height: var(--wcs-button-min-height, 42px);
+:host([shape=round]) ::slotted(wcs-mat-icon) {
+  margin: calc(-1 * var(--wcs-padding));
 }
 
 :host([shape=square]) {
   --wcs-button-padding: 0;
 }
-:host([shape=square]) .wcs-inner-button {
-  min-width: var(--wcs-button-min-width, 42px);
-  min-height: var(--wcs-button-min-height, 42px);
+:host([shape=square]) ::slotted(wcs-mat-icon) {
+  margin: calc(-1 * var(--wcs-padding));
 }
 
-:host([shape=normal]) {
-  --wcs-button-padding: calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding));
-}
 :host([shape=normal]) .wcs-inner-button {
   min-width: var(--wcs-button-min-width, unset);
   min-height: var(--wcs-button-min-height, unset);
@@ -249,8 +255,8 @@
   opacity: 0;
 }
 :host([loading]) wcs-spinner {
-  height: 24px;
-  width: 24px;
+  height: calc(var(--wcs-button-min-height) / 2);
+  width: calc(var(--wcs-button-min-width) / 2);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -305,8 +311,10 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  font-size: 1rem;
+  font-size: var(--wcs-button-font-size);
   line-height: 1.5;
+  min-height: var(--wcs-button-min-height);
+  min-width: var(--wcs-button-min-width);
   transition: color 175ms ease-in-out, background-color 175ms ease-in-out, box-shadow 175ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .wcs-inner-button::before, .wcs-inner-button::after {

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

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
+import { isWcsButtonSize, WcsButtonSizeValues } from './button-interface';
 import { hasShadowDom } from '../../utils/helpers';
 /**
  * Button component, can also be a link when specifying href.
@@ -8,8 +9,10 @@ export class Button {
   constructor() {
     this.type = 'button';
     this.href = undefined;
+    this.target = undefined;
     this.disabled = false;
     this.ripple = true;
+    this.size = 'm';
     this.shape = 'normal';
     this.mode = 'plain';
     this.loading = false;
@@ -34,6 +37,12 @@ export class Button {
       }
     }
   }
+  componentWillLoad() {
+    if (!isWcsButtonSize(this.size)) {
+      console.error(`Invalid size value for wcs-button : "${this.size}". Must be one of "${WcsButtonSizeValues.join(', ')}"`);
+      this.size = "m"; // Default fallback value
+    }
+  }
   componentDidLoad() {
     this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
   }
@@ -57,7 +66,7 @@ export class Button {
   render() {
     const TagType = this.getTagName();
     const attrs = this.href !== undefined
-      ? { href: this.href, role: 'button' }
+      ? { href: this.href, role: 'button', target: this.target }
       : { type: this.type };
     return (h(TagType, Object.assign({}, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading }), this.loading && h("wcs-spinner", null), h("slot", null)));
   }
@@ -111,11 +120,28 @@ export class Button {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set a URL to point to.\nIf specified use a `a` tag instead of `btn`."
+          "text": "Set a URL to point to.<br/>\nIf specified use a `a` tag instead of `btn`."
         },
         "attribute": "href",
         "reflect": false
       },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_blank' | '_self'",
+          "resolved": "\"_blank\" | \"_self\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies where to open the linked document when using href (see prop above)<br/>\nDefault '_self' will open the linked document in the same frame as it was clicked"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -128,7 +154,7 @@ export class Button {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify wether the button is disabled or not."
+          "text": "Specify whether the button is disabled or not."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -146,18 +172,41 @@ export class Button {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specify wether the button should have a ripple effect or not."
+          "text": "Specify whether the button should have a ripple effect or not."
         },
         "attribute": "ripple",
         "reflect": false,
         "defaultValue": "true"
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WcsButtonSize",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "WcsButtonSize": {
+              "location": "import",
+              "path": "./button-interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specify the size of the button."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'m'"
+      },
       "shape": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "WcsButtonShape",
-          "resolved": "\"normal\" | \"round\" | \"small\" | \"square\"",
+          "resolved": "\"normal\" | \"round\" | \"square\"",
           "references": {
             "WcsButtonShape": {
               "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAE7F,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;GAEG;AAQH,MAAM,OAAO,MAAM;;gBAMgC,QAAQ;;oBAWnB,KAAK;kBAKxB,IAAI;iBAM4B,QAAQ;gBAKV,OAAO;mBAKZ,KAAK;;EAG/C,OAAO,CAAC,EAAS;IACb,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;MAC/B,EAAE,CAAC,wBAAwB,EAAE,CAAC;KACjC;IACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;MACjD,kDAAkD;MAClD,+CAA+C;MAC/C,sCAAsC;MACtC,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;MACrC,IAAI,IAAI,EAAE;QACN,EAAE,CAAC,cAAc,EAAE,CAAC;QAEpB,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC3D,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;QACnB,UAAU,CAAC,MAAM,EAAE,CAAC;OACvB;KACJ;EACL,CAAC;EAED,gBAAgB;IACZ,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;EAC1F,CAAC;EAEO,mBAAmB;IACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,KAAK,CAAC;EACpC,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;EACnC,CAAC;EAEO,UAAU;IACd,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;EACpD,CAAC;EAGD,cAAc;IACV,IAAI,IAAI,CAAC,MAAM,EAAE;MACb,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC9B;SAAM;MACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;EACL,CAAC;EAED,MAAM;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAClC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;MACjC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE;MACrC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC1B,OAAO,CACH,EAAC,OAAO,oBACA,KAAK,IACT,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MAGrC,IAAI,CAAC,OAAO,IAAI,sBAA2B;MAE/C,eAAO,CACD,CACb,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, ComponentInterface, Element, h, Listen, Prop, Watch} from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport { WcsButtonMode, WcsButtonShape, WcsButtonType } from './button-interface';\nimport { hasShadowDom } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() el!: HTMLElement;\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specify wether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * Specify wether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    mdcRipple: MDCRipple;\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    @Listen('click')\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    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\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' }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\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, 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 } from '../../utils/helpers';\n\n/**\n * Button component, can also be a link when specifying href.\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface {\n    @Element() private el!: HTMLElement;\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    @Listen('click')\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.error(`Invalid size value for wcs-button : \"${this.size}\". Must be one of \"${WcsButtonSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\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            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}

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

@@ -152,7 +152,6 @@ export class Checkbox {
         }
       }];
   }
-  static get elementRef() { return "el"; }
 }
 let checkboxIds = 0;
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ3G,MAAM,OAAO,QAAQ;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBAItC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;QACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ;QACR,YAAM,KAAK,EAAC,eAAe,GAAQ;QACnC,YAAM,KAAK,EAAC,MAAM;UACd,eAAO,CACJ,CACH,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,WAAW,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Prop, Event, Element, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: true\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Element() el: HTMLElement;\n\n    @Prop() name = this.checkboxId;\n\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 wether the checkbox is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAoC,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQlG,MAAM,OAAO,QAAQ;;IACT,eAAU,GAAG,gBAAgB,WAAW,EAAE,EAAE,CAAC;gBACtC,IAAI,CAAC,UAAU;yBAK0B,KAAK;mBAKX,KAAK;0BAK0B,QAAQ;oBAK7D,KAAK;;EAOjC,YAAY,CAAC,MAAa;IACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAChB,OAAO,EAAE,IAAI,CAAC,OAAO;KACxB,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,OAAO,CACH,EAAC,IAAI;MACD,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,QAAQ;QACzE,aAAO,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,IAAI,GACZ;QACR,YAAM,KAAK,EAAC,eAAe,GAAQ;QACnC,YAAM,KAAK,EAAC,MAAM;UACd,eAAO,CACJ,CACH,CACL,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,WAAW,GAAG,CAAC,CAAC","sourcesContent":["import { Component, Prop, Event, EventEmitter, ComponentInterface, h, Host } from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\n\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: true\n})\nexport class Checkbox implements ComponentInterface {\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n    @Prop() name = this.checkboxId;\n\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 wether the checkbox is disabled or not.\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    handleChange(_event: Event) {\n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked\n        });\n    }\n\n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input onChange={(evt) => this.handleChange(evt)}\n                           checked={this.checked}\n                           class=\"wcs-checkbox\"\n                           type=\"checkbox\"\n                           name={this.name}\n                           disabled={this.disabled}\n                           id={this.name}>\n                    </input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot/>\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"]}

package/dist/collection/components/com-nav/com-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() mobileMenuOpen: boolean = false;\n    @State() currentActiveSizing: 'desktop' | 'mobile';\n    resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n}\n"]}
+{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() private currentActiveSizing: 'desktop' | 'mobile';\n    private resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n}\n"]}

package/dist/collection/components/com-nav-category/com-nav-category.js.map

@@ -1 +1 @@
-{"version":3,"file":"com-nav-category.js","sourceRoot":"","sources":["../../../src/components/com-nav-category/com-nav-category.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen, Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport {isEnterKey, isSpaceKey} from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-com-nav-category',\n    styleUrl: 'com-nav-category.scss',\n    shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface {\n    @Element() el!: HTMLWcsComNavCategoryElement;\n    @Prop() label: string;\n    @State() categoryOpen: boolean = false;\n    @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n    @Event() wcsCategoryItemClicked: EventEmitter<UIEvent>;\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.categoryOpen) this.categoryOpen = false;\n    }\n\n    @Listen('wcsCategoryOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n        if (event.detail.categoryElement !== this.el) {\n            this.categoryOpen = false;\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.categoryOpen = !this.categoryOpen;\n        }\n    }\n\n    /**\n     * Handle key down on category items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleItemClick(_event);\n        }\n    }\n\n    /**\n     * Close the category\n     */\n    @Method()\n    async close() {\n        this.categoryOpen = false;\n    }\n\n    /**\n     * Opens the category\n     */\n    @Method()\n    async open() {\n        this.categoryOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsCategoryOpened.emit({categoryElement: this.el})\n    }\n\n\n    /**\n     * Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n     * @param evt\n     * @private\n     */\n    private handleItemClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsCategoryItemClicked.emit(evt);\n        }\n    }\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     class=\"label-container\"\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     onClick={_ => this.categoryOpen = !this.categoryOpen}><span class=\"label\">{this.label}</span></div>\n                <div class=\"item-container\"\n                     tabIndex={-1}\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n                     onClick={(evt) => this.handleItemClick(evt)}>\n                    <slot/>\n                </div>\n            </Host>\n        )\n    }\n\n}\n"]}
+{"version":3,"file":"com-nav-category.js","sourceRoot":"","sources":["../../../src/components/com-nav-category/com-nav-category.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen, Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { CategoryOpenedEventDetail } from '../com-nav/com-nav-interface';\nimport {isEnterKey, isSpaceKey} from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-com-nav-category',\n    styleUrl: 'com-nav-category.scss',\n    shadow: true,\n})\nexport class ComNavCategory implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavCategoryElement;\n    @Prop() label: string;\n    @State() private categoryOpen: boolean = false;\n    @Event() wcsCategoryOpened: EventEmitter<CategoryOpenedEventDetail>;\n    @Event() wcsCategoryItemClicked: EventEmitter<UIEvent>;\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.categoryOpen) this.categoryOpen = false;\n    }\n\n    @Listen('wcsCategoryOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<CategoryOpenedEventDetail>) {\n        if (event.detail.categoryElement !== this.el) {\n            this.categoryOpen = false;\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.categoryOpen = !this.categoryOpen;\n        }\n    }\n\n    /**\n     * Handle key down on category items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleCategoryItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleItemClick(_event);\n        }\n    }\n\n    /**\n     * Close the category\n     */\n    @Method()\n    async close() {\n        this.categoryOpen = false;\n    }\n\n    /**\n     * Opens the category\n     */\n    @Method()\n    async open() {\n        this.categoryOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsCategoryOpened.emit({categoryElement: this.el})\n    }\n\n\n    /**\n     * Close the category and fire item click if we detect a mouse click on a slotted `a` element.\n     * @param evt\n     * @private\n     */\n    private handleItemClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsCategoryItemClicked.emit(evt);\n        }\n    }\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     class=\"label-container\"\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     onClick={_ => this.categoryOpen = !this.categoryOpen}><span class=\"label\">{this.label}</span></div>\n                <div class=\"item-container\"\n                     tabIndex={-1}\n                     data-open={this.categoryOpen}\n                     onKeyDown={evt => this.handleCategoryItemsKeyDown(evt)}\n                     onClick={(evt) => this.handleItemClick(evt)}>\n                    <slot/>\n                </div>\n            </Host>\n        )\n    }\n\n}\n"]}

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"com-nav-submenu.js","sourceRoot":"","sources":["../../../src/components/com-nav-submenu/com-nav-submenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Element,\n    Event,\n    EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport {isEnterKey, isEscapeKey, isSpaceKey} from \"../../utils/helpers\";\nimport {registerCloseHandlerForFocusOutEventOn} from \"../com-nav/com-nav-utils\";\n\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n@Component({\n    tag: 'wcs-com-nav-submenu',\n    styleUrl: 'com-nav-submenu.scss',\n    shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface {\n    @Element() el!: HTMLWcsComNavSubmenuElement;\n    @Prop() label: string;\n    @Prop() panelTitle: string;\n    @Prop() panelDescription: string;\n    @State() menuOpen: boolean = false;\n    @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() wcsClickOnFinalAction: EventEmitter<void>;\n\n    componentWillLoad(): Promise<void> | void {\n        const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n    }\n\n    /**\n     * If the user clicks outside the menu, we close it\n     */\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.menuOpen) this.menuOpen = false;\n    }\n\n    @Listen('wcsSubmenuOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n        // If the clicked menu is not this component, we close it\n        if (event.detail.menuElement !== this.el) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu when escape is pressed\n     * @param _event keydown event\n     */\n    @Listen('keydown', {target: 'window'})\n    onEscapeKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event) && this.menuOpen) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu\n     */\n    @Method()\n    async close() {\n        this.menuOpen = false;\n    }\n\n    /**\n     * Opens the menu\n     */\n    @Method()\n    async open() {\n        this.menuOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsSubmenuOpened.emit({menuElement: this.el})\n    }\n\n    /**\n     * Handle key down on menu items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleMenuItemsClick(_event);\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.menuOpen = !this.menuOpen;\n        }\n    }\n\n    private handleMenuItemsClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsClickOnFinalAction.emit();\n        }\n    }\n\n    /**\n     * handle category item click to close the submenu\n     * @param _\n     * @private\n     */\n    @Listen('wcsCategoryItemClicked')\n    // @ts-ignore\n    private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n        // If a category item is clicked, we close the submenu drawer;\n        this.close();\n    }\n\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     onClick={_ => this.menuOpen = !this.menuOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     class=\"menu-button\">\n                    <span class=\"label\">{this.label}</span><span class=\"arrow-container\"><span\n                    class=\"arrow-icon\" data-open={this.menuOpen}>&#xf107;</span></span>\n                </div>\n                <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n                    <div class=\"drawer-container\">\n                        <div class=\"drawer-content\">\n                            <div class=\"drawer-description\">\n                                <h3>{this.panelTitle}</h3>\n                                <p>{this.panelDescription}</p>\n                            </div>\n                            <div class=\"menu-items\"\n                                 onClick={(evt) => this.handleMenuItemsClick(evt)}\n                                 onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n                                <slot/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n\n}\n"]}
+{"version":3,"file":"com-nav-submenu.js","sourceRoot":"","sources":["../../../src/components/com-nav-submenu/com-nav-submenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    Element,\n    Event,\n    EventEmitter, Method\n} from '@stencil/core';\nimport {MenuOpenedEventDetail} from '../com-nav/com-nav-interface';\nimport {isEnterKey, isEscapeKey, isSpaceKey} from \"../../utils/helpers\";\nimport {registerCloseHandlerForFocusOutEventOn} from \"../com-nav/com-nav-utils\";\n\n\nconst WCS_COM_NAV_CATEGORY = 'WCS-COM-NAV-CATEGORY';\n\n@Component({\n    tag: 'wcs-com-nav-submenu',\n    styleUrl: 'com-nav-submenu.scss',\n    shadow: true,\n})\nexport class ComNavSubmenu implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavSubmenuElement;\n    @Prop() label: string;\n    @Prop() panelTitle: string;\n    @Prop() panelDescription: string;\n    @State() private menuOpen: boolean = false;\n    @Event() wcsSubmenuOpened: EventEmitter<MenuOpenedEventDetail>;\n    /**\n     * Emitted when a user click on a final navigation action.\n     *\n     * Used by the com-nav component to close the mobile menu overlay when a user click on a final action.\n     */\n    @Event() wcsClickOnFinalAction: EventEmitter<void>;\n\n    componentWillLoad(): Promise<void> | void {\n        const slottedCategoryItems = this.el.querySelectorAll(':scope > wcs-com-nav-category:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavCategoryElement>(slottedCategoryItems, WCS_COM_NAV_CATEGORY);\n    }\n\n    /**\n     * If the user clicks outside the menu, we close it\n     */\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(_: MouseEvent) {\n        if (this.menuOpen) this.menuOpen = false;\n    }\n\n    @Listen('wcsSubmenuOpened', {target: 'window'})\n    onSubmenuOpened(event: CustomEvent<MenuOpenedEventDetail>) {\n        // If the clicked menu is not this component, we close it\n        if (event.detail.menuElement !== this.el) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu when escape is pressed\n     * @param _event keydown event\n     */\n    @Listen('keydown', {target: 'window'})\n    onEscapeKeyDown(_event: KeyboardEvent) {\n        if (isEscapeKey(_event) && this.menuOpen) {\n            this.menuOpen = false;\n        }\n    }\n\n    /**\n     * Close the menu\n     */\n    @Method()\n    async close() {\n        this.menuOpen = false;\n    }\n\n    /**\n     * Opens the menu\n     */\n    @Method()\n    async open() {\n        this.menuOpen = true;\n    }\n\n    /**\n     * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage\n     * the closing of the menu correctly\n     */\n    private onClick(evt: MouseEvent) {\n        evt.stopPropagation();\n        this.wcsSubmenuOpened.emit({menuElement: this.el})\n    }\n\n    /**\n     * Handle key down on menu items\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuItemsKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.handleMenuItemsClick(_event);\n        }\n    }\n\n    /**\n     * Open the menu if it is closed and closed the menu if it is already opened\n     * @param _event the keyboard event\n     * @private\n     */\n    private handleMenuKeyDown(_event: KeyboardEvent) {\n        if ((isSpaceKey(_event)) || isEnterKey(_event)) {\n            this.menuOpen = !this.menuOpen;\n        }\n    }\n\n    private handleMenuItemsClick(evt: UIEvent) {\n        if ((evt.target as HTMLElement).tagName === 'A') {\n            this.close();\n            this.wcsClickOnFinalAction.emit();\n        }\n    }\n\n    /**\n     * handle category item click to close the submenu\n     * @param _\n     * @private\n     */\n    @Listen('wcsCategoryItemClicked')\n    // @ts-ignore\n    private wcsCategoryItemClickedHandler(_: CustomEvent<UIEvent>) {\n        // If a category item is clicked, we close the submenu drawer;\n        this.close();\n    }\n\n\n    render(): any {\n        return (\n            <Host onClick={evt => this.onClick(evt)}>\n                <div tabindex={screen.width < 576 ? \"-1\" : \"0\"}\n                     onClick={_ => this.menuOpen = !this.menuOpen}\n                     onKeyDown={evt => this.handleMenuKeyDown(evt)}\n                     class=\"menu-button\">\n                    <span class=\"label\">{this.label}</span><span class=\"arrow-container\"><span\n                    class=\"arrow-icon\" data-open={this.menuOpen}>&#xf107;</span></span>\n                </div>\n                <div class=\"drawer\" data-open={this.menuOpen} tabIndex={-1}>\n                    <div class=\"drawer-container\">\n                        <div class=\"drawer-content\">\n                            <div class=\"drawer-description\">\n                                <h3>{this.panelTitle}</h3>\n                                <p>{this.panelDescription}</p>\n                            </div>\n                            <div class=\"menu-items\"\n                                 onClick={(evt) => this.handleMenuItemsClick(evt)}\n                                 onKeyDown={evt => this.handleMenuItemsKeyDown(evt)}>\n                                <slot/>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n\n}\n"]}

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

@@ -0,0 +1,6 @@
+export const WcsCounterSizeValues = ['m', 'l']; // as const keyword is used to infer and preserve the exact literal values of an array or object.
+export function isWcsCounterSize(size) {
+  // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues
+  return WcsCounterSizeValues.includes(size);
+}
+//# sourceMappingURL=counter-interface.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter-interface.js","sourceRoot":"","sources":["../../../src/components/counter/counter-interface.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAG,EAAE,GAAG,CAAU,CAAC,CAAC,iGAAiG;AAI1J,MAAM,UAAU,gBAAgB,CAAC,IAAY;EACzC,0EAA0E;EAC1E,OAAO,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["import { WcsSize } from \"../../shared-types\";\n\nexport interface CounterChangeEventDetail {\n    value: number;\n}\n\nexport const WcsCounterSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsCounterSize = Extract<WcsSize, typeof WcsCounterSizeValues[number]>;\n\nexport function isWcsCounterSize(size: string): size is WcsCounterSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsInputSizeValues\n    return WcsCounterSizeValues.includes(size);\n}\n"]}

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

@@ -0,0 +1,93 @@
+@keyframes spin-animation-up {
+  0% {
+    transform: translateY(0);
+    transform-origin: center;
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(30px);
+    transform-origin: center;
+    opacity: 1;
+  }
+}
+@keyframes spin-animation-down {
+  0% {
+    transform: translateY(0);
+    transform-origin: center;
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(-30px);
+    transform-origin: center;
+    opacity: 1;
+  }
+}
+:host {
+  box-sizing: border-box;
+  height: var(--wcs-counter-host-height);
+  --wcs-input-icon-color: var(--wcs-text-medium);
+  --wcs-internal-input-border-radius: calc(var(--wcs-border-radius) * 10);
+  --wcs-internal-input-border-width: 2px;
+  font-family: var(--wcs-font-sans-serif);
+  font-size: var(--wcs-counter-font-size);
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  padding: var(--wcs-counter-host-padding);
+  width: fit-content;
+  overflow: hidden;
+  border-radius: var(--wcs-internal-input-border-radius);
+  background-color: var(--wcs-light);
+  border: var(--wcs-internal-input-border-width) solid var(--wcs-light);
+  background-clip: padding-box;
+}
+:host .counter-container {
+  height: var(--wcs-counter-host-height);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 calc(2 * var(--wcs-base-margin));
+  position: relative;
+}
+:host .outliers {
+  position: absolute;
+}
+:host #outlier-down {
+  top: calc(var(--wcs-counter-host-height) / 2 * -1);
+}
+:host #outlier-up {
+  bottom: calc(var(--wcs-counter-host-height) / 2 * -1);
+}
+:host span.current-value:focus-visible {
+  outline: 2px dashed var(--wcs-primary);
+  outline-offset: 4px;
+  border-radius: 0.1rem;
+}
+:host .animate-up {
+  animation: spin-animation-up 0.175s ease-in-out;
+}
+:host .animate-down {
+  animation: spin-animation-down 0.175s ease-in-out;
+}
+:host .hidden {
+  opacity: 0;
+}
+
+:host([size=m]) {
+  --wcs-counter-host-padding: 4px;
+  --wcs-counter-host-height: var(--wcs-size-m);
+  --wcs-counter-font-size: 1rem;
+}
+
+:host([size=l]) {
+  --wcs-counter-host-padding: 8px;
+  --wcs-counter-host-height: var(--wcs-size-l);
+  --wcs-counter-font-size: 1.0625rem;
+}